@c8y/ngx-components 1021.55.2 → 1021.56.4

package/fesm2022/c8y-ngx-components.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Injector, InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, HostListener, NgModuleRef, createNgModule, Component, Output, HostBinding, forwardRef, SecurityContext, TemplateRef, APP_INITIALIZER, runInInjectionContext, effect, Self, SkipSelf, ViewChild, Attribute, ContentChild, ViewContainerRef, ContentChildren, ElementRef, ViewChildren, createComponent, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, Type, DestroyRef } from '@angular/core';
+import { Directive, Input, Injector, InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, HostListener, NgModuleRef, createNgModule, Component, Output, HostBinding, forwardRef, SecurityContext, TemplateRef, APP_INITIALIZER, Self, SkipSelf, ViewChild, Attribute, ContentChild, ViewContainerRef, ContentChildren, ElementRef, ViewChildren, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, effect, Type, DestroyRef } from '@angular/core';
 import * as i1$4 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import * as i3 from '@angular/cdk/a11y';
 import { A11yModule, CdkTrapFocus } from '@angular/cdk/a11y';
-import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, keys, get, isNaN as isNaN$1, isFinite, each, mapValues, mapKeys, forEach, reduce, union, cloneDeep, uniqBy, assign, min, every, first, map as map$2, find, negate, upperFirst, memoize as memoize$1, property, some, entries, omitBy, isDate, orderBy, flatMap, isEmpty, filter as filter$1, snakeCase, matches, isString, clone, toNumber, isEqualWith, escape as escape$1, escapeRegExp, assignWith, set, omit, pick, has, transform, identity, flow, isNil, chunk, values, without, indexOf, parseInt as parseInt$1, kebabCase, forOwn } from 'lodash-es';
-import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, NEVER, Observable, firstValueFrom, map as map$1, distinctUntilChanged as distinctUntilChanged$1, fromEvent, pipe, throwError, concat, EMPTY, timer, fromEventPattern, startWith as startWith$1, switchMap as switchMap$1, takeUntil as takeUntil$1, empty, forkJoin, ReplaySubject, interval, shareReplay as shareReplay$1, mergeMap as mergeMap$1 } from 'rxjs';
+import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, keys, get, isNaN as isNaN$1, isFinite, each, mapValues, mapKeys, forEach, reduce, union, cloneDeep, uniqBy, assign, min, every, first, map as map$2, find, negate, upperFirst, memoize as memoize$1, property, some, entries, omitBy, isDate, orderBy, flatMap, isEmpty, filter as filter$2, snakeCase, matches, isString, clone, toNumber, isEqualWith, escape as escape$1, escapeRegExp, assignWith, set, omit, pick, has, transform, identity, flow, isNil, chunk, values, without, indexOf, parseInt as parseInt$1, kebabCase, forOwn } from 'lodash-es';
+import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, NEVER, Observable, firstValueFrom, map as map$1, distinctUntilChanged as distinctUntilChanged$1, fromEvent, pipe, throwError, concat, filter as filter$1, tap as tap$1, EMPTY, timer, fromEventPattern, startWith as startWith$1, switchMap as switchMap$1, takeUntil as takeUntil$1, empty, forkJoin, ReplaySubject, interval, shareReplay as shareReplay$1, mergeMap as mergeMap$1 } from 'rxjs';
 import { map, distinctUntilChanged, filter, startWith, switchMap, take, shareReplay, scan, debounceTime, share, takeUntil, tap, catchError, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom, mergeMap, every as every$1, toArray, merge as merge$1, expand, skip, mapTo, finalize, reduce as reduce$1, combineLatestWith } from 'rxjs/operators';
 import * as i1 from '@c8y/client';
 import { ApplicationAvailability, OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BearerAuthFromSessionStorage, FetchClient, Client, PasswordStrength, QueriesUtil, InventoryService, UserService, ApplicationService, TenantService, AlarmService, aggregationType, Service } from '@c8y/client';
