@c8y/ngx-components 1023.59.1 → 1023.61.0

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, TemplateRef, ViewChild, Optional, Inject, HostListener, input, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, signal, DestroyRef, TemplateRef, ViewChild, Optional, Inject, HostListener, input, HostBinding, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
 import { IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, C8yTranslateDirective, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, WIDGET_CONFIGURATION_GRID_SIZE, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, ResizableGridComponent, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, PreviewService, hookNavigator } from '@c8y/ngx-components';
 import * as i1 from '@angular/router';
 import { RouterOutlet, ActivatedRoute, RouterModule } from '@angular/router';
-import { of, Subject, from, combineLatest, map as map$1, BehaviorSubject, tap as tap$1, withLatestFrom, mergeMap as mergeMap$1, shareReplay as shareReplay$1, merge, scan, debounceTime, isObservable, iif, timer, filter as filter$1, switchMap as switchMap$1, take } from 'rxjs';
+import { of, Subject, from, combineLatest, map as map$1, merge, BehaviorSubject, tap as tap$1, withLatestFrom, mergeMap as mergeMap$1, shareReplay as shareReplay$1, scan, debounceTime, isObservable, iif, timer, filter as filter$1, switchMap as switchMap$1, take } from 'rxjs';
 import { gettext } from '@c8y/ngx-components/gettext';
 import { __decorate, __metadata } from 'tslib';
 import * as i3 from '@angular/common';
@@ -24,10 +24,10 @@ import * as i2$3 from 'ngx-bootstrap/collapse';
 import { CollapseDirective, CollapseModule } from 'ngx-bootstrap/collapse';
 import * as i1$2 from '@c8y/ngx-components/assets-navigator';
 import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { IconSelectorModule } from '@c8y/ngx-components/icon-selector';
 import * as i1$3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
 import { GlobalContextWidgetWrapperComponent, ConfigModeControlsComponent } from '@c8y/ngx-components/global-context';
 
