@c8y/ngx-components 1021.75.8 → 1021.77.0

package/fesm2022/c8y-ngx-components.mjs

@@ -13495,6 +13495,10 @@ class LoginService {
             : gettext$1('SSO login failed. Contact the administrator.');
         this.modalService.acknowledge(gettext$1('Login error'), body, Status.DANGER, gettext$1('OK'));
     }
+    async clearCookies() {
+        // clear cookies but avoid redirect on logout
+        return await this.cookieAuth.logout({ redirect: 'manual' });
+    }
     /**
      * Sets the tenant to the client and updates the credentials on the
      * auth strategy.
@@ -17225,6 +17229,7 @@ class LoginComponent {
             await this.loginService.login();
         }
         catch (e) {
+            await this.loginService.clearCookies();
             const preferredLoginOptionType = this.loginService.loginMode.type;
             if (preferredLoginOptionType === TenantLoginOptionType.OAUTH2) {
                 this.loginService.redirectToOauth();
@@ -23406,8 +23411,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class NavigatorBottomService {
-    constructor(options) {
+    constructor(options, themeService) {
         this.options = options;
+        this.themeService = themeService;
         this.navigatorLogoVariable = 'navigator-platform-logo';
         this.navigatorLogoHeightVariable = 'navigator-platform-logo-height';
     }
@@ -23415,11 +23421,15 @@ class NavigatorBottomService {
         return this.options.get$('hidePowered').pipe(map(hidePowered => !!hidePowered));
     }
     hasCustomNavigatorLogoSet() {
-        return this.options.get$('brandingCSSVars').pipe(map(vars => {
+        return combineLatest([
+            this.options.get$('brandingCSSVars'),
+            this.themeService.currentlyAppliedTheme$
+        ]).pipe(map(([vars, theme]) => {
             if (!vars || typeof vars !== 'object') {
                 return false;
             }
-            if (typeof vars[this.navigatorLogoVariable] === 'string') {
+            const variableToLookFor = theme === 'dark' ? `dark-${this.navigatorLogoVariable}` : this.navigatorLogoVariable;
+            if (typeof vars[variableToLookFor] === 'string') {
                 return true;
             }
             return false;
@@ -23431,7 +23441,7 @@ class NavigatorBottomService {
     shouldShowDefaultPoweredBy() {
         return combineLatest([this.hasHidePoweredSet(), this.hasCustomNavigatorLogoSet()]).pipe(map(([hidePowered, hasCustomLogo]) => !hidePowered && !hasCustomLogo));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigatorBottomService, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigatorBottomService, deps: [{ token: OptionsService }, { token: ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigatorBottomService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavigatorBottomService, decorators: [{
@@ -23439,7 +23449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: OptionsService }] });
+        }], ctorParameters: () => [{ type: OptionsService }, { type: ThemeSwitcherService }] });
 
 class NavigatorBottomComponent {
     constructor(bottomService) {
@@ -30616,13 +30626,17 @@ class WidgetsDashboardComponent {
         this.settings = { ...this.settings, ...settings };
         this.isLoading$.next(!!this.settings.isLoading);
     }
-    constructor(dynamic, translateService, route, modal, widgetGlobalAutoRefresh, router) {
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(dynamic, translateService, route, modal, widgetGlobalAutoRefresh, router, elementRef) {
         this.dynamic = dynamic;
         this.translateService = translateService;
         this.route = route;
         this.modal = modal;
         this.widgetGlobalAutoRefresh = widgetGlobalAutoRefresh;
         this.router = router;
+        this.elementRef = elementRef;
         /**
          * Indicates if device info in config should be overridden with values from context property.
          */
