@c8y/ngx-components 1024.10.8 → 1024.14.0

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, NgModule } from '@angular/core';
-import { hookRoute, ViewContext } from '@c8y/ngx-components';
+import { hookRoute, runGuardsOnParamsOrReloadChange, ViewContext } from '@c8y/ngx-components';
 import * as i1 from '@c8y/ngx-components/context-dashboard';
 import { ContextDashboardType, ContextDashboardModule, ContextDashboardComponent } from '@c8y/ngx-components/context-dashboard';
 
@@ -14,18 +14,18 @@ class AssetDashboardGuard {
             ContextDashboardType.Type
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AssetDashboardGuard, deps: [{ token: i1.ContextDashboardService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AssetDashboardGuard, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AssetDashboardGuard, deps: [{ token: i1.ContextDashboardService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AssetDashboardGuard, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AssetDashboardGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AssetDashboardGuard, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.ContextDashboardService }] });
 
 class ViewAssetContextDashboardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ViewAssetContextDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ViewAssetContextDashboardModule, imports: [ContextDashboardModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ViewAssetContextDashboardModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ViewAssetContextDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ViewAssetContextDashboardModule, imports: [ContextDashboardModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ViewAssetContextDashboardModule, providers: [
             hookRoute([
                 {
                     path: 'dashboard/:dashboardId',
@@ -33,12 +33,13 @@ class ViewAssetContextDashboardModule {
                     canActivate: [AssetDashboardGuard],
                     canDeactivate: [(component) => component?.canDeactivate() ?? true],
                     context: ViewContext.Group,
-                    rootContext: ViewContext.Dashboard
+                    rootContext: ViewContext.Dashboard,
+                    runGuardsAndResolvers: runGuardsOnParamsOrReloadChange
                 }
             ])
         ], imports: [ContextDashboardModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ViewAssetContextDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ViewAssetContextDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ContextDashboardModule],
@@ -50,7 +51,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                                 canActivate: [AssetDashboardGuard],
                                 canDeactivate: [(component) => component?.canDeactivate() ?? true],
                                 context: ViewContext.Group,
-                                rootContext: ViewContext.Dashboard
+                                rootContext: ViewContext.Dashboard,
+                                runGuardsAndResolvers: runGuardsOnParamsOrReloadChange
                             }
                         ])
                     ]