@@ -58,10 +58,10 @@ class NewDashboardGuard {
         }
         return of([this.tab]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewDashboardGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewDashboardGuard, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NewDashboardGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NewDashboardGuard, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NewDashboardGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NewDashboardGuard, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -82,10 +82,10 @@ class AddDashboardComponent {
         tempNewDashboardTab.priority = Infinity;
         this.tabsService.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddDashboardComponent, deps: [{ token: i2.TabsService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AddDashboardComponent, isStandalone: true, selector: "[c8y-add-dashboard]", host: { classAttribute: "d-flex a-i-stretch sticky-right" }, ngImport: i0, template: "<div class=\"d-flex a-i-stretch m-b-8 m-t-8 p-l-8 hidden-xs\">\n  <button\n    class=\"btn btn-default btn-sm p-l-8 p-r-8 fit-h p-b-0 p-t-0 d-flex a-i-center\"\n    title=\"{{ 'Add dashboard' | translate }}\"\n    type=\"button\"\n    (click)=\"addDashboard()\"\n  >\n    <i\n      class=\"icon-20 m-r-4\"\n      c8yIcon=\"add-circle-outline\"\n    ></i>\n    <span>{{ 'Add dashboard' | translate }}</span>\n  </button>\n  <div class=\"p-r-sm-40\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AddDashboardComponent, deps: [{ token: i2.TabsService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AddDashboardComponent, isStandalone: true, selector: "[c8y-add-dashboard]", host: { classAttribute: "d-flex a-i-stretch sticky-right" }, ngImport: i0, template: "<div class=\"d-flex a-i-stretch m-b-8 m-t-8 p-l-8 hidden-xs\">\n  <button\n    class=\"btn btn-default btn-sm p-l-8 p-r-8 fit-h p-b-0 p-t-0 d-flex a-i-center\"\n    title=\"{{ 'Add dashboard' | translate }}\"\n    type=\"button\"\n    (click)=\"addDashboard()\"\n  >\n    <i\n      class=\"icon-20 m-r-4\"\n      c8yIcon=\"add-circle-outline\"\n    ></i>\n    <span>{{ 'Add dashboard' | translate }}</span>\n  </button>\n  <div class=\"p-r-sm-40\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AddDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AddDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: '[c8y-add-dashboard]', host: { class: 'd-flex a-i-stretch sticky-right' }, imports: [IconDirective, C8yTranslatePipe], template: "<div class=\"d-flex a-i-stretch m-b-8 m-t-8 p-l-8 hidden-xs\">\n  <button\n    class=\"btn btn-default btn-sm p-l-8 p-r-8 fit-h p-b-0 p-t-0 d-flex a-i-center\"\n    title=\"{{ 'Add dashboard' | translate }}\"\n    type=\"button\"\n    (click)=\"addDashboard()\"\n  >\n    <i\n      class=\"icon-20 m-r-4\"\n      c8yIcon=\"add-circle-outline\"\n    ></i>\n    <span>{{ 'Add dashboard' | translate }}</span>\n  </button>\n  <div class=\"p-r-sm-40\"></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2.TabsService }, { type: i1.Router }] });
@@ -1002,10 +1002,10 @@ class ContextDashboardService {
         });
         return dashboards;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardService, deps: [{ token: i1$1.InventoryService }, { token: i2.TabsService }, { token: i2.ModalService }, { token: i2$1.TranslateService }, { token: i1.Router }, { token: i2.NavigatorService }, { token: i2.Permissions }, { token: i2.AlertService }, { token: i2.DynamicComponentService }, { token: i2.GroupService }, { token: i2.OptionsService }, { token: i2.AppStateService }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardService, deps: [{ token: i1$1.InventoryService }, { token: i2.TabsService }, { token: i2.ModalService }, { token: i2$1.TranslateService }, { token: i1.Router }, { token: i2.NavigatorService }, { token: i2.Permissions }, { token: i2.AlertService }, { token: i2.DynamicComponentService }, { token: i2.GroupService }, { token: i2.OptionsService }, { token: i2.AppStateService }, { token: i2.ContextRouteService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.TabsService }, { type: i2.ModalService }, { type: i2$1.TranslateService }, { type: i1.Router }, { type: i2.NavigatorService }, { type: i2.Permissions }, { type: i2.AlertService }, { type: i2.DynamicComponentService }, { type: i2.GroupService }, { type: i2.OptionsService }, { type: i2.AppStateService }, { type: i2.ContextRouteService }] });
@@ -1153,10 +1153,10 @@ class DashboardDetailService {
             children: dashboard?.children || {}
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailService, deps: [{ token: i5.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.TabsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailService, deps: [{ token: i5.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.TabsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i5.FormBuilder }, { type: i2$1.TranslateService }, { type: i2.TabsService }] });
 
@@ -1535,8 +1535,8 @@ class DashboardDetailComponent {
         this.dashboardDetailService.revertToDashboardFn = dashboard => this.revertDashboard(dashboard);
         this.tabs = this.dashboardDetailService.getTabs();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: ContextDashboardService }, { token: i2$1.TranslateService }, { token: i2.ContextRouteService }, { token: i1.ActivatedRoute }, { token: i2.TabsService }, { token: i1.Router }, { token: i1$1.InventoryService }, { token: i1.ActivatedRoute }, { token: DashboardDetailService }, { token: i2.AppStateService }, { token: i2.GroupService }, { token: i2.ModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DashboardDetailComponent, isStandalone: true, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: ContextDashboardService }, { token: i2$1.TranslateService }, { token: i2.ContextRouteService }, { token: i1.ActivatedRoute }, { token: i2.TabsService }, { token: i1.Router }, { token: i1$1.InventoryService }, { token: i1.ActivatedRoute }, { token: DashboardDetailService }, { token: i2.AppStateService }, { token: i2.GroupService }, { token: i2.ModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DashboardDetailComponent, isStandalone: true, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     memoize(),
@@ -1544,7 +1544,7 @@ __decorate([
     __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", Promise)
 ], DashboardDetailComponent.prototype, "convertStringToHash", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-detail', providers: [DashboardDetailService], imports: [CollapseDirective, TabsOutletComponent, RouterOutlet, C8yTranslatePipe], template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ContextDashboardService }, { type: i2$1.TranslateService }, { type: i2.ContextRouteService }, { type: i1.ActivatedRoute }, { type: i2.TabsService }, { type: i1.Router }, { type: i1$1.InventoryService }, { type: i1.ActivatedRoute }, { type: DashboardDetailService }, { type: i2.AppStateService }, { type: i2.GroupService }, { type: i2.ModalService }, { type: i2.GainsightService }], propDecorators: { isReport: [{
@@ -1597,10 +1597,10 @@ class DashboardOriginatorService {
     getState() {
         return cloneDeep(this.state);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardOriginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardOriginatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardOriginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardOriginatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardOriginatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardOriginatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1680,10 +1680,10 @@ class DashboardCaretakerService {
         this.originator.initState(initialItem);
         return initialItem;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardCaretakerService, deps: [{ token: DashboardOriginatorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardCaretakerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardCaretakerService, deps: [{ token: DashboardOriginatorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardCaretakerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardCaretakerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardCaretakerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1756,10 +1756,10 @@ class DashboardEditModeService {
     reset() {
         return this.caretaker.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardEditModeService, deps: [{ token: DashboardOriginatorService }, { token: DashboardCaretakerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardEditModeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardEditModeService, deps: [{ token: DashboardOriginatorService }, { token: DashboardCaretakerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardEditModeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardEditModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardEditModeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1823,10 +1823,10 @@ class WidgetConfigSectionService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ], false).pipe(distinctUntilChanged(), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigSectionService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigSectionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigSectionService, deps: [{ token: i0.Injector }, { token: i1.Router }, { token: i2.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigSectionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigSectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigSectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1834,13 +1834,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.Router }, { type: i2.PluginsResolveService }] });
 
 class WidgetConfigSectionComponent {
+    constructor() {
+        this.customValidatorsTouched = signal(false, ...(ngDevMode ? [{ debugName: "customValidatorsTouched" }] : []));
+        this.parentForm = inject(NgForm, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+    }
     setFeedbackTemplate(template) {
         this.feedbackTemplate = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetConfigSectionComponent, isStandalone: true, selector: "c8y-widget-config-section", inputs: { section: "section" }, ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n  </div>\n  <c8y-list-item-collapse>\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n", dependencies: [{ kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    ngOnInit() {
+        this.initializeCustomValidation();
+    }
+    initializeCustomValidation() {
+        const validators = this.section.validators;
+        if (!validators || validators.length === 0) {
+            return;
+        }
+        const form = this.parentForm.form;
+        form.addValidators(validators);
+        const monitoredControlNames = this.extractControlNames(validators);
+        merge(form.valueChanges, form.statusChanges)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            const anyCustomControlsTouched = monitoredControlNames.some(controlName => form.get(controlName).touched);
+            this.customValidatorsTouched.set(anyCustomControlsTouched);
+        });
+    }
+    extractControlNames(validators) {
+        const controlNames = new Set();
+        validators.forEach(validator => {
+            const customControlNames = validator.controlNames;
+            if (customControlNames) {
+                customControlNames.forEach((name) => controlNames.add(name));
+            }
+        });
+        return Array.from(controlNames);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: WidgetConfigSectionComponent, isStandalone: true, selector: "c8y-widget-config-section", inputs: { section: "section" }, ngImport: i0, template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <button\n          class=\"btn-clean\"\n          [tooltip]=\"error.value | translate\"\n          type=\"button\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"status major\"\n            [c8yIcon]=\"'warning'\"\n          ></i>\n        </button>\n      }\n    }\n  </div>\n  <c8y-list-item-collapse>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <div\n          class=\"alert alert-warning m-t-8\"\n          role=\"alert\"\n        >\n          {{ error.value | translate }}\n        </div>\n      }\n    }\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n", dependencies: [{ kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-widget-config-section', standalone: true, imports: [
                         ListGroupModule,
@@ -1848,8 +1881,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IconDirective,
                         NgTemplateOutlet,
                         CommonModule,
-                        C8yTranslatePipe
-                    ], template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n  </div>\n  <c8y-list-item-collapse>\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n" }]
+                        C8yTranslatePipe,
+                        TooltipDirective
+                    ], template: "<c8y-li\n  class=\"c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse\"\n  [collapsed]=\"!section.expanded\"\n  #li\n>\n  <div class=\"d-flex p-r-16 fit-w\">\n    <button\n      class=\"btn-clean flex-no-shrink p-r-8 flex-grow\"\n      type=\"button\"\n      [attr.data-cy]=\"section.label\"\n      (click)=\"li.collapsed = !li.collapsed\"\n    >\n      <i\n        class=\"p-r-4\"\n        [c8yIcon]=\"li.collapsed ? 'chevron-right' : 'chevron-down'\"\n      ></i>\n      <span class=\"text-medium\">\n        {{ section.label | translate }}\n      </span>\n    </button>\n    <ng-container *ngTemplateOutlet=\"feedbackTemplate\"></ng-container>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <button\n          class=\"btn-clean\"\n          [tooltip]=\"error.value | translate\"\n          type=\"button\"\n          [delay]=\"500\"\n        >\n          <i\n            class=\"status major\"\n            [c8yIcon]=\"'warning'\"\n          ></i>\n        </button>\n      }\n    }\n  </div>\n  <c8y-list-item-collapse>\n    @for (error of section.validationErrors | keyvalue; track error.key) {\n      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {\n        <div\n          class=\"alert alert-warning m-t-8\"\n          role=\"alert\"\n        >\n          {{ error.value | translate }}\n        </div>\n      }\n    }\n    <ng-container\n      *c8yComponentOutlet=\"\n        section.component;\n        initialState: section.initialState;\n        environmentInjector: section.injector\n      \"\n    ></ng-container>\n  </c8y-list-item-collapse>\n</c8y-li>\n" }]
         }], propDecorators: { section: [{
                 type: Input
             }] } });
@@ -1861,10 +1895,10 @@ class WidgetConfigFeedbackComponent {
     ngAfterViewInit() {
         this.widgetSection.setFeedbackTemplate(this.template);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetConfigFeedbackComponent, isStandalone: true, selector: "c8y-widget-config-feedback", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: WidgetConfigFeedbackComponent, isStandalone: true, selector: "c8y-widget-config-feedback", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <ng-content></ng-content>\n</ng-template>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigFeedbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigFeedbackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-widget-config-feedback', standalone: true, imports: [WidgetConfigSectionComponent], template: "<ng-template #tpl>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { template: [{
@@ -1952,10 +1986,10 @@ class WidgetAssetSelectorComponent {
     updateConfig(device) {
         this.widgetConfigService.updateConfig({ device });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAssetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WidgetAssetSelectorComponent, isStandalone: true, selector: "c8y-widget-asset-selector", inputs: { isRequired: "isRequired", showUnassigned: "showUnassigned", groupsSelectable: "groupsSelectable", assetSelectorConfig: "assetSelectorConfig", selectedDevice: "selectedDevice" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    @if (widgetConfigService.isDeviceTypeDashboard$ | async) {\n      <div class=\"alert alert-info m-4\">\n        <span translate>\n          This widget is used within a dashboard template, so the asset selector is unavailable. The\n          widget automatically inherits the asset from the context in which the dashboard is\n          displayed.\n        </span>\n\n        @if (!isRequired) {\n          <div class=\"p-t-8\">\n            <p translate>Asset selection is optional for this widget.</p>\n            @if (!selectedDevice) {\n              <button\n                class=\"btn btn-primary btn-sm m-t-8 text-truncate\"\n                (click)=\"selectCurrentContext()\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    (widgetConfigService.currentConfig$ | async)?.settings?.context?.name ||\n                    (deviceWithIdTpl\n                      | translate\n                        : {\n                            id: (widgetConfigService.currentConfig$ | async)?.settings?.context?.id\n                          })\n                }\"\n              >\n                Use context asset \"{{ deviceName }}\"\n              </button>\n            }\n            @if (selectedDevice) {\n              <button\n                class=\"btn btn-default btn-sm m-t-8 text-truncate\"\n                (click)=\"selectedDevice = null; updateConfig(null)\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n                }\"\n              >\n                Use without asset \"{{ deviceName }}\"\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!(widgetConfigService.isDeviceTypeDashboard$ | async) && assetSelectorConfig) {\n      <c8y-asset-selector-miller\n        class=\"d-block bg-inherit p-relative\"\n        name=\"configAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [config]=\"assetSelectorConfig\"\n        [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n        [(ngModel)]=\"selectedDevice\"\n        [required]=\"isRequired\"\n      ></c8y-asset-selector-miller>\n    }\n\n    <c8y-widget-config-feedback>\n      <span\n        class=\"tag chip text-12 m-4\"\n        [ngClass]=\"{\n          'tag--info': selectedDevice || !isRequired,\n          'tag--danger': !selectedDevice && isRequired\n        }\"\n      >\n        @if (\n          selectedDevice &&\n          (!(widgetConfigService.isDeviceTypeDashboard$ | async) ||\n            (!isRequired && (widgetConfigService.isDeviceTypeDashboard$ | async)))\n        ) {\n          <button\n            class=\"btn-clean text-12 m-r-4\"\n            title=\"{{ 'Deselect' | translate }}\"\n            type=\"button\"\n            (click)=\"selectedDevice = null; updateConfig(null)\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        @if (selectedDevice) {\n          <span\n            class=\"text-truncate\"\n            title=\"{{\n              selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n            }}\"\n          >\n            {{ selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id }) }}\n          </span>\n        }\n        @if (!selectedDevice) {\n          <span translate>No asset selected</span>\n        }\n      </span>\n    </c8y-widget-config-feedback>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: i1$2.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetAssetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: WidgetAssetSelectorComponent, isStandalone: true, selector: "c8y-widget-asset-selector", inputs: { isRequired: "isRequired", showUnassigned: "showUnassigned", groupsSelectable: "groupsSelectable", assetSelectorConfig: "assetSelectorConfig", selectedDevice: "selectedDevice" }, host: { classAttribute: "bg-level-1" }, ngImport: i0, template: "<div class=\"card borderless\">\n  <div\n    class=\"card-block p-0 bg-inherit\"\n    style=\"height: 315px\"\n  >\n    @if (widgetConfigService.isDeviceTypeDashboard$ | async) {\n      <div class=\"alert alert-info m-4\">\n        <span translate>\n          This widget is used within a dashboard template, so the asset selector is unavailable. The\n          widget automatically inherits the asset from the context in which the dashboard is\n          displayed.\n        </span>\n\n        @if (!isRequired) {\n          <div class=\"p-t-8\">\n            <p translate>Asset selection is optional for this widget.</p>\n            @if (!selectedDevice) {\n              <button\n                class=\"btn btn-primary btn-sm m-t-8 text-truncate\"\n                (click)=\"selectCurrentContext()\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    (widgetConfigService.currentConfig$ | async)?.settings?.context?.name ||\n                    (deviceWithIdTpl\n                      | translate\n                        : {\n                            id: (widgetConfigService.currentConfig$ | async)?.settings?.context?.id\n                          })\n                }\"\n              >\n                Use context asset \"{{ deviceName }}\"\n              </button>\n            }\n            @if (selectedDevice) {\n              <button\n                class=\"btn btn-default btn-sm m-t-8 text-truncate\"\n                (click)=\"selectedDevice = null; updateConfig(null)\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  deviceName:\n                    selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n                }\"\n              >\n                Use without asset \"{{ deviceName }}\"\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (!(widgetConfigService.isDeviceTypeDashboard$ | async) && assetSelectorConfig) {\n      <c8y-asset-selector-miller\n        class=\"d-block bg-inherit p-relative\"\n        name=\"configAsset\"\n        (onSelected)=\"selectionChanged($event)\"\n        [config]=\"assetSelectorConfig\"\n        [asset]=\"(widgetConfigService.currentConfig$ | async).settings?.context\"\n        [(ngModel)]=\"selectedDevice\"\n        [required]=\"isRequired\"\n      ></c8y-asset-selector-miller>\n    }\n\n    <c8y-widget-config-feedback>\n      <span\n        class=\"tag chip text-12 m-4\"\n        [ngClass]=\"{\n          'tag--info': selectedDevice || !isRequired,\n          'tag--danger': !selectedDevice && isRequired\n        }\"\n      >\n        @if (\n          selectedDevice &&\n          (!(widgetConfigService.isDeviceTypeDashboard$ | async) ||\n            (!isRequired && (widgetConfigService.isDeviceTypeDashboard$ | async)))\n        ) {\n          <button\n            class=\"btn-clean text-12 m-r-4\"\n            title=\"{{ 'Deselect' | translate }}\"\n            type=\"button\"\n            (click)=\"selectedDevice = null; updateConfig(null)\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        @if (selectedDevice) {\n          <span\n            class=\"text-truncate\"\n            title=\"{{\n              selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id })\n            }}\"\n          >\n            {{ selectedDevice.name || (deviceWithIdTpl | translate: { id: selectedDevice.id }) }}\n          </span>\n        }\n        @if (!selectedDevice) {\n          <span translate>No asset selected</span>\n        }\n      </span>\n    </c8y-widget-config-feedback>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AssetSelectorModule }, { kind: "component", type: i1$2.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAssetSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetAssetSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-widget-asset-selector', host: { class: 'bg-level-1' }, standalone: true, imports: [
                         AssetSelectorModule,
@@ -1992,10 +2026,10 @@ class WidgetConfigGeneralComponent {
     ngOnDestroy() {
         this.widgetConfigService.selectedComponent$.next(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigGeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetConfigGeneralComponent, isStandalone: true, selector: "c8y-widget-config-general", inputs: { definition: "definition" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: DynamicComponentComponent, descendants: true }], ngImport: i0, template: "<c8y-dynamic-component\n  class=\"d-block p-l-16 p-r-16\"\n  [componentId]=\"definition.id\"\n  mode=\"config\"\n  [config]=\"widgetConfigService.assignedCurrentConfig$ | async\"\n></c8y-dynamic-component>\n", dependencies: [{ kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigGeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: WidgetConfigGeneralComponent, isStandalone: true, selector: "c8y-widget-config-general", inputs: { definition: "definition" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: DynamicComponentComponent, descendants: true }], ngImport: i0, template: "<c8y-dynamic-component\n  class=\"d-block p-l-16 p-r-16\"\n  [componentId]=\"definition.id\"\n  mode=\"config\"\n  [config]=\"widgetConfigService.assignedCurrentConfig$ | async\"\n></c8y-dynamic-component>\n", dependencies: [{ kind: "ngmodule", type: DynamicComponentModule }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigGeneralComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigGeneralComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [AsyncPipe, DynamicComponentModule], selector: 'c8y-widget-config-general', template: "<c8y-dynamic-component\n  class=\"d-block p-l-16 p-r-16\"\n  [componentId]=\"definition.id\"\n  mode=\"config\"\n  [config]=\"widgetConfigService.assignedCurrentConfig$ | async\"\n></c8y-dynamic-component>\n" }]
         }], propDecorators: { definition: [{
@@ -2073,6 +2107,8 @@ class WidgetConfigService {
                 priority: section.priority || 0,
                 expanded: section.expanded || false,
                 initialState: section.initialState,
+                validators: section.validators || [],
+                validationErrors: section.validationErrors || {},
                 injector: section.injector,
                 providers: Array.isArray(section.providers)
                     ? section.providers
@@ -2281,10 +2317,10 @@ class WidgetConfigService {
         }
         return selectedWidget.configComponent || selectedWidget.loadConfigComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigService, deps: [{ token: WidgetConfigSectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigService, deps: [{ token: WidgetConfigSectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2321,10 +2357,10 @@ class AppearanceSettingsComponent {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppearanceSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppearanceSettingsComponent, isStandalone: true, selector: "c8y-appearance-settings", inputs: { themeClass: "themeClass", headerClass: "headerClass", defaultThemeClass: "defaultThemeClass", defaultHeaderClass: "defaultHeaderClass", dashboardSettings: "dashboardSettings", possibleStylingTheme: "possibleStylingTheme", possibleStylingHeader: "possibleStylingHeader", columns: "columns" }, outputs: { themeClassChange: "themeClassChange", headerClassChange: "headerClassChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">{{ 'Default theme' | translate }}</legend>\n      <legend *ngIf=\"!dashboardSettings\">{{ 'Theme' | translate }}</legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w\"\n          *ngFor=\"let themeClassItem of possibleStylingTheme; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"content\"\n                type=\"radio\"\n                [id]=\"'groupradiocontentclass' + i\"\n                [value]=\"themeClassItem.class\"\n                [ngModel]=\"themeClass\"\n                (click)=\"themeClassClick(themeClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ themeClassItem.label | translate }}{{\n                  themeClassItem.class === defaultThemeClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ themeClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"themeClassItem.class === defaultThemeClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ themeClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">\n        {{ 'Default widget header style' | translate }}\n      </legend>\n      <legend *ngIf=\"!dashboardSettings\">\n        {{ 'Widget header style' | translate }}\n      </legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0\"\n          *ngFor=\"let headerClassItem of possibleStylingHeader; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"header\"\n                type=\"radio\"\n                [id]=\"'groupradioheaderclass' + i\"\n                [value]=\"headerClassItem.class\"\n                [ngModel]=\"headerClass\"\n                (click)=\"headerClassClick(headerClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ headerClassItem.label | translate }}{{\n                  headerClassItem.class === defaultHeaderClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ headerClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"headerClassItem.class === defaultHeaderClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ headerClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AppearanceSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AppearanceSettingsComponent, isStandalone: true, selector: "c8y-appearance-settings", inputs: { themeClass: "themeClass", headerClass: "headerClass", defaultThemeClass: "defaultThemeClass", defaultHeaderClass: "defaultHeaderClass", dashboardSettings: "dashboardSettings", possibleStylingTheme: "possibleStylingTheme", possibleStylingHeader: "possibleStylingHeader", columns: "columns" }, outputs: { themeClassChange: "themeClassChange", headerClassChange: "headerClassChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">{{ 'Default theme' | translate }}</legend>\n      <legend *ngIf=\"!dashboardSettings\">{{ 'Theme' | translate }}</legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w\"\n          *ngFor=\"let themeClassItem of possibleStylingTheme; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"content\"\n                type=\"radio\"\n                [id]=\"'groupradiocontentclass' + i\"\n                [value]=\"themeClassItem.class\"\n                [ngModel]=\"themeClass\"\n                (click)=\"themeClassClick(themeClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ themeClassItem.label | translate }}{{\n                  themeClassItem.class === defaultThemeClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ themeClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"themeClassItem.class === defaultThemeClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ themeClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">\n        {{ 'Default widget header style' | translate }}\n      </legend>\n      <legend *ngIf=\"!dashboardSettings\">\n        {{ 'Widget header style' | translate }}\n      </legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0\"\n          *ngFor=\"let headerClassItem of possibleStylingHeader; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"header\"\n                type=\"radio\"\n                [id]=\"'groupradioheaderclass' + i\"\n                [value]=\"headerClassItem.class\"\n                [ngModel]=\"headerClass\"\n                (click)=\"headerClassClick(headerClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ headerClassItem.label | translate }}{{\n                  headerClassItem.class === defaultHeaderClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ headerClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"headerClassItem.class === defaultHeaderClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ headerClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i2$2.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppearanceSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AppearanceSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-appearance-settings', standalone: true, imports: [NgIf, NgForOf, FormsModule, PopoverModule, C8yTranslatePipe], template: "<div class=\"row\">\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">{{ 'Default theme' | translate }}</legend>\n      <legend *ngIf=\"!dashboardSettings\">{{ 'Theme' | translate }}</legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0 fit-w\"\n          *ngFor=\"let themeClassItem of possibleStylingTheme; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"content\"\n                type=\"radio\"\n                [id]=\"'groupradiocontentclass' + i\"\n                [value]=\"themeClassItem.class\"\n                [ngModel]=\"themeClass\"\n                (click)=\"themeClassClick(themeClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ themeClassItem.label | translate }}{{\n                  themeClassItem.class === defaultThemeClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ themeClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"themeClassItem.class === defaultThemeClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ themeClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <div class=\"col-lg-{{ 12 / columns }} col-xs-12\">\n    <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n      <legend *ngIf=\"dashboardSettings\">\n        {{ 'Default widget header style' | translate }}\n      </legend>\n      <legend *ngIf=\"!dashboardSettings\">\n        {{ 'Widget header style' | translate }}\n      </legend>\n      <ul class=\"list-group\">\n        <li\n          class=\"list-group-item d-flex a-i-center p-l-0 p-r-0\"\n          *ngFor=\"let headerClassItem of possibleStylingHeader; let i = index\"\n        >\n          <div\n            class=\"list-item-checkbox\"\n            style=\"max-width: calc(100% - 24px)\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                name=\"header\"\n                type=\"radio\"\n                [id]=\"'groupradioheaderclass' + i\"\n                [value]=\"headerClassItem.class\"\n                [ngModel]=\"headerClass\"\n                (click)=\"headerClassClick(headerClassItem.class)\"\n              />\n              <span></span>\n              <span\n                class=\"text-truncate\"\n                title=\"{{ headerClassItem.label | translate }}{{\n                  headerClassItem.class === defaultHeaderClass\n                    ? ' | ' + (dashboardDefaultLabel | translate)\n                    : ''\n                }}\"\n              >\n                <span>{{ headerClassItem.label | translate }}</span>\n                <br />\n                <small\n                  class=\"text-muted\"\n                  *ngIf=\"headerClassItem.class === defaultHeaderClass\"\n                >\n                  {{ dashboardDefaultLabel | translate }}\n                </small>\n              </span>\n            </label>\n          </div>\n          <button\n            class=\"btn-help btn-help--sm m-l-auto\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{ headerClassItem.description | translate }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n          ></button>\n        </li>\n      </ul>\n    </fieldset>\n  </div>\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { themeClass: [{
@@ -2355,10 +2391,10 @@ class WidgetConfigRootComponent {
     constructor() {
         this.widgetConfigService = inject(WidgetConfigService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetConfigRootComponent, isStandalone: true, selector: "c8y-widget-config-root", ngImport: i0, template: "<ng-container\n  *ngFor=\"let section of widgetConfigService.currentSections$ | async\"\n>\n  <c8y-widget-config-section [section]=\"section\"></c8y-widget-config-section>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: WidgetConfigSectionComponent, selector: "c8y-widget-config-section", inputs: ["section"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: WidgetConfigRootComponent, isStandalone: true, selector: "c8y-widget-config-root", ngImport: i0, template: "<ng-container\n  *ngFor=\"let section of widgetConfigService.currentSections$ | async\"\n>\n  <c8y-widget-config-section [section]=\"section\"></c8y-widget-config-section>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: WidgetConfigSectionComponent, selector: "c8y-widget-config-section", inputs: ["section"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigRootComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [NgFor, WidgetConfigSectionComponent, AsyncPipe], selector: 'c8y-widget-config-root', template: "<ng-container\n  *ngFor=\"let section of widgetConfigService.currentSections$ | async\"\n>\n  <c8y-widget-config-section [section]=\"section\"></c8y-widget-config-section>\n</ng-container>\n" }]
         }] });
@@ -2375,10 +2411,10 @@ class WidgetPreviewComponent {
     get translateWidgetTitle() {
         return this.widgetConfig?.mo.c8y_Dashboard.translateWidgetTitle ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span>\n          {{\n            (widgetConfigService.selected$ | async)?.data?.title\n              | translate: { noTranslateRemoveContext: !translateWidgetTitle }\n          }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span>\n          {{\n            (widgetConfigService.selected$ | async)?.data?.title\n              | translate: { noTranslateRemoveContext: !translateWidgetTitle }\n          }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-widget-preview', standalone: true, imports: [NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span>\n          {{\n            (widgetConfigService.selected$ | async)?.data?.title\n              | translate: { noTranslateRemoveContext: !translateWidgetTitle }\n          }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n" }]
         }], propDecorators: { previewClasses: [{
@@ -2434,10 +2470,10 @@ class WidgetService {
         }
         return widget;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetService, deps: [{ token: i2.DynamicComponentService }, { token: i2$1.TranslateService }, { token: CONTEXT_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetService, deps: [{ token: i2.DynamicComponentService }, { token: i2$1.TranslateService }, { token: CONTEXT_DASHBOARD_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2691,10 +2727,10 @@ class WidgetConfigComponent {
         }
         return widgetConfig;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }, { token: i2.BottomDrawerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { listeners: { "document:keydown.escape": "onEscapePress($event)" }, classAttribute: "d-contents" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              #searchInput\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        @for (cmp of searchResult || components; track cmp) {\n          <button\n            class=\"btn-clean d-col card m-b-0\"\n            [title]=\"cmp.description || cmp.label | translate\"\n            type=\"button\"\n            data-cy=\"widget-config--widget-list\"\n            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\n            </div>\n            <div class=\"card-block\">\n              <p class=\"card-title text-truncate text-medium\">\n                <c8y-highlight\n                  text=\"{{ cmp.label | translate }}\"\n                  [pattern]=\"searchTerm\"\n                ></c8y-highlight>\n              </p>\n              <p\n                class=\"small text-default\"\n                style=\"white-space: wrap\"\n              >\n                {{ cmp.description | translate }}\n              </p>\n            </div>\n          </button>\n        }\n        @if (searchResult && searchResult.length === 0) {\n          <c8y-ui-empty-state\n            class=\"p-24 grid__col--fullspan\"\n            [icon]=\"'search'\"\n            [title]=\"'No widgets found.' | translate\"\n            [subtitle]=\"'Rephrase your search term.' | translate\"\n          >\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Reset search' | translate }}\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </c8y-ui-empty-state>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n}\n\n<!-- widget configuration -->\n@if (!!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\n        <c8y-ui-empty-state\n          class=\"p-24\"\n          [icon]=\"'settings'\"\n          [title]=\"'No configuration needed.' | translate\"\n          [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\n    <div\n      class=\"inner-scroll p-32 p-t-0\"\n      right-pane\n    >\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </c8y-resizable-grid>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }, { token: i2.BottomDrawerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { listeners: { "document:keydown.escape": "onEscapePress($event)" }, classAttribute: "d-contents" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              #searchInput\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        @for (cmp of searchResult || components; track cmp) {\n          <button\n            class=\"btn-clean d-col card m-b-0\"\n            [title]=\"cmp.description || cmp.label | translate\"\n            type=\"button\"\n            data-cy=\"widget-config--widget-list\"\n            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\n            </div>\n            <div class=\"card-block\">\n              <p class=\"card-title text-truncate text-medium\">\n                <c8y-highlight\n                  text=\"{{ cmp.label | translate }}\"\n                  [pattern]=\"searchTerm\"\n                ></c8y-highlight>\n              </p>\n              <p\n                class=\"small text-default\"\n                style=\"white-space: wrap\"\n              >\n                {{ cmp.description | translate }}\n              </p>\n            </div>\n          </button>\n        }\n        @if (searchResult && searchResult.length === 0) {\n          <c8y-ui-empty-state\n            class=\"p-24 grid__col--fullspan\"\n            [icon]=\"'search'\"\n            [title]=\"'No widgets found.' | translate\"\n            [subtitle]=\"'Rephrase your search term.' | translate\"\n          >\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Reset search' | translate }}\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </c8y-ui-empty-state>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n}\n\n<!-- widget configuration -->\n@if (!!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\n        <c8y-ui-empty-state\n          class=\"p-24\"\n          [icon]=\"'settings'\"\n          [title]=\"'No configuration needed.' | translate\"\n          [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\n    <div\n      class=\"inner-scroll p-32 p-t-0\"\n      right-pane\n    >\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </c8y-resizable-grid>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-widget-config', host: { class: 'd-contents' }, imports: [
                         FormsModule,
@@ -3359,8 +3395,8 @@ class ContextDashboardComponent {
             ? str
             : this.gainsightService.hashGroupName(str);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ContextDashboardService }, { token: i2.AlertService }, { token: i0.Renderer2 }, { token: CONTEXT_DASHBOARD_CONFIG }, { token: WidgetService }, { token: i2.BottomDrawerService }, { token: i2.GainsightService }, { token: i2.ActionBarService }, { token: i2$1.TranslateService }, { token: i2.ModalService }, { token: i0.DestroyRef }, { token: i6.ContextDashboardStateService }, { token: DashboardEditModeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContextDashboardComponent, isStandalone: true, selector: "c8y-context-dashboard", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, childrenClasses: { classPropertyName: "childrenClasses", publicName: "childrenClasses", isSignal: false, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: false, isRequired: false, transformFunction: null }, setTitle: { classPropertyName: "setTitle", publicName: "setTitle", isSignal: false, isRequired: false, transformFunction: null }, defaultWidgets: { classPropertyName: "defaultWidgets", publicName: "defaultWidgets", isSignal: false, isRequired: false, transformFunction: null }, _canCopy: { classPropertyName: "_canCopy", publicName: "canCopy", isSignal: false, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, breadcrumbSettings: { classPropertyName: "breadcrumbSettings", publicName: "breadcrumbSettings", isSignal: false, isRequired: false, transformFunction: null }, showContextHelpButton: { classPropertyName: "showContextHelpButton", publicName: "showContextHelpButton", isSignal: false, isRequired: false, transformFunction: null }, translateWidgetTitle: { classPropertyName: "translateWidgetTitle", publicName: "translateWidgetTitle", isSignal: false, isRequired: false, transformFunction: null }, translateDashboardTitle: { classPropertyName: "translateDashboardTitle", publicName: "translateDashboardTitle", isSignal: false, isRequired: false, transformFunction: null }, hideAvailability: { classPropertyName: "hideAvailability", publicName: "hideAvailability", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" }, properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, viewQueries: [{ propertyName: "dashboardDetails", first: true, predicate: DashboardDetailComponent, descendants: true, static: true }, { propertyName: "widgetsDashboard", first: true, predicate: WidgetsDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "@if (title) {\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n}\n\n@if (dashboard?.deviceType && dashboard.deviceTypeValue) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"10000\"\n  >\n    <button\n      class=\"btn-clean btn-link\"\n      popoverTitle=\"{{ 'Dashboard template' | translate }}\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"dashboardTypePopoverRef\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    >\n      <span class=\"tag tag--info text-12\">\n        <span class=\"dashboard-template-marker\"></span>\n        {{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}\n      </span>\n    </button>\n    <ng-template #dashboardTypePopoverRef>\n      <div\n        [innerHTML]=\"dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }\"\n      ></div>\n    </ng-template>\n  </c8y-action-bar-item>\n}\n\n@if (defaultWidgets.length > 0) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-1\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Reset widgets' | translate }}\"\n      type=\"button\"\n      px-event=\"Reset dashboard\"\n      (click)=\"restore()\"\n      [disabled]=\"disabled || !mo?.id || (widgetsDashboard?.editMode$ | async)\"\n      data-cy=\"context-dashboard--button-reset-dashboard\"\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"reset\"\n      ></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Reset widgets' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (showContextHelpButton) {\n  <c8y-help src=\"/docs/cockpit/working-with-dashboards/#working-with-dashboards\"></c8y-help>\n}\n\n<c8y-dashboard-detail\n  class=\"d-contents\"\n  [isReport]=\"isReport\"\n  [dashboard]=\"dashboard\"\n  [mo]=\"mo\"\n  [context]=\"context\"\n  [deviceType]=\"context?.type\"\n  [hideAvailability]=\"hideAvailability\"\n  [isNamedDashboard]=\"isNamedDashboard\"\n  (dashboardSaved)=\"reloadDashboard($event)\"\n  (previewChanged)=\"dashboardPreview($event)\"\n></c8y-dashboard-detail>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [isCopyDisabled]=\"isCopyDisabled\"\n  [isSaveDisabled]=\"contextDashboardStateService.isSaveDisabled | async\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isDisabled: disabled,\n    canDelete: canDelete && !!dashboard,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    translateDashboardTitle: dashboard?.translateDashboardTitle ?? translateDashboardTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard?.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy && !!dashboard,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  [editModeButtons]=\"{\n    undoButtonDisabled: editModeService.undoButtonDisabled,\n    changeToUndoName: editModeService.changeToUndoName,\n    redoButtonDisabled: !editModeService.redoStackLastItem,\n    changeToRedoName: editModeService.redoStackLastItem?.name\n  }\"\n  (onChangeDashboard)=\"positionOrWidgetDimensionChange($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onSaveDashboard)=\"saveWidgetsToDashboard()\"\n  (onCancelDashboard)=\"cancelEditMode()\"\n  (revertChange)=\"revertChange($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"editDashboard()\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", inputs: ["isReport", "deviceType", "context", "mo", "dashboard", "isNamedDashboard", "hideAvailability"], outputs: ["dashboardSaved", "previewChanged"] }, { kind: "component", type: WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "isCopyDisabled", "breadcrumb", "editModeButtons", "isSaveDisabled"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onResize", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onChangeStart", "onChangeEnd", "onSaveDashboard", "onCancelDashboard", "revertChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: ContextDashboardService }, { token: i2.AlertService }, { token: i0.Renderer2 }, { token: CONTEXT_DASHBOARD_CONFIG }, { token: WidgetService }, { token: i2.BottomDrawerService }, { token: i2.GainsightService }, { token: i2.ActionBarService }, { token: i2$1.TranslateService }, { token: i2.ModalService }, { token: i0.DestroyRef }, { token: i6.ContextDashboardStateService }, { token: DashboardEditModeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ContextDashboardComponent, isStandalone: true, selector: "c8y-context-dashboard", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, childrenClasses: { classPropertyName: "childrenClasses", publicName: "childrenClasses", isSignal: false, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: false, isRequired: false, transformFunction: null }, setTitle: { classPropertyName: "setTitle", publicName: "setTitle", isSignal: false, isRequired: false, transformFunction: null }, defaultWidgets: { classPropertyName: "defaultWidgets", publicName: "defaultWidgets", isSignal: false, isRequired: false, transformFunction: null }, _canCopy: { classPropertyName: "_canCopy", publicName: "canCopy", isSignal: false, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, breadcrumbSettings: { classPropertyName: "breadcrumbSettings", publicName: "breadcrumbSettings", isSignal: false, isRequired: false, transformFunction: null }, showContextHelpButton: { classPropertyName: "showContextHelpButton", publicName: "showContextHelpButton", isSignal: false, isRequired: false, transformFunction: null }, translateWidgetTitle: { classPropertyName: "translateWidgetTitle", publicName: "translateWidgetTitle", isSignal: false, isRequired: false, transformFunction: null }, translateDashboardTitle: { classPropertyName: "translateDashboardTitle", publicName: "translateDashboardTitle", isSignal: false, isRequired: false, transformFunction: null }, hideAvailability: { classPropertyName: "hideAvailability", publicName: "hideAvailability", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" }, properties: { "class": "this.class" }, styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, viewQueries: [{ propertyName: "dashboardDetails", first: true, predicate: DashboardDetailComponent, descendants: true, static: true }, { propertyName: "widgetsDashboard", first: true, predicate: WidgetsDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "@if (title) {\n  <c8y-title>\n    {{ title }}\n  </c8y-title>\n}\n\n@if (dashboard?.deviceType && dashboard.deviceTypeValue) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"10000\"\n  >\n    <button\n      class=\"btn-clean btn-link\"\n      popoverTitle=\"{{ 'Dashboard template' | translate }}\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"dashboardTypePopoverRef\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n    >\n      <span class=\"tag tag--info text-12\">\n        <span class=\"dashboard-template-marker\"></span>\n        {{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}\n      </span>\n    </button>\n    <ng-template #dashboardTypePopoverRef>\n      <div\n        [innerHTML]=\"dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }\"\n      ></div>\n    </ng-template>\n  </c8y-action-bar-item>\n}\n\n@if (defaultWidgets.length > 0) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-1\"\n  >\n    <button\n      class=\"btn btn-link\"\n      title=\"{{ 'Reset widgets' | translate }}\"\n      type=\"button\"\n      px-event=\"Reset dashboard\"\n      (click)=\"restore()\"\n      [disabled]=\"disabled || !mo?.id || (widgetsDashboard?.editMode$ | async)\"\n      data-cy=\"context-dashboard--button-reset-dashboard\"\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"reset\"\n      ></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Reset widgets' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (showContextHelpButton) {\n  <c8y-help src=\"/docs/cockpit/working-with-dashboards/#working-with-dashboards\"></c8y-help>\n}\n\n<c8y-dashboard-detail\n  class=\"d-contents\"\n  [isReport]=\"isReport\"\n  [dashboard]=\"dashboard\"\n  [mo]=\"mo\"\n  [context]=\"context\"\n  [deviceType]=\"context?.type\"\n  [hideAvailability]=\"hideAvailability\"\n  [isNamedDashboard]=\"isNamedDashboard\"\n  (dashboardSaved)=\"reloadDashboard($event)\"\n  (previewChanged)=\"dashboardPreview($event)\"\n></c8y-dashboard-detail>\n\n<c8y-widgets-dashboard\n  [context]=\"context\"\n  [contextDashboard]=\"dashboard\"\n  [widgets]=\"widgets\"\n  [isCopyDisabled]=\"isCopyDisabled\"\n  [isSaveDisabled]=\"contextDashboardStateService.isSaveDisabled | async\"\n  [settings]=\"{\n    isLoading: isLoading,\n    isDisabled: disabled,\n    canDelete: canDelete && !!dashboard,\n    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,\n    translateDashboardTitle: dashboard?.translateDashboardTitle ?? translateDashboardTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard?.name || title : undefined,\n    widgetMargin: dashboard?.widgetMargin,\n    canCopy: canCopy && !!dashboard,\n    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,\n    columns: dashboard?.columns || 12\n  }\"\n  [breadcrumb]=\"breadcrumbSettings\"\n  [editModeButtons]=\"{\n    undoButtonDisabled: editModeService.undoButtonDisabled,\n    changeToUndoName: editModeService.changeToUndoName,\n    redoButtonDisabled: !editModeService.redoStackLastItem,\n    changeToRedoName: editModeService.redoStackLastItem?.name\n  }\"\n  (onChangeDashboard)=\"positionOrWidgetDimensionChange($event)\"\n  (onAddWidget)=\"addWidget()\"\n  (onEditWidget)=\"editWidget($event)\"\n  (onDeleteWidget)=\"deleteWidget($event)\"\n  (onSaveDashboard)=\"saveWidgetsToDashboard()\"\n  (onCancelDashboard)=\"cancelEditMode()\"\n  (revertChange)=\"revertChange($event)\"\n  (onChangeStart)=\"addDashboardClassToBody()\"\n  (onChangeEnd)=\"removeDashboardClassFromBody()\"\n  (onEditDashboard)=\"editDashboard()\"\n  (onCopyDashboard)=\"copyDashboard()\"\n  (onDeleteDashboard)=\"deleteDashboard()\"\n></c8y-widgets-dashboard>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: DashboardDetailComponent, selector: "c8y-dashboard-detail", inputs: ["isReport", "deviceType", "context", "mo", "dashboard", "isNamedDashboard", "hideAvailability"], outputs: ["dashboardSaved", "previewChanged"] }, { kind: "component", type: WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: ["widgets", "context", "contextDashboard", "settings", "isCopyDisabled", "breadcrumb", "editModeButtons", "isSaveDisabled"], outputs: ["onAddWidget", "onEditWidget", "onDeleteWidget", "onChangeDashboard", "onResize", "onEditDashboard", "onCopyDashboard", "onDeleteDashboard", "onChangeStart", "onChangeEnd", "onSaveDashboard", "onCancelDashboard", "revertChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 __decorate([
     memoize(),
@@ -3368,7 +3404,7 @@ __decorate([
     __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", Promise)
 ], ContextDashboardComponent.prototype, "convertStringToHash", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-context-dashboard', host: {
                         style: `
@@ -3484,10 +3520,10 @@ class DashboardDetailsTabsFactory {
         }
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailsTabsFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailsTabsFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailsTabsFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailsTabsFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailsTabsFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DashboardDetailsTabsFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -3551,8 +3587,8 @@ class PasteDashboardActionComponent {
         this.buttonTitle = gettext('Paste dashboard');
         this.pasteDisabled = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PasteDashboardActionComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.Router }, { token: ContextDashboardService }, { token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PasteDashboardActionComponent, isStandalone: true, selector: "c8y-paste-dashboard-action", viewQueries: [{ propertyName: "templatePaste", first: true, predicate: ["templatePaste"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PasteDashboardActionComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1.Router }, { token: ContextDashboardService }, { token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PasteDashboardActionComponent, isStandalone: true, selector: "c8y-paste-dashboard-action", viewQueries: [{ propertyName: "templatePaste", first: true, predicate: ["templatePaste"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
     <ng-template #templatePaste>
       <li>
         <button
@@ -3571,7 +3607,7 @@ class PasteDashboardActionComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PasteDashboardActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PasteDashboardActionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c8y-paste-dashboard-action',
@@ -3621,10 +3657,10 @@ class TypeDashboardInfoComponent {
             this.asyncRenderFail?.();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TypeDashboardInfoComponent, deps: [{ token: i1$1.InventoryService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TypeDashboardInfoComponent, isStandalone: true, selector: "c8y-type-dashboard-info", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", context: "context", asyncRenderSuccess: "asyncRenderSuccess", asyncRenderFail: "asyncRenderFail" }, ngImport: i0, template: "<ul class=\"list-unstyled small animated fadeIn\">\n  <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Target asset model' | translate }}</label>\n    <span class=\"m-l-auto\">\n      <span class=\"label label-info\">\n        {{ displayDeviceTypeValue || context.c8y_Dashboard.deviceTypeValue }}\n      </span>\n    </span>\n  </li>\n  <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Dashboard instances' | translate }}</label>\n    <span class=\"m-l-auto\">{{ deviceTypeInstancesCount }}</span>\n  </li>\n  <ng-container *ngIf=\"context?.c8y_Dashboard\">\n    <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n      <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.creationTime | c8yDate }} {{ 'by`user`' | translate }} {{ context.owner }}\n      </span>\n    </li>\n    <li\n      class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n      *ngIf=\"context?.c8y_DashboardHistory?.length\"\n    >\n      <label class=\"small m-b-0 m-r-8\">{{ 'Last modified' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.c8y_DashboardHistory[0].created | c8yDate }} {{ 'by`user`' | translate }}\n        {{ context.c8y_DashboardHistory[0].author }}\n      </span>\n    </li>\n  </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TypeDashboardInfoComponent, deps: [{ token: i1$1.InventoryService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: TypeDashboardInfoComponent, isStandalone: true, selector: "c8y-type-dashboard-info", inputs: { deviceTypeValue: "deviceTypeValue", displayDeviceTypeValue: "displayDeviceTypeValue", context: "context", asyncRenderSuccess: "asyncRenderSuccess", asyncRenderFail: "asyncRenderFail" }, ngImport: i0, template: "<ul class=\"list-unstyled small animated fadeIn\">\n  <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Target asset model' | translate }}</label>\n    <span class=\"m-l-auto\">\n      <span class=\"label label-info\">\n        {{ displayDeviceTypeValue || context.c8y_Dashboard.deviceTypeValue }}\n      </span>\n    </span>\n  </li>\n  <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Dashboard instances' | translate }}</label>\n    <span class=\"m-l-auto\">{{ deviceTypeInstancesCount }}</span>\n  </li>\n  <ng-container *ngIf=\"context?.c8y_Dashboard\">\n    <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n      <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.creationTime | c8yDate }} {{ 'by`user`' | translate }} {{ context.owner }}\n      </span>\n    </li>\n    <li\n      class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n      *ngIf=\"context?.c8y_DashboardHistory?.length\"\n    >\n      <label class=\"small m-b-0 m-r-8\">{{ 'Last modified' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.c8y_DashboardHistory[0].created | c8yDate }} {{ 'by`user`' | translate }}\n        {{ context.c8y_DashboardHistory[0].author }}\n      </span>\n    </li>\n  </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TypeDashboardInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TypeDashboardInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-type-dashboard-info', standalone: true, imports: [C8yTranslatePipe, DatePipe, NgIf], template: "<ul class=\"list-unstyled small animated fadeIn\">\n  <li class=\"p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Target asset model' | translate }}</label>\n    <span class=\"m-l-auto\">\n      <span class=\"label label-info\">\n        {{ displayDeviceTypeValue || context.c8y_Dashboard.deviceTypeValue }}\n      </span>\n    </span>\n  </li>\n  <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n    <label class=\"small m-b-0 m-r-8\">{{ 'Dashboard instances' | translate }}</label>\n    <span class=\"m-l-auto\">{{ deviceTypeInstancesCount }}</span>\n  </li>\n  <ng-container *ngIf=\"context?.c8y_Dashboard\">\n    <li class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\">\n      <label class=\"small m-b-0 m-r-8\">{{ 'Created' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.creationTime | c8yDate }} {{ 'by`user`' | translate }} {{ context.owner }}\n      </span>\n    </li>\n    <li\n      class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n      *ngIf=\"context?.c8y_DashboardHistory?.length\"\n    >\n      <label class=\"small m-b-0 m-r-8\">{{ 'Last modified' | translate }}</label>\n      <span class=\"m-l-auto\">\n        {{ context.c8y_DashboardHistory[0].created | c8yDate }} {{ 'by`user`' | translate }}\n        {{ context.c8y_DashboardHistory[0].author }}\n      </span>\n    </li>\n  </ng-container>\n</ul>\n" }]
         }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: i2.AlertService }], propDecorators: { deviceTypeValue: [{
@@ -3650,10 +3686,10 @@ class WidgetPreviewWrapperComponent {
         }
         this.widgetConfigService.setPreview(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetPreviewWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetPreviewWrapperComponent, isStandalone: true, selector: "c8y-widget-preview-wrapper", viewQueries: [{ propertyName: "previewSet", first: true, predicate: ["previewContent"], descendants: true }], ngImport: i0, template: '<ng-template #previewContent><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetPreviewWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: WidgetPreviewWrapperComponent, isStandalone: true, selector: "c8y-widget-preview-wrapper", viewQueries: [{ propertyName: "previewSet", first: true, predicate: ["previewContent"], descendants: true }], ngImport: i0, template: '<ng-template #previewContent><ng-content></ng-content></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetPreviewWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetPreviewWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'c8y-widget-preview-wrapper',
@@ -3689,8 +3725,8 @@ class ContextDashboardModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardModule, imports: [CoreModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardModule, imports: [CoreModule,
             TooltipModule,
             PopoverModule,
             AssetSelectorModule,
@@ -3711,7 +3747,7 @@ class ContextDashboardModule {
             WidgetConfigSectionComponent,
             AppearanceSettingsComponent,
             WidgetPreviewWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardModule, providers: [
             {
                 provide: CONTEXT_DASHBOARD_CONFIG,
                 useValue: defaultConfig
@@ -3720,19 +3756,19 @@ class ContextDashboardModule {
             hookRoute([
                 {
                     path: DashboardDetailsTabId.GENERAL,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-CC5346kW.mjs').then(m => m.DashboardGeneralSettingsComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-DUbxiMZh.mjs').then(m => m.DashboardGeneralSettingsComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 },
                 {
                     path: DashboardDetailsTabId.APPEARANCE,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-CfvHiXsE.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 },
                 {
                     path: DashboardDetailsTabId.VERSIONHISTORY,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-CHuc--XM.mjs').then(m => m.DashboardVersionHistoryComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-Byk0CoOG.mjs').then(m => m.DashboardVersionHistoryComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 }
@@ -3752,7 +3788,7 @@ class ContextDashboardModule {
             WidgetConfigComponent,
             DashboardDetailComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContextDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ContextDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3793,19 +3829,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         hookRoute([
                             {
                                 path: DashboardDetailsTabId.GENERAL,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-CC5346kW.mjs').then(m => m.DashboardGeneralSettingsComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-general-settings.component-DUbxiMZh.mjs').then(m => m.DashboardGeneralSettingsComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             },
                             {
                                 path: DashboardDetailsTabId.APPEARANCE,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-CfvHiXsE.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             },
                             {
                                 path: DashboardDetailsTabId.VERSIONHISTORY,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-CHuc--XM.mjs').then(m => m.DashboardVersionHistoryComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-version-history.component-Byk0CoOG.mjs').then(m => m.DashboardVersionHistoryComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             }
@@ -4172,10 +4208,10 @@ class DeviceInfoDashboardComponent {
     canDeactivate() {
         return this.contextDashboard?.canDeactivate();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceInfoDashboardComponent, deps: [{ token: i1.ActivatedRoute }, { token: WidgetService }, { token: i2$1.TranslateService }, { token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DeviceInfoDashboardComponent, isStandalone: true, selector: "c8y-device-info-dashboard-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true }], ngImport: i0, template: "@if (!isLoading) {\n  <div>\n    <c8y-title>\n      {{ title }}\n    </c8y-title>\n    <c8y-context-dashboard\n      [translateWidgetTitle]=\"true\"\n      [name]=\"dashboardName\"\n      [context]=\"currentContext\"\n      [defaultWidgets]=\"widgetsList\"\n      [canDelete]=\"false\"\n      [hideAvailability]=\"true\"\n      [canCopy]=\"false\"\n      [disabled]=\"previewEnabled$ | async\"\n    ></c8y-context-dashboard>\n  </div>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "translateDashboardTitle", "hideAvailability", "disabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceInfoDashboardComponent, deps: [{ token: i1.ActivatedRoute }, { token: WidgetService }, { token: i2$1.TranslateService }, { token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: DeviceInfoDashboardComponent, isStandalone: true, selector: "c8y-device-info-dashboard-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true }], ngImport: i0, template: "@if (!isLoading) {\n  <div>\n    <c8y-title>\n      {{ title }}\n    </c8y-title>\n    <c8y-context-dashboard\n      [translateWidgetTitle]=\"true\"\n      [name]=\"dashboardName\"\n      [context]=\"currentContext\"\n      [defaultWidgets]=\"widgetsList\"\n      [canDelete]=\"false\"\n      [hideAvailability]=\"true\"\n      [canCopy]=\"false\"\n      [disabled]=\"previewEnabled$ | async\"\n    ></c8y-context-dashboard>\n  </div>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "translateDashboardTitle", "hideAvailability", "disabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceInfoDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceInfoDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-info-dashboard-dashboard', imports: [TitleComponent, ContextDashboardComponent, AsyncPipe], template: "@if (!isLoading) {\n  <div>\n    <c8y-title>\n      {{ title }}\n    </c8y-title>\n    <c8y-context-dashboard\n      [translateWidgetTitle]=\"true\"\n      [name]=\"dashboardName\"\n      [context]=\"currentContext\"\n      [defaultWidgets]=\"widgetsList\"\n      [canDelete]=\"false\"\n      [hideAvailability]=\"true\"\n      [canCopy]=\"false\"\n      [disabled]=\"previewEnabled$ | async\"\n    ></c8y-context-dashboard>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: WidgetService }, { type: i2$1.TranslateService }, { type: i1$1.InventoryService }], propDecorators: { contextDashboard: [{
@@ -4195,9 +4231,9 @@ const canActivateDeviceInfo = (route, _) => {
     }), take(1));
 };
 class DeviceInfoDashboardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceInfoDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DeviceInfoDashboardModule, imports: [CommonModule, CoreModule, ContextDashboardModule, DeviceInfoDashboardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceInfoDashboardModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceInfoDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DeviceInfoDashboardModule, imports: [CommonModule, CoreModule, ContextDashboardModule, DeviceInfoDashboardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceInfoDashboardModule, providers: [
             hookRoute({
                 context: ViewContext.Device,
                 path: 'device-info',
@@ -4211,7 +4247,7 @@ class DeviceInfoDashboardModule {
             })
         ], imports: [CommonModule, CoreModule, ContextDashboardModule, DeviceInfoDashboardComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceInfoDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceInfoDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, CoreModule, ContextDashboardModule, DeviceInfoDashboardComponent],
@@ -4259,10 +4295,10 @@ class DeviceManagementHomeDashboardComponent {
     canDeactivate() {
         return this.contextDashboard?.canDeactivate();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementHomeDashboardComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DeviceManagementHomeDashboardComponent, isStandalone: true, selector: "c8y-device-management-home-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "translateDashboardTitle", "hideAvailability", "disabled"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceManagementHomeDashboardComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: DeviceManagementHomeDashboardComponent, isStandalone: true, selector: "c8y-device-management-home-dashboard", viewQueries: [{ propertyName: "contextDashboard", first: true, predicate: ContextDashboardComponent, descendants: true, static: true }], ngImport: i0, template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ContextDashboardComponent, selector: "c8y-context-dashboard", inputs: ["name", "childrenClasses", "context", "setTitle", "defaultWidgets", "canCopy", "canDelete", "isLoading", "breadcrumbSettings", "showContextHelpButton", "translateWidgetTitle", "translateDashboardTitle", "hideAvailability", "disabled"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementHomeDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceManagementHomeDashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-management-home-dashboard', imports: [TitleComponent, ContextDashboardComponent, C8yTranslatePipe], template: "<c8y-title>\n  {{ 'Home' | translate }}\n</c8y-title>\n\n<c8y-context-dashboard\n  [name]=\"dashboardName\"\n  [defaultWidgets]=\"defaultWidgets\"\n  [canDelete]=\"false\"\n  [hideAvailability]=\"true\"\n></c8y-context-dashboard>\n" }]
         }], ctorParameters: () => [{ type: WidgetService }], propDecorators: { contextDashboard: [{
@@ -4271,12 +4307,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class DeviceManagementHomeDashboardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementHomeDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementHomeDashboardModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceManagementHomeDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.17", ngImport: i0, type: DeviceManagementHomeDashboardModule, imports: [CommonModule,
             CoreModule,
             ContextDashboardModule,
             DeviceManagementHomeDashboardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementHomeDashboardModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceManagementHomeDashboardModule, providers: [
             hookRoute({
                 path: 'home',
                 component: DeviceManagementHomeDashboardComponent,
@@ -4289,7 +4325,7 @@ class DeviceManagementHomeDashboardModule {
             ContextDashboardModule,
             DeviceManagementHomeDashboardComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceManagementHomeDashboardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DeviceManagementHomeDashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4316,10 +4352,10 @@ class WidgetConfigAppearanceComponent {
         this.widgetConfig = inject(WidgetConfigComponent);
         this.possibleStyling = { WIDGET_HEADER_CLASSES, WIDGET_CONTENT_CLASSES };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigAppearanceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetConfigAppearanceComponent, isStandalone: true, selector: "c8y-widget-config-appearance", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-xs-6\">\n    <c8y-appearance-settings\n      [(themeClass)]=\"widgetConfig.styling.contentClass\"\n      [(headerClass)]=\"widgetConfig.styling.headerClass\"\n      [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n      [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n      [defaultThemeClass]=\"widgetConfig.defaultStyling.contentClass\"\n      [defaultHeaderClass]=\"widgetConfig.defaultStyling.headerClass\"\n    ></c8y-appearance-settings>\n  </div>\n  <div class=\"col-xs-6 sticky-header-top-0\">\n    <c8y-widget-preview\n      style=\"height: calc(100vh - 382px)\"\n      [previewClasses]=\"widgetConfig.getStyle(true)\"\n    ></c8y-widget-preview>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigAppearanceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: WidgetConfigAppearanceComponent, isStandalone: true, selector: "c8y-widget-config-appearance", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-xs-6\">\n    <c8y-appearance-settings\n      [(themeClass)]=\"widgetConfig.styling.contentClass\"\n      [(headerClass)]=\"widgetConfig.styling.headerClass\"\n      [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n      [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n      [defaultThemeClass]=\"widgetConfig.defaultStyling.contentClass\"\n      [defaultHeaderClass]=\"widgetConfig.defaultStyling.headerClass\"\n    ></c8y-appearance-settings>\n  </div>\n  <div class=\"col-xs-6 sticky-header-top-0\">\n    <c8y-widget-preview\n      style=\"height: calc(100vh - 382px)\"\n      [previewClasses]=\"widgetConfig.getStyle(true)\"\n    ></c8y-widget-preview>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigAppearanceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: WidgetConfigAppearanceComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [AppearanceSettingsComponent, NgIf, WidgetPreviewComponent], selector: 'c8y-widget-config-appearance', template: "<div class=\"row\">\n  <div class=\"col-xs-6\">\n    <c8y-appearance-settings\n      [(themeClass)]=\"widgetConfig.styling.contentClass\"\n      [(headerClass)]=\"widgetConfig.styling.headerClass\"\n      [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n      [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n      [defaultThemeClass]=\"widgetConfig.defaultStyling.contentClass\"\n      [defaultHeaderClass]=\"widgetConfig.defaultStyling.headerClass\"\n    ></c8y-appearance-settings>\n  </div>\n  <div class=\"col-xs-6 sticky-header-top-0\">\n    <c8y-widget-preview\n      style=\"height: calc(100vh - 382px)\"\n      [previewClasses]=\"widgetConfig.getStyle(true)\"\n    ></c8y-widget-preview>\n  </div>\n</div>\n" }]
         }] });
@@ -4344,10 +4380,10 @@ class GlobalContextSectionComponent {
         }
         this.widgetConfigService.updateConfig(event.context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GlobalContextSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GlobalContextSectionComponent, isStandalone: true, selector: "c8y-global-context-section", inputs: { widgetControls: "widgetControls", controls: "controls" }, ngImport: i0, template: "<div>\n  @if (useControls) {\n    <c8y-config-mode-controls\n      [controls]=\"controls\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (configChange)=\"onConfigChange($event)\"\n    ></c8y-config-mode-controls>\n  } @else if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'config'\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (globalContextChange)=\"onGlobalContext($event)\"\n    ></c8y-global-context-widget-wrapper>\n  }\n</div>\n\n<c8y-widget-config-feedback>\n  <span class=\"tag tag--info chip text-12 m-4\">\n    @if (widgetConfigService.currentConfig.displayMode === 'config') {\n      <span\n        class=\"text-truncate\"\n        [title]=\"'The time context can only get changed in the configuration.' | translate\"\n        translate\n      >\n        Configuration\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'dashboard') {\n      <span\n        [title]=\"'The widget is bound to the global time context.' | translate\"\n        translate\n      >\n        Dashboard\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'view_and_config') {\n      <span\n        [title]=\"'The time context can be configured in the widget view mode.' | translate\"\n        translate\n      >\n        Configuration and widget view\n      </span>\n    }\n  </span>\n</c8y-widget-config-feedback>\n", dependencies: [{ kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "component", type: ConfigModeControlsComponent, selector: "c8y-config-mode-controls", inputs: ["controls", "config"], outputs: ["configChange"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GlobalContextSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: GlobalContextSectionComponent, isStandalone: true, selector: "c8y-global-context-section", inputs: { widgetControls: "widgetControls", controls: "controls" }, ngImport: i0, template: "<div>\n  @if (useControls) {\n    <c8y-config-mode-controls\n      [controls]=\"controls\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (configChange)=\"onConfigChange($event)\"\n    ></c8y-config-mode-controls>\n  } @else if (widgetControls) {\n    <c8y-global-context-widget-wrapper\n      [widgetControls]=\"widgetControls\"\n      [displayMode]=\"'config'\"\n      [config]=\"widgetConfigService.currentConfig$ | async\"\n      (globalContextChange)=\"onGlobalContext($event)\"\n    ></c8y-global-context-widget-wrapper>\n  }\n</div>\n\n<c8y-widget-config-feedback>\n  <span class=\"tag tag--info chip text-12 m-4\">\n    @if (widgetConfigService.currentConfig.displayMode === 'config') {\n      <span\n        class=\"text-truncate\"\n        [title]=\"'The time context can only get changed in the configuration.' | translate\"\n        translate\n      >\n        Configuration\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'dashboard') {\n      <span\n        [title]=\"'The widget is bound to the global time context.' | translate\"\n        translate\n      >\n        Dashboard\n      </span>\n    }\n    @if (widgetConfigService.currentConfig.displayMode === 'view_and_config') {\n      <span\n        [title]=\"'The time context can be configured in the widget view mode.' | translate\"\n        translate\n      >\n        Configuration and widget view\n      </span>\n    }\n  </span>\n</c8y-widget-config-feedback>\n", dependencies: [{ kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config", "disableRefreshEmits"], outputs: ["globalContextChange"] }, { kind: "component", type: ConfigModeControlsComponent, selector: "c8y-config-mode-controls", inputs: ["controls", "config"], outputs: ["configChange"] }, { kind: "component", type: WidgetConfigFeedbackComponent, selector: "c8y-widget-config-feedback" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GlobalContextSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: GlobalContextSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-global-context-section', standalone: true, imports: [
                         GlobalContextWidgetWrapperComponent,