@c8y/ngx-components 1021.13.3 → 1021.21.0

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

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, inject, InjectionToken, EventEmitter, Input, Output, forwardRef, Optional, Inject, ViewChild, HostBinding, HostListener, TemplateRef, NgModule } from '@angular/core';
-import * as i3 from '@c8y/ngx-components';
-import { gettext, Permissions, ContextRouteService, ViewContext, Status, NavigatorNode, getActivatedRoute, NEW_DASHBOARD_QUERY_PARAM, memoize, DashboardChildChange, CopyDashboardDisabledReason, WidgetsDashboardComponent, hookRoute, CoreModule, hookTab, HookProviderTypes, hookActionBar, hookNavigator, BaseColumn, getBasicInputArrayFormFieldConfig, DataGridService, alertOnError, BuiltInActionType, ModalModule } from '@c8y/ngx-components';
+import * as i2 from '@c8y/ngx-components';
+import { gettext, Permissions, ContextRouteService, ViewContext, Status, NavigatorNode, getActivatedRoute, NEW_DASHBOARD_QUERY_PARAM, SupportedApps, memoize, DashboardChildChange, CopyDashboardDisabledReason, WidgetsDashboardComponent, hookRoute, CoreModule, hookTab, HookProviderTypes, hookActionBar, hookNavigator, BaseColumn, getBasicInputArrayFormFieldConfig, DataGridService, alertOnError, BuiltInActionType, ModalModule } from '@c8y/ngx-components';
 import * as i1 from '@angular/router';
 import { of, Subject, from, combineLatest, iif, timer } from 'rxjs';
-import * as i2 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i4 from 'ngx-bootstrap/popover';
+import * as i4$1 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { __decorate, __metadata } from 'tslib';
 import * as i2$1 from '@ngx-translate/core';
@@ -77,13 +77,13 @@ class AddDashboardComponent {
         tempNewDashboardTab.priority = Infinity;
         this.tabsService.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddDashboardComponent, deps: [{ token: i3.TabsService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AddDashboardComponent, 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: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: AddDashboardComponent, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AddDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: '[c8y-add-dashboard]', host: { class: 'd-flex a-i-stretch sticky-right' }, 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: i3.TabsService }, { type: i1.Router }] });
