@c8y/ngx-components 1023.97.4 → 1023.97.7

package/fesm2022/c8y-ngx-components.mjs

@@ -12833,7 +12833,12 @@ class HeaderService extends StateService {
      * Delay of 300ms is intended for animation purpose.
      */
     verifyIfNavOpen() {
-        this.canToggleNavigator$
+        // Drop any previous subscription before re-subscribing so repeated calls (e.g. a re-initialised
+        // header bar) do not accumulate never-completing subscriptions on the long-lived
+        // canToggleNavigator$. The subscription is kept open intentionally so it still reacts when nodes
+        // are added later (per this method's contract).
+        this.navOpenSubscription?.unsubscribe();
+        this.navOpenSubscription = this.canToggleNavigator$
             .pipe(debounceTime(300))
             .subscribe(hasItems => hasItems && this.shouldToggle && this.toggleNavigator());
     }
@@ -14288,31 +14293,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 class TitleOutletComponent {
-    constructor(headerService, element, zone) {
+    constructor(headerService, element, zone, destroyRef) {
         this.headerService = headerService;
         this.element = element;
         this.zone = zone;
+        this.destroyRef = destroyRef;
         this.title = undefined;
         this.pageTitleUpdate = true;
+        // These subscribe to the root-singleton HeaderService (a never-completing BehaviorSubject), so
+        // without takeUntilDestroyed the observers — which capture this component (and, for the last one,
+        // its host element) — would stay registered on the app-lifetime singleton and leak the destroyed
+        // outlet and its detached DOM.
         const title$ = this.headerService.map(state => state.title);
-        title$.subscribe(title => {
+        title$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(title => {
             this.title = title;
         });
         const pageTitleUpdate$ = this.headerService.map(state => state.pageTitleUpdate);
-        pageTitleUpdate$.subscribe(pageTitleUpdate => (this.pageTitleUpdate = pageTitleUpdate));
+        pageTitleUpdate$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(pageTitleUpdate => (this.pageTitleUpdate = pageTitleUpdate));
         this.zone.runOutsideAngular(() => {
             this.headerService.state$
-                .pipe(debounceTime(100), filter(state => state.pageTitleUpdate), debounceTime(100), map(() => this.element.nativeElement.querySelector('h1')), filter(el => el !== null), map(el => el.innerText), filter(Boolean))
+                .pipe(debounceTime(100), filter(state => state.pageTitleUpdate), debounceTime(100), map(() => this.element.nativeElement.querySelector('h1')), filter(el => el !== null), map(el => el.innerText), filter(Boolean), takeUntilDestroyed(this.destroyRef))
                 .subscribe((title) => headerService.changePageTitle(title));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TitleOutletComponent, deps: [{ token: HeaderService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TitleOutletComponent, deps: [{ token: HeaderService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: TitleOutletComponent, isStandalone: true, selector: "c8y-title-outlet", ngImport: i0, template: "<div class=\"c8y-ui-title\" data-cy=\"c8y-title--title-outlet\">\n  <div class=\"title\" *c8yOutlet=\"title\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TitleOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-title-outlet', standalone: true, imports: [OutletDirective], template: "<div class=\"c8y-ui-title\" data-cy=\"c8y-title--title-outlet\">\n  <div class=\"title\" *c8yOutlet=\"title\"></div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: HeaderService }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: HeaderService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.DestroyRef }] });
 
 class BreadcrumbOutletComponent {
     constructor() {
@@ -16138,7 +16150,8 @@ class NavigatorNodeComponent {
                 this.nodeInit$.next();
             });
         }
-        this.node.refreshCallback = this.updateIcon.bind(this);
+        this.refreshCallbackRef = this.updateIcon.bind(this);
+        this.node.refreshCallback = this.refreshCallbackRef;
     }
     /**
      * Returns the expander title.
@@ -16192,6 +16205,16 @@ class NavigatorNodeComponent {
     ngOnDestroy() {
         clearTimeout(this.viewInitTimeout);
         if (this.node) {
+            // The navigator node is long-lived (re-emitted from NavigatorService.items$), so the
+            // back-references this component stored on it must be cleared or they retain the destroyed
+            // component, its PopoverConfirm child and its icon view subtree. Guard by identity so a newer
+            // component for the same persistent node is not clobbered.
+            if (this.node.refreshCallback === this.refreshCallbackRef) {
+                this.node.refreshCallback = undefined;
+            }
+            if (this.node.confirm === this.confirm) {
+                this.node.confirm = undefined;
+            }
             this.node.destroy();
         }
     }
@@ -29338,6 +29361,15 @@ class DynamicComponentComponent {
         this.expandErrorDetails = false;
         this.dynamicComponentErrorStrategy = DynamicComponentErrorStrategy;
         this.destroy$ = new Subject();
+        /**
+         * `ngOnChanges` is async (it awaits the component lookup, lazy chunk loading and resolvers), so a
+         * navigation can destroy this host while a (re-)creation is still in flight. Creating the widget
+         * after destroy would insert it into the destroyed `ViewContainerRef` — such a view is never
+         * destroyed and permanently retains the whole detached dashboard DOM (Angular keeps every live
+         * view in an internal registry until it is destroyed). This flag lets the pending async work
+         * bail out instead.
+         */
+        this.isDestroyed = false;
     }
     /**
      * Calls the dynamic component life cycle hook. Currently only
@@ -29352,6 +29384,9 @@ class DynamicComponentComponent {
      */
     async ngOnChanges(changes) {
         const cmp = await this.dynamicComponentService.getById(this.componentId);
+        if (this.isDestroyed) {
+            return;
+        }
         let errors = new Array();
         if (cmp) {
             this.errorStrategy = cmp.errorStrategy || DynamicComponentErrorStrategy.CUSTOM;
@@ -29359,6 +29394,9 @@ class DynamicComponentComponent {
                 const [resolvedConfig] = await this.dynamicComponentService.executeResolvers([
                     { componentId: this.componentId, config: this.config }
                 ]);
+                if (this.isDestroyed) {
+                    return;
+                }
                 Object.entries(resolvedConfig).forEach(([key, value]) => set(this.config, key, value));
             }
             const resolvedValuesOfConfiguration = cmp.resolve
@@ -29391,8 +29429,17 @@ class DynamicComponentComponent {
         this.emitChangeOnComponent({ config: new SimpleChange(oldConfig, this.config, false) });
     }
     ngOnDestroy() {
+        this.isDestroyed = true;
         this.destroy$.next();
         this.destroy$.complete();
+        // Release references to the dynamically created widget. The ViewContainerRef destroys the
+        // created component automatically, but the host keeps strong fields pointing at the widget
+        // instance (and, via its config/alerts, at large object graphs). If anything still references
+        // this now-destroyed host, those fields would keep the whole widget — and its detached DOM —
+        // alive. Clearing them breaks that retention edge.
+        this.componentRef = undefined;
+        this.componentInstance = undefined;
+        this.error = undefined;
     }
     emitChangeOnComponent(changes) {
         const ngOnChanges = this.componentRef?.instance?.ngOnChanges;
@@ -29404,6 +29451,12 @@ class DynamicComponentComponent {
         try {
             this.error = undefined;
             const componentType = await this.getComponentType(dynamicComponent);
+            // The lazy-component await above (and the awaits in ngOnChanges) can outlive this host:
+            // creating the widget into the destroyed ViewContainerRef would leak it — and the whole
+            // detached dashboard DOM it references — until a full page reload.
+            if (this.isDestroyed) {
+                return;
+            }
             this.host.clear();
             this.componentRef = this.host.createComponent(componentType, {
                 environmentInjector: (dynamicComponent.injector || this.injector)
@@ -29477,19 +29530,18 @@ class DynamicComponentComponent {
         return of(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicComponentComponent, deps: [{ token: DynamicComponentService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DynamicComponentComponent, isStandalone: true, selector: "c8y-dynamic-component", inputs: { componentId: "componentId", config: "config", mode: "mode", notFoundError: "notFoundError", executeResolvers: "executeResolvers" }, outputs: { updateWidgetClasses: "updateWidgetClasses" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #host></ng-template>\n\n<div class=\"alert alert-warning m-8\" role=\"alert\" *ngIf=\"error && notFoundError\">\n  <strong class=\"message\">\n    {{\n      'This widget cannot be rendered because the current application does not support the following component:'\n        | translate\n    }}\n    {{ componentId }}.\n  </strong>\n  <p class=\"text-muted m-t-8\">\n    <button class=\"btn btn-clean\" (click)=\"expandErrorDetails = !expandErrorDetails\">\n      <i c8yIcon=\"chevron-down\"></i>\n      <span *ngIf=\"!expandErrorDetails\" translate>Show details</span>\n      <span *ngIf=\"expandErrorDetails\" translate>Hide details</span>\n    </button>\n  </p>\n  <div [collapse]=\"!expandErrorDetails\" [isAnimated]=\"true\">\n    <pre>\n      {{ error }}\n    </pre>\n  </div>\n</div>\n\n<div\n  class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\"\n  *ngIf=\"\n    errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&\n      componentInstance?.alerts?.anyAlertExists$ | async\n  \"\n>\n  <c8y-dynamic-component-alerts [alerts]=\"componentInstance.alerts\"></c8y-dynamic-component-alerts>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DynamicComponentComponent, isStandalone: true, selector: "c8y-dynamic-component", inputs: { componentId: "componentId", config: "config", mode: "mode", notFoundError: "notFoundError", executeResolvers: "executeResolvers" }, outputs: { updateWidgetClasses: "updateWidgetClasses" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #host></ng-template>\n\n@if (error && notFoundError) {\n  <div\n    class=\"alert alert-warning m-8\"\n    role=\"alert\"\n  >\n    <strong class=\"message\">\n      {{\n        'This widget cannot be rendered because the current application does not support the following component:'\n          | translate\n      }}\n      {{ componentId }}.\n    </strong>\n    <p class=\"text-muted m-t-8\">\n      <button\n        class=\"btn btn-clean\"\n        (click)=\"expandErrorDetails = !expandErrorDetails\"\n      >\n        <i c8yIcon=\"chevron-down\"></i>\n        @if (!expandErrorDetails) {\n          <span translate>Show details</span>\n        } @else {\n          <span translate>Hide details</span>\n        }\n      </button>\n    </p>\n    <div\n      [collapse]=\"!expandErrorDetails\"\n      [isAnimated]=\"true\"\n    >\n      <pre>\n      {{ error }}\n    </pre\n      >\n    </div>\n  </div>\n}\n\n@if (\n  errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&\n    componentInstance?.alerts?.anyAlertExists$ | async\n) {\n  <div class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\">\n    <c8y-dynamic-component-alerts\n      [alerts]=\"componentInstance.alerts\"\n    ></c8y-dynamic-component-alerts>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DynamicComponentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dynamic-component', standalone: true, imports: [
-                        NgIf,
                         IconDirective,
                         C8yTranslateDirective,
                         CollapseModule,
                         DynamicComponentAlertsComponent,
                         C8yTranslatePipe,
                         AsyncPipe
-                    ], template: "<ng-template #host></ng-template>\n\n<div class=\"alert alert-warning m-8\" role=\"alert\" *ngIf=\"error && notFoundError\">\n  <strong class=\"message\">\n    {{\n      'This widget cannot be rendered because the current application does not support the following component:'\n        | translate\n    }}\n    {{ componentId }}.\n  </strong>\n  <p class=\"text-muted m-t-8\">\n    <button class=\"btn btn-clean\" (click)=\"expandErrorDetails = !expandErrorDetails\">\n      <i c8yIcon=\"chevron-down\"></i>\n      <span *ngIf=\"!expandErrorDetails\" translate>Show details</span>\n      <span *ngIf=\"expandErrorDetails\" translate>Hide details</span>\n    </button>\n  </p>\n  <div [collapse]=\"!expandErrorDetails\" [isAnimated]=\"true\">\n    <pre>\n      {{ error }}\n    </pre>\n  </div>\n</div>\n\n<div\n  class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\"\n  *ngIf=\"\n    errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&\n      componentInstance?.alerts?.anyAlertExists$ | async\n  \"\n>\n  <c8y-dynamic-component-alerts [alerts]=\"componentInstance.alerts\"></c8y-dynamic-component-alerts>\n</div>\n" }]
+                    ], template: "<ng-template #host></ng-template>\n\n@if (error && notFoundError) {\n  <div\n    class=\"alert alert-warning m-8\"\n    role=\"alert\"\n  >\n    <strong class=\"message\">\n      {{\n        'This widget cannot be rendered because the current application does not support the following component:'\n          | translate\n      }}\n      {{ componentId }}.\n    </strong>\n    <p class=\"text-muted m-t-8\">\n      <button\n        class=\"btn btn-clean\"\n        (click)=\"expandErrorDetails = !expandErrorDetails\"\n      >\n        <i c8yIcon=\"chevron-down\"></i>\n        @if (!expandErrorDetails) {\n          <span translate>Show details</span>\n        } @else {\n          <span translate>Hide details</span>\n        }\n      </button>\n    </p>\n    <div\n      [collapse]=\"!expandErrorDetails\"\n      [isAnimated]=\"true\"\n    >\n      <pre>\n      {{ error }}\n    </pre\n      >\n    </div>\n  </div>\n}\n\n@if (\n  errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&\n    componentInstance?.alerts?.anyAlertExists$ | async\n) {\n  <div class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\">\n    <c8y-dynamic-component-alerts\n      [alerts]=\"componentInstance.alerts\"\n    ></c8y-dynamic-component-alerts>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i0.Injector }], propDecorators: { componentId: [{
                 type: Input
             }], config: [{
@@ -30180,6 +30232,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class DashboardChildComponent {
+    static { this.WIDGET_THEME_FOUNDATION_MAP = {
+        'panel-content-dark': 'c8y-dark-theme',
+        'panel-content-white': 'c8y-light-theme'
+    }; }
+    static { this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY = 768; }
+    /**
+     * Emits true in one-column (mobile) view. SHARED across all instances via a single static
+     * `window 'resize'` subscription — previously every widget card created its own listener +
+     * debounce timer (N per dashboard), wasteful on dashboards with many widgets. One listener now
+     * serves them all (refCount:false keeps it warm for the app's lifetime).
+     */
+    static { this.oneColumnView$ = fromEvent(window, 'resize').pipe(debounceTime(200), map(() => document.documentElement.clientWidth <=
+        DashboardChildComponent.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY), startWith(document.documentElement.clientWidth <=
+        DashboardChildComponent.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: false })); }
     set templateActions(actions) {
         this.addActions(actions, true);
     }
@@ -30231,7 +30297,6 @@ class DashboardChildComponent {
         this._pxWidth = '100%';
         this._pxHeight = '100%';
         this.fullscreen = false;
-        this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY = 768;
         /**
          * The width of the component in grid-columns.
          */
@@ -30270,12 +30335,8 @@ class DashboardChildComponent {
          * All classes added to this child
          */
         this.class = {};
-        /**
-         * Triggers on every resize and returns true if in one column view (mobile view)
-         */
-        this.isOneColumnView$ = fromEvent(window, 'resize').pipe(map(_ => {
-            return (document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY);
-        }), debounceTime(200), startWith(document.documentElement.clientWidth <= this.MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY));
+        /** Triggers on resize and returns true if in one column view (mobile view). */
+        this.isOneColumnView$ = DashboardChildComponent.oneColumnView$;
         /**
          * An indicator if the child is intersected (that mean visible for the user)
          */
@@ -30286,11 +30347,21 @@ class DashboardChildComponent {
         this.lastChange = null;
     }
     ngOnChanges() {
+        const classObj = Array.isArray(this.class)
+            ? this.class.reduce((acc, cls) => ({ ...acc, [cls]: true }), {})
+            : (this.class ?? {});
+        const foundationClasses = {};
+        for (const [contentClass, foundationClass] of Object.entries(DashboardChildComponent.WIDGET_THEME_FOUNDATION_MAP)) {
+            if (classObj[contentClass]) {
+                foundationClasses[foundationClass] = true;
+            }
+        }
         this.klasses = {
             card: true,
             'card-dashboard': true,
             'on-resize': this.isResize,
-            ...this.class
+            ...foundationClasses,
+            ...classObj
         };
     }
     ngOnInit() {
@@ -30298,8 +30369,7 @@ class DashboardChildComponent {
             setTimeout(() => this.setDynamicDimension());
         }
         if (this.useIntersection && 'IntersectionObserver' in window) {
-            const intersectionObserver = new IntersectionObserver(events => (this.intersected = this.childInView(events, intersectionObserver)));
-            intersectionObserver.observe(this.element.nativeElement);
+            this.observeIntersection();
         }
         else {
             this.intersected = true;
@@ -30352,6 +30422,9 @@ class DashboardChildComponent {
         if (this.changeSubscription) {
             this.changeSubscription.unsubscribe();
         }
+        // Disconnect the IntersectionObserver so it stops retaining this (now detached) card element.
+        this.intersectionObserver?.disconnect();
+        this.intersectionObserver = undefined;
         this._additionalHeaderTemplates.complete();
         this.removeSelfFromDashboard();
     }
@@ -30363,6 +30436,20 @@ class DashboardChildComponent {
             this.actions = [...this.actions, ...actions];
         }
     }
+    /**
+     * Re-arms intersection tracking after a card was restored following a cancelled navigation. The
+     * observer one-shot-unobserves on first intersection, so once a card has been shown and then
+     * blanked it would no longer be watched; this lets the dashboard put it back under observation.
+     */
+    reobserve() {
+        if (this.useIntersection && 'IntersectionObserver' in window) {
+            this.intersectionObserver?.disconnect();
+            this.observeIntersection();
+        }
+        else {
+            this.intersected = true;
+        }
+    }
     removeSelfFromDashboard() {
         const i = this.dashboard.children.indexOf(this);
         if (i >= 0) {
@@ -30375,6 +30462,10 @@ class DashboardChildComponent {
     getOrder() {
         return `${Math.round((this.y + (this.x + 1) / 100) * 100)}`;
     }
+    observeIntersection() {
+        this.intersectionObserver = new IntersectionObserver(events => (this.intersected = this.childInView(events, this.intersectionObserver)));
+        this.intersectionObserver.observe(this.element.nativeElement);
+    }
     childInView(events, observer) {
         const intersectingEvent = events.find(event => event.isIntersecting);
         if (intersectingEvent) {
@@ -32016,6 +32107,16 @@ class WidgetAutoRefreshContextComponent {
         this.listenOnDashboardSaveOperation();
     }
     ngOnDestroy() {
+        // Tear down THIS instance's subscriptions unconditionally. They are per-instance — each pipes
+        // through takeUntil(this.destroy$) and its callback captures this component. Previously destroy$
+        // was only completed when the shared globalRefreshWidgetsCount reached 0, so whenever another
+        // auto-refresh context was still alive (count > 1 — e.g. the brief overlap while navigating
+        // between dashboards, where the next context is created before this one is destroyed) the
+        // destroyed instance's subscriptions to long-lived root streams (Router events, query params,
+        // root BehaviorSubjects) stayed open and retained this component and its detached DOM. Only the
+        // shared service reset must remain gated on the count.
+        this.destroy$.next();
+        this.destroy$.complete();
         this.onContextDestroy();
     }
     onRefresh() {
@@ -32078,8 +32179,6 @@ class WidgetAutoRefreshContextComponent {
         const widgetsCount = this.widgetGlobalAutoRefresh.globalRefreshWidgetsCount;
         widgetsCount.update(count => count - 1);
         if (widgetsCount() === 0) {
-            this.destroy$.next();
-            this.destroy$.complete();
             this.widgetGlobalAutoRefresh.resetServiceToDefaults();
         }
     }
@@ -32089,7 +32188,7 @@ class WidgetAutoRefreshContextComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetAutoRefreshContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: WidgetAutoRefreshContextComponent, isStandalone: true, selector: "c8y-widget-auto-refresh-context", inputs: { editMode$: "editMode$" }, ngImport: i0, template: "<c8y-action-bar-item\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [priority]=\"ACTION_BAR_PRIORITY\"\n  [placement]=\"'left'\"\n>\n  <form\n    class=\"d-flex\"\n    [formGroup]=\"form\"\n  >\n    <c8y-auto-refresh-control\n      [hidden]=\"editMode$ | async\"\n      (loading)=\"globalRefreshWidgetLoading = $event\"\n      formControlName=\"autoRefresh\"\n    ></c8y-auto-refresh-control>\n\n    <c8y-auto-refresh-select-control\n      [hidden]=\"editMode$ | async\"\n      formControlName=\"autoRefreshSeconds\"\n    ></c8y-auto-refresh-select-control>\n  </form>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default\"\n      style=\"border-left: 0\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"'Refresh' | translate\"\n      placement=\"bottom\"\n      type=\"button\"\n      *ngIf=\"!(editMode$ | async)\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"globalRefreshWidgetLoading\"\n      (click)=\"onRefresh()\"\n    >\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': globalRefreshWidgetLoading }\"\n      ></i>\n    </button>\n  </div>\n</c8y-action-bar-item>\n", dependencies: [{ kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", outputs: ["loading"] }, { kind: "component", type: AutoRefreshSelectControlComponent, selector: "c8y-auto-refresh-select-control" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetAutoRefreshContextComponent, isStandalone: true, selector: "c8y-widget-auto-refresh-context", inputs: { editMode$: "editMode$" }, ngImport: i0, template: "<c8y-action-bar-item\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [priority]=\"ACTION_BAR_PRIORITY\"\n  [placement]=\"'left'\"\n>\n  <form\n    class=\"d-flex\"\n    [formGroup]=\"form\"\n  >\n    <c8y-auto-refresh-control\n      [hidden]=\"editMode$ | async\"\n      (loading)=\"globalRefreshWidgetLoading = $event\"\n      formControlName=\"autoRefresh\"\n    ></c8y-auto-refresh-control>\n\n    <c8y-auto-refresh-select-control\n      [hidden]=\"editMode$ | async\"\n      formControlName=\"autoRefreshSeconds\"\n    ></c8y-auto-refresh-select-control>\n  </form>\n  <div class=\"input-group-btn\">\n    @if (!(editMode$ | async)) {\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"globalRefreshWidgetLoading\"\n        (click)=\"onRefresh()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': globalRefreshWidgetLoading }\"\n        ></i>\n      </button>\n    }\n  </div>\n</c8y-action-bar-item>\n", dependencies: [{ kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", outputs: ["loading"] }, { kind: "component", type: AutoRefreshSelectControlComponent, selector: "c8y-auto-refresh-select-control" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetAutoRefreshContextComponent, decorators: [{
             type: Component,
@@ -32099,13 +32198,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         ReactiveFormsModule,
                         AutoRefreshControlComponent,
                         AutoRefreshSelectControlComponent,
-                        NgIf,
                         TooltipModule,
                         IconDirective,
                         NgClass,
                         C8yTranslatePipe,
                         AsyncPipe
-                    ], template: "<c8y-action-bar-item\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [priority]=\"ACTION_BAR_PRIORITY\"\n  [placement]=\"'left'\"\n>\n  <form\n    class=\"d-flex\"\n    [formGroup]=\"form\"\n  >\n    <c8y-auto-refresh-control\n      [hidden]=\"editMode$ | async\"\n      (loading)=\"globalRefreshWidgetLoading = $event\"\n      formControlName=\"autoRefresh\"\n    ></c8y-auto-refresh-control>\n\n    <c8y-auto-refresh-select-control\n      [hidden]=\"editMode$ | async\"\n      formControlName=\"autoRefreshSeconds\"\n    ></c8y-auto-refresh-select-control>\n  </form>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default\"\n      style=\"border-left: 0\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"'Refresh' | translate\"\n      placement=\"bottom\"\n      type=\"button\"\n      *ngIf=\"!(editMode$ | async)\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"globalRefreshWidgetLoading\"\n      (click)=\"onRefresh()\"\n    >\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': globalRefreshWidgetLoading }\"\n      ></i>\n    </button>\n  </div>\n</c8y-action-bar-item>\n" }]
+                    ], template: "<c8y-action-bar-item\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [priority]=\"ACTION_BAR_PRIORITY\"\n  [placement]=\"'left'\"\n>\n  <form\n    class=\"d-flex\"\n    [formGroup]=\"form\"\n  >\n    <c8y-auto-refresh-control\n      [hidden]=\"editMode$ | async\"\n      (loading)=\"globalRefreshWidgetLoading = $event\"\n      formControlName=\"autoRefresh\"\n    ></c8y-auto-refresh-control>\n\n    <c8y-auto-refresh-select-control\n      [hidden]=\"editMode$ | async\"\n      formControlName=\"autoRefreshSeconds\"\n    ></c8y-auto-refresh-select-control>\n  </form>\n  <div class=\"input-group-btn\">\n    @if (!(editMode$ | async)) {\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"globalRefreshWidgetLoading\"\n        (click)=\"onRefresh()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': globalRefreshWidgetLoading }\"\n        ></i>\n      </button>\n    }\n  </div>\n</c8y-action-bar-item>\n" }]
         }], propDecorators: { editMode$: [{
                 type: Input
             }] } });
@@ -32145,7 +32243,7 @@ class WidgetsDashboardComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    constructor(dynamic, translateService, route, modal, widgetGlobalAutoRefresh, router, elementRef) {
+    constructor(dynamic, translateService, route, modal, widgetGlobalAutoRefresh, router, elementRef, cdr) {
         this.dynamic = dynamic;
         this.translateService = translateService;
         this.route = route;
@@ -32153,6 +32251,7 @@ class WidgetsDashboardComponent {
         this.widgetGlobalAutoRefresh = widgetGlobalAutoRefresh;
         this.router = router;
         this.elementRef = elementRef;
+        this.cdr = cdr;
         /**
          * Indicates if device info in config should be overridden with values from context property.
          */
@@ -32189,6 +32288,23 @@ class WidgetsDashboardComponent {
         this.widgetFullscreenChangeListener = null;
         this.inFullScreen$ = fromEvent(document, 'fullscreenchange').pipe(map(() => this.fullScreen()), startWith(this.fullScreen()));
         this.editMode$ = new BehaviorSubject(false);
+        /**
+         * When navigating AWAY from this dashboard to a different one, drop each widget's heavy content
+         * (`intersected = false`) before Angular tears the view down. The widget bodies — the bulk of the
+         * DOM — are removed from the lingering/detached dashboard tree, so the single detached
+         * c8y-context-dashboard entry collapses toward its chrome shell instead of carrying a
+         * multi-thousand-node subtree on every view change. (We intentionally do NOT remove the whole
+         * grid: that orphans every card as a separate multi-root-retained fragment, which clutters the
+         * Detached-elements panel worse and risks accumulating.) Robust across tab switches — the `@for`
+         * just creates fresh children for the next dashboard. No remount cost on a real leave.
+         */
+        this.clearWidgetContentOnLeave = true;
+        /**
+         * The cards blanked by the most recent {@link clearWidgetContentBeforeLeaving}, kept so a
+         * cancelled/failed navigation can restore exactly those (and only those — never a card that was
+         * legitimately below the fold and not yet intersected).
+         */
+        this.clearedChildren = [];
         this.copyDashboardLabel = gettext$1('Copy dashboard');
         this.undoMessage = gettext$1('Undo: "{{ changeToUndo }}"');
         this.redoMessage = gettext$1('Redo: "{{ changeToRedo }}"');
@@ -32199,6 +32315,17 @@ class WidgetsDashboardComponent {
         if (navigation?.extras.state?.[NEW_DASHBOARD_ROUTER_STATE_PROP]) {
             this.enableEditMode();
         }
+        this.router.events.pipe(takeUntilDestroyed()).subscribe(event => {
+            if (event instanceof NavigationStart) {
+                this.clearWidgetContentBeforeLeaving(event);
+            }
+            else if (event instanceof NavigationCancel || event instanceof NavigationError) {
+                // The leave we blanked content for did not complete (e.g. a canDeactivate guard rejected
+                // it, or back/forward was cancelled). This dashboard stays mounted, so restore exactly the
+                // cards we cleared — otherwise they would remain permanently blank.
+                this.restoreClearedWidgetContent();
+            }
+        });
         this.resolvedWidgets$ = this._widgets.pipe(switchMap(widgets => this.executeResolversOfWidgets(widgets)), shareReplay(1));
         this.isExecutingResolvers$ = merge(this._widgets.pipe(map(() => true)), this.resolvedWidgets$.pipe(map(() => false)));
         this.isLoadingWidgets$ = combineLatest([this.isLoading$, this.isExecutingResolvers$]).pipe(map(loadings => loadings.some(loading => loading)), shareReplay(1));
@@ -32311,6 +32438,72 @@ class WidgetsDashboardComponent {
         this.editMode$.next(true);
         this.contextDashboard.historyDescription = {};
     }
+    /**
+     * Clears widget content only when truly leaving this dashboard for a different one. Guards:
+     * - opt-out flag;
+     * - skip in edit mode (navigation may be cancelled by canDeactivate, and editing must keep content);
+     * - skip when only the auxiliary outlet (e.g. the "Dashboard settings" drawer), query params
+     *   (auto-refresh / date range) or matrix params change — i.e. the PRIMARY dashboard route is the
+     *   same, so the dashboard stays mounted and must NOT be blanked.
+     */
+    clearWidgetContentBeforeLeaving(event) {
+        if (!this.clearWidgetContentOnLeave || this.editMode$.value) {
+            return;
+        }
+        // Only when actually leaving THIS dashboard for a different primary route — not the settings
+        // drawer (auxiliary outlet), query params (auto-refresh/date) or matrix params, which keep the
+        // dashboard mounted and must NOT be blanked.
+        if (this.toPrimaryPath(this.router.url) === this.toPrimaryPath(event.url)) {
+            return;
+        }
+        const children = this.dashboardChildren;
+        if (!children?.length) {
+            return;
+        }
+        // Track only the cards that were actually showing content, so a cancelled navigation restores
+        // exactly those and leaves never-intersected (below-the-fold) cards as they were.
+        this.clearedChildren = children.filter(child => child.intersected);
+        this.clearedChildren.forEach(child => (child.intersected = false));
+        try {
+            this.cdr.detectChanges();
+        }
+        catch {
+            // The view may already be detaching during navigation; the content is dropped regardless.
+        }
+    }
+    /**
+     * Re-shows the cards blanked by a clear that was followed by a cancelled/failed navigation. The
+     * IntersectionObserver one-shot-unobserves a visible card, so it cannot bring the content back on
+     * its own; we restore `intersected` directly and re-arm observation for future scrolling.
+     */
+    restoreClearedWidgetContent() {
+        if (!this.clearedChildren.length) {
+            return;
+        }
+        this.clearedChildren.forEach(child => {
+            child.intersected = true;
+            child.reobserve();
+        });
+        this.clearedChildren = [];
+        try {
+            this.cdr.detectChanges();
+        }
+        catch {
+            // The view may be mid-teardown; restoring is best-effort.
+        }
+    }
+    /**
+     * Primary route path, parsed with the Router (not a hand-rolled regex) so query params, auxiliary
+     * outlets (e.g. the dashboard-settings drawer `(dashboard-details:...)`) and matrix params are
+     * correctly excluded. Two URLs with the same primary path mean the dashboard stays mounted
+     * (settings/refresh/param change) — do not clear.
+     */
+    toPrimaryPath(url) {
+        const primary = this.router.parseUrl(url).root.children[PRIMARY_OUTLET];
+        // Join only the path of each segment, dropping matrix params, so a matrix-param-only change
+        // (which keeps the dashboard mounted) does not read as a different route.
+        return primary ? `/${primary.segments.map(segment => segment.path).join('/')}` : '';
+    }
     exitFullScreen() {
         const doc = document;
         if (doc.exitFullscreen) {
@@ -32348,7 +32541,7 @@ class WidgetsDashboardComponent {
             });
             return true;
         }
-        catch (e) {
+        catch {
             return false;
         }
     }
@@ -32405,8 +32598,8 @@ class WidgetsDashboardComponent {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$4.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$4.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetsDashboardComponent, isStandalone: true, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons", isSaveDisabled: "isSaveDisabled" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], usesOnChanges: true, ngImport: i0, template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete dashboard' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\n            <p c8y-guide-docs>\n              <small\n                translate\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || settings.defaultWidth\"\n          [height]=\"widget._height || settings.defaultHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$4.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$4.Router }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetsDashboardComponent, isStandalone: true, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons", isSaveDisabled: "isSaveDisabled", clearWidgetContentOnLeave: "clearWidgetContentOnLeave" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], viewQueries: [{ propertyName: "dashboardChildren", predicate: DashboardChildComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete dashboard' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\n            <p c8y-guide-docs>\n              <small\n                translate\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || settings.defaultWidth\"\n          [height]=\"widget._height || settings.defaultHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetsDashboardComponent, decorators: [{
             type: Component,
@@ -32440,7 +32633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         C8yTranslatePipe,
                         AsyncPipe
                     ], template: "@if (!!settings.title) {\n  <c8y-title>\n    @let dashboardTitle =\n      settings.translateDashboardTitle ? (settings.title | translate) : settings.title;\n    {{ dashboardTitle }}\n  </c8y-title>\n}\n\n@if (!!breadcrumb) {\n  <c8y-breadcrumb>\n    <c8y-breadcrumb-item\n      [icon]=\"breadcrumb.icon\"\n      [label]=\"breadcrumb.label\"\n      [path]=\"breadcrumb.path\"\n    ></c8y-breadcrumb-item>\n  </c8y-breadcrumb>\n}\n\n@if (!(editMode$ | async)) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn hidden-xs\"\n      title=\"{{ 'Edit widgets' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled\"\n      (click)=\"enableEditMode()\"\n      data-cy=\"c8y-widget-dashboard--edit-widgets\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"send-backward\"></i>\n      <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (editMode$ | async) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  >\n    <button\n      class=\"btn btn-link animated fadeIn\"\n      title=\"{{ 'Add widget' | translate }}\"\n      type=\"button\"\n      (click)=\"onAddWidget.emit()\"\n      data-cy=\"widget-dashboard--Add-widget\"\n    >\n      <i c8yIcon=\"plus-circle\"></i>\n      {{ 'Add widget' | translate }}\n    </button>\n  </c8y-action-bar-item>\n\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n    itemClass=\"d-flex a-i-center gap-8\"\n  >\n    <div class=\"input-group input-group-sm animated fadeIn\">\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Undo' | translate\"\n          [tooltip]=\"\n            editModeButtons.undoButtonDisabled\n              ? ''\n              : (undoMessage\n                | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('undo')\"\n          [disabled]=\"editModeButtons.undoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'undo'\"></i>\n        </button>\n      </div>\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default btn-sm btn-icon\"\n          [attr.aria-label]=\"'Redo' | translate\"\n          [tooltip]=\"\n            editModeButtons.redoButtonDisabled\n              ? ''\n              : (redoMessage\n                | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n          \"\n          container=\"body\"\n          (click)=\"revertChange.emit('redo')\"\n          [disabled]=\"editModeButtons.redoButtonDisabled\"\n        >\n          <i [c8yIcon]=\"'redo'\"></i>\n        </button>\n      </div>\n      <span></span>\n    </div>\n    <div class=\"btn-group animated fadeIn\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Cancel' | translate }}\"\n        type=\"button\"\n        (click)=\"cancelDashboardSave()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary btn-sm m-l-8\"\n        title=\"{{ 'Save' | translate }}\"\n        type=\"button\"\n        [disabled]=\"editModeButtons.undoButtonDisabled && isSaveDisabled\"\n        (click)=\"saveDashboard()\"\n        data-cy=\"c8y-widgets-dashboard--save\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </c8y-action-bar-item>\n}\n\n@if (onEditDashboard.observers.length) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <button\n      class=\"btn btn-link hidden-xs m-l-0\"\n      title=\"{{ 'Dashboard settings' | translate }}\"\n      type=\"button\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n      (click)=\"onEditDashboard.emit()\"\n      data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n    <button\n      class=\"btn btn-link visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"sorting-slider\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n        {{ 'Dashboard settings' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.allowFullscreen) {\n  <c8y-action-bar-item\n    [placement]=\"'right'\"\n    [priority]=\"-5000\"\n    itemClass=\"pull-right\"\n  >\n    <button\n      class=\"btn btn-link\"\n      [attr.aria-label]=\"'Full screen' | translate\"\n      tooltip=\"{{ 'Full screen' | translate }}\"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleFullscreen()\"\n      data-cy=\"widgets-dashboard--Full-screen\"\n    >\n      <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n      <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n        {{ 'Full screen' | translate }}\n      </span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canCopy) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-2000\"\n  >\n    <div class=\"d-flex a-i-center p-r-16\">\n      <button\n        class=\"hidden-xs\"\n        title=\"{{\n          (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n            | translate\n        }}\"\n        type=\"button\"\n        [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"onCopyDashboard.emit()\"\n        [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n      >\n        <i c8yIcon=\"clone\"></i>\n        <span>{{ copyDashboardLabel | translate }}</span>\n      </button>\n      @if (!isCopyDisabled?.state && copyDisabledPopoverMsg) {\n        <button\n          class=\"btn-help btn-help--sm hidden-xs flex-no-shrink\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"copyDisabledPopoverMsg | translate\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          data-cy=\"widgets-dashboard--info-copy-dashboard\"\n          (click)=\"$event.preventDefault(); $event.stopPropagation()\"\n        ></button>\n      }\n    </div>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (settings.canDelete && onDeleteDashboard.observers.length) {\n  <c8y-action-bar-item\n    [placement]=\"'more'\"\n    [priority]=\"-3000\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{ 'Delete dashboard' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      (click)=\"onDeleteDashboard.emit()\"\n      [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n    <button\n      class=\"visible-xs m-l-0\"\n      tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n      type=\"button\"\n      data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n      [disabled]=\"true\"\n    >\n      <i c8yIcon=\"delete\"></i>\n      <span translate>Delete dashboard</span>\n    </button>\n  </c8y-action-bar-item>\n}\n\n@if (!(isLoadingWidgets$ | async)) {\n  @if (resolvedWidgets$ | async; as widgetsToDisplay) {\n    <!-- empty state -->\n    @if (widgetsToDisplay?.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-device'\"\n        [title]=\"'No widgets to display.' | translate\"\n      >\n        @if (onAddWidget.observers.length) {\n          <div>\n            @if (editMode$ | async) {\n              <p translate>Add widgets to this dashboard.</p>\n            }\n            @if (!(editMode$ | async)) {\n              <p translate>Click \"Edit widgets\" to unlock</p>\n            }\n            <div>\n              @if (!settings.isDisabled && (editMode$ | async)) {\n                <button\n                  class=\"btn btn-primary m-t-16\"\n                  title=\"{{ 'Add widget' | translate }}\"\n                  type=\"button\"\n                  (click)=\"onAddWidget.emit()\"\n                  data-cy=\"c8y-widgets-dashboard--add-widget\"\n                  translate\n                >\n                  Add widget\n                </button>\n              }\n            </div>\n            <p c8y-guide-docs>\n              <small\n                translate\n                ngNonBindable\n              >\n                Find out more in the\n                <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>.\n              </small>\n            </p>\n          </div>\n        }\n      </c8y-ui-empty-state>\n    }\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      @for (widget of widgetsToDisplay; track widget.id || widget.name || $index) {\n        <c8y-dashboard-child\n          [class]=\"widget.classes\"\n          [x]=\"widget._x\"\n          [y]=\"widget._y\"\n          [width]=\"widget._width || settings.defaultWidth\"\n          [height]=\"widget._height || settings.defaultHeight\"\n          [margin]=\"settings.widgetMargin\"\n          [data]=\"widget\"\n          [useIntersection]=\"true\"\n          [editMode]=\"editMode$ | async\"\n          (changeStart)=\"\n            onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\n          \"\n          (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n          [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n          #child\n        >\n          @let widgetTitle =\n            widget.title | translate: { noTranslateRemoveContext: !settings.translateWidgetTitle };\n          <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n            <span data-cy=\"c8y-dashboard-list--device-widget\">\n              {{ widgetTitle }}\n            </span>\n          </c8y-dashboard-child-title>\n          @if (onEditWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Edit widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"widgets-dashboard--Edit-widget\"\n                (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n              >\n                <i c8yIcon=\"pencil\"></i>\n                <span translate>Edit</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n          @if (onDeleteWidget.observers.length) {\n            <c8y-dashboard-child-action>\n              <button\n                title=\"{{ 'Remove widget' | translate }}\"\n                type=\"button\"\n                data-cy=\"c8y-widgets-dashboard--remove-widget\"\n                (click)=\"\n                  onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\n                \"\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span translate>Remove</span>\n              </button>\n            </c8y-dashboard-child-action>\n          }\n\n          @if (child.intersected) {\n            <c8y-dynamic-component\n              [componentId]=\"widget.componentId || widget.name\"\n              [config]=\"\n                widget.templateUrl || widget.widgetComponent\n                  ? { child: widget, dashboard: contextDashboard, context: context }\n                  : widget.config\n              \"\n              (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n            ></c8y-dynamic-component>\n          }\n        </c8y-dashboard-child>\n      }\n    </c8y-dashboard>\n  }\n} @else {\n  <c8y-loading class=\"col-xs-12 text-center\"></c8y-loading>\n}\n" }]
-        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$4.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }, { type: i1$4.Router }, { type: i0.ElementRef }], propDecorators: { widgets: [{
+        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$4.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }, { type: i1$4.Router }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{
                 type: Input
@@ -32483,6 +32676,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Output
             }], revertChange: [{
                 type: Output
+            }], dashboardChildren: [{
+                type: ViewChildren,
+                args: [DashboardChildComponent]
+            }], clearWidgetContentOnLeave: [{
+                type: Input
             }] } });
 
 class HelpService {