@c8y/ngx-components 1021.67.0 → 1021.71.0

package/fesm2022/c8y-ngx-components.mjs

@@ -8,24 +8,24 @@ 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';
 import * as i4 from '@c8y/ngx-components/api';
 import { DataModule } from '@c8y/ngx-components/api';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
+export * from '@c8y/ngx-components/gettext';
+import * as i1$1 from '@ngx-translate/core';
+import { TranslateService as TranslateService$1, TranslateDefaultParser, TranslateDirective, TranslatePipe, TranslateModule, TranslateLoader, TranslateCompiler, TranslateFakeCompiler, TranslateParser, MissingTranslationHandler, TranslateStore, USE_STORE, USE_DEFAULT_LANG, USE_EXTEND, DEFAULT_LANGUAGE } from '@ngx-translate/core';
 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';
-import * as i1$1 from '@ngx-translate/core';
-import { TranslateDefaultParser, TranslateDirective, TranslatePipe, TranslateModule, TranslateLoader, TranslateCompiler, TranslateFakeCompiler, TranslateParser, MissingTranslationHandler, TranslateStore, TranslateService as TranslateService$1, USE_STORE, USE_DEFAULT_LANG, USE_EXTEND, DEFAULT_LANGUAGE } from '@ngx-translate/core';
-import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
-export * from '@c8y/ngx-components/gettext';
 import * as i2 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
 import { defineLocale, enGbLocale, zhCnLocale, ptBrLocale, plLocale, nlLocale, koLocale, jaLocale, frLocale, esLocale, deLocale } from 'ngx-bootstrap/chronos';
@@ -1437,35 +1437,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 /**
  * Converts the file size to a readable format.
- * Usage:
+ * Supports both decimal (default) and binary units.
  *
+ * Usage:
  * ```html
- *  {{ myData | bytes }} <!-- e.g. 100.1 MB -->
+ * {{ myData | bytes }}                              <!-- e.g. 100.1 MB (decimal) -->
+ * {{ myData | bytes:2 }}                           <!-- e.g. 100.12 MB (decimal) -->
+ * {{ myData | bytes:1:true }}                      <!-- e.g. 97.7 MiB (binary) -->
+ * {{ myData | bytes:{binary: true} }}              <!-- e.g. 97.7 MiB (binary) -->
+ * {{ myData | bytes:{precision: 2, binary: true} }} <!-- e.g. 97.66 MiB (binary) -->
  * ```
  *
- * Default precision is set to 1 decimal place.
- * To change the precision, pass an additional argument to pipe.
-
- * ```html
- * {{ myData | bytes: 5 }} <!-- e.g. 100.12345 MB -->
- * ```
+ * @param value The number of bytes to convert
+ * @param precisionOrOptions Number of decimal places or options object
+ * @param binary Whether to use binary (1024) or decimal (1000) units (legacy parameter)
+ *
+ * Options object properties:
+ * - precision: number of decimal places (default: 1)
+ * - binary: whether to use binary units (default: false)
+ *
+ * Decimal units: bytes, kB, MB, GB, TB, PB
+ * Binary units: bytes, KiB, MiB, GiB, TiB, PiB
  */
 class BytesPipe {
-    static bytes(bytes, precision) {
+    constructor() {
+        this.translateService = inject(TranslateService$1);
+    }
+    static bytes(bytes, precisionOrOptions = 1, binary = false, translateService) {
+        let bytesLabel = 'bytes';
+        if (translateService) {
+            bytesLabel = translateService.instant(gettext$1('bytes'));
+        }
         if (isNaN$1(bytes) || !isFinite(bytes)) {
             return '-';
         }
         if (bytes === 0) {
-            return 0;
+            return `0 ${bytesLabel}`;
+        }
+        let precision;
+        let isBinary = binary;
+        if (typeof precisionOrOptions === 'object') {
+            precision = precisionOrOptions.precision ?? 1;
+            isBinary = precisionOrOptions.binary ?? false;
         }
-        const units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'];
-        const num = Math.floor(Math.log(bytes) / Math.log(1024));
-        // eslint-disable-next-line no-mixed-operators
-        const result = (bytes / 1024 ** Math.floor(num)).toFixed(precision);
+        else {
+            precision = precisionOrOptions;
+        }
+        const base = isBinary ? 1024 : 1000;
+        const decimalUnits = [bytesLabel, 'kB', 'MB', 'GB', 'TB', 'PB'];
+        const binaryUnits = [bytesLabel, 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
+        const units = isBinary ? binaryUnits : decimalUnits;
+        const num = Math.floor(Math.log(bytes) / Math.log(base));
+        const result = (bytes / base ** Math.floor(num)).toFixed(precision);
         return `${result} ${units[num]}`;
     }
-    transform(value, precision = 1) {
-        return BytesPipe.bytes(value, precision);
+    transform(value, precisionOrOptions = 1, binary = false) {
+        return BytesPipe.bytes(value, precisionOrOptions, binary, this.translateService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BytesPipe, isStandalone: true, name: "bytes" }); }
@@ -11827,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({
@@ -11852,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: '',
@@ -11962,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: [{
@@ -11970,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.
@@ -14161,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
@@ -14179,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
             }] } });
@@ -22138,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 {
@@ -22507,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 {
@@ -23200,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());
     }
@@ -23211,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 }]
@@ -23260,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;
@@ -25773,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 {
@@ -33316,7 +33352,7 @@ class DataGridComponent {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => DataGridComponent)
             }
-        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2$1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i9.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i9.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i9.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i9.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i9.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i9.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i9.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i9.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i9.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i9.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i9.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i9.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i9.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i9.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: 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: i19.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
+        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [style]=\"{ 'margin-left': !column.filterable && column.sortable ? '-20px' : null }\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2$1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i9.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i9.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i9.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i9.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i9.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i9.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i9.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i9.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i9.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i9.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i9.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i9.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i9.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i9.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: 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: i19.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -33325,7 +33361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                             useExisting: forwardRef(() => DataGridComponent)
                         }
-                    ], template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [style]=\"{ 'margin-left': !column.filterable && column.sortable ? '-20px' : null }\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -35130,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 {
@@ -35143,7 +35499,8 @@ class CoreModule {
                 ...NavigatorTopModule.providers(),
                 ...UiSettingsModule.providers(),
                 ...UserModule.providers(),
-                ...VersionModule.providers()
+                ...VersionModule.providers(),
+                ...BETA_FEATURE_PROVIDERS
             ]
         };
     }
@@ -36096,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