@@ -9429,7 +9429,7 @@ class IntervalBasedReload {
             return;
         }
         // Checks if the user has stopped scrolling and the countdown is currently hidden
-        const onUserScrollTopShow = !this.isScrolling && this.hideCountdown;
+        const onUserScrollTopShow = !this.isScrolling && this.countdownSubscription?.closed && this.hideCountdown;
         if (onUserScrollTopShow) {
             this.isIntervalRefreshToggleOn = true;
             this.enableCountdown();
@@ -9452,14 +9452,15 @@ class IntervalBasedReload {
      */
     onToggleCountdownButtonState($event) {
         $event.preventDefault();
-        this.isIntervalRefreshToggleOn = !this.isIntervalRefreshToggleOn;
+        this.isIntervalRefreshToggleOn = !this.isRefreshDisabled && !this.isIntervalRefreshToggleOn;
         this.updateCountdownButtonTooltipText();
         if (!this.isIntervalRefreshToggleOn) {
             this.disableCountdown();
             this.manuallyDisabledCountdown = true;
             return;
         }
-        if (this.isIntervalRefreshToggleOn) {
+        const onRefreshToggleOn = this.isIntervalRefreshToggleOn && this.countdownSubscription.closed;
+        if (onRefreshToggleOn) {
             this.enableCountdown();
             this.manuallyDisabledCountdown = false;
         }
@@ -9474,14 +9475,12 @@ class IntervalBasedReload {
      * @param injector - The injector used to provide necessary dependencies
      *                   within the `runInInjectionContext`.
      */
-    startCountdown(injector) {
-        runInInjectionContext(injector, () => {
-            effect(() => {
-                if (!this.isLoading()) {
-                    this.countdownIntervalComponent?.start();
-                }
-            });
-        });
+    startCountdown() {
+        this.countdownSubscription = this.isLoading
+            .pipe(filter$1(isLoading => !Boolean(isLoading)), tap$1(() => {
+            this.countdownIntervalComponent?.start();
+        }))
+            .subscribe();
     }
     /**
      * Disables and hides the countdown timer.
@@ -9492,6 +9491,7 @@ class IntervalBasedReload {
      * conceal the countdown timer.
      */
     disableCountdown() {
+        this.countdownSubscription.unsubscribe();
         this.countdownIntervalComponent?.stop();
         this.hideCountdown = true;
     }
@@ -10901,9 +10901,9 @@ class ActionBarComponent {
         });
     }
     ngOnInit() {
-        this.right$ = this.items$.pipe(map(items => filter$1(items, { placement: 'right' })), map(items => sortBy(items, this.byPriority)));
-        this.left$ = this.items$.pipe(map(items => filter$1(items, { placement: 'left' })), map(items => sortBy(items, this.byPriority)));
-        this.more$ = this.items$.pipe(map(items => filter$1(items, { placement: 'more' })), map(items => sortBy(items, this.byPriority)));
+        this.right$ = this.items$.pipe(map(items => filter$2(items, { placement: 'right' })), map(items => sortBy(items, this.byPriority)));
+        this.left$ = this.items$.pipe(map(items => filter$2(items, { placement: 'left' })), map(items => sortBy(items, this.byPriority)));
+        this.more$ = this.items$.pipe(map(items => filter$2(items, { placement: 'more' })), map(items => sortBy(items, this.byPriority)));
         this.hidden$ = this.items$.pipe(map(items => {
             return !(items && items.length);
         }));
@@ -12780,15 +12780,19 @@ class LoginService {
             window.location.href = `${initRequest}${originUriParam}`;
         }
     }
-    loginBySso(sessionState, code) {
+    loginBySso({ code, sessionState }) {
         const params = {
             method: 'GET',
             headers: {
                 Accept: 'text/html,application/xhtml+xml'
             }
         };
+        let url = `/tenant/oauth?code=${encodeURIComponent(code)}`;
+        if (sessionState) {
+            url += `&session_state=${encodeURIComponent(sessionState)}`;
+        }
         return this.client
-            .fetch(`/tenant/oauth?session_state=${sessionState}&code=${code}`, params)
+            .fetch(url, params)
             .then(res => this.handleErrorStatusCodes(res))
             .catch(ex => {
             this.showSsoError(ex);
@@ -14887,7 +14891,7 @@ class PasswordService {
         return password.search(/[^0-9a-zA-Z]+/) !== -1;
     }
     getStrengthColor(password) {
-        const passwordStrength = filter$1([
+        const passwordStrength = filter$2([
             this.hasLowerCase(password),
             this.hasUpperCase(password),
             this.hasNumbers(password),
@@ -15194,7 +15198,7 @@ class PasswordStrengthCheckerService {
         return password.search(/[^0-9a-zA-Z]+/) !== -1;
     }
     getStrengthColor(password) {
-        const passwordStrength = filter$1([
+        const passwordStrength = filter$2([
             this.hasLowerCase(password),
             this.hasUpperCase(password),
             this.hasNumbers(password),
@@ -16887,7 +16891,7 @@ class LoginComponent {
     getSsoData() {
         const code = this.getParamAndClear('code');
         const sessionState = this.getParamAndClear('session_state');
-        if (sessionState && code) {
+        if (code) {
             return { sessionState, code };
         }
         const ssoError = this.getParamAndClear('error');
@@ -16897,13 +16901,13 @@ class LoginComponent {
         }
     }
     handleSso(ssoData) {
-        if (ssoData.ssoError) {
+        if ('ssoError' in ssoData) {
             this.loginService.showSsoError(decodeURIComponent(ssoData.ssoErrorDescription).replace(/\+/g, '%20'));
             this.reset();
         }
         else {
             this.loginService
-                .loginBySso(ssoData.sessionState, ssoData.code)
+                .loginBySso(ssoData)
                 .then(() => this.loginService.login())
                 .catch(e => {
                 this.reset();
@@ -28236,7 +28240,7 @@ const AGGREGATION_ICONS = {
     DAILY: 'calendar-o'
 };
 const AGGREGATION_TEXTS = {
-    disabled: gettext$1('No aggregation with realtime enabled'),
+    disabled: gettext$1('No aggregation with real-time or auto-refresh enabled'),
     undefined: gettext$1('No aggregation'),
     MINUTELY: gettext$1('Minutely aggregation'),
     HOURLY: gettext$1('Hourly aggregation'),
@@ -28276,11 +28280,11 @@ class WidgetTimeContextIconBar {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextIconBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextIconBar, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-time-context-icon-bar', template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n" }]
+            args: [{ selector: 'c8y-widget-time-context-icon-bar', template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -28520,13 +28524,13 @@ class DashboardChildComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$3.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  <div\n    class=\"card-placeholder\"\n    *ngIf=\"isResize\"\n  ></div>\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div\n        class=\"header-actions d-flex a-i-center\"\n        *ngIf=\"actions.length > 0\"\n      >\n        <c8y-widget-time-context-icon-bar\n          *ngIf=\"data?.config?.displaySettings && data?.config?.widgetInstanceGlobalTimeContext\"\n          [config]=\"data.config\"\n        ></c8y-widget-time-context-icon-bar>\n        <c8y-widget-auto-refresh-context-icon-bar\n          *ngIf=\"\n            data?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            data?.config?.displaySettings.globalAutoRefreshContext\n          \"\n        ></c8y-widget-auto-refresh-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          delay=\"500\"\n          container=\"body\"\n          [disabled]=\"editMode || !canToggleFullscreen\"\n          (click)=\"toggleFullscreen.next()\"\n          data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n        >\n          <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n        </button>\n        <div\n          class=\"optionsBtn dropdown\"\n          placement=\"bottom right\"\n          dropdown\n          [container]=\"'body'\"\n        >\n          <button\n            class=\"btn btn-icon c8y-dropdown\"\n            title=\"{{ 'Settings' | translate }}\"\n            aria-haspopup=\"true\"\n            *ngIf=\"editMode\"\n            data-cy=\"c8y-dashboard-child--settings\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n            tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n            container=\"body\"\n            *ngIf=\"!editMode\"\n            (click)=\"(false)\"\n            data-cy=\"c8y-dashboard-child--settings-locked\"\n          >\n            <i [c8yIcon]=\"'lock'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            data-cy=\"c8y-dashboard-child--actions-dropdown\"\n            style=\"right: -1px\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"resize-handle hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n      cdkDrag\n      [cdkDragDisabled]=\"!editMode || fullscreen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div\n      class=\"resize-icon hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n    ></div>\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$2.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: "component", type: WidgetAutoRefreshContextIconBarComponent, selector: "c8y-widget-auto-refresh-context-icon-bar" }, { kind: "component", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: ["config"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  <div\n    class=\"card-placeholder\"\n    *ngIf=\"isResize\"\n  ></div>\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div\n        class=\"header-actions d-flex a-i-center\"\n        *ngIf=\"actions.length > 0\"\n      >\n        <c8y-widget-time-context-icon-bar\n          *ngIf=\"\n            data?.config?.displaySettings &&\n            (data?.config?.widgetInstanceGlobalTimeContext ||\n              data?.config?.widgetInstanceGlobalAutoRefreshContext)\n          \"\n          [config]=\"data.config\"\n        ></c8y-widget-time-context-icon-bar>\n        <c8y-widget-auto-refresh-context-icon-bar\n          *ngIf=\"\n            data?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            data?.config?.displaySettings.globalAutoRefreshContext\n          \"\n        ></c8y-widget-auto-refresh-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          [delay]=\"500\"\n          container=\"body\"\n          [disabled]=\"editMode || !canToggleFullscreen\"\n          (click)=\"toggleFullscreen.next()\"\n          data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n        >\n          <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n        </button>\n        <div\n          class=\"optionsBtn dropdown\"\n          placement=\"bottom right\"\n          dropdown\n          [container]=\"'body'\"\n        >\n          <button\n            class=\"btn btn-icon c8y-dropdown\"\n            title=\"{{ 'Settings' | translate }}\"\n            aria-haspopup=\"true\"\n            *ngIf=\"editMode\"\n            data-cy=\"c8y-dashboard-child--settings\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n            tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n            container=\"body\"\n            *ngIf=\"!editMode\"\n            (click)=\"(false)\"\n            data-cy=\"c8y-dashboard-child--settings-locked\"\n          >\n            <i [c8yIcon]=\"'lock'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            style=\"right: -1px\"\n            data-cy=\"c8y-dashboard-child--actions-dropdown\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"resize-handle hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n      cdkDrag\n      [cdkDragDisabled]=\"!editMode || fullscreen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div\n      class=\"resize-icon hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n    ></div>\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$2.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: "component", type: WidgetAutoRefreshContextIconBarComponent, selector: "c8y-widget-auto-refresh-context-icon-bar" }, { kind: "component", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: ["config"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardChildComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-dashboard-child', host: {
                         class: 'dashboard-grid-child'
-                    }, template: "<div cdkDropList>\n  <div\n    class=\"card-placeholder\"\n    *ngIf=\"isResize\"\n  ></div>\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div\n        class=\"header-actions d-flex a-i-center\"\n        *ngIf=\"actions.length > 0\"\n      >\n        <c8y-widget-time-context-icon-bar\n          *ngIf=\"data?.config?.displaySettings && data?.config?.widgetInstanceGlobalTimeContext\"\n          [config]=\"data.config\"\n        ></c8y-widget-time-context-icon-bar>\n        <c8y-widget-auto-refresh-context-icon-bar\n          *ngIf=\"\n            data?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            data?.config?.displaySettings.globalAutoRefreshContext\n          \"\n        ></c8y-widget-auto-refresh-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          delay=\"500\"\n          container=\"body\"\n          [disabled]=\"editMode || !canToggleFullscreen\"\n          (click)=\"toggleFullscreen.next()\"\n          data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n        >\n          <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n        </button>\n        <div\n          class=\"optionsBtn dropdown\"\n          placement=\"bottom right\"\n          dropdown\n          [container]=\"'body'\"\n        >\n          <button\n            class=\"btn btn-icon c8y-dropdown\"\n            title=\"{{ 'Settings' | translate }}\"\n            aria-haspopup=\"true\"\n            *ngIf=\"editMode\"\n            data-cy=\"c8y-dashboard-child--settings\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n            tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n            container=\"body\"\n            *ngIf=\"!editMode\"\n            (click)=\"(false)\"\n            data-cy=\"c8y-dashboard-child--settings-locked\"\n          >\n            <i [c8yIcon]=\"'lock'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            data-cy=\"c8y-dashboard-child--actions-dropdown\"\n            style=\"right: -1px\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"resize-handle hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n      cdkDrag\n      [cdkDragDisabled]=\"!editMode || fullscreen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div\n      class=\"resize-icon hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n    ></div>\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n" }]
+                    }, template: "<div cdkDropList>\n  <div\n    class=\"card-placeholder\"\n    *ngIf=\"isResize\"\n  ></div>\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div\n        class=\"header-actions d-flex a-i-center\"\n        *ngIf=\"actions.length > 0\"\n      >\n        <c8y-widget-time-context-icon-bar\n          *ngIf=\"\n            data?.config?.displaySettings &&\n            (data?.config?.widgetInstanceGlobalTimeContext ||\n              data?.config?.widgetInstanceGlobalAutoRefreshContext)\n          \"\n          [config]=\"data.config\"\n        ></c8y-widget-time-context-icon-bar>\n        <c8y-widget-auto-refresh-context-icon-bar\n          *ngIf=\"\n            data?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            data?.config?.displaySettings.globalAutoRefreshContext\n          \"\n        ></c8y-widget-auto-refresh-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          [delay]=\"500\"\n          container=\"body\"\n          [disabled]=\"editMode || !canToggleFullscreen\"\n          (click)=\"toggleFullscreen.next()\"\n          data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n        >\n          <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n        </button>\n        <div\n          class=\"optionsBtn dropdown\"\n          placement=\"bottom right\"\n          dropdown\n          [container]=\"'body'\"\n        >\n          <button\n            class=\"btn btn-icon c8y-dropdown\"\n            title=\"{{ 'Settings' | translate }}\"\n            aria-haspopup=\"true\"\n            *ngIf=\"editMode\"\n            data-cy=\"c8y-dashboard-child--settings\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n            tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n            container=\"body\"\n            *ngIf=\"!editMode\"\n            (click)=\"(false)\"\n            data-cy=\"c8y-dashboard-child--settings-locked\"\n          >\n            <i [c8yIcon]=\"'lock'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            style=\"right: -1px\"\n            data-cy=\"c8y-dashboard-child--actions-dropdown\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"resize-handle hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n      cdkDrag\n      [cdkDragDisabled]=\"!editMode || fullscreen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div\n      class=\"resize-icon hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n    ></div>\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$3.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
                 type: ContentChildren,
                 args: [DashboardChildActionComponent]
@@ -28650,6 +28654,8 @@ class WidgetsDashboardEventService {
          */
         this.events$ = new Subject();
         this.lastValueByEvent = {};
+        this.autoRefresh$ = new ReplaySubject(1);
+        this.onAutoRefresh$ = this.autoRefresh$.asObservable();
     }
     /**
      * Returns a subscribable event observable of specific event type if eventType is passed, or observable of
@@ -28676,6 +28682,21 @@ class WidgetsDashboardEventService {
         this.lastValueByEvent[event.type] = event.data;
         this.events$.next(event);
     }
+    /**
+     * @ignore
+     */
+    emitAutoRefresh(value) {
+        this.autoRefresh$.next(value);
+    }
+    // When a dashboard has a multiple tabs, and not all of them has a realtime global context control
+    // we need to set the realtime to false when switching between tabs to make aggregation selector not to be always disabled
+    // while global auto-refresh context control is available.
+    setRealtimeTimeContextSetting(value = false) {
+        this.lastValueByEvent.TIME_CONTEXT = {
+            ...this.lastValueByEvent.TIME_CONTEXT,
+            realtime: value
+        };
+    }
     /**
      * @ignore
      */
@@ -28689,6 +28710,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+class AggregationPickerComponent {
+    constructor() {
+        /**
+         * Configuration for disabling specific types of aggregation.
+         * By default no aggregation type is disabled.
+         */
+        this.disabledAggregations = {};
+        this.AGGREGATIONS = AGGREGATIONS;
+        this.AGGREGATION_ICONS = AGGREGATION_ICONS;
+        this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
+        this.touched = false;
+        this.disabled = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = _ => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AggregationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AggregationPickerComponent, isStandalone: true, selector: "c8y-aggregation-picker", inputs: { disabledAggregations: "disabledAggregations" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AggregationPickerComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AggregationPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-aggregation-picker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AggregationPickerComponent),
+                            multi: true
+                        }
+                    ], standalone: true, imports: [BsDropdownModule, TooltipModule, IconDirective, NgFor, NgClass, C8yTranslatePipe], template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
+        }], propDecorators: { disabledAggregations: [{
+                type: Input
+            }] } });
+
+class RealtimeControlComponent {
+    constructor() {
+        this.disableRealtimeLabel = gettext$1('Disable realtime');
+        this.enableRealtimeLabel = gettext$1('Enable realtime');
+        this.touched = false;
+        this.disabled = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = _ => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RealtimeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RealtimeControlComponent, isStandalone: true, selector: "c8y-realtime-control", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RealtimeControlComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RealtimeControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-realtime-control', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RealtimeControlComponent),
+                            multi: true
+                        }
+                    ], standalone: true, imports: [TooltipModule, NgClass, C8yTranslatePipe], template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n" }]
+        }] });
+
+class WidgetTimeContextDateRangeService {
+    constructor() {
+        this.timeContextChange = signal(null);
+        this.initialTimeRange = signal(null);
+    }
+    emitPropertyUpdate(data) {
+        this.timeContextChange.set(data);
+    }
+    updateInitialTimeRange(data) {
+        this.initialTimeRange.set(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextDateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextDateRangeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextDateRangeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 var DateContextQueryParamNames;
 (function (DateContextQueryParamNames) {
     DateContextQueryParamNames["DATE_CONTEXT_FROM"] = "dateContextFrom";
@@ -28949,133 +29097,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: WidgetTimeContextHelperService }, { type: i1$5.Router }] });
 
-class WidgetTimeContextDateRangeService {
-    constructor() {
-        this.timeContextChange = signal(null);
-        this.initialTimeRange = signal(null);
-    }
-    emitPropertyUpdate(data) {
-        this.timeContextChange.set(data);
-    }
-    updateInitialTimeRange(data) {
-        this.initialTimeRange.set(data);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextDateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextDateRangeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetTimeContextDateRangeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class RealtimeControlComponent {
-    constructor() {
-        this.disableRealtimeLabel = gettext$1('Disable realtime');
-        this.enableRealtimeLabel = gettext$1('Enable realtime');
-        this.touched = false;
-        this.disabled = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = _ => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(onTouched) {
-        this.onTouched = onTouched;
-    }
-    markAsTouched() {
-        if (!this.touched) {
-            this.onTouched();
-            this.touched = true;
-        }
-    }
-    setDisabledState(disabled) {
-        this.disabled = disabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RealtimeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RealtimeControlComponent, isStandalone: true, selector: "c8y-realtime-control", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RealtimeControlComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RealtimeControlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-realtime-control', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RealtimeControlComponent),
-                            multi: true
-                        }
-                    ], standalone: true, imports: [TooltipModule, NgClass, C8yTranslatePipe], template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n" }]
-        }] });
-
-class AggregationPickerComponent {
-    constructor() {
-        /**
-         * Configuration for disabling specific types of aggregation.
-         * By default no aggregation type is disabled.
-         */
-        this.disabledAggregations = {};
-        this.AGGREGATIONS = AGGREGATIONS;
-        this.AGGREGATION_ICONS = AGGREGATION_ICONS;
-        this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
-        this.touched = false;
-        this.disabled = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = _ => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(onTouched) {
-        this.onTouched = onTouched;
-    }
-    markAsTouched() {
-        if (!this.touched) {
-            this.onTouched();
-            this.touched = true;
-        }
-    }
-    setDisabledState(disabled) {
-        this.disabled = disabled;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AggregationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AggregationPickerComponent, isStandalone: true, selector: "c8y-aggregation-picker", inputs: { disabledAggregations: "disabledAggregations" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AggregationPickerComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AggregationPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-aggregation-picker', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AggregationPickerComponent),
-                            multi: true
-                        }
-                    ], standalone: true, imports: [BsDropdownModule, TooltipModule, IconDirective, NgFor, NgClass, C8yTranslatePipe], template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
-        }], propDecorators: { disabledAggregations: [{
-                type: Input
-            }] } });
-
 class WidgetTimeContextComponent {
     /**
      * @ignore only DI.
@@ -29151,6 +29172,16 @@ class WidgetTimeContextComponent {
         this.subscribeToIntervalChange();
         this.subscribeToRealtimeChange();
         this.subscribeToAggregationChange();
+        this.widgetEventService.onAutoRefresh$
+            .pipe(takeUntil(this.destroy$), tap(autoRefresh => (this.isAutoRefreshEnabled = autoRefresh)))
+            .subscribe(autoRefresh => {
+            // Fix for:
+            // 1. Make a group with dashboard having a widget with with auto-refresh time context enabled.
+            // 2. When you route to e.g. home page and back to the group dashboard, none of a groups will be routable again.
+            queueMicrotask(() => {
+                autoRefresh ? this.onDisableAutoRefresh() : this.enableDateRangeAndAggregation();
+            });
+        });
         if (initialContext.realtime) {
             this.onRealtimeValueChange(initialContext.realtime);
             this.startRealtime();
@@ -29214,6 +29245,8 @@ class WidgetTimeContextComponent {
     ngOnDestroy() {
         this.unsubscribeFromGlobalContext();
         this.clearQueryParamsIfNeeded();
+        this.widgetEventService.setRealtimeTimeContextSetting();
+        this.widgetEventService.emitAutoRefresh(false);
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -29428,9 +29461,7 @@ class WidgetTimeContextComponent {
         };
     }
     startRealtime() {
-        this.form.controls.temporaryUserSelectedFromDate.disable();
-        this.form.controls.temporaryUserSelectedToDate.disable();
-        this.form.controls.aggregation.disable();
+        this.disableDateRangeAndAggregation();
         this.realtimeSubscription = interval(this.REALTIME_INTERVAL)
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
@@ -29444,11 +29475,26 @@ class WidgetTimeContextComponent {
             });
         });
     }
+    onDisableAutoRefresh() {
+        this.form.controls.aggregation.setValue(null);
+        this.disableDateRangeAndAggregation();
+    }
+    disableDateRangeAndAggregation() {
+        this.form.controls.temporaryUserSelectedFromDate.disable();
+        this.form.controls.temporaryUserSelectedToDate.disable();
+        this.form.controls.aggregation.disable();
+    }
+    enableDateRangeAndAggregation() {
+        if (this.form.controls.realtime.value || this.isAutoRefreshEnabled) {
+            return;
+        }
+        this.form.controls.temporaryUserSelectedFromDate.enable();
+        this.form.controls.temporaryUserSelectedToDate.enable();
+        this.form.controls.aggregation.enable();
+    }
     stopRealtime() {
         this.realtimeSubscription?.unsubscribe();
-        this.form?.controls.temporaryUserSelectedFromDate.enable();
-        this.form?.controls.temporaryUserSelectedToDate.enable();
-        this.form?.controls.aggregation.enable();
+        this.enableDateRangeAndAggregation();
     }
     onRealtimeValueChange(realtime) {
         let dateTimeContext;
@@ -29908,13 +29954,11 @@ class AutoRefreshControlComponent {
         this.DEFAULT_INTERVAL_VALUE = DEFAULT_INTERVAL_VALUE;
         this.loading = new EventEmitter();
         this.widgetGlobalAutoRefresh = inject(WidgetGlobalAutoRefreshService);
+        this.showIntervalRefresh$ = new BehaviorSubject(this.widgetGlobalAutoRefresh.autoRefreshSettings.isEnabled$.getValue());
         this.destroy$ = new Subject();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
     }
-    ngOnInit() {
-        this.showIntervalRefresh$ = this.widgetGlobalAutoRefresh.autoRefreshSettings.isEnabled$;
-    }
     ngAfterViewInit() {
         this.subscribeOnCountdownChangeState();
         this.setUpOnCountdownEndedListener();
@@ -30037,6 +30081,7 @@ class WidgetAutoRefreshContextComponent {
         this.destroy$ = new Subject();
         this.fb = inject(FormBuilder);
         this.widgetGlobalAutoRefresh = inject(WidgetGlobalAutoRefreshService);
+        this.widgetEventService = inject(WidgetsDashboardEventService);
     }
     ngOnInit() {
         this.widgetGlobalAutoRefresh.globalRefreshWidgetsCount.update(count => count + 1);
@@ -30044,6 +30089,11 @@ class WidgetAutoRefreshContextComponent {
         this.subscribeOnAutoRefreshSecondsChange();
         this.subscribeOnAutoRefreshChange();
         this.subscribeOnRouterEvents();
+        this.form.controls.autoRefresh.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(autorefresh => {
+            this.widgetEventService.emitAutoRefresh(autorefresh);
+        });
     }
     ngAfterViewInit() {
         this.initializeWidgetSubscriptions();
@@ -30057,6 +30107,7 @@ class WidgetAutoRefreshContextComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe();
         this.listenOnDashboardSaveOperation();
+        this.widgetEventService.emitAutoRefresh(this.form.controls.autoRefresh.value);
     }
     ngOnDestroy() {
         this.onContextDestroy();
@@ -30364,7 +30415,7 @@ class WidgetsDashboardComponent {
         return widgets;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$5.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons" }, 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: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\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]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\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\"\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{\n        (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel) | 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      <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\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<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\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            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\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)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\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        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"(editMode$ | async)\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\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          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2$2.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: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i2$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: ["canDecouple", "displaySettings", "hidden"], outputs: ["dateContextChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { 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: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: WidgetAutoRefreshContextComponent, selector: "c8y-widget-auto-refresh-context", inputs: ["editMode$"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons" }, 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: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\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]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\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\"\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\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    <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\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<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\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            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\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)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\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        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            (widget.config.widgetInstanceGlobalTimeContext ||\n              widget.config.widgetInstanceGlobalAutoRefreshContext)\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode$ | async\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\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          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2$2.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: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i2$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: ["canDecouple", "displaySettings", "hidden"], outputs: ["dateContextChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { 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: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: WidgetAutoRefreshContextComponent, selector: "c8y-widget-auto-refresh-context", inputs: ["editMode$"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WidgetsDashboardComponent, decorators: [{
             type: Component,
@@ -30373,7 +30424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
       display: block;
     `,
                         class: 'dashboard c8y-grid-dashboard'
-                    }, providers: [WidgetsDashboardEventService], template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\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]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\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\"\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{\n        (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel) | 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      <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\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<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\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            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\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)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\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        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"(editMode$ | async)\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\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          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n" }]
+                    }, providers: [WidgetsDashboardEventService], template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\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<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\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]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\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\"\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\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<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\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    <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\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<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\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<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\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            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\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)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\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        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            (widget.config.widgetInstanceGlobalTimeContext ||\n              widget.config.widgetInstanceGlobalAutoRefreshContext)\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode$ | async\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\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          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$5.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{