@@ -30822,7 +30836,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$4.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    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$4.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$4.Router }, { token: i0.ElementRef }], 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)\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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$3.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$5.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$1.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: [{
@@ -30833,7 +30847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
     `,
                         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)\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$4.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }, { type: i1$4.Router }], propDecorators: { widgets: [{
+        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$4.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }, { type: i1$4.Router }, { type: i0.ElementRef }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{
                 type: Input
@@ -35422,11 +35436,11 @@ class BetaPreviewComponent {
         this.resolveClose(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BetaPreviewComponent, isStandalone: true, selector: "c8y-beta-preview", host: { classAttribute: "d-contents" }, providers: [MarkdownToHtmlPipe], ngImport: i0, template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Beta features preview\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            {{ feature.label }}\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: ListGroupModule }, { kind: "pipe", type: FeatureStatePipe, name: "featureState" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BetaPreviewComponent, isStandalone: true, selector: "c8y-beta-preview", host: { classAttribute: "d-contents" }, providers: [MarkdownToHtmlPipe], ngImport: i0, template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            {{ feature.label }}\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: ListGroupModule }, { kind: "pipe", type: FeatureStatePipe, name: "featureState" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-beta-preview', host: { class: 'd-contents' }, standalone: true, imports: [NgForOf, NgIf, AsyncPipe, CommonModule, ListGroupModule, FeatureStatePipe], providers: [MarkdownToHtmlPipe], template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Beta features preview\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            {{ feature.label }}\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-beta-preview', host: { class: 'd-contents' }, standalone: true, imports: [NgForOf, NgIf, AsyncPipe, CommonModule, ListGroupModule, FeatureStatePipe], providers: [MarkdownToHtmlPipe], template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            {{ feature.label }}\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class BetaPreviewButtonComponent {
@@ -35466,11 +35480,11 @@ class BetaPreviewButtonComponent {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaPreviewButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BetaPreviewButtonComponent, isStandalone: true, selector: "c8y-beta-preview-button", ngImport: i0, template: "<div class=\"separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top\">\n  <i class=\"dlt-c8y-icon-science\"></i>\n  <span\n    class=\"text-bold\"\n    translate\n  >\n    Beta features\n  </span>\n  <span\n    class=\"m-l-8 tag tag--primary\"\n    *ngIf=\"hasUnseenFeatures$ | async\"\n  >\n    {{ 'New' | translate }}\n  </span>\n</div>\n<ul class=\"list-unstyled\">\n  <li class=\"c8y-right-drawer__item\">\n    <small translate>\n      Enable or disable experimental features. Your feedback helps us improve functionality before\n      final release.\n    </small>\n  </li>\n  <li class=\"c8y-right-drawer__item\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Manage beta features' | translate }}\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"openBetaPreview()\"\n    >\n      <i class=\"m-t-0 m-b-9 text-14 dlt-c8y-icon-settings\"></i>\n      <span translate>Manage beta features</span>\n    </button>\n  </li>\n</ul>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BetaPreviewButtonComponent, isStandalone: true, selector: "c8y-beta-preview-button", ngImport: i0, template: "<div class=\"separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top\">\n  <i class=\"dlt-c8y-icon-science\"></i>\n  <span\n    class=\"text-bold\"\n    translate\n  >\n    Preview features\n  </span>\n  <span\n    class=\"m-l-8 tag tag--primary\"\n    *ngIf=\"hasUnseenFeatures$ | async\"\n  >\n    {{ 'New' | translate }}\n  </span>\n</div>\n<ul class=\"list-unstyled\">\n  <li class=\"c8y-right-drawer__item\">\n    <small translate>\n      Enable or disable experimental features. Your feedback helps us improve functionality before\n      final release.\n    </small>\n  </li>\n  <li class=\"c8y-right-drawer__item\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Manage preview features' | translate }}\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"openBetaPreview()\"\n    >\n      <i class=\"m-t-0 m-b-9 text-14 dlt-c8y-icon-settings\"></i>\n      <span translate>Manage preview features</span>\n    </button>\n  </li>\n</ul>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaPreviewButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-beta-preview-button', standalone: true, imports: [C8yTranslateDirective, C8yTranslatePipe, AsyncPipe, NgIf], template: "<div class=\"separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top\">\n  <i class=\"dlt-c8y-icon-science\"></i>\n  <span\n    class=\"text-bold\"\n    translate\n  >\n    Beta features\n  </span>\n  <span\n    class=\"m-l-8 tag tag--primary\"\n    *ngIf=\"hasUnseenFeatures$ | async\"\n  >\n    {{ 'New' | translate }}\n  </span>\n</div>\n<ul class=\"list-unstyled\">\n  <li class=\"c8y-right-drawer__item\">\n    <small translate>\n      Enable or disable experimental features. Your feedback helps us improve functionality before\n      final release.\n    </small>\n  </li>\n  <li class=\"c8y-right-drawer__item\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Manage beta features' | translate }}\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"openBetaPreview()\"\n    >\n      <i class=\"m-t-0 m-b-9 text-14 dlt-c8y-icon-settings\"></i>\n      <span translate>Manage beta features</span>\n    </button>\n  </li>\n</ul>\n" }]
+            args: [{ selector: 'c8y-beta-preview-button', standalone: true, imports: [C8yTranslateDirective, C8yTranslatePipe, AsyncPipe, NgIf], template: "<div class=\"separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top\">\n  <i class=\"dlt-c8y-icon-science\"></i>\n  <span\n    class=\"text-bold\"\n    translate\n  >\n    Preview features\n  </span>\n  <span\n    class=\"m-l-8 tag tag--primary\"\n    *ngIf=\"hasUnseenFeatures$ | async\"\n  >\n    {{ 'New' | translate }}\n  </span>\n</div>\n<ul class=\"list-unstyled\">\n  <li class=\"c8y-right-drawer__item\">\n    <small translate>\n      Enable or disable experimental features. Your feedback helps us improve functionality before\n      final release.\n    </small>\n  </li>\n  <li class=\"c8y-right-drawer__item\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Manage preview features' | translate }}\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"openBetaPreview()\"\n    >\n      <i class=\"m-t-0 m-b-9 text-14 dlt-c8y-icon-settings\"></i>\n      <span translate>Manage preview features</span>\n    </button>\n  </li>\n</ul>\n" }]
         }] });
 
 class BetaPreviewDrawerFactory {