package/fesm2022/c8y-ngx-components-context-dashboard-asset-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-context-dashboard-asset-view.mjs","sources":["../../context-dashboard/asset/view/asset-dashboard.guard.ts","../../context-dashboard/asset/view/view-asset-context-dashboard.module.ts","../../context-dashboard/asset/view/c8y-ngx-components-context-dashboard-asset-view.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { ActivatedRouteSnapshot } from '@angular/router';\nimport { Observable } from 'rxjs';\nimport { Tab } from '@c8y/ngx-components';\nimport {\n  ContextDashboardType,\n  ContextDashboardService\n} from '@c8y/ngx-components/context-dashboard';\n\n@Injectable({ providedIn: 'root' })\nexport class AssetDashboardGuard {\n  constructor(private contextDashboardService: ContextDashboardService) {}\n\n  canActivate(route: ActivatedRouteSnapshot): Observable<boolean | Tab[]> {\n    return this.contextDashboardService.activateDashboards(route, [\n      ContextDashboardType.Group,\n      ContextDashboardType.Type\n    ]);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { hookRoute, ViewContext } from '@c8y/ngx-components';\nimport {\n  ContextDashboardModule,\n  ContextDashboardComponent,\n  CanDeactivateComponent\n} from '@c8y/ngx-components/context-dashboard';\nimport { AssetDashboardGuard } from './asset-dashboard.guard';\n\n@NgModule({\n  imports: [ContextDashboardModule],\n  providers: [\n    hookRoute([\n      {\n        path: 'dashboard/:dashboardId',\n        component: ContextDashboardComponent,\n        canActivate: [AssetDashboardGuard],\n        canDeactivate: [(component: CanDeactivateComponent) => component?.canDeactivate() ?? true],\n        context: ViewContext.Group,\n        rootContext: ViewContext.Dashboard\n      }\n    ])\n  ]\n})\nexport class ViewAssetContextDashboardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAUa,mBAAmB,CAAA;AAC9B,IAAA,WAAA,CAAoB,uBAAgD,EAAA;QAAhD,IAAA,CAAA,uBAAuB,GAAvB,uBAAuB;IAA4B;AAEvE,IAAA,WAAW,CAAC,KAA6B,EAAA;AACvC,QAAA,OAAO,IAAI,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,KAAK,EAAE;AAC5D,YAAA,oBAAoB,CAAC,KAAK;AAC1B,YAAA,oBAAoB,CAAC;AACtB,SAAA,CAAC;IACJ;+GARW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,cADN,MAAM,EAAA,CAAA,CAAA;;4FACnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAD/B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;MCerB,+BAA+B,CAAA;+GAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAA/B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,+BAA+B,YAdhC,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAcrB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,+BAA+B,EAAA,SAAA,EAb/B;AACT,YAAA,SAAS,CAAC;AACR,gBAAA;AACE,oBAAA,IAAI,EAAE,wBAAwB;AAC9B,oBAAA,SAAS,EAAE,yBAAyB;oBACpC,WAAW,EAAE,CAAC,mBAAmB,CAAC;AAClC,oBAAA,aAAa,EAAE,CAAC,CAAC,SAAiC,KAAK,SAAS,EAAE,aAAa,EAAE,IAAI,IAAI,CAAC;oBAC1F,OAAO,EAAE,WAAW,CAAC,KAAK;oBAC1B,WAAW,EAAE,WAAW,CAAC;AAC1B;aACF;AACF,SAAA,EAAA,OAAA,EAAA,CAZS,sBAAsB,CAAA,EAAA,CAAA,CAAA;;4FAcrB,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAf3C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,SAAS,EAAE;AACT,wBAAA,SAAS,CAAC;AACR,4BAAA;AACE,gCAAA,IAAI,EAAE,wBAAwB;AAC9B,gCAAA,SAAS,EAAE,yBAAyB;gCACpC,WAAW,EAAE,CAAC,mBAAmB,CAAC;AAClC,gCAAA,aAAa,EAAE,CAAC,CAAC,SAAiC,KAAK,SAAS,EAAE,aAAa,EAAE,IAAI,IAAI,CAAC;gCAC1F,OAAO,EAAE,WAAW,CAAC,KAAK;gCAC1B,WAAW,EAAE,WAAW,CAAC;AAC1B;yBACF;AACF;AACF,iBAAA;;;ACvBD;;AAEG;;;;"}
+{"version":3,"file":"c8y-ngx-components-context-dashboard-asset-view.mjs","sources":["../../context-dashboard/asset/view/asset-dashboard.guard.ts","../../context-dashboard/asset/view/view-asset-context-dashboard.module.ts","../../context-dashboard/asset/view/c8y-ngx-components-context-dashboard-asset-view.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { ActivatedRouteSnapshot } from '@angular/router';\nimport { Observable } from 'rxjs';\nimport { Tab } from '@c8y/ngx-components';\nimport {\n  ContextDashboardType,\n  ContextDashboardService\n} from '@c8y/ngx-components/context-dashboard';\n\n@Injectable({ providedIn: 'root' })\nexport class AssetDashboardGuard {\n  constructor(private contextDashboardService: ContextDashboardService) {}\n\n  canActivate(route: ActivatedRouteSnapshot): Observable<boolean | Tab[]> {\n    return this.contextDashboardService.activateDashboards(route, [\n      ContextDashboardType.Group,\n      ContextDashboardType.Type\n    ]);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { hookRoute, runGuardsOnParamsOrReloadChange, ViewContext } from '@c8y/ngx-components';\nimport {\n  ContextDashboardModule,\n  ContextDashboardComponent,\n  CanDeactivateComponent\n} from '@c8y/ngx-components/context-dashboard';\nimport { AssetDashboardGuard } from './asset-dashboard.guard';\n\n@NgModule({\n  imports: [ContextDashboardModule],\n  providers: [\n    hookRoute([\n      {\n        path: 'dashboard/:dashboardId',\n        component: ContextDashboardComponent,\n        canActivate: [AssetDashboardGuard],\n        canDeactivate: [(component: CanDeactivateComponent) => component?.canDeactivate() ?? true],\n        context: ViewContext.Group,\n        rootContext: ViewContext.Dashboard,\n        runGuardsAndResolvers: runGuardsOnParamsOrReloadChange\n      }\n    ])\n  ]\n})\nexport class ViewAssetContextDashboardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAUa,mBAAmB,CAAA;AAC9B,IAAA,WAAA,CAAoB,uBAAgD,EAAA;QAAhD,IAAA,CAAA,uBAAuB,GAAvB,uBAAuB;IAA4B;AAEvE,IAAA,WAAW,CAAC,KAA6B,EAAA;AACvC,QAAA,OAAO,IAAI,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,KAAK,EAAE;AAC5D,YAAA,oBAAoB,CAAC,KAAK;AAC1B,YAAA,oBAAoB,CAAC;AACtB,SAAA,CAAC;IACJ;+GARW,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,cADN,MAAM,EAAA,CAAA,CAAA;;4FACnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAD/B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;MCgBrB,+BAA+B,CAAA;+GAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAA/B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,+BAA+B,YAfhC,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAerB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,+BAA+B,EAAA,SAAA,EAd/B;AACT,YAAA,SAAS,CAAC;AACR,gBAAA;AACE,oBAAA,IAAI,EAAE,wBAAwB;AAC9B,oBAAA,SAAS,EAAE,yBAAyB;oBACpC,WAAW,EAAE,CAAC,mBAAmB,CAAC;AAClC,oBAAA,aAAa,EAAE,CAAC,CAAC,SAAiC,KAAK,SAAS,EAAE,aAAa,EAAE,IAAI,IAAI,CAAC;oBAC1F,OAAO,EAAE,WAAW,CAAC,KAAK;oBAC1B,WAAW,EAAE,WAAW,CAAC,SAAS;AAClC,oBAAA,qBAAqB,EAAE;AACxB;aACF;AACF,SAAA,EAAA,OAAA,EAAA,CAbS,sBAAsB,CAAA,EAAA,CAAA,CAAA;;4FAerB,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAhB3C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,SAAS,EAAE;AACT,wBAAA,SAAS,CAAC;AACR,4BAAA;AACE,gCAAA,IAAI,EAAE,wBAAwB;AAC9B,gCAAA,SAAS,EAAE,yBAAyB;gCACpC,WAAW,EAAE,CAAC,mBAAmB,CAAC;AAClC,gCAAA,aAAa,EAAE,CAAC,CAAC,SAAiC,KAAK,SAAS,EAAE,aAAa,EAAE,IAAI,IAAI,CAAC;gCAC1F,OAAO,EAAE,WAAW,CAAC,KAAK;gCAC1B,WAAW,EAAE,WAAW,CAAC,SAAS;AAClC,gCAAA,qBAAqB,EAAE;AACxB;yBACF;AACF;AACF,iBAAA;;;ACxBD;;AAEG;;;;"}

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

@@ -112,10 +112,10 @@ class CockpitDashboardComponent {
             this.pageTitle = config.pageTitle;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitDashboardComponent, deps: [{ token: i1.AppStateService }, { token: COCKPIT_HOME_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: CockpitDashboardComponent, isStandalone: true, 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: "ngmodule", type: CoreModule }, { kind: "component", type: i1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "ngmodule", type: ContextDashboardModule }, { kind: "component", type: i2.ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "translateDashboardTitle", "hideAvailability", "disabled"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitDashboardComponent, deps: [{ token: i1.AppStateService }, { token: COCKPIT_HOME_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: CockpitDashboardComponent, isStandalone: true, 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: "ngmodule", type: CoreModule }, { kind: "component", type: i1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "ngmodule", type: ContextDashboardModule }, { kind: "component", type: i2.ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "translateDashboardTitle", "hideAvailability", "disabled"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-cockpit-dashboard', standalone: true, imports: [CoreModule, ContextDashboardModule], 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: i1.AppStateService }, { type: undefined, decorators: [{
@@ -129,9 +129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class CockpitHomeDashboardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitHomeDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: CockpitHomeDashboardModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitHomeDashboardModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitHomeDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: CockpitHomeDashboardModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitHomeDashboardModule, providers: [
             hookNavigator({
                 label: gettext('Home'),
                 icon: 'home',
@@ -147,7 +147,7 @@ class CockpitHomeDashboardModule {
             })
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitHomeDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitHomeDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -179,11 +179,11 @@ class CockpitDashboardModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: CockpitDashboardModule, imports: [CockpitHomeDashboardModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitDashboardModule, imports: [CockpitHomeDashboardModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: CockpitDashboardModule, imports: [CockpitHomeDashboardModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitDashboardModule, imports: [CockpitHomeDashboardModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CockpitDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CockpitDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CockpitHomeDashboardModule]

package/fesm2022/{c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DVP1ld4m.mjs → c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-ly9fklRG.mjs}

@@ -87,10 +87,10 @@ class DashboardAppearanceSettingsComponent {
             this.styling.headerClass = this.contextDashboardService.getStyling(WIDGET_HEADER_CLASSES, styleName, this.styling.headerClass);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardAppearanceSettingsComponent, deps: [{ token: ContextDashboardService }, { token: DashboardDetailService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DashboardAppearanceSettingsComponent, isStandalone: true, selector: "c8y-dashboard-appearance-settings", ngImport: i0, template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <div class=\"row\">\n    <div class=\"col-md-8\">\n      <div data-cy=\"c8y-dashboard-layout-picker\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>{{ 'Layout' | translate }}</legend>\n          <div class=\"d-col gap-8\">\n            <label\n              class=\"c8y-radio a-i-start\"\n              title=\"{{ 'Grid' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"grid\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'th'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Grid' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Widgets snap to a fixed grid. Resize and reposition them freely.' | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n            <label\n              class=\"c8y-radio a-i-start m-b-8\"\n              title=\"{{ 'Responsive' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"custom\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'cogs'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Responsive' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Control the number of columns and rows. Optionally scale row height to fit the viewport.'\n                        | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n          </div>\n          <div\n            class=\"collapse\"\n            [isAnimated]=\"true\"\n            [collapse]=\"appearanceSettingsForm.value.layout !== 'custom'\"\n          >\n            <div class=\"p-l-40 d-flex-md row p-t-16\">\n              <div class=\"col-md-6\">\n                <div class=\"input-group\">\n                  <div class=\"input-group-addon\">\n                    <label\n                      class=\"m-0\"\n                      for=\"customColumns\"\n                    >\n                      {{ 'Columns' | translate }}\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Controls how many columns the grid is divided into. More columns allow finer control over widget width and placement.'\n                            | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                  </div>\n                  <c8y-form-group>\n                    <input\n                      class=\"form-control\"\n                      id=\"customColumns\"\n                      type=\"number\"\n                      min=\"1\"\n                      max=\"48\"\n                      formControlName=\"columns\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Free positioning' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"float\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Free positioning' | translate }}\n\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Widgets stay where placed. Empty space is not filled automatically.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </span>\n                </label>\n              </div>\n            </div>\n            <div class=\"p-l-40 d-flex-md row p-t-24\">\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Fit rows to viewport' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"alignViewHeight\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Fit rows to viewport' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Row height scales so all rows fill the screen. Enables percentage-based widget heights.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button\n                  ></span>\n                </label>\n              </div>\n              <div class=\"col-md-6\">\n                @if (appearanceSettingsForm.value.alignViewHeight) {\n                  <div class=\"input-group\">\n                    <div class=\"input-group-addon\">\n                      <label\n                        class=\"m-0\"\n                        for=\"customRows\"\n                      >\n                        {{ 'Rows' | translate }}\n                        <button\n                          class=\"btn-help btn-help--sm\"\n                          [attr.aria-label]=\"'Help' | translate\"\n                          popover=\"{{\n                            'Defines how many rows divide the viewport height. More rows allow finer control over widget height. Also enables the height preset menu on each widget.'\n                              | translate\n                          }}\"\n                          placement=\"right\"\n                          triggers=\"focus\"\n                          container=\"body\"\n                          type=\"button\"\n                        ></button>\n                      </label>\n                    </div>\n                    <c8y-form-group>\n                      <input\n                        class=\"form-control\"\n                        id=\"customRows\"\n                        type=\"number\"\n                        min=\"1\"\n                        max=\"48\"\n                        formControlName=\"rows\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <c8y-form-group class=\"p-t-16 separator-top m-t-24\">\n            <label for=\"widgetGap\">{{ 'Widget gap' | translate }}</label>\n            <div class=\"input-group col-xs-3 p-l-0\">\n              <input\n                class=\"form-control\"\n                id=\"widgetGap\"\n                placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                name=\"widgetGap\"\n                type=\"number\"\n                min=\"0\"\n                max=\"50\"\n                formControlName=\"widgetMargin\"\n              />\n              <span class=\"input-group-addon\">px</span>\n            </div>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>\n            <span>{{ 'Translations' | translate }}</span>\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </legend>\n          <c8y-form-group class=\"d-flex-md gap-16\">\n            <label\n              class=\"c8y-checkbox\"\n              title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n            >\n              <input\n                name=\"translateDashboardTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateDashboardTitle\"\n              />\n              <span></span>\n              <span>{{ 'Dashboard title' | translate }}</span>\n            </label>\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              title=\"{{ 'Translate widget titles if possible' | translate }}\"\n            >\n              <input\n                name=\"translateWidgetTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateWidgetTitle\"\n              />\n              <span></span>\n              <span>{{ 'Widget titles' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </div>\n    </div>\n\n    <div class=\"col-md-4\">\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]=\"1\"\n      >\n      </c8y-appearance-settings>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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", "onChange"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardAppearanceSettingsComponent, deps: [{ token: ContextDashboardService }, { token: DashboardDetailService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DashboardAppearanceSettingsComponent, isStandalone: true, selector: "c8y-dashboard-appearance-settings", ngImport: i0, template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <div class=\"row\">\n    <div class=\"col-md-8\">\n      <div data-cy=\"c8y-dashboard-layout-picker\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>{{ 'Layout' | translate }}</legend>\n          <div class=\"d-col gap-8\">\n            <label\n              class=\"c8y-radio a-i-start\"\n              title=\"{{ 'Grid' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"grid\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'th'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Grid' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Widgets snap to a fixed grid. Resize and reposition them freely.' | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n            <label\n              class=\"c8y-radio a-i-start m-b-8\"\n              title=\"{{ 'Responsive' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"custom\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'cogs'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Responsive' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Control the number of columns and rows. Optionally scale row height to fit the viewport.'\n                        | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n          </div>\n          <div\n            class=\"collapse\"\n            [isAnimated]=\"true\"\n            [collapse]=\"appearanceSettingsForm.value.layout !== 'custom'\"\n          >\n            <div class=\"p-l-40 d-flex-md row p-t-16\">\n              <div class=\"col-md-6\">\n                <div class=\"input-group\">\n                  <div class=\"input-group-addon\">\n                    <label\n                      class=\"m-0\"\n                      for=\"customColumns\"\n                    >\n                      {{ 'Columns' | translate }}\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Controls how many columns the grid is divided into. More columns allow finer control over widget width and placement.'\n                            | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                  </div>\n                  <c8y-form-group>\n                    <input\n                      class=\"form-control\"\n                      id=\"customColumns\"\n                      type=\"number\"\n                      min=\"1\"\n                      max=\"48\"\n                      formControlName=\"columns\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Free positioning' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"float\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Free positioning' | translate }}\n\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Widgets stay where placed. Empty space is not filled automatically.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </span>\n                </label>\n              </div>\n            </div>\n            <div class=\"p-l-40 d-flex-md row p-t-24\">\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Fit rows to viewport' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"alignViewHeight\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Fit rows to viewport' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Row height scales so all rows fill the screen. Enables percentage-based widget heights.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button\n                  ></span>\n                </label>\n              </div>\n              <div class=\"col-md-6\">\n                @if (appearanceSettingsForm.value.alignViewHeight) {\n                  <div class=\"input-group\">\n                    <div class=\"input-group-addon\">\n                      <label\n                        class=\"m-0\"\n                        for=\"customRows\"\n                      >\n                        {{ 'Rows' | translate }}\n                        <button\n                          class=\"btn-help btn-help--sm\"\n                          [attr.aria-label]=\"'Help' | translate\"\n                          popover=\"{{\n                            'Defines how many rows divide the viewport height. More rows allow finer control over widget height. Also enables the height preset menu on each widget.'\n                              | translate\n                          }}\"\n                          placement=\"right\"\n                          triggers=\"focus\"\n                          container=\"body\"\n                          type=\"button\"\n                        ></button>\n                      </label>\n                    </div>\n                    <c8y-form-group>\n                      <input\n                        class=\"form-control\"\n                        id=\"customRows\"\n                        type=\"number\"\n                        min=\"1\"\n                        max=\"48\"\n                        formControlName=\"rows\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <c8y-form-group class=\"p-t-16 separator-top m-t-24\">\n            <label for=\"widgetGap\">{{ 'Widget gap' | translate }}</label>\n            <div class=\"input-group col-xs-3 p-l-0\">\n              <input\n                class=\"form-control\"\n                id=\"widgetGap\"\n                placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                name=\"widgetGap\"\n                type=\"number\"\n                min=\"0\"\n                max=\"50\"\n                formControlName=\"widgetMargin\"\n              />\n              <span class=\"input-group-addon\">px</span>\n            </div>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>\n            <span>{{ 'Translations' | translate }}</span>\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </legend>\n          <c8y-form-group class=\"d-flex-md gap-16\">\n            <label\n              class=\"c8y-checkbox\"\n              title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n            >\n              <input\n                name=\"translateDashboardTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateDashboardTitle\"\n              />\n              <span></span>\n              <span>{{ 'Dashboard title' | translate }}</span>\n            </label>\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              title=\"{{ 'Translate widget titles if possible' | translate }}\"\n            >\n              <input\n                name=\"translateWidgetTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateWidgetTitle\"\n              />\n              <span></span>\n              <span>{{ 'Widget titles' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </div>\n    </div>\n\n    <div class=\"col-md-4\">\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]=\"1\"\n      >\n      </c8y-appearance-settings>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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", "onChange"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardAppearanceSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardAppearanceSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-appearance-settings', imports: [
                         ReactiveFormsModule,
@@ -105,4 +105,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], ctorParameters: () => [{ type: ContextDashboardService }, { type: DashboardDetailService }, { type: i0.DestroyRef }] });
 
 export { DashboardAppearanceSettingsComponent };
-//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DVP1ld4m.mjs.map
+//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-ly9fklRG.mjs.map

package/fesm2022/{c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DVP1ld4m.mjs.map → c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-ly9fklRG.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DVP1ld4m.mjs","sources":["../../context-dashboard/dashboard-settings/dashboard-appearance-settings.component.ts","../../context-dashboard/dashboard-settings/dashboard-appearance-settings.component.html"],"sourcesContent":["import { Component, DestroyRef, OnInit } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ContextDashboard,\n  DASHBOARD_THEME_CLASSES,\n  WIDGET_HEADER_CLASSES\n} from '../context-dashboard.model';\nimport { ContextDashboardService } from '../context-dashboard.service';\nimport { DashboardDetailService } from '../dashboard-detail.service';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  FormGroupComponent,\n  IconDirective\n} from '@c8y/ngx-components';\nimport { AppearanceSettingsComponent } from '../widget-config/appearance-settings.component';\nimport { PopoverDirective } from 'ngx-bootstrap/popover';\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\n\n@Component({\n  selector: 'c8y-dashboard-appearance-settings',\n  templateUrl: './dashboard-appearance-settings.component.html',\n  imports: [\n    ReactiveFormsModule,\n    AppearanceSettingsComponent,\n    C8yTranslatePipe,\n    C8yTranslateDirective,\n    FormGroupComponent,\n    IconDirective,\n    PopoverDirective,\n    CollapseModule\n  ]\n})\nexport class DashboardAppearanceSettingsComponent implements OnInit {\n  dashboard: ContextDashboard;\n  appearanceSettingsForm: DashboardDetailService['appearanceSettingsForm'];\n  styling = {\n    themeClass: 'dashboard-theme-light',\n    headerClass: 'panel-title-regular'\n  };\n\n  readonly DEFAULT_DASHBOARD_MARGIN = 12;\n  readonly DEFAULT_DASHBOARD_ROWS = 24;\n\n  constructor(\n    private contextDashboardService: ContextDashboardService,\n    private dashboardDetailService: DashboardDetailService,\n    private destroyRef: DestroyRef\n  ) {}\n\n  ngOnInit() {\n    this.dashboard = this.dashboardDetailService.details.dashboard;\n    this.appearanceSettingsForm = this.dashboardDetailService.appearanceSettingsForm;\n    if (this.dashboard) {\n      this.setDashboardStyle();\n    }\n    this.syncRowsControlState();\n  }\n\n  changeThemeClass(themeClass: string) {\n    this.styling.themeClass = themeClass;\n    this.appearanceSettingsForm.get('classes').setValue({ [this.styling.themeClass]: true });\n    this.dashboardDetailService.previewChangedFn({ classes: { [this.styling.themeClass]: true } });\n    this.appearanceSettingsForm.markAsDirty();\n  }\n\n  changeHeaderClass(headerClass: string) {\n    this.styling.headerClass = headerClass;\n    this.appearanceSettingsForm.get('widgetClasses').setValue({ [this.styling.headerClass]: true });\n    this.dashboardDetailService.previewChangedFn({\n      widgetClasses: { [this.styling.headerClass]: true }\n    });\n    this.appearanceSettingsForm.markAsDirty();\n  }\n\n  private syncRowsControlState() {\n    if (!this.appearanceSettingsForm) {\n      return;\n    }\n    const alignViewHeightControl = this.appearanceSettingsForm.get('alignViewHeight');\n    const layoutControl = this.appearanceSettingsForm.get('layout');\n    if (!this.appearanceSettingsForm.get('rows') || !alignViewHeightControl || !layoutControl) {\n      return;\n    }\n\n    this.syncRowsControl();\n    alignViewHeightControl.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.syncRowsControl());\n    layoutControl.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.syncRowsControl());\n  }\n\n  private syncRowsControl() {\n    const rowsControl = this.appearanceSettingsForm?.get('rows');\n    const layout = this.appearanceSettingsForm?.get('layout')?.value;\n    const alignViewHeight = this.appearanceSettingsForm?.get('alignViewHeight')?.value;\n    const active = layout === 'custom' && !!alignViewHeight;\n\n    if (active) {\n      if (rowsControl.value == null) {\n        rowsControl.setValue(this.DEFAULT_DASHBOARD_ROWS, { emitEvent: false });\n      }\n      rowsControl.enable({ emitEvent: false });\n    } else {\n      rowsControl.setValue(null, { emitEvent: false });\n      rowsControl.disable({ emitEvent: false });\n    }\n  }\n\n  private setDashboardStyle() {\n    const allClasses = {\n      ...this.appearanceSettingsForm?.get('classes')?.value,\n      ...this.appearanceSettingsForm?.get('widgetClasses')?.value\n    };\n\n    const styles = Object.keys(allClasses).map(c => c.split('-').pop());\n    styles.forEach(styleName => {\n      this.styling.themeClass = this.contextDashboardService.getStyling(\n        DASHBOARD_THEME_CLASSES,\n        styleName,\n        this.styling.themeClass\n      );\n      this.styling.headerClass = this.contextDashboardService.getStyling(\n        WIDGET_HEADER_CLASSES,\n        styleName,\n        this.styling.headerClass\n      );\n    });\n  }\n}\n","<div [formGroup]=\"appearanceSettingsForm\">\n  <div class=\"row\">\n    <div class=\"col-md-8\">\n      <div data-cy=\"c8y-dashboard-layout-picker\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>{{ 'Layout' | translate }}</legend>\n          <div class=\"d-col gap-8\">\n            <label\n              class=\"c8y-radio a-i-start\"\n              title=\"{{ 'Grid' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"grid\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'th'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Grid' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Widgets snap to a fixed grid. Resize and reposition them freely.' | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n            <label\n              class=\"c8y-radio a-i-start m-b-8\"\n              title=\"{{ 'Responsive' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"custom\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'cogs'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Responsive' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Control the number of columns and rows. Optionally scale row height to fit the viewport.'\n                        | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n          </div>\n          <div\n            class=\"collapse\"\n            [isAnimated]=\"true\"\n            [collapse]=\"appearanceSettingsForm.value.layout !== 'custom'\"\n          >\n            <div class=\"p-l-40 d-flex-md row p-t-16\">\n              <div class=\"col-md-6\">\n                <div class=\"input-group\">\n                  <div class=\"input-group-addon\">\n                    <label\n                      class=\"m-0\"\n                      for=\"customColumns\"\n                    >\n                      {{ 'Columns' | translate }}\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Controls how many columns the grid is divided into. More columns allow finer control over widget width and placement.'\n                            | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                  </div>\n                  <c8y-form-group>\n                    <input\n                      class=\"form-control\"\n                      id=\"customColumns\"\n                      type=\"number\"\n                      min=\"1\"\n                      max=\"48\"\n                      formControlName=\"columns\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Free positioning' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"float\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Free positioning' | translate }}\n\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Widgets stay where placed. Empty space is not filled automatically.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </span>\n                </label>\n              </div>\n            </div>\n            <div class=\"p-l-40 d-flex-md row p-t-24\">\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Fit rows to viewport' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"alignViewHeight\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Fit rows to viewport' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Row height scales so all rows fill the screen. Enables percentage-based widget heights.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button\n                  ></span>\n                </label>\n              </div>\n              <div class=\"col-md-6\">\n                @if (appearanceSettingsForm.value.alignViewHeight) {\n                  <div class=\"input-group\">\n                    <div class=\"input-group-addon\">\n                      <label\n                        class=\"m-0\"\n                        for=\"customRows\"\n                      >\n                        {{ 'Rows' | translate }}\n                        <button\n                          class=\"btn-help btn-help--sm\"\n                          [attr.aria-label]=\"'Help' | translate\"\n                          popover=\"{{\n                            'Defines how many rows divide the viewport height. More rows allow finer control over widget height. Also enables the height preset menu on each widget.'\n                              | translate\n                          }}\"\n                          placement=\"right\"\n                          triggers=\"focus\"\n                          container=\"body\"\n                          type=\"button\"\n                        ></button>\n                      </label>\n                    </div>\n                    <c8y-form-group>\n                      <input\n                        class=\"form-control\"\n                        id=\"customRows\"\n                        type=\"number\"\n                        min=\"1\"\n                        max=\"48\"\n                        formControlName=\"rows\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <c8y-form-group class=\"p-t-16 separator-top m-t-24\">\n            <label for=\"widgetGap\">{{ 'Widget gap' | translate }}</label>\n            <div class=\"input-group col-xs-3 p-l-0\">\n              <input\n                class=\"form-control\"\n                id=\"widgetGap\"\n                placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                name=\"widgetGap\"\n                type=\"number\"\n                min=\"0\"\n                max=\"50\"\n                formControlName=\"widgetMargin\"\n              />\n              <span class=\"input-group-addon\">px</span>\n            </div>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>\n            <span>{{ 'Translations' | translate }}</span>\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </legend>\n          <c8y-form-group class=\"d-flex-md gap-16\">\n            <label\n              class=\"c8y-checkbox\"\n              title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n            >\n              <input\n                name=\"translateDashboardTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateDashboardTitle\"\n              />\n              <span></span>\n              <span>{{ 'Dashboard title' | translate }}</span>\n            </label>\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              title=\"{{ 'Translate widget titles if possible' | translate }}\"\n            >\n              <input\n                name=\"translateWidgetTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateWidgetTitle\"\n              />\n              <span></span>\n              <span>{{ 'Widget titles' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </div>\n    </div>\n\n    <div class=\"col-md-4\">\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]=\"1\"\n      >\n      </c8y-appearance-settings>\n    </div>\n  </div>\n</div>\n"],"names":["i1.ContextDashboardService","i2.DashboardDetailService"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-ly9fklRG.mjs","sources":["../../context-dashboard/dashboard-settings/dashboard-appearance-settings.component.ts","../../context-dashboard/dashboard-settings/dashboard-appearance-settings.component.html"],"sourcesContent":["import { Component, DestroyRef, OnInit } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ContextDashboard,\n  DASHBOARD_THEME_CLASSES,\n  WIDGET_HEADER_CLASSES\n} from '../context-dashboard.model';\nimport { ContextDashboardService } from '../context-dashboard.service';\nimport { DashboardDetailService } from '../dashboard-detail.service';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport {\n  C8yTranslateDirective,\n  C8yTranslatePipe,\n  FormGroupComponent,\n  IconDirective\n} from '@c8y/ngx-components';\nimport { AppearanceSettingsComponent } from '../widget-config/appearance-settings.component';\nimport { PopoverDirective } from 'ngx-bootstrap/popover';\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\n\n@Component({\n  selector: 'c8y-dashboard-appearance-settings',\n  templateUrl: './dashboard-appearance-settings.component.html',\n  imports: [\n    ReactiveFormsModule,\n    AppearanceSettingsComponent,\n    C8yTranslatePipe,\n    C8yTranslateDirective,\n    FormGroupComponent,\n    IconDirective,\n    PopoverDirective,\n    CollapseModule\n  ]\n})\nexport class DashboardAppearanceSettingsComponent implements OnInit {\n  dashboard: ContextDashboard;\n  appearanceSettingsForm: DashboardDetailService['appearanceSettingsForm'];\n  styling = {\n    themeClass: 'dashboard-theme-light',\n    headerClass: 'panel-title-regular'\n  };\n\n  readonly DEFAULT_DASHBOARD_MARGIN = 12;\n  readonly DEFAULT_DASHBOARD_ROWS = 24;\n\n  constructor(\n    private contextDashboardService: ContextDashboardService,\n    private dashboardDetailService: DashboardDetailService,\n    private destroyRef: DestroyRef\n  ) {}\n\n  ngOnInit() {\n    this.dashboard = this.dashboardDetailService.details.dashboard;\n    this.appearanceSettingsForm = this.dashboardDetailService.appearanceSettingsForm;\n    if (this.dashboard) {\n      this.setDashboardStyle();\n    }\n    this.syncRowsControlState();\n  }\n\n  changeThemeClass(themeClass: string) {\n    this.styling.themeClass = themeClass;\n    this.appearanceSettingsForm.get('classes').setValue({ [this.styling.themeClass]: true });\n    this.dashboardDetailService.previewChangedFn({ classes: { [this.styling.themeClass]: true } });\n    this.appearanceSettingsForm.markAsDirty();\n  }\n\n  changeHeaderClass(headerClass: string) {\n    this.styling.headerClass = headerClass;\n    this.appearanceSettingsForm.get('widgetClasses').setValue({ [this.styling.headerClass]: true });\n    this.dashboardDetailService.previewChangedFn({\n      widgetClasses: { [this.styling.headerClass]: true }\n    });\n    this.appearanceSettingsForm.markAsDirty();\n  }\n\n  private syncRowsControlState() {\n    if (!this.appearanceSettingsForm) {\n      return;\n    }\n    const alignViewHeightControl = this.appearanceSettingsForm.get('alignViewHeight');\n    const layoutControl = this.appearanceSettingsForm.get('layout');\n    if (!this.appearanceSettingsForm.get('rows') || !alignViewHeightControl || !layoutControl) {\n      return;\n    }\n\n    this.syncRowsControl();\n    alignViewHeightControl.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.syncRowsControl());\n    layoutControl.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.syncRowsControl());\n  }\n\n  private syncRowsControl() {\n    const rowsControl = this.appearanceSettingsForm?.get('rows');\n    const layout = this.appearanceSettingsForm?.get('layout')?.value;\n    const alignViewHeight = this.appearanceSettingsForm?.get('alignViewHeight')?.value;\n    const active = layout === 'custom' && !!alignViewHeight;\n\n    if (active) {\n      if (rowsControl.value == null) {\n        rowsControl.setValue(this.DEFAULT_DASHBOARD_ROWS, { emitEvent: false });\n      }\n      rowsControl.enable({ emitEvent: false });\n    } else {\n      rowsControl.setValue(null, { emitEvent: false });\n      rowsControl.disable({ emitEvent: false });\n    }\n  }\n\n  private setDashboardStyle() {\n    const allClasses = {\n      ...this.appearanceSettingsForm?.get('classes')?.value,\n      ...this.appearanceSettingsForm?.get('widgetClasses')?.value\n    };\n\n    const styles = Object.keys(allClasses).map(c => c.split('-').pop());\n    styles.forEach(styleName => {\n      this.styling.themeClass = this.contextDashboardService.getStyling(\n        DASHBOARD_THEME_CLASSES,\n        styleName,\n        this.styling.themeClass\n      );\n      this.styling.headerClass = this.contextDashboardService.getStyling(\n        WIDGET_HEADER_CLASSES,\n        styleName,\n        this.styling.headerClass\n      );\n    });\n  }\n}\n","<div [formGroup]=\"appearanceSettingsForm\">\n  <div class=\"row\">\n    <div class=\"col-md-8\">\n      <div data-cy=\"c8y-dashboard-layout-picker\">\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>{{ 'Layout' | translate }}</legend>\n          <div class=\"d-col gap-8\">\n            <label\n              class=\"c8y-radio a-i-start\"\n              title=\"{{ 'Grid' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"grid\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'th'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Grid' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Widgets snap to a fixed grid. Resize and reposition them freely.' | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n            <label\n              class=\"c8y-radio a-i-start m-b-8\"\n              title=\"{{ 'Responsive' | translate }}\"\n              data-cy=\"c8y-dashboard-layout-picker--layout-option\"\n            >\n              <input\n                type=\"radio\"\n                value=\"custom\"\n                formControlName=\"layout\"\n              />\n              <span></span>\n              <span class=\"d-flex a-i-start gap-4\">\n                <i\n                  [c8yIcon]=\"'cogs'\"\n                  aria-hidden=\"true\"\n                ></i>\n                <span class=\"d-col\">\n                  <span>{{ 'Responsive' | translate }}</span>\n                  <small class=\"text-muted\">\n                    {{\n                      'Control the number of columns and rows. Optionally scale row height to fit the viewport.'\n                        | translate\n                    }}\n                  </small>\n                </span>\n              </span>\n            </label>\n          </div>\n          <div\n            class=\"collapse\"\n            [isAnimated]=\"true\"\n            [collapse]=\"appearanceSettingsForm.value.layout !== 'custom'\"\n          >\n            <div class=\"p-l-40 d-flex-md row p-t-16\">\n              <div class=\"col-md-6\">\n                <div class=\"input-group\">\n                  <div class=\"input-group-addon\">\n                    <label\n                      class=\"m-0\"\n                      for=\"customColumns\"\n                    >\n                      {{ 'Columns' | translate }}\n                      <button\n                        class=\"btn-help btn-help--sm\"\n                        [attr.aria-label]=\"'Help' | translate\"\n                        popover=\"{{\n                          'Controls how many columns the grid is divided into. More columns allow finer control over widget width and placement.'\n                            | translate\n                        }}\"\n                        placement=\"right\"\n                        triggers=\"focus\"\n                        container=\"body\"\n                        type=\"button\"\n                      ></button>\n                    </label>\n                  </div>\n                  <c8y-form-group>\n                    <input\n                      class=\"form-control\"\n                      id=\"customColumns\"\n                      type=\"number\"\n                      min=\"1\"\n                      max=\"48\"\n                      formControlName=\"columns\"\n                    />\n                  </c8y-form-group>\n                </div>\n              </div>\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Free positioning' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"float\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Free positioning' | translate }}\n\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Widgets stay where placed. Empty space is not filled automatically.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button>\n                  </span>\n                </label>\n              </div>\n            </div>\n            <div class=\"p-l-40 d-flex-md row p-t-24\">\n              <div class=\"col-md-6\">\n                <label\n                  class=\"c8y-switch\"\n                  title=\"{{ 'Fit rows to viewport' | translate }}\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    formControlName=\"alignViewHeight\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Fit rows to viewport' | translate }}\n                    <button\n                      class=\"btn-help btn-help--sm\"\n                      [attr.aria-label]=\"'Help' | translate\"\n                      popover=\"{{\n                        'Row height scales so all rows fill the screen. Enables percentage-based widget heights.'\n                          | translate\n                      }}\"\n                      placement=\"right\"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                    ></button\n                  ></span>\n                </label>\n              </div>\n              <div class=\"col-md-6\">\n                @if (appearanceSettingsForm.value.alignViewHeight) {\n                  <div class=\"input-group\">\n                    <div class=\"input-group-addon\">\n                      <label\n                        class=\"m-0\"\n                        for=\"customRows\"\n                      >\n                        {{ 'Rows' | translate }}\n                        <button\n                          class=\"btn-help btn-help--sm\"\n                          [attr.aria-label]=\"'Help' | translate\"\n                          popover=\"{{\n                            'Defines how many rows divide the viewport height. More rows allow finer control over widget height. Also enables the height preset menu on each widget.'\n                              | translate\n                          }}\"\n                          placement=\"right\"\n                          triggers=\"focus\"\n                          container=\"body\"\n                          type=\"button\"\n                        ></button>\n                      </label>\n                    </div>\n                    <c8y-form-group>\n                      <input\n                        class=\"form-control\"\n                        id=\"customRows\"\n                        type=\"number\"\n                        min=\"1\"\n                        max=\"48\"\n                        formControlName=\"rows\"\n                      />\n                    </c8y-form-group>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <c8y-form-group class=\"p-t-16 separator-top m-t-24\">\n            <label for=\"widgetGap\">{{ 'Widget gap' | translate }}</label>\n            <div class=\"input-group col-xs-3 p-l-0\">\n              <input\n                class=\"form-control\"\n                id=\"widgetGap\"\n                placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n                name=\"widgetGap\"\n                type=\"number\"\n                min=\"0\"\n                max=\"50\"\n                formControlName=\"widgetMargin\"\n              />\n              <span class=\"input-group-addon\">px</span>\n            </div>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n          <legend>\n            <span>{{ 'Translations' | translate }}</span>\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              container=\"body\"\n              type=\"button\"\n            ></button>\n          </legend>\n          <c8y-form-group class=\"d-flex-md gap-16\">\n            <label\n              class=\"c8y-checkbox\"\n              title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n            >\n              <input\n                name=\"translateDashboardTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateDashboardTitle\"\n              />\n              <span></span>\n              <span>{{ 'Dashboard title' | translate }}</span>\n            </label>\n            <label\n              class=\"c8y-checkbox m-t-0\"\n              title=\"{{ 'Translate widget titles if possible' | translate }}\"\n            >\n              <input\n                name=\"translateWidgetTitle\"\n                type=\"checkbox\"\n                formControlName=\"translateWidgetTitle\"\n              />\n              <span></span>\n              <span>{{ 'Widget titles' | translate }}</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </div>\n    </div>\n\n    <div class=\"col-md-4\">\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]=\"1\"\n      >\n      </c8y-appearance-settings>\n    </div>\n  </div>\n</div>\n"],"names":["i1.ContextDashboardService","i2.DashboardDetailService"],"mappings":"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"}

package/fesm2022/{c8y-ngx-components-context-dashboard-dashboard-general-settings.component-B8yNG85v.mjs → c8y-ngx-components-context-dashboard-dashboard-general-settings.component-DA9DFUIL.mjs}

@@ -92,10 +92,10 @@ class DashboardAvailabilityComponent {
             .map(globalRoleId => this.globalRolesItems.find(gR => gR.id === globalRoleId))
             .filter(Boolean);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardAvailabilityComponent, deps: [{ token: i1.UserGroupService }, { token: i2.GainsightService }, { token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: DashboardAvailabilityComponent, isStandalone: true, 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardAvailabilityComponent, deps: [{ token: i1.UserGroupService }, { token: i2.GainsightService }, { token: i2.Permissions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: DashboardAvailabilityComponent, isStandalone: true, 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$1.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.SelectLegacyComponent, selector: "c8y-select-legacy", inputs: ["placeholder", "selectedLabel", "applyLabel", "items", "selected", "updateItems", "disableApplyOnNoSelection", "addDropdownContainerToBody"], outputs: ["onChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardAvailabilityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardAvailabilityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-availability', standalone: true, imports: [C8yTranslatePipe, ReactiveFormsModule, PopoverModule, FormsModule, NgIf, SelectModule], 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.UserGroupService }, { type: i2.GainsightService }, { type: i2.Permissions }], propDecorators: { globalRolesIds: [{
@@ -202,8 +202,8 @@ class TypedDashboardSettingsComponent {
         });
         this.deviceTypeInstancesCount = count.data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TypedDashboardSettingsComponent, deps: [{ token: i1.InventoryService }, { token: i2.InterAppService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TypedDashboardSettingsComponent, isStandalone: true, selector: "c8y-typed-dashboard-settings", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", formInvalid: "formInvalid", mo: "mo", isDevice: "isDevice", allowTypeDashboard: "allowTypeDashboard" }, outputs: { onDuplicateWithoutType: "onDuplicateWithoutType" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TypedDashboardSettingsComponent, deps: [{ token: i1.InventoryService }, { token: i2.InterAppService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: TypedDashboardSettingsComponent, isStandalone: true, 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),
@@ -211,7 +211,7 @@ class TypedDashboardSettingsComponent {
             }
         ], 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      c8yProductExperience\n      [actionName]=\"PRODUCT_EXPERIENCE.DASHBOARD.EVENTS.DASHBOARD_TEMPLATE\"\n      [actionData]=\"{\n        component: PRODUCT_EXPERIENCE.DASHBOARD.COMPONENTS.TYPED_DASHBOARD_SETTINGS,\n        action: PRODUCT_EXPERIENCE.DASHBOARD.ACTIONS.DUPLICATE_AS_REGULAR_DASHBOARD\n      }\"\n      (click)=\"onDuplicateWithoutType.emit()\"\n      [disabled]=\"formInvalid\"\n    >\n      {{ 'Duplicate as regular dashboard' | translate }}\n    </button>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: TypeDashboardInfoComponent, selector: "c8y-type-dashboard-info", inputs: ["deviceTypeValue", "displayDeviceTypeValue", "context", "asyncRenderSuccess", "asyncRenderFail"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.HumanizeAppNamePipe, name: "humanizeAppName" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TypedDashboardSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TypedDashboardSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-typed-dashboard-settings', providers: [
                         {
@@ -257,10 +257,10 @@ class DashboardGeneralSettingsComponent {
     async duplicateWithoutType() {
         await this.dashboardDetailService.duplicateWithoutTypeFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardGeneralSettingsComponent, deps: [{ token: i2.NavigatorService }, { token: DashboardDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DashboardGeneralSettingsComponent, isStandalone: true, selector: "c8y-dashboard-general-settings", ngImport: i0, template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  @if (!isNamedDashboard || isReport) {\n    <div\n      class=\"col-xs-12 p-b-24\"\n      [class.col-md-6]=\"!isReport\"\n      [class.col-md-8]=\"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          @if (!isReport) {\n            <div class=\"col-lg-7 col-xs-12\">\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\n          @if (isReport) {\n            <div class=\"col-xs-6\">\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\n          @if (isReport && generalSettingsForm.value.c8y_IsNavigatorNode) {\n            <div class=\"col-xs-6\">\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                      {{ positionInTabsExampleLabel | translate }}&nbsp;\n                      {{ 'Existing nodes:' | translate }}\n                    </span>\n                    <ul class=\"list-unstyled m-t-16 m-b-0\">\n                      @for (node of navigatorNodes$ | async; track node.label) {\n                        <li\n                          class=\"p-t-4 p-b-4\"\n                          title=\"{{ node.label | translate }}\"\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                      }\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          }\n        </div>\n      </fieldset>\n      @if (\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.get('deviceType') &&\n        !hideAvailability\n      ) {\n        <c8y-dashboard-availability\n          [(globalRolesIds)]=\"globalRolesIds\"\n          (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n        ></c8y-dashboard-availability>\n      }\n    </div>\n  }\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    @if (allowTypeDashboard !== 'disallow') {\n      <c8y-typed-dashboard-settings\n        formControlName=\"deviceType\"\n        [deviceTypeValue]=\"deviceTypeValue\"\n        [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n        [formInvalid]=\"generalSettingsForm.invalid\"\n        [mo]=\"mo\"\n        [isDevice]=\"isDevice\"\n        [allowTypeDashboard]=\"allowTypeDashboard\"\n        (onDuplicateWithoutType)=\"duplicateWithoutType()\"\n      ></c8y-typed-dashboard-settings>\n    }\n    @if (\n      !!isReport === false &&\n      (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.get('deviceType')) &&\n      !hideAvailability\n    ) {\n      <c8y-dashboard-availability\n        [(globalRolesIds)]=\"globalRolesIds\"\n        (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n      ></c8y-dashboard-availability>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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],[formArray],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: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i4.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$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: 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: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardGeneralSettingsComponent, deps: [{ token: i2.NavigatorService }, { token: DashboardDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DashboardGeneralSettingsComponent, isStandalone: true, selector: "c8y-dashboard-general-settings", ngImport: i0, template: "<div\n  class=\"row\"\n  [formGroup]=\"generalSettingsForm\"\n>\n  @if (!isNamedDashboard || isReport) {\n    <div\n      class=\"col-xs-12 p-b-24\"\n      [class.col-md-6]=\"!isReport\"\n      [class.col-md-8]=\"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          @if (!isReport) {\n            <div class=\"col-lg-7 col-xs-12\">\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\n          @if (isReport) {\n            <div class=\"col-xs-6\">\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\n          @if (isReport && generalSettingsForm.value.c8y_IsNavigatorNode) {\n            <div class=\"col-xs-6\">\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                      {{ positionInTabsExampleLabel | translate }}&nbsp;\n                      {{ 'Existing nodes:' | translate }}\n                    </span>\n                    <ul class=\"list-unstyled m-t-16 m-b-0\">\n                      @for (node of navigatorNodes$ | async; track node.label) {\n                        <li\n                          class=\"p-t-4 p-b-4\"\n                          title=\"{{ node.label | translate }}\"\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                      }\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          }\n        </div>\n      </fieldset>\n      @if (\n        !!isReport === false &&\n        allowTypeDashboard &&\n        deviceTypeValue &&\n        generalSettingsForm.get('deviceType') &&\n        !hideAvailability\n      ) {\n        <c8y-dashboard-availability\n          [(globalRolesIds)]=\"globalRolesIds\"\n          (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n        ></c8y-dashboard-availability>\n      }\n    </div>\n  }\n\n  <div class=\"col-xs-12 col-md-6 p-b-24\">\n    @if (allowTypeDashboard !== 'disallow') {\n      <c8y-typed-dashboard-settings\n        formControlName=\"deviceType\"\n        [deviceTypeValue]=\"deviceTypeValue\"\n        [displayDeviceTypeValue]=\"displayDeviceTypeValue\"\n        [formInvalid]=\"generalSettingsForm.invalid\"\n        [mo]=\"mo\"\n        [isDevice]=\"isDevice\"\n        [allowTypeDashboard]=\"allowTypeDashboard\"\n        (onDuplicateWithoutType)=\"duplicateWithoutType()\"\n      ></c8y-typed-dashboard-settings>\n    }\n    @if (\n      !!isReport === false &&\n      (!allowTypeDashboard || !deviceTypeValue || !generalSettingsForm.get('deviceType')) &&\n      !hideAvailability\n    ) {\n      <c8y-dashboard-availability\n        [(globalRolesIds)]=\"globalRolesIds\"\n        (globalRolesIdsChange)=\"changeGlobalRoleIds()\"\n      ></c8y-dashboard-availability>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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],[formArray],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: "ngmodule", type: IconSelectorModule }, { kind: "component", type: i4.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$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: 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: i5.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DashboardGeneralSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DashboardGeneralSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-general-settings', standalone: true, imports: [
                         CoreModule,
@@ -273,4 +273,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], ctorParameters: () => [{ type: i2.NavigatorService }, { type: DashboardDetailService }] });
 
 export { DashboardGeneralSettingsComponent };
-//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-general-settings.component-B8yNG85v.mjs.map
+//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-general-settings.component-DA9DFUIL.mjs.map