+        }], ctorParameters: () => [{ type: i2.TabsService }, { type: i1.Router }] });
 
 class AddDashboardFactory {
     constructor() {
@@ -325,7 +325,7 @@ class AppearanceSettingsComponent {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppearanceSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppearanceSettingsComponent, 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" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-md-{{ 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-md-{{ 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.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: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppearanceSettingsComponent, 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" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-md-{{ 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-md-{{ 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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.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: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppearanceSettingsComponent, decorators: [{
             type: Component,
@@ -403,7 +403,7 @@ class ContextDashboardService {
         this._formDisabled = value;
         this.formDisabledSubject.next(value);
     }
-    constructor(inventory, tabs, modal, translateService, router, navigator, permissions, alert, dynamicComponent, groupService) {
+    constructor(inventory, tabs, modal, translateService, router, navigator, permissions, alert, dynamicComponent, groupService, optionsService) {
         this.inventory = inventory;
         this.tabs = tabs;
         this.modal = modal;
@@ -414,6 +414,7 @@ class ContextDashboardService {
         this.alert = alert;
         this.dynamicComponent = dynamicComponent;
         this.groupService = groupService;
+        this.optionsService = optionsService;
         this.REPORT_PARTIAL_NAME = 'report_';
         this.VERSION_HISTORY_SIZE_LIMIT = 10;
         this.INVENTORY_ROLES = [
@@ -428,6 +429,7 @@ class ContextDashboardService {
         this.CACHE_TIMEOUT = 500;
         this._formDisabled = true;
         this.formDisabledSubject = new Subject();
+        this.HIDE_TYPE_DASHBOARD_FOR_ASSETS = 'hideTypeDashboardForAssets';
         this.formDisabled$ = this.formDisabledSubject.asObservable();
         this.queriesUtil = new QueriesUtil();
     }
@@ -522,7 +524,7 @@ class ContextDashboardService {
                 return of(false);
             }));
         }
-        this.dashboardTabs$ = this.getTabs$(route.data.contextData, types);
+        this.dashboardTabs$ = this.getTabs$(route.data.contextData, types, route?.parent?.data);
         return this.dashboardTabs$;
     }
     getNamedDashboardOrCreate(name, defaultWidgets, context) {
@@ -677,18 +679,43 @@ class ContextDashboardService {
      * Then, case from sensor app is checked- dashboard created with sensor app has deviceType set to true but
      * type fragment is missing- we do not support this combination.
      * @param mo Dashboard managed object
-     * @param deviceTypeValue Value of device type
+     * @param context {ContextData} Current context
      * @returns True if dashboard can be set to type dashboard, false if it is forbidden.
      */
-    shouldAllowToSetDashboardType(mo, deviceTypeValue) {
-        if (!deviceTypeValue || !this.permissions.hasAnyRole(this.INVENTORY_ROLES)) {
-            return false;
-        }
-        const typeFragment = this.createFragmentKey(ContextDashboardType.Type, deviceTypeValue);
-        if (mo.c8y_Dashboard && mo.c8y_Dashboard.deviceType && !mo[typeFragment]) {
-            return false;
-        }
-        return true;
+    shouldAllowToSetDashboardType(mo, context) {
+        // disallow if dashboard managed object or context is missing or context is not device/asset/group
+        if (!mo ||
+            !context?.contextData ||
+            (context.context !== ViewContext.Device && context.context !== ViewContext.Group)) {
+            return 'disallow';
+        }
+        // if context is asset/group and type dashboard feature is hidden for assets/groups or asset/group has no typ, return disallow
+        const typeDashboardHiddenForAssets = this.optionsService.get(this.HIDE_TYPE_DASHBOARD_FOR_ASSETS, true);
+        if (context.context === ViewContext.Group &&
+            (typeDashboardHiddenForAssets || !context.contextData.type)) {
+            return 'disallow';
+        }
+        // if user has no permission to change dashboard, return disallow
+        if (!this.permissions.hasAnyRole(this.INVENTORY_ROLES)) {
+            return 'disallow';
+        }
+        // case from sensor app is checked- dashboard created with sensor app has deviceType set to true but
+        // type fragment is missing- we do not support this combination.
+        const typeFragment = this.createFragmentKey(ContextDashboardType.Type, context?.contextData?.type);
+        if (mo?.c8y_Dashboard &&
+            mo?.c8y_Dashboard.deviceType &&
+            context?.contextData?.type &&
+            !mo[typeFragment]) {
+            return 'disallow';
+        }
+        // if view context is Device and contextData of this device has no type yet but type dashboard can be set when type is filled,
+        // return allow_if_type_filled
+        if (!context?.contextData?.type &&
+            context.context === ViewContext.Device &&
+            this.permissions.hasAnyRole(this.INVENTORY_ROLES)) {
+            return 'allow_if_type_filled';
+        }
+        return 'allow';
     }
     createReport(reportCfg) {
         const report = {};
@@ -908,9 +935,9 @@ class ContextDashboardService {
         }
         return obj;
     }
-    getTabs$(mo, dashboardType) {
+    getTabs$(mo, dashboardType, context) {
         const dashboards = this.getContextDashboards(mo, dashboardType);
-        return this.getContextDashboards$(dashboards).pipe(mergeMap(dashboard => this.verifyDashboardAvailability$(dashboard)), mergeMap(([dashboard]) => this.removeDashboardMoProperty(dashboard)), tap(dashboard => this.cacheDashboard(dashboard)), map(dashboard => this.createDashboardTab(dashboard)), toArray());
+        return this.getContextDashboards$(dashboards).pipe(mergeMap(dashboard => this.verifyDashboardAvailability$(dashboard)), mergeMap(([dashboard]) => this.removeDashboardMoProperty(dashboard)), tap(dashboard => this.cacheDashboard(dashboard)), map(dashboard => this.createDashboardTab(dashboard, context)), toArray());
     }
     verifyDashboardAvailability$(dashboard) {
         const globalRolesIds = dashboard?.c8y_Dashboard?.globalRolesIds;
@@ -950,7 +977,7 @@ class ContextDashboardService {
     cacheDashboard(dashboard) {
         this.cache.set(dashboard.id, dashboard);
     }
-    createDashboardTab(dashboard) {
+    createDashboardTab(dashboard, context) {
         const { c8y_Dashboard: _dashboard, id } = dashboard;
         return {
             icon: _dashboard.icon,
@@ -958,8 +985,7 @@ class ContextDashboardService {
             label: _dashboard.name,
             priority: _dashboard.priority,
             hide: this.isReport(dashboard),
-            badge: _dashboard.deviceType &&
-                this.shouldAllowToSetDashboardType(dashboard, _dashboard.deviceTypeValue)
+            badge: _dashboard.deviceType && this.shouldAllowToSetDashboardType(dashboard, context)
                 ? gettext('Dashboard template')
                 : null,
             tooltipText: _dashboard.description || gettext('Dashboard template')
@@ -997,7 +1023,7 @@ class ContextDashboardService {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextDashboardService, deps: [{ token: i1$1.InventoryService }, { token: i3.TabsService }, { token: i3.ModalService }, { token: i2$1.TranslateService }, { token: i1.Router }, { token: i3.NavigatorService }, { token: i3.Permissions }, { token: i3.AlertService }, { token: i3.DynamicComponentService }, { token: i3.GroupService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextDashboardService, deps: [{ token: i1$1.InventoryService }, { token: i2.TabsService }, { token: i2.ModalService }, { token: i2$1.TranslateService }, { token: i1.Router }, { token: i2.NavigatorService }, { token: i2.Permissions }, { token: i2.AlertService }, { token: i2.DynamicComponentService }, { token: i2.GroupService }, { token: i2.OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextDashboardService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextDashboardService, decorators: [{
@@ -1005,7 +1031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i3.TabsService }, { type: i3.ModalService }, { type: i2$1.TranslateService }, { type: i1.Router }, { type: i3.NavigatorService }, { type: i3.Permissions }, { type: i3.AlertService }, { type: i3.DynamicComponentService }, { type: i3.GroupService }] });
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.TabsService }, { type: i2.ModalService }, { type: i2$1.TranslateService }, { type: i1.Router }, { type: i2.NavigatorService }, { type: i2.Permissions }, { type: i2.AlertService }, { type: i2.DynamicComponentService }, { type: i2.GroupService }, { type: i2.OptionsService }] });
 
 class DashboardDetailService {
     constructor(fb, translateService) {
@@ -1023,12 +1049,12 @@ class DashboardDetailService {
      * Creates dashboard details form divided into two groups- general settings and appearance settings.
      * @param dashboard Context dashboard object
      * @param isReport True if its report dashboard
-     * @param deviceTypeValue Value used for typed dashboard
+     * @param allowTypeDashboard Allow to make dashboard type dashboard
      * @returns Dashboard details form
      */
-    initForm(dashboard, isReport, deviceTypeValue) {
+    initForm(dashboard, isReport, allowTypeDashboard) {
         return this.fb.group({
-            generalSettingsForm: this.initGeneralSettingsForm(dashboard, isReport, deviceTypeValue),
+            generalSettingsForm: this.initGeneralSettingsForm(dashboard, isReport, allowTypeDashboard),
             appearanceSettingsForm: this.initAppearanceSettingsForm(dashboard)
         });
     }
@@ -1039,7 +1065,7 @@ class DashboardDetailService {
      * @param deviceTypeValue Value used for typed dashboard
      * @returns Dashboard general settings form
      */
-    initGeneralSettingsForm(dashboard, isReport, deviceTypeValue) {
+    initGeneralSettingsForm(dashboard, isReport, allowTypeDashboard) {
         const globalRolesIdsValue = !dashboard?.globalRolesIds
             ? null
             : Array.isArray(dashboard.globalRolesIds)
@@ -1061,7 +1087,14 @@ class DashboardDetailService {
             description: [dashboard?.description || null, [Validators.maxLength(1_000)]],
             globalRolesIds: [globalRolesIdsValue],
             c8y_IsNavigatorNode: [!!dashboard?.c8y_IsNavigatorNode],
-            ...(!!deviceTypeValue && { deviceType: dashboard?.deviceType ?? false })
+            ...(allowTypeDashboard !== 'disallow' && {
+                deviceType: [
+                    {
+                        value: dashboard?.deviceType ?? false,
+                        disabled: allowTypeDashboard === 'allow_if_type_filled'
+                    }
+                ]
+            })
         });
     }
     /**
@@ -1080,7 +1113,7 @@ class DashboardDetailService {
             widgetClasses: [dashboard?.widgetClasses || { [this.styling.headerClass]: true }]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardDetailService, deps: [{ token: i3$1.FormBuilder }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardDetailService, deps: [{ token: i3.FormBuilder }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardDetailService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardDetailService, decorators: [{
@@ -1088,7 +1121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i3$1.FormBuilder }, { type: i2$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i3.FormBuilder }, { type: i2$1.TranslateService }] });
 
 class DashboardAvailabilityComponent {
     /**
@@ -1167,13 +1200,13 @@ class DashboardAvailabilityComponent {
             .map(globalRoleId => this.globalRolesItems.find(gR => gR.id === globalRoleId))
             .filter(Boolean);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardAvailabilityComponent, deps: [{ token: i1$1.UserGroupService }, { token: i3.GainsightService }, { token: i3.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: { globalRolesIds: "globalRolesIds" }, outputs: { globalRolesIdsChange: "globalRolesIdsChange" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Availability`of dashboard based on permissions`' | translate }}</legend>\n  <c8y-form-group>\n    <label for=\"availability\">\n      <span\n        class=\"m-r-4\"\n        id=\"availability\"\n      >\n        {{ 'Global roles' | translate }}\n      </span>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Select the global roles for which the dashboard will be available' | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n    <c8y-select-legacy\n      *ngIf=\"!selectHidden\"\n      [items]=\"globalRolesItems\"\n      [selected]=\"globalRolesItemsSelected\"\n      (onChange)=\"onSelected($event)\"\n    ></c8y-select-legacy>\n    <p\n      class=\"form-control-static\"\n      *ngIf=\"selectHidden\"\n    >\n      {{ \"You don't have permission to change global roles.\" | translate }}\n    </p>\n  </c8y-form-group>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.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: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardAvailabilityComponent, deps: [{ token: i1$1.UserGroupService }, { token: i2.GainsightService }, { token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: { globalRolesIds: "globalRolesIds" }, outputs: { globalRolesIdsChange: "globalRolesIdsChange" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Availability`of dashboard based on permissions`' | translate }}</legend>\n  <c8y-form-group>\n    <label for=\"availability\">\n      <span\n        class=\"m-r-4\"\n        id=\"availability\"\n      >\n        {{ 'Global roles' | translate }}\n      </span>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Select the global roles for which the dashboard will be available' | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n    <c8y-select-legacy\n      *ngIf=\"!selectHidden\"\n      [items]=\"globalRolesItems\"\n      [selected]=\"globalRolesItemsSelected\"\n      (onChange)=\"onSelected($event)\"\n    ></c8y-select-legacy>\n    <p\n      class=\"form-control-static\"\n      *ngIf=\"selectHidden\"\n    >\n      {{ \"You don't have permission to change global roles.\" | translate }}\n    </p>\n  </c8y-form-group>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4$1.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: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardAvailabilityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-availability', template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Availability`of dashboard based on permissions`' | translate }}</legend>\n  <c8y-form-group>\n    <label for=\"availability\">\n      <span\n        class=\"m-r-4\"\n        id=\"availability\"\n      >\n        {{ 'Global roles' | translate }}\n      </span>\n      <button\n        class=\"btn-help btn-help--sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{\n          'Select the global roles for which the dashboard will be available' | translate\n        }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        container=\"body\"\n        type=\"button\"\n      ></button>\n    </label>\n    <c8y-select-legacy\n      *ngIf=\"!selectHidden\"\n      [items]=\"globalRolesItems\"\n      [selected]=\"globalRolesItemsSelected\"\n      (onChange)=\"onSelected($event)\"\n    ></c8y-select-legacy>\n    <p\n      class=\"form-control-static\"\n      *ngIf=\"selectHidden\"\n    >\n      {{ \"You don't have permission to change global roles.\" | translate }}\n    </p>\n  </c8y-form-group>\n</fieldset>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.UserGroupService }, { type: i3.GainsightService }, { type: i3.Permissions }], propDecorators: { globalRolesIds: [{
+        }], ctorParameters: () => [{ type: i1$1.UserGroupService }, { type: i2.GainsightService }, { type: i2.Permissions }], propDecorators: { globalRolesIds: [{
                 type: Input
             }], globalRolesIdsChange: [{
                 type: Output
@@ -1200,13 +1233,13 @@ class TypeDashboardInfoComponent {
             this.asyncRenderFail?.();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardInfoComponent, deps: [{ token: i1$1.InventoryService }, { token: i3.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", context: "context", asyncRenderSuccess: "asyncRenderSuccess", asyncRenderFail: "asyncRenderFail" }, ngImport: i0, template: "<ul class=\"list-unstyled small animated fadeIn\">\n  <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Target asset model' | translate }}</label>\n    <span class=\"m-l-auto\">\n      <span class=\"label label-info\">\n        {{ displayDeviceTypeValue || context.c8y_Dashboard.deviceTypeValue }}\n      </span>\n    </span>\n  </li>\n  <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Dashboard instances' | translate }}</label>\n    <span class=\"m-l-auto\">{{ deviceTypeInstancesCount }}</span>\n  </li>\n  <ng-container *ngIf=\"context?.c8y_Dashboard\">\n    <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n      <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.creationTime | c8yDate }} {{ 'by`user`' | translate }} {{ context.owner }}\n      </span>\n    </li>\n    <li\n      class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n      *ngIf=\"context?.c8y_DashboardHistory?.length\"\n    >\n      <label class=\"small m-b-0 m-r-8\">{{ 'Last modified' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.c8y_DashboardHistory[0].created | c8yDate }} {{ 'by`user`' | translate }}\n        {{ context.c8y_DashboardHistory[0].author }}\n      </span>\n    </li>\n  </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardInfoComponent, deps: [{ token: i1$1.InventoryService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", context: "context", asyncRenderSuccess: "asyncRenderSuccess", asyncRenderFail: "asyncRenderFail" }, ngImport: i0, template: "<ul class=\"list-unstyled small animated fadeIn\">\n  <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Target asset model' | translate }}</label>\n    <span class=\"m-l-auto\">\n      <span class=\"label label-info\">\n        {{ displayDeviceTypeValue || context.c8y_Dashboard.deviceTypeValue }}\n      </span>\n    </span>\n  </li>\n  <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Dashboard instances' | translate }}</label>\n    <span class=\"m-l-auto\">{{ deviceTypeInstancesCount }}</span>\n  </li>\n  <ng-container *ngIf=\"context?.c8y_Dashboard\">\n    <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n      <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.creationTime | c8yDate }} {{ 'by`user`' | translate }} {{ context.owner }}\n      </span>\n    </li>\n    <li\n      class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n      *ngIf=\"context?.c8y_DashboardHistory?.length\"\n    >\n      <label class=\"small m-b-0 m-r-8\">{{ 'Last modified' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.c8y_DashboardHistory[0].created | c8yDate }} {{ 'by`user`' | translate }}\n        {{ context.c8y_DashboardHistory[0].author }}\n      </span>\n    </li>\n  </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-type-dashboard-info', template: "<ul class=\"list-unstyled small animated fadeIn\">\n  <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Target asset model' | translate }}</label>\n    <span class=\"m-l-auto\">\n      <span class=\"label label-info\">\n        {{ displayDeviceTypeValue || context.c8y_Dashboard.deviceTypeValue }}\n      </span>\n    </span>\n  </li>\n  <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Dashboard instances' | translate }}</label>\n    <span class=\"m-l-auto\">{{ deviceTypeInstancesCount }}</span>\n  </li>\n  <ng-container *ngIf=\"context?.c8y_Dashboard\">\n    <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n      <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.creationTime | c8yDate }} {{ 'by`user`' | translate }} {{ context.owner }}\n      </span>\n    </li>\n    <li\n      class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n      *ngIf=\"context?.c8y_DashboardHistory?.length\"\n    >\n      <label class=\"small m-b-0 m-r-8\">{{ 'Last modified' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.c8y_DashboardHistory[0].created | c8yDate }} {{ 'by`user`' | translate }}\n        {{ context.c8y_DashboardHistory[0].author }}\n      </span>\n    </li>\n  </ng-container>\n</ul>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i3.AlertService }], propDecorators: { deviceTypeValue: [{
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.AlertService }], propDecorators: { deviceTypeValue: [{
                 type: Input
             }], displayDeviceTypeValue: [{
                 type: Input
@@ -1219,16 +1252,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class TypedDashboardSettingsComponent {
-    constructor(inventory) {
+    constructor(inventory, interAppService, route) {
         this.inventory = inventory;
+        this.interAppService = interAppService;
+        this.route = route;
         this.touched = false;
         this.disabled = false;
         this.onDuplicateWithoutType = new EventEmitter();
+        this.deviceManagementAppKey = SupportedApps.devicemanagement;
+        this.deviceManagementLinkTitle = gettext('Device Info page in {{ deviceManagementAppName }}');
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = _ => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
     }
+    async ngOnInit() {
+        this.userDeviceManagementApp$ = this.interAppService.getApp$(this.deviceManagementAppKey);
+        this.context = this.route.parent.snapshot.data.contextData;
+        this.showSourceNavigationLink$ = this.interAppService.shouldShowAppLink$(this.deviceManagementAppKey);
+    }
+    async goToDeviceView() {
+        await this.interAppService.navigateToApp(this.deviceManagementAppKey, `#/device/${this.context.id}/device-info`);
+    }
     writeValue(value) {
         this.value = value;
         this.updateTexts();
@@ -1265,6 +1310,11 @@ class TypedDashboardSettingsComponent {
         this.typedDashboardStatus = this.value
             ? gettext('Enabled`typed dashboard`')
             : gettext('Disabled`typed dashboard`');
+        if (this.allowTypeDashboard === 'allow_if_type_filled') {
+            this.infoText = gettext(`<p class="p-b-8">Enabling this option uses the layout and configuration of this dashboard to create dashboard instances for all devices based on the device type.</p>
+             <p class="p-b-16">The current device doesn't have a device type assigned to it. Assign a device type to the device via the "Asset properties" widget in the <strong>Info</strong> tab of the device.</p>`);
+            return;
+        }
         if (this.value) {
             if (this.isDevice) {
                 this.infoText = gettext(`<p class="p-b-8">
@@ -1298,14 +1348,14 @@ class TypedDashboardSettingsComponent {
         });
         this.deviceTypeInstancesCount = count.data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypedDashboardSettingsComponent, deps: [{ token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypedDashboardSettingsComponent, selector: "c8y-typed-dashboard-settings", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", formInvalid: "formInvalid", mo: "mo", isDevice: "isDevice" }, outputs: { onDuplicateWithoutType: "onDuplicateWithoutType" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypedDashboardSettingsComponent, deps: [{ token: i1$1.InventoryService }, { token: i2.InterAppService }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypedDashboardSettingsComponent, selector: "c8y-typed-dashboard-settings", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", formInvalid: "formInvalid", mo: "mo", isDevice: "isDevice", allowTypeDashboard: "allowTypeDashboard" }, outputs: { onDuplicateWithoutType: "onDuplicateWithoutType" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TypedDashboardSettingsComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Dashboard template' | translate }}</legend>\n  <div class=\"d-flex p-b-16 gap-16\">\n    <label class=\"c8y-switch flex-no-shrink\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n      />\n      <span></span>\n      <span>{{ typedDashboardStatus | translate }}</span>\n    </label>\n    <div\n      class=\"flex-grow\"\n      [innerHtml]=\"infoText | translate: { displayDeviceTypeValue: displayDeviceTypeValue }\"\n    ></div>\n  </div>\n\n  <c8y-type-dashboard-info\n    [context]=\"mo\"\n    [deviceTypeValue]=\"deviceTypeValue\"\n    [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n  ></c8y-type-dashboard-info>\n\n  <div\n    class=\"p-t-8 p-b-16\"\n    *ngIf=\"mo?.c8y_Dashboard && value\"\n  >\n    <button\n      class=\"btn btn-default btn-sm\"\n      type=\"button\"\n      (click)=\"onDuplicateWithoutType.emit()\"\n      [disabled]=\"formInvalid\"\n    >\n      {{ 'Duplicate as regular dashboard' | translate }}\n    </button>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "context", "asyncRenderSuccess", "asyncRenderFail"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Dashboard template' | translate }}</legend>\n  <div class=\"d-flex p-b-16 gap-16\">\n    <label class=\"c8y-switch flex-no-shrink\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n      />\n      <span></span>\n      <span>{{ typedDashboardStatus | translate }}</span>\n    </label>\n    <div class=\"flex-grow d-flex d-col\">\n      <div\n        class=\"flex-grow\"\n        [innerHtml]=\"infoText | translate: { displayDeviceTypeValue: displayDeviceTypeValue }\"\n      ></div>\n      <button\n        class=\"btn-link p-0 m-r-auto\"\n        type=\"button\"\n        *ngIf=\"allowTypeDashboard === 'allow_if_type_filled' && showSourceNavigationLink$ | async\"\n        (click)=\"goToDeviceView()\"\n      >\n        {{\n          deviceManagementLinkTitle\n            | translate\n              : {\n                  deviceManagementAppName:\n                    userDeviceManagementApp$ | async | humanizeAppName | async\n                }\n        }}\n        <i c8yIcon=\"external-link\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-type-dashboard-info\n    *ngIf=\"allowTypeDashboard === 'allow'\"\n    [context]=\"mo\"\n    [deviceTypeValue]=\"deviceTypeValue\"\n    [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n  ></c8y-type-dashboard-info>\n\n  <div\n    class=\"p-t-8 p-b-16\"\n    *ngIf=\"mo?.c8y_Dashboard && value\"\n  >\n    <button\n      class=\"btn btn-default btn-sm\"\n      type=\"button\"\n      (click)=\"onDuplicateWithoutType.emit()\"\n      [disabled]=\"formInvalid\"\n    >\n      {{ 'Duplicate as regular dashboard' | translate }}\n    </button>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "context", "asyncRenderSuccess", "asyncRenderFail"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypedDashboardSettingsComponent, decorators: [{
             type: Component,
@@ -1315,8 +1365,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => TypedDashboardSettingsComponent),
                             multi: true
                         }
-                    ], template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Dashboard template' | translate }}</legend>\n  <div class=\"d-flex p-b-16 gap-16\">\n    <label class=\"c8y-switch flex-no-shrink\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n      />\n      <span></span>\n      <span>{{ typedDashboardStatus | translate }}</span>\n    </label>\n    <div\n      class=\"flex-grow\"\n      [innerHtml]=\"infoText | translate: { displayDeviceTypeValue: displayDeviceTypeValue }\"\n    ></div>\n  </div>\n\n  <c8y-type-dashboard-info\n    [context]=\"mo\"\n    [deviceTypeValue]=\"deviceTypeValue\"\n    [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n  ></c8y-type-dashboard-info>\n\n  <div\n    class=\"p-t-8 p-b-16\"\n    *ngIf=\"mo?.c8y_Dashboard && value\"\n  >\n    <button\n      class=\"btn btn-default btn-sm\"\n      type=\"button\"\n      (click)=\"onDuplicateWithoutType.emit()\"\n      [disabled]=\"formInvalid\"\n    >\n      {{ 'Duplicate as regular dashboard' | translate }}\n    </button>\n  </div>\n</fieldset>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }], propDecorators: { deviceTypeValue: [{
+                    ], template: "<fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n  <legend>{{ 'Dashboard template' | translate }}</legend>\n  <div class=\"d-flex p-b-16 gap-16\">\n    <label class=\"c8y-switch flex-no-shrink\">\n      <input\n        type=\"checkbox\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        (click)=\"toggle()\"\n      />\n      <span></span>\n      <span>{{ typedDashboardStatus | translate }}</span>\n    </label>\n    <div class=\"flex-grow d-flex d-col\">\n      <div\n        class=\"flex-grow\"\n        [innerHtml]=\"infoText | translate: { displayDeviceTypeValue: displayDeviceTypeValue }\"\n      ></div>\n      <button\n        class=\"btn-link p-0 m-r-auto\"\n        type=\"button\"\n        *ngIf=\"allowTypeDashboard === 'allow_if_type_filled' && showSourceNavigationLink$ | async\"\n        (click)=\"goToDeviceView()\"\n      >\n        {{\n          deviceManagementLinkTitle\n            | translate\n              : {\n                  deviceManagementAppName:\n                    userDeviceManagementApp$ | async | humanizeAppName | async\n                }\n        }}\n        <i c8yIcon=\"external-link\"></i>\n      </button>\n    </div>\n  </div>\n\n  <c8y-type-dashboard-info\n    *ngIf=\"allowTypeDashboard === 'allow'\"\n    [context]=\"mo\"\n    [deviceTypeValue]=\"deviceTypeValue\"\n    [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n  ></c8y-type-dashboard-info>\n\n  <div\n    class=\"p-t-8 p-b-16\"\n    *ngIf=\"mo?.c8y_Dashboard && value\"\n  >\n    <button\n      class=\"btn btn-default btn-sm\"\n      type=\"button\"\n      (click)=\"onDuplicateWithoutType.emit()\"\n      [disabled]=\"formInvalid\"\n    >\n      {{ 'Duplicate as regular dashboard' | translate }}\n    </button>\n  </div>\n</fieldset>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.InterAppService }, { type: i1.ActivatedRoute }], propDecorators: { deviceTypeValue: [{
                 type: Input
             }], displayDeviceTypeValue: [{
                 type: Input
@@ -1326,6 +1376,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], isDevice: [{
                 type: Input
+            }], allowTypeDashboard: [{
+                type: Input
             }], onDuplicateWithoutType: [{
                 type: Output
             }] } });
@@ -1345,13 +1397,13 @@ class DashboardGeneralSettingsComponent {
         this.generalSettingsForm.patchValue({ globalRolesIds: this.globalRolesIds });
         this.generalSettingsForm.markAsDirty();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardGeneralSettingsComponent, deps: [{ token: i3.NavigatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardGeneralSettingsComponent, selector: "c8y-dashboard-general-settings", inputs: { isReport: "isReport", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability", dashboard: "dashboard", generalSettingsForm: "generalSettingsForm", deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", allowTypeDashboard: "allowTypeDashboard", isDevice: "isDevice", mo: "mo" }, outputs: { onDuplicateWithoutType: "onDuplicateWithoutType" }, ngImport: i0, template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  <div\n    class=\"col-xs-12 p-b-24\"\n    [ngClass]=\"{ 'col-md-6': !isReport, 'col-md-8': isReport }\"\n    *ngIf=\"!isNamedDashboard || isReport\"\n  >\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg m-b-24\">\n      <legend>{{ 'Navigation' | translate }}</legend>\n      <div class=\"d-flex gap-16\">\n        <c8y-form-group>\n          <label>{{ 'Icon' | translate }}</label>\n          <c8y-icon-selector-wrapper\n            [iconSize]=\"24\"\n            name=\"icon\"\n            formControlName=\"icon\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n        <c8y-form-group class=\"flex-grow\">\n          <label for=\"menuLabel\">\n            {{ 'Menu label' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Menu label to display in submenu when dashboard is attached' | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"menuLabel\"\n            placeholder=\"{{ namePlaceholder | translate }}\"\n            name=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-form-group>\n        <label for=\"description\">{{ 'Description ' | translate }}</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          name=\"description\"\n          c8y-textarea-autoresize\n          formControlName=\"description\"\n        ></textarea>\n      </c8y-form-group>\n\n      <div class=\"row\">\n        <div\n          class=\"col-lg-7 col-xs-12\"\n          *ngIf=\"!isReport\"\n        >\n          <c8y-form-group>\n            <label for=\"position\">\n              {{ 'Position in tabs' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ positionInTabsExampleLabel | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"positionNav\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport\"\n        >\n          <label translate>Navigator menu item</label>\n          <c8y-form-group>\n            <label\n              class=\"c8y-switch\"\n              title=\"{{ 'Show in navigator' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                formControlName=\"c8y_IsNavigatorNode\"\n              />\n              <span></span>\n              <span>{{ 'Show in navigator' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport && generalSettingsForm.value.c8y_IsNavigatorNode\"\n        >\n          <c8y-form-group>\n            <label\n              class=\"d-block\"\n              for=\"position\"\n            >\n              {{ 'Position in navigator' | translate }}\n              <ng-template #positionInNavPop>\n                <span>\n                  {{ positionInNavigationExampleLabel | translate }}&nbsp;\n                  {{ 'Existing nodes:' | translate }}\n                </span>\n                <ul class=\"list-unstyled m-t-16 m-b-0\">\n                  <li\n                    class=\"p-t-4 p-b-4\"\n                    title=\"{{ node.label | translate }}\"\n                    *ngFor=\"let node of navigatorNodes$ | async\"\n                  >\n                    <div class=\"icon-flex fit-w\">\n                      <i [c8yIcon]=\"node.icon\"></i>\n                      <span class=\"text-truncate m-l-4 m-r-16 flex-grow\">\n                        {{ node.label | translate }}\n                      </span>\n                      <span class=\"text-medium flex-no-shrink\">{{ node.priority }}</span>\n                    </div>\n                  </li>\n                </ul>\n              </ng-template>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"positionInNavPop\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.controls['deviceType'] &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    <c8y-typed-dashboard-settings\n      *ngIf=\"allowTypeDashboard && deviceTypeValue && generalSettingsForm.controls['deviceType']\"\n      formControlName=\"deviceType\"\n      [deviceTypeValue]=\"deviceTypeValue\"\n      [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n      [formInvalid]=\"generalSettingsForm.invalid\"\n      [mo]=\"mo\"\n      [isDevice]=\"isDevice\"\n      (onDuplicateWithoutType)=\"onDuplicateWithoutType.emit()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.controls['deviceType']) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.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: i5.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: ["globalRolesIds"], outputs: ["globalRolesIdsChange"] }, { kind: "component", type: TypedDashboardSettingsComponent, selector: "c8y-typed-dashboard-settings", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "formInvalid", "mo", "isDevice"], outputs: ["onDuplicateWithoutType"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardGeneralSettingsComponent, deps: [{ token: i2.NavigatorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardGeneralSettingsComponent, selector: "c8y-dashboard-general-settings", inputs: { isReport: "isReport", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability", dashboard: "dashboard", generalSettingsForm: "generalSettingsForm", deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", allowTypeDashboard: "allowTypeDashboard", isDevice: "isDevice", mo: "mo" }, outputs: { onDuplicateWithoutType: "onDuplicateWithoutType" }, ngImport: i0, template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  <div\n    class=\"col-xs-12 p-b-24\"\n    [ngClass]=\"{ 'col-md-6': !isReport, 'col-md-8': isReport }\"\n    *ngIf=\"!isNamedDashboard || isReport\"\n  >\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg m-b-24\">\n      <legend>{{ 'Navigation' | translate }}</legend>\n      <div class=\"d-flex gap-16\">\n        <c8y-form-group>\n          <label>{{ 'Icon' | translate }}</label>\n          <c8y-icon-selector-wrapper\n            [iconSize]=\"24\"\n            name=\"icon\"\n            formControlName=\"icon\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n        <c8y-form-group class=\"flex-grow\">\n          <label for=\"menuLabel\">\n            {{ 'Menu label' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Menu label to display in submenu when dashboard is attached' | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"menuLabel\"\n            placeholder=\"{{ namePlaceholder | translate }}\"\n            name=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-form-group>\n        <label for=\"description\">{{ 'Description ' | translate }}</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          name=\"description\"\n          c8y-textarea-autoresize\n          formControlName=\"description\"\n        ></textarea>\n      </c8y-form-group>\n\n      <div class=\"row\">\n        <div\n          class=\"col-lg-7 col-xs-12\"\n          *ngIf=\"!isReport\"\n        >\n          <c8y-form-group>\n            <label for=\"position\">\n              {{ 'Position in tabs' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ positionInTabsExampleLabel | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"positionNav\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport\"\n        >\n          <label translate>Navigator menu item</label>\n          <c8y-form-group>\n            <label\n              class=\"c8y-switch\"\n              title=\"{{ 'Show in navigator' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                formControlName=\"c8y_IsNavigatorNode\"\n              />\n              <span></span>\n              <span>{{ 'Show in navigator' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport && generalSettingsForm.value.c8y_IsNavigatorNode\"\n        >\n          <c8y-form-group>\n            <label\n              class=\"d-block\"\n              for=\"position\"\n            >\n              {{ 'Position in navigator' | translate }}\n              <ng-template #positionInNavPop>\n                <span>\n                  {{ positionInNavigationExampleLabel | translate }}&nbsp;\n                  {{ 'Existing nodes:' | translate }}\n                </span>\n                <ul class=\"list-unstyled m-t-16 m-b-0\">\n                  <li\n                    class=\"p-t-4 p-b-4\"\n                    title=\"{{ node.label | translate }}\"\n                    *ngFor=\"let node of navigatorNodes$ | async\"\n                  >\n                    <div class=\"icon-flex fit-w\">\n                      <i [c8yIcon]=\"node.icon\"></i>\n                      <span class=\"text-truncate m-l-4 m-r-16 flex-grow\">\n                        {{ node.label | translate }}\n                      </span>\n                      <span class=\"text-medium flex-no-shrink\">{{ node.priority }}</span>\n                    </div>\n                  </li>\n                </ul>\n              </ng-template>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"positionInNavPop\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.controls['deviceType'] &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    <c8y-typed-dashboard-settings\n      *ngIf=\"allowTypeDashboard !== 'disallow'\"\n      formControlName=\"deviceType\"\n      [deviceTypeValue]=\"deviceTypeValue\"\n      [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n      [formInvalid]=\"generalSettingsForm.invalid\"\n      [mo]=\"mo\"\n      [isDevice]=\"isDevice\"\n      [allowTypeDashboard]=\"allowTypeDashboard\"\n      (onDuplicateWithoutType)=\"onDuplicateWithoutType.emit()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.controls['deviceType']) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.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: i5.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: DashboardAvailabilityComponent, selector: "c8y-dashboard-availability", inputs: ["globalRolesIds"], outputs: ["globalRolesIdsChange"] }, { kind: "component", type: TypedDashboardSettingsComponent, selector: "c8y-typed-dashboard-settings", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "formInvalid", "mo", "isDevice", "allowTypeDashboard"], outputs: ["onDuplicateWithoutType"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardGeneralSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-dashboard-general-settings', template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  <div\n    class=\"col-xs-12 p-b-24\"\n    [ngClass]=\"{ 'col-md-6': !isReport, 'col-md-8': isReport }\"\n    *ngIf=\"!isNamedDashboard || isReport\"\n  >\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg m-b-24\">\n      <legend>{{ 'Navigation' | translate }}</legend>\n      <div class=\"d-flex gap-16\">\n        <c8y-form-group>\n          <label>{{ 'Icon' | translate }}</label>\n          <c8y-icon-selector-wrapper\n            [iconSize]=\"24\"\n            name=\"icon\"\n            formControlName=\"icon\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n        <c8y-form-group class=\"flex-grow\">\n          <label for=\"menuLabel\">\n            {{ 'Menu label' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Menu label to display in submenu when dashboard is attached' | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"menuLabel\"\n            placeholder=\"{{ namePlaceholder | translate }}\"\n            name=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-form-group>\n        <label for=\"description\">{{ 'Description ' | translate }}</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          name=\"description\"\n          c8y-textarea-autoresize\n          formControlName=\"description\"\n        ></textarea>\n      </c8y-form-group>\n\n      <div class=\"row\">\n        <div\n          class=\"col-lg-7 col-xs-12\"\n          *ngIf=\"!isReport\"\n        >\n          <c8y-form-group>\n            <label for=\"position\">\n              {{ 'Position in tabs' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ positionInTabsExampleLabel | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"positionNav\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport\"\n        >\n          <label translate>Navigator menu item</label>\n          <c8y-form-group>\n            <label\n              class=\"c8y-switch\"\n              title=\"{{ 'Show in navigator' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                formControlName=\"c8y_IsNavigatorNode\"\n              />\n              <span></span>\n              <span>{{ 'Show in navigator' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport && generalSettingsForm.value.c8y_IsNavigatorNode\"\n        >\n          <c8y-form-group>\n            <label\n              class=\"d-block\"\n              for=\"position\"\n            >\n              {{ 'Position in navigator' | translate }}\n              <ng-template #positionInNavPop>\n                <span>\n                  {{ positionInNavigationExampleLabel | translate }}&nbsp;\n                  {{ 'Existing nodes:' | translate }}\n                </span>\n                <ul class=\"list-unstyled m-t-16 m-b-0\">\n                  <li\n                    class=\"p-t-4 p-b-4\"\n                    title=\"{{ node.label | translate }}\"\n                    *ngFor=\"let node of navigatorNodes$ | async\"\n                  >\n                    <div class=\"icon-flex fit-w\">\n                      <i [c8yIcon]=\"node.icon\"></i>\n                      <span class=\"text-truncate m-l-4 m-r-16 flex-grow\">\n                        {{ node.label | translate }}\n                      </span>\n                      <span class=\"text-medium flex-no-shrink\">{{ node.priority }}</span>\n                    </div>\n                  </li>\n                </ul>\n              </ng-template>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"positionInNavPop\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.controls['deviceType'] &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    <c8y-typed-dashboard-settings\n      *ngIf=\"allowTypeDashboard && deviceTypeValue && generalSettingsForm.controls['deviceType']\"\n      formControlName=\"deviceType\"\n      [deviceTypeValue]=\"deviceTypeValue\"\n      [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n      [formInvalid]=\"generalSettingsForm.invalid\"\n      [mo]=\"mo\"\n      [isDevice]=\"isDevice\"\n      (onDuplicateWithoutType)=\"onDuplicateWithoutType.emit()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.controls['deviceType']) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i3.NavigatorService }], propDecorators: { isReport: [{
+            args: [{ selector: 'c8y-dashboard-general-settings', template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  <div\n    class=\"col-xs-12 p-b-24\"\n    [ngClass]=\"{ 'col-md-6': !isReport, 'col-md-8': isReport }\"\n    *ngIf=\"!isNamedDashboard || isReport\"\n  >\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg m-b-24\">\n      <legend>{{ 'Navigation' | translate }}</legend>\n      <div class=\"d-flex gap-16\">\n        <c8y-form-group>\n          <label>{{ 'Icon' | translate }}</label>\n          <c8y-icon-selector-wrapper\n            [iconSize]=\"24\"\n            name=\"icon\"\n            formControlName=\"icon\"\n          ></c8y-icon-selector-wrapper>\n        </c8y-form-group>\n        <c8y-form-group class=\"flex-grow\">\n          <label for=\"menuLabel\">\n            {{ 'Menu label' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Menu label to display in submenu when dashboard is attached' | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"menuLabel\"\n            placeholder=\"{{ namePlaceholder | translate }}\"\n            name=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n          />\n        </c8y-form-group>\n      </div>\n\n      <c8y-form-group>\n        <label for=\"description\">{{ 'Description ' | translate }}</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          name=\"description\"\n          c8y-textarea-autoresize\n          formControlName=\"description\"\n        ></textarea>\n      </c8y-form-group>\n\n      <div class=\"row\">\n        <div\n          class=\"col-lg-7 col-xs-12\"\n          *ngIf=\"!isReport\"\n        >\n          <c8y-form-group>\n            <label for=\"position\">\n              {{ 'Position in tabs' | translate }}\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{ positionInTabsExampleLabel | translate }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              id=\"positionNav\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport\"\n        >\n          <label translate>Navigator menu item</label>\n          <c8y-form-group>\n            <label\n              class=\"c8y-switch\"\n              title=\"{{ 'Show in navigator' | translate }}\"\n            >\n              <input\n                type=\"checkbox\"\n                formControlName=\"c8y_IsNavigatorNode\"\n              />\n              <span></span>\n              <span>{{ 'Show in navigator' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </div>\n\n        <div\n          class=\"col-xs-6\"\n          *ngIf=\"isReport && generalSettingsForm.value.c8y_IsNavigatorNode\"\n        >\n          <c8y-form-group>\n            <label\n              class=\"d-block\"\n              for=\"position\"\n            >\n              {{ 'Position in navigator' | translate }}\n              <ng-template #positionInNavPop>\n                <span>\n                  {{ positionInNavigationExampleLabel | translate }}&nbsp;\n                  {{ 'Existing nodes:' | translate }}\n                </span>\n                <ul class=\"list-unstyled m-t-16 m-b-0\">\n                  <li\n                    class=\"p-t-4 p-b-4\"\n                    title=\"{{ node.label | translate }}\"\n                    *ngFor=\"let node of navigatorNodes$ | async\"\n                  >\n                    <div class=\"icon-flex fit-w\">\n                      <i [c8yIcon]=\"node.icon\"></i>\n                      <span class=\"text-truncate m-l-4 m-r-16 flex-grow\">\n                        {{ node.label | translate }}\n                      </span>\n                      <span class=\"text-medium flex-no-shrink\">{{ node.priority }}</span>\n                    </div>\n                  </li>\n                </ul>\n              </ng-template>\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                [popover]=\"positionInNavPop\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </label>\n            <input\n              class=\"form-control\"\n              placeholder=\"{{ priorityExampleLabel | translate: { example: '500' } }}\"\n              name=\"priority\"\n              for=\"position\"\n              type=\"number\"\n              formControlName=\"priority\"\n            />\n          </c8y-form-group>\n        </div>\n      </div>\n    </fieldset>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.controls['deviceType'] &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    <c8y-typed-dashboard-settings\n      *ngIf=\"allowTypeDashboard !== 'disallow'\"\n      formControlName=\"deviceType\"\n      [deviceTypeValue]=\"deviceTypeValue\"\n      [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n      [formInvalid]=\"generalSettingsForm.invalid\"\n      [mo]=\"mo\"\n      [isDevice]=\"isDevice\"\n      [allowTypeDashboard]=\"allowTypeDashboard\"\n      (onDuplicateWithoutType)=\"onDuplicateWithoutType.emit()\"\n    ></c8y-typed-dashboard-settings>\n    <c8y-dashboard-availability\n      *ngIf=\"\n        !!isReport === false &&\n        (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.controls['deviceType']) &&\n        !hideAvailability\n      \"\n      [(globalRolesIds)]=\"globalRolesIds\"\n      (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n    ></c8y-dashboard-availability>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i2.NavigatorService }], propDecorators: { isReport: [{
                 type: Input
             }], isNamedDashboard: [{
                 type: Input
@@ -1420,7 +1472,7 @@ class DashboardAppearanceSettingsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardAppearanceSettingsComponent, deps: [{ token: ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardAppearanceSettingsComponent, selector: "c8y-dashboard-appearance-settings", inputs: { dashboard: "dashboard", appearanceSettingsForm: "appearanceSettingsForm" }, outputs: { previewChanged: "previewChanged" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <c8y-appearance-settings\n    [themeClass]=\"styling.themeClass\"\n    [headerClass]=\"styling.headerClass\"\n    (themeClassChange)=\"changeThemeClass($event)\"\n    (headerClassChange)=\"changeHeaderClass($event)\"\n    [dashboardSettings]=\"true\"\n    [columns]=\"3\"\n  >\n    <div class=\"col-md-4\">\n      <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n        <legend translate>Misc</legend>\n        <c8y-form-group>\n          <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n          <div class=\"input-group\">\n            <input\n              class=\"form-control\"\n              id=\"margin\"\n              placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n              name=\"margin\"\n              type=\"number\"\n              formControlName=\"widgetMargin\"\n            />\n            <span class=\"input-group-addon\">px</span>\n          </div>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Widget titles</label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate if possible' | translate }}\"\n          >\n            <input\n              name=\"translateWidgetTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateWidgetTitle\"\n            />\n            <span></span>\n            <span>{{ 'Translate if possible' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </c8y-appearance-settings>\n</div>\n", dependencies: [{ kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardAppearanceSettingsComponent, selector: "c8y-dashboard-appearance-settings", inputs: { dashboard: "dashboard", appearanceSettingsForm: "appearanceSettingsForm" }, outputs: { previewChanged: "previewChanged" }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <c8y-appearance-settings\n    [themeClass]=\"styling.themeClass\"\n    [headerClass]=\"styling.headerClass\"\n    (themeClassChange)=\"changeThemeClass($event)\"\n    (headerClassChange)=\"changeHeaderClass($event)\"\n    [dashboardSettings]=\"true\"\n    [columns]=\"3\"\n  >\n    <div class=\"col-md-4\">\n      <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n        <legend translate>Misc</legend>\n        <c8y-form-group>\n          <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n          <div class=\"input-group\">\n            <input\n              class=\"form-control\"\n              id=\"margin\"\n              placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n              name=\"margin\"\n              type=\"number\"\n              formControlName=\"widgetMargin\"\n            />\n            <span class=\"input-group-addon\">px</span>\n          </div>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Widget titles</label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate if possible' | translate }}\"\n          >\n            <input\n              name=\"translateWidgetTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateWidgetTitle\"\n            />\n            <span></span>\n            <span>{{ 'Translate if possible' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </c8y-appearance-settings>\n</div>\n", dependencies: [{ kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardAppearanceSettingsComponent, decorators: [{
             type: Component,
@@ -1530,7 +1582,7 @@ class DashboardVersionHistoryComponent {
         this.onRevert.emit(newDashboard);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardVersionHistoryComponent, deps: [{ token: i2$1.TranslateService }, { token: ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardVersionHistoryComponent, selector: "c8y-dashboard-version-history", inputs: { dashboardHistory: "dashboardHistory", isReport: "isReport" }, outputs: { onRevert: "onRevert" }, ngImport: i0, template: "<div class=\"bg-component p-t-8 p-b-8 separator-bottom text-center\">\n  <i\n    class=\"text-info m-r-4\"\n    c8yIcon=\"info\"\n  ></i>\n  {{\n    versionHistoryLimitMessage\n      | translate: { versionHistoryLimit: contextDashboardService.VERSION_HISTORY_SIZE_LIMIT }\n  }}\n</div>\n<c8y-list-group class=\"p-t-24 p-b-24\">\n  <c8y-li-timeline\n    *ngFor=\"let dashboard of dashboardHistoryExtended; index as i\"\n    [ngClass]=\"{ active: i === 0 }\"\n  >\n    {{ dashboard.created | date: 'mediumDate' }}\n    {{ dashboard.created | date: 'shortTime' }}\n    <c8y-li data-cy=\"c8y-dashboard-version-history--history-row\">\n      <c8y-li-body>\n        <div class=\"d-flex a-i-start\">\n          <div class=\"flex-grow\">\n            <span\n              class=\"text-truncate-wrap\"\n              title=\"{{ dashboard.descriptionText }}\"\n              data-cy=\"c8y-dashboard-version-history--history-title\"\n            >\n              {{ dashboard.descriptionText }}\n              {{\n                dashboard.historyDescription.restored\n                  ? (restoredDashboardMessage\n                    | translate\n                      : {\n                          restoredStateCreationDate: dashboard.historyDescription.restored | c8yDate\n                        })\n                  : ''\n              }}\n            </span>\n            <small\n              class=\"text-muted\"\n              title=\"{{ 'by`user`' | translate }} {{ dashboard.author }}\"\n              *ngIf=\"dashboard.author\"\n            >\n              <div class=\"icon-flex\">\n                <i c8yIcon=\"c8y-user\"></i>\n                {{ dashboard.author }}\n              </div>\n            </small>\n          </div>\n\n          <span\n            class=\"label label-primary m-l-auto\"\n            title=\"{{ 'The last saved status of the dashboard' | translate }}\"\n            *ngIf=\"i === 0\"\n          >\n            {{ 'Current`dashboard status`' | translate }}\n          </span>\n          <span\n            class=\"m-l-auto showOnHover\"\n            *ngIf=\"dashboardHistoryExtended.length > 1 && i > 0\"\n          >\n            <button\n              class=\"btn btn-default btn-sm\"\n              title=\"{{ 'Restore the dashboard to this status' | translate }}\"\n              type=\"button\"\n              (click)=\"revertDashboard(dashboard)\"\n            >\n              {{ 'Restore' | translate }}\n            </button>\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardVersionHistoryComponent, selector: "c8y-dashboard-version-history", inputs: { dashboardHistory: "dashboardHistory", isReport: "isReport" }, outputs: { onRevert: "onRevert" }, ngImport: i0, template: "<div class=\"bg-component p-t-8 p-b-8 separator-bottom text-center\">\n  <i\n    class=\"text-info m-r-4\"\n    c8yIcon=\"info\"\n  ></i>\n  {{\n    versionHistoryLimitMessage\n      | translate: { versionHistoryLimit: contextDashboardService.VERSION_HISTORY_SIZE_LIMIT }\n  }}\n</div>\n<c8y-list-group class=\"p-t-24 p-b-24\">\n  <c8y-li-timeline\n    *ngFor=\"let dashboard of dashboardHistoryExtended; index as i\"\n    [ngClass]=\"{ active: i === 0 }\"\n  >\n    {{ dashboard.created | date: 'mediumDate' }}\n    {{ dashboard.created | date: 'shortTime' }}\n    <c8y-li data-cy=\"c8y-dashboard-version-history--history-row\">\n      <c8y-li-body>\n        <div class=\"d-flex a-i-start\">\n          <div class=\"flex-grow\">\n            <span\n              class=\"text-truncate-wrap\"\n              title=\"{{ dashboard.descriptionText }}\"\n              data-cy=\"c8y-dashboard-version-history--history-title\"\n            >\n              {{ dashboard.descriptionText }}\n              {{\n                dashboard.historyDescription.restored\n                  ? (restoredDashboardMessage\n                    | translate\n                      : {\n                          restoredStateCreationDate: dashboard.historyDescription.restored | c8yDate\n                        })\n                  : ''\n              }}\n            </span>\n            <small\n              class=\"text-muted\"\n              title=\"{{ 'by`user`' | translate }} {{ dashboard.author }}\"\n              *ngIf=\"dashboard.author\"\n            >\n              <div class=\"icon-flex\">\n                <i c8yIcon=\"c8y-user\"></i>\n                {{ dashboard.author }}\n              </div>\n            </small>\n          </div>\n\n          <span\n            class=\"label label-primary m-l-auto\"\n            title=\"{{ 'The last saved status of the dashboard' | translate }}\"\n            *ngIf=\"i === 0\"\n          >\n            {{ 'Current`dashboard status`' | translate }}\n          </span>\n          <span\n            class=\"m-l-auto showOnHover\"\n            *ngIf=\"dashboardHistoryExtended.length > 1 && i > 0\"\n          >\n            <button\n              class=\"btn btn-default btn-sm\"\n              title=\"{{ 'Restore the dashboard to this status' | translate }}\"\n              type=\"button\"\n              (click)=\"revertDashboard(dashboard)\"\n            >\n              {{ 'Restore' | translate }}\n            </button>\n          </span>\n        </div>\n      </c8y-li-body>\n    </c8y-li>\n  </c8y-li-timeline>\n</c8y-list-group>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i2.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i2.DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardVersionHistoryComponent, decorators: [{
             type: Component,
@@ -1544,7 +1596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }] } });
 
 class DashboardDetailComponent {
-    constructor(contextDashboardService, translateService, contextRoute, activatedRoute, tabsService, router, inventory, route, dashboardDetailService, appState, optionsService, groupService, modal, gainsightService) {
+    constructor(contextDashboardService, translateService, contextRoute, activatedRoute, tabsService, router, inventory, route, dashboardDetailService, appState, groupService, modal, gainsightService) {
         this.contextDashboardService = contextDashboardService;
         this.translateService = translateService;
         this.contextRoute = contextRoute;
@@ -1555,7 +1607,6 @@ class DashboardDetailComponent {
         this.route = route;
         this.dashboardDetailService = dashboardDetailService;
         this.appState = appState;
-        this.optionsService = optionsService;
         this.groupService = groupService;
         this.modal = modal;
         this.gainsightService = gainsightService;
@@ -1564,7 +1615,6 @@ class DashboardDetailComponent {
         this.selectedTab = DashboardDetailsTabId.GENERAL;
         this.dashboardSaved = new EventEmitter();
         this.previewChanged = new EventEmitter();
-        this.HIDE_TYPE_DASHBOARD_FOR_ASSETS = 'hideTypeDashboardForAssets';
         this.destroy$ = new Subject();
         this.TABS_OUTLET_NAME = 'dashboardTabs';
         this.TABS = {
@@ -1588,7 +1638,7 @@ class DashboardDetailComponent {
     ngOnInit() {
         this.tabs$ = this.tabsService.items$;
         this.currentContext = this.contextRoute.getContextData(this.activatedRoute);
-        this.deviceTypeValue = this.getDeviceTypeValue();
+        this.deviceTypeValue = this.context?.type;
         this.displayDeviceTypeValue =
             this.context &&
                 this.groupService.isGroup(this.context) &&
@@ -1727,16 +1777,10 @@ class DashboardDetailComponent {
         await this.save();
     }
     updateAllowTypeDashboard() {
-        this.allowTypeDashboard = this.contextDashboardService.shouldAllowToSetDashboardType(this.mo, this.deviceTypeValue);
-    }
-    getDeviceTypeValue() {
-        const isAllowedTypeValue = this.optionsService.get(this.HIDE_TYPE_DASHBOARD_FOR_ASSETS, true)
-            ? !!this.context?.c8y_IsDevice
-            : !!this.context?.c8y_IsDevice || !!this.context?.c8y_IsDeviceGroup;
-        return isAllowedTypeValue ? this.context?.type : null;
+        this.allowTypeDashboard = this.contextDashboardService.shouldAllowToSetDashboardType(this.mo, this.currentContext);
     }
     initForm() {
-        this.dashboardDetailsForm = this.dashboardDetailService.initForm(this.dashboard, this.isReport, this.allowTypeDashboard ? this.getDeviceTypeValue() : null);
+        this.dashboardDetailsForm = this.dashboardDetailService.initForm(this.dashboard, this.isReport, this.allowTypeDashboard);
         this.generalSettingsForm = this.dashboardDetailsForm.get('generalSettingsForm');
         this.appearanceSettingsForm = this.dashboardDetailsForm.get('appearanceSettingsForm');
     }
@@ -1903,8 +1947,8 @@ class DashboardDetailComponent {
         }
         this.previewChanged.emit(this.dashboard);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: ContextDashboardService }, { token: i2$1.TranslateService }, { token: i3.ContextRouteService }, { token: i1.ActivatedRoute }, { token: i3.TabsService }, { token: i1.Router }, { token: i1$1.InventoryService }, { token: i1.ActivatedRoute }, { token: DashboardDetailService }, { token: i3.AppStateService }, { token: i3.OptionsService }, { token: i3.GroupService }, { token: i3.ModalService }, { token: i3.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, 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    [formGroup]=\"dashboardDetailsForm\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      [tabs]=\"tabs$ | async\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      class=\"c8y-top-drawer--tabs\"\n    ></c8y-tabs-outlet>\n    <div 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      <c8y-tab\n        *ngIf=\"(!isNamedDashboard && !hideAvailability) || isReport\"\n        [label]=\"TABS.general.label\"\n        [icon]=\"'imac-settings'\"\n        [priority]=\"100\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.general.featureId)\"\n        [isActive]=\"selectedTab === TABS.general.featureId\"\n      ></c8y-tab>\n      <c8y-tab\n        [label]=\"TABS.appearance.label\"\n        [priority]=\"50\"\n        [icon]=\"'web-design'\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.appearance.featureId)\"\n        [isActive]=\"selectedTab === TABS.appearance.featureId\"\n      ></c8y-tab>\n      <c8y-tab\n        *ngIf=\"mo?.c8y_DashboardHistory\"\n        [label]=\"TABS.versionHistory.label\"\n        [icon]=\"'versions'\"\n        [priority]=\"10\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.versionHistory.featureId)\"\n        [isActive]=\"selectedTab === TABS.versionHistory.featureId\"\n      ></c8y-tab>\n      <ng-container [ngSwitch]=\"selectedTab\">\n        <c8y-dashboard-general-settings\n          *ngSwitchCase=\"TABS.general.featureId\"\n          [isReport]=\"isReport\"\n          [isNamedDashboard]=\"isNamedDashboard\"\n          [hideAvailability]=\"hideAvailability\"\n          [dashboard]=\"dashboard\"\n          [generalSettingsForm]=\"generalSettingsForm\"\n          [deviceTypeValue]=\"deviceTypeValue\"\n          [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n          [mo]=\"mo\"\n          [allowTypeDashboard]=\"allowTypeDashboard\"\n          [isDevice]=\"!!context?.c8y_IsDevice\"\n          class=\"animated fadeIn\"\n          (onDuplicateWithoutType)=\"duplicateWithoutType()\"\n        ></c8y-dashboard-general-settings>\n        <c8y-dashboard-appearance-settings\n          *ngSwitchCase=\"TABS.appearance.featureId\"\n          [dashboard]=\"dashboard\"\n          [appearanceSettingsForm]=\"appearanceSettingsForm\"\n          (previewChanged)=\"previewChanged.emit($event)\"\n          class=\"animated fadeIn\"\n        ></c8y-dashboard-appearance-settings>\n        <c8y-dashboard-version-history\n          *ngSwitchCase=\"TABS.versionHistory.featureId\"\n          [dashboardHistory]=\"mo.c8y_DashboardHistory\"\n          [isReport]=\"isReport\"\n          (onRevert)=\"revertDashboard($event)\"\n          class=\"animated fadeIn\"\n        ></c8y-dashboard-version-history>\n      </ng-container>\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]=\"\n        (dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: i3.TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive"], outputs: ["onSelect"] }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: DashboardGeneralSettingsComponent, selector: "c8y-dashboard-general-settings", inputs: ["isReport", "isNamedDashboard", "hideAvailability", "dashboard", "generalSettingsForm", "deviceTypeValue", "displayDeviceTypeValue", "allowTypeDashboard", "isDevice", "mo"], outputs: ["onDuplicateWithoutType"] }, { kind: "component", type: DashboardAppearanceSettingsComponent, selector: "c8y-dashboard-appearance-settings", inputs: ["dashboard", "appearanceSettingsForm"], outputs: ["previewChanged"] }, { kind: "component", type: DashboardVersionHistoryComponent, selector: "c8y-dashboard-version-history", inputs: ["dashboardHistory", "isReport"], outputs: ["onRevert"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, 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    [formGroup]=\"dashboardDetailsForm\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      [tabs]=\"tabs$ | async\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      class=\"c8y-top-drawer--tabs\"\n    ></c8y-tabs-outlet>\n    <div 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      <c8y-tab\n        *ngIf=\"(!isNamedDashboard && !hideAvailability) || isReport\"\n        [label]=\"TABS.general.label\"\n        [icon]=\"'imac-settings'\"\n        [priority]=\"100\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.general.featureId)\"\n        [isActive]=\"selectedTab === TABS.general.featureId\"\n      ></c8y-tab>\n      <c8y-tab\n        [label]=\"TABS.appearance.label\"\n        [priority]=\"50\"\n        [icon]=\"'web-design'\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.appearance.featureId)\"\n        [isActive]=\"selectedTab === TABS.appearance.featureId\"\n      ></c8y-tab>\n      <c8y-tab\n        *ngIf=\"mo?.c8y_DashboardHistory\"\n        [label]=\"TABS.versionHistory.label\"\n        [icon]=\"'versions'\"\n        [priority]=\"10\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.versionHistory.featureId)\"\n        [isActive]=\"selectedTab === TABS.versionHistory.featureId\"\n      ></c8y-tab>\n      <ng-container [ngSwitch]=\"selectedTab\">\n        <c8y-dashboard-general-settings\n          *ngSwitchCase=\"TABS.general.featureId\"\n          [isReport]=\"isReport\"\n          [isNamedDashboard]=\"isNamedDashboard\"\n          [hideAvailability]=\"hideAvailability\"\n          [dashboard]=\"dashboard\"\n          [generalSettingsForm]=\"generalSettingsForm\"\n          [deviceTypeValue]=\"deviceTypeValue\"\n          [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n          [mo]=\"mo\"\n          [allowTypeDashboard]=\"allowTypeDashboard\"\n          [isDevice]=\"!!context?.c8y_IsDevice\"\n          class=\"animated fadeIn\"\n          (onDuplicateWithoutType)=\"duplicateWithoutType()\"\n        ></c8y-dashboard-general-settings>\n        <c8y-dashboard-appearance-settings\n          *ngSwitchCase=\"TABS.appearance.featureId\"\n          [dashboard]=\"dashboard\"\n          [appearanceSettingsForm]=\"appearanceSettingsForm\"\n          (previewChanged)=\"previewChanged.emit($event)\"\n          class=\"animated fadeIn\"\n        ></c8y-dashboard-appearance-settings>\n        <c8y-dashboard-version-history\n          *ngSwitchCase=\"TABS.versionHistory.featureId\"\n          [dashboardHistory]=\"mo.c8y_DashboardHistory\"\n          [isReport]=\"isReport\"\n          (onRevert)=\"revertDashboard($event)\"\n          class=\"animated fadeIn\"\n        ></c8y-dashboard-version-history>\n      </ng-container>\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]=\"\n        (dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: i2.TabComponent, selector: "c8y-tab", inputs: ["path", "label", "icon", "priority", "orientation", "injector", "tabsOutlet", "isActive"], outputs: ["onSelect"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: DashboardGeneralSettingsComponent, selector: "c8y-dashboard-general-settings", inputs: ["isReport", "isNamedDashboard", "hideAvailability", "dashboard", "generalSettingsForm", "deviceTypeValue", "displayDeviceTypeValue", "allowTypeDashboard", "isDevice", "mo"], outputs: ["onDuplicateWithoutType"] }, { kind: "component", type: DashboardAppearanceSettingsComponent, selector: "c8y-dashboard-appearance-settings", inputs: ["dashboard", "appearanceSettingsForm"], outputs: ["previewChanged"] }, { kind: "component", type: DashboardVersionHistoryComponent, selector: "c8y-dashboard-version-history", inputs: ["dashboardHistory", "isReport"], outputs: ["onRevert"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 __decorate([
     memoize(),
@@ -1915,7 +1959,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-detail', 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    [formGroup]=\"dashboardDetailsForm\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      [tabs]=\"tabs$ | async\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      class=\"c8y-top-drawer--tabs\"\n    ></c8y-tabs-outlet>\n    <div 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      <c8y-tab\n        *ngIf=\"(!isNamedDashboard && !hideAvailability) || isReport\"\n        [label]=\"TABS.general.label\"\n        [icon]=\"'imac-settings'\"\n        [priority]=\"100\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.general.featureId)\"\n        [isActive]=\"selectedTab === TABS.general.featureId\"\n      ></c8y-tab>\n      <c8y-tab\n        [label]=\"TABS.appearance.label\"\n        [priority]=\"50\"\n        [icon]=\"'web-design'\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.appearance.featureId)\"\n        [isActive]=\"selectedTab === TABS.appearance.featureId\"\n      ></c8y-tab>\n      <c8y-tab\n        *ngIf=\"mo?.c8y_DashboardHistory\"\n        [label]=\"TABS.versionHistory.label\"\n        [icon]=\"'versions'\"\n        [priority]=\"10\"\n        [tabsOutlet]=\"TABS_OUTLET_NAME\"\n        (onSelect)=\"selectTab(TABS.versionHistory.featureId)\"\n        [isActive]=\"selectedTab === TABS.versionHistory.featureId\"\n      ></c8y-tab>\n      <ng-container [ngSwitch]=\"selectedTab\">\n        <c8y-dashboard-general-settings\n          *ngSwitchCase=\"TABS.general.featureId\"\n          [isReport]=\"isReport\"\n          [isNamedDashboard]=\"isNamedDashboard\"\n          [hideAvailability]=\"hideAvailability\"\n          [dashboard]=\"dashboard\"\n          [generalSettingsForm]=\"generalSettingsForm\"\n          [deviceTypeValue]=\"deviceTypeValue\"\n          [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n          [mo]=\"mo\"\n          [allowTypeDashboard]=\"allowTypeDashboard\"\n          [isDevice]=\"!!context?.c8y_IsDevice\"\n          class=\"animated fadeIn\"\n          (onDuplicateWithoutType)=\"duplicateWithoutType()\"\n        ></c8y-dashboard-general-settings>\n        <c8y-dashboard-appearance-settings\n          *ngSwitchCase=\"TABS.appearance.featureId\"\n          [dashboard]=\"dashboard\"\n          [appearanceSettingsForm]=\"appearanceSettingsForm\"\n          (previewChanged)=\"previewChanged.emit($event)\"\n          class=\"animated fadeIn\"\n        ></c8y-dashboard-appearance-settings>\n        <c8y-dashboard-version-history\n          *ngSwitchCase=\"TABS.versionHistory.featureId\"\n          [dashboardHistory]=\"mo.c8y_DashboardHistory\"\n          [isReport]=\"isReport\"\n          (onRevert)=\"revertDashboard($event)\"\n          class=\"animated fadeIn\"\n        ></c8y-dashboard-version-history>\n      </ng-container>\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]=\"\n        (dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ContextDashboardService }, { type: i2$1.TranslateService }, { type: i3.ContextRouteService }, { type: i1.ActivatedRoute }, { type: i3.TabsService }, { type: i1.Router }, { type: i1$1.InventoryService }, { type: i1.ActivatedRoute }, { type: DashboardDetailService }, { type: i3.AppStateService }, { type: i3.OptionsService }, { type: i3.GroupService }, { type: i3.ModalService }, { type: i3.GainsightService }], propDecorators: { isReport: [{
+        }], 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: [{
                 type: Input
@@ -1984,7 +2028,7 @@ class WidgetService {
         }
         return widget;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetService, deps: [{ token: i3.DynamicComponentService }, { token: i2$1.TranslateService }, { token: CONTEXT_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetService, deps: [{ token: i2.DynamicComponentService }, { token: i2$1.TranslateService }, { token: CONTEXT_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetService, decorators: [{
@@ -1992,7 +2036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i3.DynamicComponentService }, { type: i2$1.TranslateService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2.DynamicComponentService }, { type: i2$1.TranslateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -2007,7 +2051,7 @@ class WidgetPreviewComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses", tab: "tab" }, ngImport: i0, template: "<div class=\"legend form-block\" translate>Preview</div>\n<label *ngIf=\"tab\" translate>Tab and layout</label>\n<label *ngIf=\"!tab\" translate>Layout</label>\n<div class=\"dashboard-preview-slot\" [ngClass]=\"previewClasses\">\n  <div\n    class=\"page-tabs page-tabs-horizontal navigator-open p-absolute overflow-hidden\"\n    style=\"left: 0; margin: 0 15px\"\n    *ngIf=\"tab\"\n  >\n    <div class=\"tabContainer hidden-xs\">\n      <ul role=\"menu\" class=\"nav nav-tabs nav-tabsc8y\">\n        <li role=\"menuitem\" class=\"active\" style=\"left: 16px\">\n          <a routerlinkactive=\"\" title=\"{{ tab.name }}\">\n            <i class=\"text-primary\" [c8yIcon]=\"tab.icon\"></i>\n            <span class=\"txt\">{{ tab.name }}</span>\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"visible-xs mobile-tabs\"></div>\n  </div>\n  <div [ngClass]=\"{ 'm-t-64': !!tab }\">\n    <div class=\"card card-dashboard\" style=\"height: 300px\">\n      <div class=\"card-header-actions\" style=\"z-index: 8\">\n        <div class=\"card-title\">\n          <span translate>Widget title</span>\n        </div>\n        <div class=\"header-actions\">\n          <div class=\"optionsBtn dropdown\">\n            <button\n              type=\"button\"\n              title=\"{{ 'Settings' | translate }}\"\n              (click)=\"(false)\"\n              class=\"btn btn-dot dropdown-toggle c8y-dropdown\"\n              aria-haspopup=\"true\"\n            >\n              <i c8yIcon=\"cog\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"card-inner-scroll p-t-16\">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses", tab: "tab" }, ngImport: i0, template: "<div class=\"legend form-block\" translate>Preview</div>\n<label *ngIf=\"tab\" translate>Tab and layout</label>\n<label *ngIf=\"!tab\" translate>Layout</label>\n<div class=\"dashboard-preview-slot\" [ngClass]=\"previewClasses\">\n  <div\n    class=\"page-tabs page-tabs-horizontal navigator-open p-absolute overflow-hidden\"\n    style=\"left: 0; margin: 0 15px\"\n    *ngIf=\"tab\"\n  >\n    <div class=\"tabContainer hidden-xs\">\n      <ul role=\"menu\" class=\"nav nav-tabs nav-tabsc8y\">\n        <li role=\"menuitem\" class=\"active\" style=\"left: 16px\">\n          <a routerlinkactive=\"\" title=\"{{ tab.name }}\">\n            <i class=\"text-primary\" [c8yIcon]=\"tab.icon\"></i>\n            <span class=\"txt\">{{ tab.name }}</span>\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"visible-xs mobile-tabs\"></div>\n  </div>\n  <div [ngClass]=\"{ 'm-t-64': !!tab }\">\n    <div class=\"card card-dashboard\" style=\"height: 300px\">\n      <div class=\"card-header-actions\" style=\"z-index: 8\">\n        <div class=\"card-title\">\n          <span translate>Widget title</span>\n        </div>\n        <div class=\"header-actions\">\n          <div class=\"optionsBtn dropdown\">\n            <button\n              type=\"button\"\n              title=\"{{ 'Settings' | translate }}\"\n              (click)=\"(false)\"\n              class=\"btn btn-dot dropdown-toggle c8y-dropdown\"\n              aria-haspopup=\"true\"\n            >\n              <i c8yIcon=\"cog\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"card-inner-scroll p-t-16\">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
             type: Component,
@@ -2244,7 +2288,7 @@ class WidgetConfigComponent {
         return widgetConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2$2.BsModalRef }, { token: i1$1.InventoryService }, { token: ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetConfigComponent, selector: "c8y-widget-config", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["config"], descendants: true }, { propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<div class=\"modal-header\">\n  <div\n    class=\"h3\"\n    title=\"{{ 'Add widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"!current\"\n    translate\n  >\n    Add widget\n  </div>\n  <div\n    class=\"h3\"\n    title=\"{{ 'Edit widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"current\"\n    translate\n  >\n    Edit widget\n  </div>\n</div>\n<form\n  name=\"form\"\n  #configForm=\"ngForm\"\n>\n  <div\n    class=\"c8y-modal-tabs\"\n    id=\"modal-body\"\n  >\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            class=\"btn\"\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            class=\"btn\"\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            class=\"btn\"\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\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      *ngIf=\"mode === 'select'\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\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\n      class=\"modal-body bg-level-2\"\n      *ngIf=\"mode === 'select'\"\n    >\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          title=\"{{ cmp.description | translate }}\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n        >\n          <button\n            class=\"btn-clean d-col card p-8\"\n            [class.active]=\"selected === cmp\"\n            type=\"button\"\n            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"text-center p-8 m-b-8 d-col flex-center flex-grow bg-level-2\"\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\n                  [src]=\"cmp.previewImage\"\n                />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </button>\n        </div>\n\n        <div\n          class=\"c8y-empty-state text-center\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <div\n            class=\"h1\"\n            c8yIcon=\"search\"\n          ></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p\n              class=\"m-r-8\"\n              translate\n            >\n              Rephrase your search term.\n            </p>\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          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div\n      class=\"d-flex d-col fit-h\"\n      *ngIf=\"selected\"\n      [ngClass]=\"{ hidden: mode !== 'config' }\"\n    >\n      <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <div class=\"text-left text-medium h4\">\n                {{ selected.label | translate }}\n              </div>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label\n                  for=\"widgetTitle\"\n                  translate\n                >\n                  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          </div>\n        </div>\n      </div>\n      <div\n        class=\"row flex-grow\"\n        [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\"\n      >\n        <div\n          class=\"a-s-stretch\"\n          [ngStyle]=\"isLegacyAlarmWidget ? { 'pointer-events': 'none', opacity: '0.5' } : {}\"\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget && mode === 'config'\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n        >\n          <div\n            class=\"fit-h bg-inherit p-l-16\"\n            [ngClass]=\"{ 'p-r-24': !hasConfig() }\"\n          >\n            <div class=\"p-relative bg-inherit\">\n              <c8y-asset-selector-miller\n                class=\"d-block bg-inherit p-relative\"\n                style=\"height: calc(100vh - 422px)\"\n                (onSelected)=\"selectionChanged($event)\"\n                [config]=\"{\n                  view: 'miller',\n                  groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                  showChildDevices: true,\n                  columnHeaders: true,\n                  showUnassignedDevices: true,\n                  search: !this.widgetConfig.settings.context?.additionParents,\n                  showFilter: true,\n                  singleColumn: !!this.hasConfig(),\n                  showSelected: true\n                }\"\n                [asset]=\"widgetConfig.settings?.context\"\n                [selectedDevice]=\"selectedDevice\"\n              ></c8y-asset-selector-miller>\n            </div>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n            'sr-only': !hasConfig()\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block\"\n            style=\"height: {{ hasConfig() ? 'calc(100vh - 422px)' : '0' }}\"\n            [ngClass]=\"{ 'inner-scroll p-r-24 p-t-16': !widgetConfig.settings?.noDeviceTarget }\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"modal-body p-t-0\"\n      style=\"height: calc(100vh - 310px)\"\n      *ngIf=\"mode === 'style'\"\n    >\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\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          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview\n            style=\"height: calc(100vh - 382px)\"\n            [previewClasses]=\"getStyle(true)\"\n          ></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\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]=\"\n        !dynamicComponent ||\n        (((this.contextDashboardService.formDisabled$ | async) || isSaveDisabled()) &&\n          !!widgetHasConfigComponent)\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i3.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i8.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses", "tab"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetConfigComponent, selector: "c8y-widget-config", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["config"], descendants: true }, { propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<div class=\"modal-header\">\n  <div\n    class=\"h3\"\n    title=\"{{ 'Add widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"!current\"\n    translate\n  >\n    Add widget\n  </div>\n  <div\n    class=\"h3\"\n    title=\"{{ 'Edit widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"current\"\n    translate\n  >\n    Edit widget\n  </div>\n</div>\n<form\n  name=\"form\"\n  #configForm=\"ngForm\"\n>\n  <div\n    class=\"c8y-modal-tabs\"\n    id=\"modal-body\"\n  >\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            class=\"btn\"\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            class=\"btn\"\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            class=\"btn\"\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\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      *ngIf=\"mode === 'select'\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\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\n      class=\"modal-body bg-level-2\"\n      *ngIf=\"mode === 'select'\"\n    >\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          title=\"{{ cmp.description | translate }}\"\n          data-cy=\"widget-config--widget-list\"\n          *ngFor=\"let cmp of searchResult || components\"\n        >\n          <button\n            class=\"btn-clean d-col card p-8\"\n            [class.active]=\"selected === cmp\"\n            type=\"button\"\n            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"text-center p-8 m-b-8 d-col flex-center flex-grow bg-level-2\"\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\n                  [src]=\"cmp.previewImage\"\n                />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </button>\n        </div>\n\n        <div\n          class=\"c8y-empty-state text-center\"\n          *ngIf=\"searchResult && searchResult.length === 0\"\n        >\n          <div\n            class=\"h1\"\n            c8yIcon=\"search\"\n          ></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p\n              class=\"m-r-8\"\n              translate\n            >\n              Rephrase your search term.\n            </p>\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          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div\n      class=\"d-flex d-col fit-h\"\n      *ngIf=\"selected\"\n      [ngClass]=\"{ hidden: mode !== 'config' }\"\n    >\n      <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <div class=\"text-left text-medium h4\">\n                {{ selected.label | translate }}\n              </div>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label\n                  for=\"widgetTitle\"\n                  translate\n                >\n                  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          </div>\n        </div>\n      </div>\n      <div\n        class=\"row flex-grow\"\n        [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\"\n      >\n        <div\n          class=\"a-s-stretch\"\n          [ngStyle]=\"isLegacyAlarmWidget ? { 'pointer-events': 'none', opacity: '0.5' } : {}\"\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget && mode === 'config'\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n        >\n          <div\n            class=\"fit-h bg-inherit p-l-16\"\n            [ngClass]=\"{ 'p-r-24': !hasConfig() }\"\n          >\n            <div class=\"p-relative bg-inherit\">\n              <c8y-asset-selector-miller\n                class=\"d-block bg-inherit p-relative\"\n                style=\"height: calc(100vh - 422px)\"\n                (onSelected)=\"selectionChanged($event)\"\n                [config]=\"{\n                  view: 'miller',\n                  groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                  showChildDevices: true,\n                  columnHeaders: true,\n                  showUnassignedDevices: true,\n                  search: !this.widgetConfig.settings.context?.additionParents,\n                  showFilter: true,\n                  singleColumn: !!this.hasConfig(),\n                  showSelected: true\n                }\"\n                [asset]=\"widgetConfig.settings?.context\"\n                [selectedDevice]=\"selectedDevice\"\n              ></c8y-asset-selector-miller>\n            </div>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n            'sr-only': !hasConfig()\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block\"\n            style=\"height: {{ hasConfig() ? 'calc(100vh - 422px)' : '0' }}\"\n            [ngClass]=\"{ 'inner-scroll p-r-24 p-t-16': !widgetConfig.settings?.noDeviceTarget }\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"modal-body p-t-0\"\n      style=\"height: calc(100vh - 310px)\"\n      *ngIf=\"mode === 'style'\"\n    >\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\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          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview\n            style=\"height: calc(100vh - 382px)\"\n            [previewClasses]=\"getStyle(true)\"\n          ></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\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]=\"\n        !dynamicComponent ||\n        (((this.contextDashboardService.formDisabled$ | async) || isSaveDisabled()) &&\n          !!widgetHasConfigComponent)\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i8.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses", "tab"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
@@ -2746,7 +2790,7 @@ class ContextDashboardComponent {
         if (this.dashboard) {
             this.dashboard.historyDescription = {};
         }
-        this.widgetsDashboard.editMode = false;
+        this.widgetsDashboard.editMode$.next(false);
         if (!onDeactivate) {
             // when setWidgets is called during navigation from device to device, navigation fails
             await this.setWidgets(dashboardChildren.children);
@@ -3080,8 +3124,8 @@ class ContextDashboardComponent {
             ? str
             : this.gainsightService.hashGroupName(str);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextDashboardComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ContextDashboardService }, { token: i3.AlertService }, { token: i0.Renderer2 }, { token: CONTEXT_DASHBOARD_CONFIG }, { token: WidgetService }, { token: i2$2.BsModalService }, { token: i3.GainsightService }, { token: i3.ActionBarService }, { token: i2$1.TranslateService }, { token: i3.ModalService }, { token: DashboardEditModeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: { name: "name", childrenClasses: "childrenClasses", context: "context", setTitle: "setTitle", defaultWidgets: "defaultWidgets", 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\"\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  (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: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.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: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i4.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: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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$2.BsModalService }, { 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: "18.2.9", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: { name: "name", childrenClasses: "childrenClasses", context: "context", setTitle: "setTitle", defaultWidgets: "defaultWidgets", 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  (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: i4.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: i4$1.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: i4.AsyncPipe, name: "async" }] }); }
 }
 __decorate([
     memoize(),
@@ -3096,11 +3140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
       display: block;
     `,
                         class: 'dashboard c8y-grid-dashboard'
-                    }, 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\"\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  (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" }]
-        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ContextDashboardService }, { type: i3.AlertService }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    }, 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  (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" }]
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: ContextDashboardService }, { type: i2.AlertService }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CONTEXT_DASHBOARD_CONFIG]
-                }] }, { type: WidgetService }, { type: i2$2.BsModalService }, { type: i3.GainsightService }, { type: i3.ActionBarService }, { type: i2$1.TranslateService }, { type: i3.ModalService }, { type: DashboardEditModeService }], propDecorators: { name: [{
+                }] }, { type: WidgetService }, { type: i2$2.BsModalService }, { type: i2.GainsightService }, { type: i2.ActionBarService }, { type: i2$1.TranslateService }, { type: i2.ModalService }, { type: DashboardEditModeService }], propDecorators: { name: [{
                 type: Input
             }], childrenClasses: [{
                 type: Input
@@ -3172,13 +3216,13 @@ class CockpitDashboardComponent {
             this.pageTitle = config.pageTitle;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitDashboardComponent, deps: [{ token: i3.AppStateService }, { token: COCKPIT_HOME_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CockpitDashboardComponent, selector: "c8y-cockpit-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ pageTitle | 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: i3.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: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitDashboardComponent, deps: [{ token: i2.AppStateService }, { token: COCKPIT_HOME_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CockpitDashboardComponent, selector: "c8y-cockpit-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ pageTitle | 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-cockpit-dashboard', template: "<c8y-title>\n  {{ pageTitle | 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: i3.AppStateService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2.AppStateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -3266,7 +3310,7 @@ class PasteDashboardActionComponent {
         </button>
       </li>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+  `, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasteDashboardActionComponent, decorators: [{
             type: Component,
@@ -3954,7 +3998,7 @@ class DeviceInfoDashboardComponent {
         return this.contextDashboard?.canDeactivate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: DeviceInfoDashboardComponent, 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  ></c8y-context-dashboard>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: "18.2.9", type: DeviceInfoDashboardComponent, 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  ></c8y-context-dashboard>\n</div>\n", dependencies: [{ kind: "directive", type: i4.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceInfoDashboardComponent, decorators: [{
             type: Component,
@@ -4034,7 +4078,7 @@ class DeviceManagementHomeDashboardComponent {
         return this.contextDashboard?.canDeactivate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceManagementHomeDashboardComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DeviceManagementHomeDashboardComponent, 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: i3.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: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DeviceManagementHomeDashboardComponent, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceManagementHomeDashboardComponent, decorators: [{
             type: Component,
@@ -4230,7 +4274,7 @@ class DashboardManagerService extends DataGridService {
         const fullQuery = this.queriesUtil.addAndFilter(queryFromColumns, this.baseQuery);
         return this.queriesUtil.buildQuery(fullQuery);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardManagerService, deps: [{ token: i1$1.InventoryService }, { token: i3.UserPreferencesService }, { token: i3.ModalService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardManagerService, deps: [{ token: i1$1.InventoryService }, { token: i2.UserPreferencesService }, { token: i2.ModalService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardManagerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardManagerService, decorators: [{
@@ -4238,7 +4282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i3.UserPreferencesService }, { type: i3.ModalService }, { type: i2$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.UserPreferencesService }, { type: i2.ModalService }, { type: i2$1.TranslateService }] });
 
 class BasicNameDeviceGridColumn extends NameDeviceGridColumn {
     constructor(initialColumnConfig) {
@@ -4306,7 +4350,7 @@ class TypeDashboardAssetsGridService extends DataGridService {
         fullQuery = this.queriesUtil.addAndFilter(fullQuery, query);
         return this.queriesUtil.buildQuery(fullQuery);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardAssetsGridService, deps: [{ token: i1$1.InventoryService }, { token: i3.UserPreferencesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardAssetsGridService, deps: [{ token: i1$1.InventoryService }, { token: i2.UserPreferencesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardAssetsGridService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardAssetsGridService, decorators: [{
@@ -4314,7 +4358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i3.UserPreferencesService }] });
+        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.UserPreferencesService }] });
 
 class TypeDashboardTargetAssetsGridComponent {
     constructor(router, assetsGridService, contextDashboardService) {
@@ -4366,7 +4410,7 @@ class TypeDashboardTargetAssetsGridComponent {
         this.router.navigate([`/${parentSubPath}/${val.id}/dashboard/${this.dashboard.id}`]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardTargetAssetsGridComponent, deps: [{ token: i1.Router }, { token: TypeDashboardAssetsGridService }, { token: ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardTargetAssetsGridComponent, selector: "c8y-type-dashboard-target-assets-grid", inputs: { dashboard: "dashboard" }, outputs: { onNavigateToAsset: "onNavigateToAsset" }, ngImport: i0, template: "<c8y-data-grid\n  [title]=\"''\"\n  [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n  [loadingItemsLabel]=\"loadingItemsLabel\"\n  [columns]=\"columns\"\n  [pagination]=\"pagination\"\n  [infiniteScroll]=\"'auto'\"\n  [actionControls]=\"actionControls\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  [showSearch]=\"true\"\n>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No results to display.' | translate\"\n    [subtitle]=\"'Refine your search terms.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n\n  <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n    <c8y-column [name]=\"column.name\"></c8y-column>\n  </ng-container>\n</c8y-data-grid>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i3.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardTargetAssetsGridComponent, selector: "c8y-type-dashboard-target-assets-grid", inputs: { dashboard: "dashboard" }, outputs: { onNavigateToAsset: "onNavigateToAsset" }, ngImport: i0, template: "<c8y-data-grid\n  [title]=\"''\"\n  [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n  [loadingItemsLabel]=\"loadingItemsLabel\"\n  [columns]=\"columns\"\n  [pagination]=\"pagination\"\n  [infiniteScroll]=\"'auto'\"\n  [actionControls]=\"actionControls\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  [showSearch]=\"true\"\n>\n  <c8y-ui-empty-state\n    [icon]=\"'search'\"\n    [title]=\"'No results to display.' | translate\"\n    [subtitle]=\"'Refine your search terms.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n\n  <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n    <c8y-column [name]=\"column.name\"></c8y-column>\n  </ng-container>\n</c8y-data-grid>\n", dependencies: [{ kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardTargetAssetsGridComponent, decorators: [{
             type: Component,
@@ -4391,7 +4435,7 @@ class TypeDashboardTargetAssetsModalComponent {
         this.bsModalRef.hide();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardTargetAssetsModalComponent, deps: [{ token: i2$2.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardTargetAssetsModalComponent, selector: "c8y-type-dashboard-target-assets-modal", inputs: { dashboard: "dashboard" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<c8y-modal\n  title=\"{{ 'Select dashboard instance to edit' | translate }}\"\n  (onClose)=\"close()\"\n  (onDismiss)=\"close()\"\n  [labels]=\"labels\"\n  [disabled]=\"true\"\n  [headerClasses]=\"'has-data-grid'\"\n>\n  <c8y-type-dashboard-target-assets-grid\n    [dashboard]=\"dashboard\"\n    (onNavigateToAsset)=\"close()\"\n  ></c8y-type-dashboard-target-assets-grid>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: TypeDashboardTargetAssetsGridComponent, selector: "c8y-type-dashboard-target-assets-grid", inputs: ["dashboard"], outputs: ["onNavigateToAsset"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardTargetAssetsModalComponent, selector: "c8y-type-dashboard-target-assets-modal", inputs: { dashboard: "dashboard" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<c8y-modal\n  title=\"{{ 'Select dashboard instance to edit' | translate }}\"\n  (onClose)=\"close()\"\n  (onDismiss)=\"close()\"\n  [labels]=\"labels\"\n  [disabled]=\"true\"\n  [headerClasses]=\"'has-data-grid'\"\n>\n  <c8y-type-dashboard-target-assets-grid\n    [dashboard]=\"dashboard\"\n    (onNavigateToAsset)=\"close()\"\n  ></c8y-type-dashboard-target-assets-grid>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: TypeDashboardTargetAssetsGridComponent, selector: "c8y-type-dashboard-target-assets-grid", inputs: ["dashboard"], outputs: ["onNavigateToAsset"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardTargetAssetsModalComponent, decorators: [{
             type: Component,
@@ -4463,7 +4507,7 @@ class TypeDashboardsListComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardsListComponent, deps: [{ token: DashboardManagerService }, { token: i2$2.BsModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardsListComponent, selector: "c8y-dashboard-manager", ngImport: i0, template: "<c8y-title>\n  {{ 'Dashboard manager' | translate }}\n</c8y-title>\n\n<div class=\"content-fullpage d-flex d-col border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [infiniteScroll]=\"'auto'\"\n    [actionControls]=\"actionControls\"\n    [showSearch]=\"true\"\n    [displayOptions]=\"displayOptions\"\n    [refresh]=\"refresh\"\n    [expandableRows]=\"'ASYNC'\"\n  >\n    <div\n      *c8yExpandableRow=\"\n        let context;\n        let asyncRenderSuccess = asyncRenderSuccess;\n        let asyncRenderFail = asyncRenderFail\n      \"\n    >\n      <c8y-type-dashboard-info\n        [context]=\"context\"\n        [asyncRenderSuccess]=\"asyncRenderSuccess\"\n        [asyncRenderFail]=\"asyncRenderFail\"\n      ></c8y-type-dashboard-info>\n    </div>\n\n    <c8y-ui-empty-state\n      [icon]=\"'search'\"\n      [title]=\"'No matching dashboards.' | translate\"\n      [subtitle]=\"'Refine your search terms' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n      <c8y-column name=\"icon\">\n        <ng-container *c8yCellRendererDef=\"let context\">\n          <i [c8yIcon]=\"context.value\"></i>\n        </ng-container>\n      </c8y-column>\n\n      <c8y-column name=\"deviceTypeValue\">\n        <ng-container *c8yCellRendererDef=\"let context\">\n          <span class=\"label label-info\">\n            {{ context.value }}\n          </span>\n        </ng-container>\n      </c8y-column>\n\n      <c8y-column [name]=\"column.name\"></c8y-column>\n    </ng-container>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.CellRendererDefDirective, selector: "[c8yCellRendererDef]" }, { kind: "directive", type: i3.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i3.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: i3.ExpandableRowDirective, selector: "[c8yExpandableRow]" }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "context", "asyncRenderSuccess", "asyncRenderFail"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeDashboardsListComponent, selector: "c8y-dashboard-manager", ngImport: i0, template: "<c8y-title>\n  {{ 'Dashboard manager' | translate }}\n</c8y-title>\n\n<div class=\"content-fullpage d-flex d-col border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"title\"\n    [loadMoreItemsLabel]=\"loadMoreItemsLabel\"\n    [loadingItemsLabel]=\"loadingItemsLabel\"\n    [columns]=\"columns\"\n    [pagination]=\"pagination\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n    [infiniteScroll]=\"'auto'\"\n    [actionControls]=\"actionControls\"\n    [showSearch]=\"true\"\n    [displayOptions]=\"displayOptions\"\n    [refresh]=\"refresh\"\n    [expandableRows]=\"'ASYNC'\"\n  >\n    <div\n      *c8yExpandableRow=\"\n        let context;\n        let asyncRenderSuccess = asyncRenderSuccess;\n        let asyncRenderFail = asyncRenderFail\n      \"\n    >\n      <c8y-type-dashboard-info\n        [context]=\"context\"\n        [asyncRenderSuccess]=\"asyncRenderSuccess\"\n        [asyncRenderFail]=\"asyncRenderFail\"\n      ></c8y-type-dashboard-info>\n    </div>\n\n    <c8y-ui-empty-state\n      [icon]=\"'search'\"\n      [title]=\"'No matching dashboards.' | translate\"\n      [subtitle]=\"'Refine your search terms' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\">\n      <c8y-column name=\"icon\">\n        <ng-container *c8yCellRendererDef=\"let context\">\n          <i [c8yIcon]=\"context.value\"></i>\n        </ng-container>\n      </c8y-column>\n\n      <c8y-column name=\"deviceTypeValue\">\n        <ng-container *c8yCellRendererDef=\"let context\">\n          <span class=\"label label-info\">\n            {{ context.value }}\n          </span>\n        </ng-container>\n      </c8y-column>\n\n      <c8y-column [name]=\"column.name\"></c8y-column>\n    </ng-container>\n  </c8y-data-grid>\n</div>\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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.CellRendererDefDirective, selector: "[c8yCellRendererDef]" }, { kind: "directive", type: i2.ColumnDirective, selector: "c8y-column", inputs: ["name"] }, { kind: "component", type: i2.DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "columns", "rows", "pagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: i2.ExpandableRowDirective, selector: "[c8yExpandableRow]" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "context", "asyncRenderSuccess", "asyncRenderFail"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeDashboardsListComponent, decorators: [{
             type: Component,