@c8y/ngx-components 1021.70.1 → 1021.71.0

package/fesm2022/c8y-ngx-components.mjs

@@ -8,7 +8,7 @@ import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefi
 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';
+import { ApplicationAvailability, OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BearerAuthFromSessionStorage, FetchClient, Client, PasswordStrength, QueriesUtil, InventoryService, UserService, ApplicationService, TenantService, AlarmService, aggregationType, FeatureService, Service } from '@c8y/client';
 import { __decorate, __metadata } from 'tslib';
 import * as i1$4 from '@angular/router';
 import { NavigationEnd, RouterModule as RouterModule$1, RouterLink, ActivationEnd, NavigationStart, PRIMARY_OUTLET, ActivatedRoute, ActivationStart, ChildActivationEnd, ROUTES, Router, NavigationCancel, NavigationError } from '@angular/router';
@@ -22,7 +22,7 @@ import { TranslateService as TranslateService$1, TranslateDefaultParser, Transla
 import * as i2$2 from '@angular/cdk/scrolling';
 import { VIRTUAL_SCROLL_STRATEGY, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2$1 from '@angular/common';
-import { formatDate, registerLocaleData, DOCUMENT, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, AsyncPipe, NgSwitch, NgSwitchCase } from '@angular/common';
+import { formatDate, registerLocaleData, DOCUMENT, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, AsyncPipe, NgSwitch, NgSwitchCase, NgForOf } from '@angular/common';
 import * as i2$3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { setTheme } from 'ngx-bootstrap/utils';
@@ -11854,11 +11854,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * A service which defines header functions.
  */
 class HeaderService extends StateService {
-    constructor(options, humanizeAppName, drawerService) {
+    constructor(options, humanizeAppName, drawerService, serviceRegistry) {
         super();
         this.options = options;
         this.humanizeAppName = humanizeAppName;
         this.drawerService = drawerService;
+        this.serviceRegistry = serviceRegistry;
         this.headerOpen = false;
         this.hideHeader = false;
         this.state$ = new BehaviorSubject({
@@ -11879,6 +11880,9 @@ class HeaderService extends StateService {
         ]).pipe(map(([open, hasItems]) => open && hasItems));
         this.rightDrawerOpen$ = this.map(({ rightDrawer }) => rightDrawer.open).pipe();
         const titleReference = document.querySelector('title');
+        const notificationServices = this.serviceRegistry.get('notificationService');
+        const notificationObservables = notificationServices.map(service => service.shouldShowNotification$);
+        this.showNotification$ = merge(...notificationObservables).pipe(filter(value => value === true), startWith(false));
         this.title = {
             elementRef: titleReference,
             titleSuffix: '',
@@ -11989,7 +11993,7 @@ class HeaderService extends StateService {
     isGlobalTitleValid(globalTitle) {
         return !!globalTitle && typeof globalTitle === 'string' && globalTitle.length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderService, deps: [{ token: OptionsService }, { token: HumanizeAppNamePipe }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderService, deps: [{ token: OptionsService }, { token: HumanizeAppNamePipe }, { token: DrawerService }, { token: ServiceRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderService, decorators: [{
@@ -11997,7 +12001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: OptionsService }, { type: HumanizeAppNamePipe }, { type: DrawerService }] });
+        }], ctorParameters: () => [{ type: OptionsService }, { type: HumanizeAppNamePipe }, { type: DrawerService }, { type: ServiceRegistry }] });
 
 /**
  * Base navigator node. Represents a single entry in the navigator menu.
@@ -14188,6 +14192,7 @@ class HeaderBarComponent {
         this.appState$ = this.appState.state$.asObservable();
         this.headerOpen = false;
         this.loadingClass$ = new Observable();
+        this.showNotification$ = this.headerService.showNotification$;
         /**
          * Can be set to show an header bar with only
          * title, app-switcher and user-menu
@@ -14206,11 +14211,11 @@ class HeaderBarComponent {
         this.headerService.closeRightDrawer();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderBarComponent, deps: [{ token: HeaderService }, { token: ActionService }, { token: BreadcrumbService }, { token: SearchService }, { token: AppStateService }, { token: UserMenuService }, { token: DocsService }, { token: i4.ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n\n    <button\n      class=\"main-header-button drawer-toggle\"\n      [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n      tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n      placement=\"left\"\n      [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n      [attr.aria-controls]=\"'right-drawer'\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleDrawer()\"\n      [attr.data-cy]=\"'right-drawer-toggle-button'\"\n    >\n      <span\n        class=\"user-dot\"\n        title=\"{{ appState.currentUser | async | shortenUserName }}\"\n        *ngIf=\"appState.currentUser | async\"\n        data-cy=\"header-bar--user-dot\"\n      >\n        {{ appState.currentUser | async | userNameInitials }}\n      </span>\n      <span class=\"close-dot\">&times;</span>\n    </button>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "component", type: SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs"] }, { 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: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "component", type: SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs"] }, { 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: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-header-bar', template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n\n    <button\n      class=\"main-header-button drawer-toggle\"\n      [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n      tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n      placement=\"left\"\n      [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n      [attr.aria-controls]=\"'right-drawer'\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleDrawer()\"\n      [attr.data-cy]=\"'right-drawer-toggle-button'\"\n    >\n      <span\n        class=\"user-dot\"\n        title=\"{{ appState.currentUser | async | shortenUserName }}\"\n        *ngIf=\"appState.currentUser | async\"\n        data-cy=\"header-bar--user-dot\"\n      >\n        {{ appState.currentUser | async | userNameInitials }}\n      </span>\n      <span class=\"close-dot\">&times;</span>\n    </button>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
+            args: [{ selector: 'c8y-header-bar', template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n    <ng-container *ngIf=\"showNotification$ | async; else noNotification\">\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\n{{ 'New features available' | translate }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n      <div\n        class=\"p-relative a-s-stretch no-pointer\"\n        *ngIf=\"!(headerService.rightDrawerOpen$ | async)\"\n      >\n        <span\n          class=\"c8y-pulse c8y-pulse--md active\"\n          *ngIf=\"showNotification$ | async\"\n        ></span>\n      </div>\n    </ng-container>\n    <ng-template #noNotification>\n      <button\n        class=\"main-header-button drawer-toggle\"\n        [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n        tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n        placement=\"left\"\n        [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n        [attr.aria-controls]=\"'right-drawer'\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"toggleDrawer()\"\n        [attr.data-cy]=\"'right-drawer-toggle-button'\"\n      >\n        <span\n          class=\"user-dot user-dot-notification\"\n          *ngIf=\"appState.currentUser | async\"\n          data-cy=\"header-bar--user-dot\"\n        >\n          {{ appState.currentUser | async | userNameInitials }}\n        </span>\n        <span class=\"close-dot\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: HeaderService }, { type: ActionService }, { type: BreadcrumbService }, { type: SearchService }, { type: AppStateService }, { type: UserMenuService }, { type: DocsService }, { type: i4.ApiService }], propDecorators: { simple: [{
                 type: Input
             }] } });
@@ -22165,11 +22170,11 @@ class UserDetailsDrawerComponent {
         this.headerService.closeRightDrawer();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserDetailsDrawerComponent, deps: [{ token: AppStateService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserDetailsDrawerComponent, selector: "c8y-user-details-drawer", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"c8y-right-drawer__header separator-bottom\">\n  <button type=\"button\" class=\"close\" [attr.tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\" title=\"{{ 'Close' | translate }}\" (click)=\"close()\">\n    &times;\n  </button>\n  <div class=\"d-flex a-i-center\">\n    <div class=\"user-dot\">{{ appState.currentUser | async | userNameInitials }}</div>\n    <div class=\"min-width-0\">\n      <p\n        *ngIf=\"appState.currentUser | async as currentUser\"\n        class=\"text-truncate text-medium text-16\"\n        title=\"{{ currentUser | shortenUserName }}\"\n      >\n        {{ currentUser | shortenUserName }}\n      </p>\n      <small\n        *ngIf=\"appState.currentUser | async | userRolesList as userRoles\"\n        [title]=\"userRoles\"\n        class=\"text-truncate\"\n      >\n        {{ userRoles }}\n      </small>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }, { kind: "pipe", type: UserRolesListPipe, name: "userRolesList" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserDetailsDrawerComponent, selector: "c8y-user-details-drawer", host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"c8y-right-drawer__header separator-bottom\">\n  <button type=\"button\" class=\"close\" [attr.tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\" title=\"{{ 'Close' | translate }}\" (click)=\"close()\">\n    &times;\n  </button>\n  <div class=\"d-flex a-i-center\">\n    <div class=\"user-dot\">{{ appState.currentUser | async | userNameInitials }}</div>\n    <div class=\"min-width-0\">\n      <p\n        *ngIf=\"appState.currentUser | async as currentUser\"\n        class=\"text-truncate text-medium text-16\"\n        title=\"{{ currentUser | shortenUserName }}\"\n      >\n        {{ currentUser | shortenUserName }}\n      </p>\n      <small\n        *ngIf=\"appState.currentUser | async | userRolesList as userRoles\"\n        [title]=\"userRoles\"\n        class=\"text-truncate\"\n      >\n        {{ userRoles }}\n      </small>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }, { kind: "pipe", type: UserRolesListPipe, name: "userRolesList" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserDetailsDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-user-details-drawer', host: { class: 'd-contents' }, template: "<div class=\"c8y-right-drawer__header separator-bottom\">\n  <button type=\"button\" class=\"close\" [attr.tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\" title=\"{{ 'Close' | translate }}\" (click)=\"close()\">\n    &times;\n  </button>\n  <div class=\"d-flex a-i-center\">\n    <div class=\"user-dot\">{{ appState.currentUser | async | userNameInitials }}</div>\n    <div class=\"min-width-0\">\n      <p\n        *ngIf=\"appState.currentUser | async as currentUser\"\n        class=\"text-truncate text-medium text-16\"\n        title=\"{{ currentUser | shortenUserName }}\"\n      >\n        {{ currentUser | shortenUserName }}\n      </p>\n      <small\n        *ngIf=\"appState.currentUser | async | userRolesList as userRoles\"\n        [title]=\"userRoles\"\n        class=\"text-truncate\"\n      >\n        {{ userRoles }}\n      </small>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-user-details-drawer', host: { class: 'd-contents' }, template: "<div class=\"c8y-right-drawer__header separator-bottom\">\n  <button type=\"button\" class=\"close\" [attr.tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\" title=\"{{ 'Close' | translate }}\" (click)=\"close()\">\n    &times;\n  </button>\n  <div class=\"d-flex a-i-center\">\n    <div class=\"user-dot\">{{ appState.currentUser | async | userNameInitials }}</div>\n    <div class=\"min-width-0\">\n      <p\n        *ngIf=\"appState.currentUser | async as currentUser\"\n        class=\"text-truncate text-medium text-16\"\n        title=\"{{ currentUser | shortenUserName }}\"\n      >\n        {{ currentUser | shortenUserName }}\n      </p>\n      <small\n        *ngIf=\"appState.currentUser | async | userRolesList as userRoles\"\n        [title]=\"userRoles\"\n        class=\"text-truncate\"\n      >\n        {{ userRoles }}\n      </small>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: AppStateService }, { type: HeaderService }] });
 
 class UserDetailsDrawerModule {
@@ -22534,11 +22539,11 @@ class VersionListComponent {
         this.clipboardService.writeText(text);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VersionListComponent, deps: [{ token: VersionService }, { token: AppStateService }, { token: ClipboardService }, { token: i1$5.BsModalService }, { token: PlatformDetailsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VersionListComponent, selector: "c8y-version-list", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-cumulocity-iot\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        translate\n        (click)=\"downloadPlatformDetails()\"\n      >\n        Download platform details\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VersionListComponent, selector: "c8y-version-list", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VersionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-version-list', template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-cumulocity-iot\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        translate\n        (click)=\"downloadPlatformDetails()\"\n      >\n        Download platform details\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
+            args: [{ selector: 'c8y-version-list', template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-c8y-c\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        (click)=\"downloadPlatformDetails()\"\n      >\n        <i c8yIcon=\"download\" class=\"m-t-0 m-b-0 text-14\"></i>\n        <span translate>Download platform details</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
         }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$5.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
 
 class VersionDrawerFactory {
@@ -23227,6 +23232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class BottomDrawerComponent {
     constructor() {
+        this.disableClickOutside = false;
         this.drawerOpenSubject$ = new BehaviorSubject(true);
         this.drawerOpenObs$ = this.drawerOpenSubject$.asObservable().pipe(delay(0), shareReplay());
     }
@@ -23238,11 +23244,11 @@ class BottomDrawerComponent {
         this.drawerOpenSubject$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BottomDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BottomDrawerComponent, isStandalone: true, selector: "c8y-bottom-drawer", viewQueries: [{ propertyName: "drawerHost", first: true, predicate: ["drawerHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div class=\"bottom-drawer\">\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BottomDrawerComponent, isStandalone: true, selector: "c8y-bottom-drawer", viewQueries: [{ propertyName: "drawerHost", first: true, predicate: ["drawerHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BottomDrawerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'c8y-bottom-drawer', imports: [CommonModule$1], template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div class=\"bottom-drawer\">\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'c8y-bottom-drawer', imports: [CommonModule$1], template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { drawerHost: [{
                 type: ViewChild,
                 args: ['drawerHost', { read: ViewContainerRef }]
@@ -23287,6 +23293,9 @@ class BottomDrawerRef {
         this.drawerComponentRef.instance.drawerHost.clear();
         const contentComponentRef = this.drawerComponentRef.instance.drawerHost.createComponent(component);
         assign$1(contentComponentRef.instance, this.options?.initialState);
+        if (this.options?.disableClickOutside) {
+            this.drawerComponentRef.instance.disableClickOutside = this.options.disableClickOutside;
+        }
         this.drawerComponentRef.changeDetectorRef.detectChanges();
         this.handleNavigation();
         return contentComponentRef.instance;
@@ -25800,11 +25809,11 @@ class LegalNoticesOutletComponent {
         this.drawerOpen$ = this.headerService.rightDrawerOpen$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegalNoticesOutletComponent, deps: [{ token: DocsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LegalNoticesOutletComponent, selector: "c8y-legal-notices-outlet", ngImport: i0, template: "<div class=\"separator-top p-t-8 m-t-auto\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container *c8yComponentOutlet=\"legalNotices.component; environmentInjector: legalNotices.injector\"></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.url\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n      action: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LegalNoticesOutletComponent, selector: "c8y-legal-notices-outlet", ngImport: i0, template: "<div class=\"separator-top p-t-4 m-t-auto p-b-4\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container *c8yComponentOutlet=\"legalNotices.component; environmentInjector: legalNotices.injector\"></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.url\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n      action: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegalNoticesOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-legal-notices-outlet', template: "<div class=\"separator-top p-t-8 m-t-auto\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container *c8yComponentOutlet=\"legalNotices.component; environmentInjector: legalNotices.injector\"></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.url\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n      action: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n" }]
+            args: [{ selector: 'c8y-legal-notices-outlet', template: "<div class=\"separator-top p-t-4 m-t-auto p-b-4\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container *c8yComponentOutlet=\"legalNotices.component; environmentInjector: legalNotices.injector\"></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.url\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n      action: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n" }]
         }], ctorParameters: () => [{ type: DocsService }, { type: HeaderService }] });
 
 class LegalNoticesOutletModule {
@@ -35157,6 +35166,326 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<div class=\"input-group\">\n  <div class=\"color-input form-control\">\n    <div class=\"c8y-colorpicker\">\n      <input\n        type=\"color\"\n        [disabled]=\"isDisabled\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [ngModel]=\"currentValue\"\n        (ngModelChange)=\"valueChange($event)\"\n      />\n      <span [style.background-color]=\"currentValue\"></span>\n    </div>\n  </div>\n  <input\n    class=\"form-control\"\n    type=\"text\"\n    [disabled]=\"isDisabled\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [ngModel]=\"currentValue\"\n    (ngModelChange)=\"valueChange($event)\"\n  />\n</div>\n" }]
         }] });
 
+class FeatureCacheService {
+    constructor(featureService) {
+        this.featureService = featureService;
+        this.refreshTrigger = new BehaviorSubject(undefined);
+        this.features$ = this.refreshTrigger.pipe(switchMap(() => this.loadFeatures()), shareReplay(1));
+    }
+    /**
+     * Needed for the angularJS implmentation to show/hide some old features.
+     * Returns a promise
+     */
+    getFeatureStatePromise(key) {
+        return firstValueFrom(this.getFeatureState(key));
+    }
+    /**
+     *
+     * @param key - The feature key to check
+     * @returns true if the feature key exists in the list of features.
+     */
+    featureExists(key) {
+        return this.features$.pipe(map(features => features.some(feature => feature.key === key)));
+    }
+    getFeatureState(key) {
+        return this.features$.pipe(map(features => {
+            const feature = features.find(f => f.key === key);
+            return feature?.active || false;
+        }));
+    }
+    resetFeatureState() {
+        this.refreshTrigger.next();
+    }
+    async loadFeatures() {
+        const response = await this.featureService.list({ pageSize: 1000 });
+        return response.data || [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureCacheService, deps: [{ token: i1.FeatureService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureCacheService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureCacheService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.FeatureService }] });
+
+const HOOK_PREVIEW = new InjectionToken('HOOK_PREVIEW');
+function hookPreview(preview, options) {
+    return hookGeneric(preview, HOOK_PREVIEW, options);
+}
+class PreviewService extends ExtensionPointForPlugins {
+    constructor(rootInjector, pluginService) {
+        super(rootInjector, pluginService);
+        this.items$ = this.setupItemsObservable();
+        this.reload$ = new BehaviorSubject(false);
+        this.LOCAL_STORAGE_KEY = 'c8y_beta_features_seen';
+        this.seenFeatures$ = new BehaviorSubject(this.getSeenFeatures());
+        this.hasUnseenFeatures$ = combineLatest([this.items$, this.seenFeatures$]).pipe(map(([features, seen]) => features.some(feature => !seen.includes(feature.label))), distinctUntilChanged());
+        this.featureService = inject(FeatureService);
+        this.featureCacheService = inject(FeatureCacheService);
+        this.optionsService = inject(OptionsService);
+        this.toggledFeaturesWithReload = new Set(); // track features with settings.reload = true
+    }
+    get state() {
+        return this.state$.value;
+    }
+    /**
+     * Get the state of a specific feature.
+     * @param key The unique key for the feature.
+     * @returns Observable<boolean> representing the state of the feature.
+     */
+    getState$(key) {
+        return this.items$.pipe(switchMap(features => this.optionsService.get$('enableAllBetaFeatures').pipe(switchMap(enableAllBetaFeatures => {
+            if (enableAllBetaFeatures) {
+                return of(true);
+            }
+            const feature = features.find(f => f.key === key);
+            if (!feature) {
+                throw new Error(`Feature with key "${key}" does not exist.`);
+            }
+            if (feature.active$) {
+                return feature.active$;
+            }
+            return this.featureCacheService.getFeatureState(key).pipe(distinctUntilChanged());
+        }))), distinctUntilChanged());
+    }
+    /**
+     * Toggle the state of a specific feature.
+     * @param key The unique key or label for the feature. Label is used to find the custom features.
+     * @returns Promise<void> after toggling the state.
+     */
+    async setFeatureActiveState(key, toggleValue) {
+        const features = await firstValueFrom(this.items$);
+        const feature = features.find(f => f.key === key) || features.find(f => f.label === key);
+        if (!feature) {
+            throw new Error(`Feature with key "${key}" does not exist.`);
+        }
+        if (feature.onToggle) {
+            const success = await feature.onToggle(toggleValue);
+            if (!success) {
+                throw new Error(`Failed to toggle feature with key "${key}".`);
+            }
+            return;
+        }
+        const featureToUpdate = { key: feature.key, active: toggleValue };
+        await this.featureService.updateFeature(featureToUpdate);
+        await this.featureCacheService.resetFeatureState();
+        if (feature.settings?.reload) {
+            if (this.toggledFeaturesWithReload.has(key)) {
+                this.toggledFeaturesWithReload.delete(key);
+            }
+            else {
+                this.toggledFeaturesWithReload.add(key);
+            }
+        }
+        this.reload$.next(this.toggledFeaturesWithReload.size > 0);
+    }
+    /**
+     * Marks all features as seen by the user and updates the local storage.
+     * This assumes all features are provided via the `items$` observable.
+     */
+    async markAllFeaturesAsSeen() {
+        const features = await firstValueFrom(this.items$);
+        const featureNames = features.map(feature => feature.label);
+        localStorage.setItem(this.LOCAL_STORAGE_KEY, JSON.stringify(featureNames));
+        this.seenFeatures$.next(featureNames);
+    }
+    /**
+     *
+     * @returns An array of feature names that have been seen by the user. This is retrieved from local storage.
+     */
+    getSeenFeatures() {
+        const seenFeatures = localStorage.getItem(this.LOCAL_STORAGE_KEY);
+        return seenFeatures ? JSON.parse(seenFeatures) : [];
+    }
+    setupItemsObservable() {
+        return fromTriggerOnce(undefined, this.refresh$, [
+            getInjectedHooks(HOOK_PREVIEW, this.injectors),
+            () => this.factories,
+            stateToFactory(this.state$)
+        ]).pipe(distinctUntilChanged(), map(features => sortByPriority(features)), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviewService, deps: [{ token: i0.Injector }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviewService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviewService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }] });
+
+const SHOW_BETA_PREVIEW = 'showBetaPreview';
+
+class FeatureStatePipe {
+    constructor(previewService) {
+        this.previewService = previewService;
+    }
+    transform(featureKey) {
+        return this.previewService.getState$(featureKey);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureStatePipe, deps: [{ token: PreviewService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FeatureStatePipe, isStandalone: true, name: "featureState" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureStatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'featureState',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: PreviewService }] });
+
+class BetaPreviewComponent {
+    constructor() {
+        this.description$ = new BehaviorSubject('');
+        this.betaPreviewService = inject(PreviewService);
+        this.featureCacheService = inject(FeatureCacheService);
+        this.markdownToHtmlPipe = inject(MarkdownToHtmlPipe);
+        this.features$ = this.betaPreviewService.items$;
+        this.shouldClose = new Promise(resolve => {
+            this.resolveClose = resolve;
+        });
+    }
+    async ngOnInit() {
+        await this.betaPreviewService.markAllFeaturesAsSeen();
+        const features = await firstValueFrom(this.features$);
+        this.updateSelectedFeature(features[0]);
+    }
+    async updateSelectedFeature(feature) {
+        this.selectedFeature = feature;
+        await this.updateDescription();
+    }
+    async updateDescription() {
+        const description = await this.selectedFeature?.description();
+        if (!this.isComponent(description)) {
+            const html = await firstValueFrom(this.markdownToHtmlPipe.transform(description));
+            this.description$.next(html);
+        }
+        else {
+            this.description$.next(description);
+        }
+    }
+    isComponent(description) {
+        return description instanceof Function;
+    }
+    async onToggle(feature, event) {
+        const isChecked = event.target.checked;
+        await this.betaPreviewService.setFeatureActiveState(feature.key, isChecked);
+    }
+    featureKeyExists(key) {
+        return this.featureCacheService.featureExists(key);
+    }
+    close() {
+        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          <ng-container *ngIf=\"feature.key ? (featureKeyExists(feature.key) | async) : true\">\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          </ng-container>\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          <ng-container *ngIf=\"feature.key ? (featureKeyExists(feature.key) | async) : true\">\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          </ng-container>\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 {
+    constructor() {
+        this.previewService = inject(PreviewService);
+        this.bottomDrawerService = inject(BottomDrawerService);
+        this.headerService = inject(HeaderService);
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.hasUnseenFeatures$ = this.previewService.hasUnseenFeatures$;
+        this.open$ = this.headerService.rightDrawerOpen$;
+    }
+    async openBetaPreview() {
+        this.headerService.closeRightDrawer();
+        const bottomDrawer = this.bottomDrawerService.openDrawer(BetaPreviewComponent, {
+            closeOnNavigation: false,
+            disableClickOutside: true
+        });
+        bottomDrawer.onClosed$.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+            if (this.previewService.reload$.value) {
+                window.location.reload();
+            }
+        });
+        try {
+            const result = await bottomDrawer.instance.shouldClose;
+            if (result) {
+                bottomDrawer.close();
+            }
+        }
+        catch (e) {
+            // intended empty
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        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"] }] }); }
+}
+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" }]
+        }] });
+
+class BetaPreviewDrawerFactory {
+    constructor(options, previewService, permissions) {
+        this.options = options;
+        this.previewService = previewService;
+        this.permissions = permissions;
+        this.drawerItem = {
+            component: BetaPreviewButtonComponent,
+            position: 'right',
+            priority: 80,
+            id: 'betaPreview'
+        };
+    }
+    get() {
+        return this.shouldShowBetaPreview$().pipe(distinctUntilChanged(), map(shouldShowBetaPreview => {
+            if (shouldShowBetaPreview) {
+                return this.drawerItem;
+            }
+            return [];
+        }));
+    }
+    shouldShowBetaPreview$() {
+        return combineLatest([this.options.get$('hideBetaPreview'), this.previewService.items$]).pipe(map(([hideBetaPreview, items]) => {
+            const hasItems = items.length > 0;
+            if (!hasItems) {
+                return false;
+            }
+            const hasAdminRole = this.permissions.hasRole(Permissions.ROLE_TENANT_MANAGEMENT_ADMIN);
+            if (hideBetaPreview === undefined) {
+                return hasItems && hasAdminRole;
+            }
+            return !hideBetaPreview && hasItems && hasAdminRole;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaPreviewDrawerFactory, deps: [{ token: OptionsService }, { token: PreviewService }, { token: Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaPreviewDrawerFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaPreviewDrawerFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: OptionsService }, { type: PreviewService }, { type: Permissions }] });
+
+class BetaFeatureShowNotification {
+    constructor(previewService) {
+        this.previewService = previewService;
+        this.shouldShowNotification$ = this.previewService.hasUnseenFeatures$;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaFeatureShowNotification, deps: [{ token: PreviewService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaFeatureShowNotification, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BetaFeatureShowNotification, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: PreviewService }] });
+
+const BETA_FEATURE_PROVIDERS = [
+    hookDrawer(BetaPreviewDrawerFactory),
+    hookService('notificationService', BetaFeatureShowNotification)
+];
+
 class CoreModule {
     static forRoot() {
         return {
@@ -35170,7 +35499,8 @@ class CoreModule {
                 ...NavigatorTopModule.providers(),
                 ...UiSettingsModule.providers(),
                 ...UserModule.providers(),
-                ...VersionModule.providers()
+                ...VersionModule.providers(),
+                ...BETA_FEATURE_PROVIDERS
             ]
         };
     }
@@ -36123,5 +36453,5 @@ function colorValidator(allowedModes) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RelativeTimePipe, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StandalonePluginInjector, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateParserCustom, TranslateService, TranslationLoaderService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_TYPE_VALUES, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
+export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BETA_FEATURE_PROVIDERS, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BetaFeatureShowNotification, BetaPreviewButtonComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PREVIEW, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RelativeTimePipe, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_BETA_PREVIEW, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StandalonePluginInjector, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateParserCustom, TranslateService, TranslationLoaderService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_TYPE_VALUES, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPreview, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
 //# sourceMappingURL=c8y-ngx-components.mjs.map