@c8y/ngx-components 1023.48.3 → 1023.50.2

package/fesm2022/c8y-ngx-components.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, createEnvironmentInjector, InjectionToken, Optional, Inject, Injectable, EventEmitter, Pipe, NgModule, LOCALE_ID, NgModuleRef, createNgModule, isDevMode, inject, DOCUMENT, EnvironmentInjector, Injector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, ElementRef, ContentChildren, ViewContainerRef, ViewChildren, viewChild, effect, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, computed, Type, input, output } from '@angular/core';
+import { Input, Directive, createEnvironmentInjector, InjectionToken, Optional, Inject, Injectable, EventEmitter, Pipe, NgModule, LOCALE_ID, NgModuleRef, createNgModule, isDevMode, inject, DOCUMENT, EnvironmentInjector, Injector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, ElementRef, Self, SkipSelf, Attribute, ContentChild, ContentChildren, ViewContainerRef, ViewChildren, viewChild, effect, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, computed, Type, input, output } from '@angular/core';
 import * as i1$3 from 'ngx-bootstrap/dropdown';
-import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
-import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
+import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ConfigurableFocusTrapFactory, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, each, mapValues, mapKeys, keys, get, isNaN as isNaN$1, isFinite, forEach, assign, min, every, first, map as map$1, find, negate, upperFirst, memoize as memoize$1, isEmpty, property, some, entries, omitBy, isDate, pick, flatMap, orderBy, filter as filter$2, snakeCase, matches, escape, escapeRegExp, assignWith, set, toNumber, isEqualWith, clone, omit, cloneDeep, uniqBy, has, transform, identity, unset, flow, findIndex as findIndex$1, isNil, chunk, values, union, without, indexOf, kebabCase, forOwn } from 'lodash-es';
 import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, ReplaySubject, firstValueFrom, lastValueFrom, NEVER, Observable, startWith as startWith$1, filter as filter$1, tap as tap$1, mergeMap, fromEvent, pipe, throwError, concat, map as map$2, fromEventPattern, withLatestFrom, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, catchError as catchError$1, empty, timer, forkJoin, interval, shareReplay as shareReplay$1, switchMap as switchMap$1, skip as skip$1, debounceTime as debounceTime$1 } from 'rxjs';
 import { map, distinctUntilChanged, filter, startWith, switchMap, shareReplay, take, scan, takeUntil, tap, catchError, debounceTime, share, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom as withLatestFrom$1, mergeMap as mergeMap$1, every as every$1, toArray, merge as merge$1, expand, mapTo, skip, reduce, finalize, combineLatestWith } from 'rxjs/operators';
@@ -16,7 +16,7 @@ import { provideClientLibServices } from '@c8y/ngx-components/api';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateDirective, TranslatePipe, TranslateStore, TranslateService as TranslateService$1, provideTranslateService, provideTranslateLoader, provideMissingTranslationHandler, TranslateParser } from '@ngx-translate/core';
 import * as i2$3 from '@angular/common';
-import { formatDate, registerLocaleData, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, NgSwitch, NgSwitchCase, AsyncPipe, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, NgComponentOutlet, NgSwitchDefault, KeyValuePipe, LocationStrategy, UpperCasePipe, NgPlural, NgPluralCase, SlicePipe, NgForOf } from '@angular/common';
+import { formatDate, registerLocaleData, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, NgSwitch, NgSwitchCase, AsyncPipe, DecimalPipe, NgStyle, CommonModule as CommonModule$1, DOCUMENT as DOCUMENT$1, NgFor, NgComponentOutlet, NgSwitchDefault, KeyValuePipe, LocationStrategy, UpperCasePipe, NgPlural, NgPluralCase, SlicePipe, NgForOf } from '@angular/common';
 import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll, ScrollingModule } from '@angular/cdk/scrolling';
@@ -8843,6 +8843,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+/**
+ * Directive to manage focus trapping and keyboard navigation for ngx-bootstrap dropdowns with `container="body"`.
+ *
+ * ## Problem
+ * When a dropdown is appended to the body using `container="body"`, the standard `cdkTrapFocus`
+ * directive doesn't work because the dropdown content is outside the normal DOM hierarchy where
+ * the directive is applied.
+ *
+ * ## Solution
+ * This directive:
+ * - Detects when a dropdown with `container="body"` opens
+ * - Programmatically creates a CDK focus trap on the body-appended dropdown menu element
+ * - Traps Tab/Shift+Tab navigation within the dropdown menu
+ * - Automatically closes dropdown and restores focus to toggle button when user selects an item with Enter/Space
+ * - Prevents ESC key from propagating to parent elements (e.g., modals, drawers) and restores focus on close
+ * - Cleans up all listeners when the dropdown closes
+ *
+ * ## Usage
+ * Simply apply this directive to the same element that has the `dropdown` directive:
+ *
+ * @example
+ * ```html
+ * <div dropdown container="body" c8yDropdownFocusTrap #myDropdown="bs-dropdown">
+ *   <button dropdownToggle>Select option</button>
+ *   <div *dropdownMenu class="dropdown-menu">
+ *     <c8y-list-group role="list">
+ *       <c8y-li tabindex="0" role="listitem">Option 1</c8y-li>
+ *       <c8y-li tabindex="0" role="listitem">Option 2</c8y-li>
+ *     </c8y-list-group>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * ## Features
+ * - **Focus trapping**: Tab key navigation cycles through dropdown items
+ * - **Automatic focus management**: Enter/Space automatically closes dropdown and returns focus to toggle button
+ * - **ESC key isolation**: Pressing ESC closes only the dropdown, not parent modals/drawers, and restores focus
+ * - **Form-friendly**: Skips automatic close for inputs, textareas, and selects within the dropdown
+ * - **Automatic cleanup**: All listeners and focus trap removed when dropdown closes
+ * - **Zero configuration**: Just add the directive, no manual focus management needed
+ *
+ * @see {@link https://material.angular.io/cdk/a11y/overview#focustrap|CDK FocusTrap}
+ */
+class DropdownFocusTrapDirective {
+    constructor() {
+        this.dropdown = inject(BsDropdownDirective);
+        this.focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+        this.document = inject(DOCUMENT$1);
+        this.elementRef = inject(ElementRef);
+        this.shouldRestoreFocus = false;
+        this.handleSelection = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            const target = event.target;
+            if (!this.dropdownMenuElement?.contains(target) || target.matches('input, textarea, select')) {
+                return;
+            }
+            this.shouldRestoreFocus = true;
+            setTimeout(() => this.dropdown.hide(), 50);
+        };
+        this.handleEscape = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.shouldRestoreFocus = true;
+            this.dropdown.hide();
+        };
+        this.dropdown.onShown.pipe(takeUntilDestroyed()).subscribe(() => this.setupFocusTrap());
+        this.dropdown.onHidden.pipe(takeUntilDestroyed()).subscribe(() => this.onDropdownHidden());
+    }
+    ngOnDestroy() {
+        this.cleanupFocusTrap();
+    }
+    /**
+     * Sets up the focus trap when the dropdown opens.
+     * @private
+     */
+    setupFocusTrap() {
+        // Use setTimeout to ensure the dropdown menu is rendered in the DOM
+        setTimeout(() => {
+            const dropdownMenus = this.document.querySelectorAll('.dropdown-menu.show');
+            if (!dropdownMenus || dropdownMenus.length === 0) {
+                return;
+            }
+            this.dropdownMenuElement = dropdownMenus[dropdownMenus.length - 1];
+            // Simplified toggle button query
+            this.toggleButton = this.elementRef.nativeElement.querySelector('.dropdown-toggle');
+            if (!this.dropdownMenuElement) {
+                return;
+            }
+            this.focusTrap = this.focusTrapFactory.create(this.dropdownMenuElement);
+            this.focusTrap.enabled = true;
+            this.document.addEventListener('keydown', this.handleSelection, true);
+            this.document.addEventListener('keydown', this.handleEscape, true);
+        }, 0);
+    }
+    onDropdownHidden() {
+        const buttonToFocus = this.toggleButton;
+        const shouldRestore = this.shouldRestoreFocus;
+        this.cleanupFocusTrap();
+        if (shouldRestore && buttonToFocus) {
+            setTimeout(() => buttonToFocus.focus(), 0);
+        }
+    }
+    /**
+     * Cleans up the focus trap when the dropdown closes.
+     * @private
+     */
+    cleanupFocusTrap() {
+        this.document.removeEventListener('keydown', this.handleSelection, true);
+        this.document.removeEventListener('keydown', this.handleEscape, true);
+        this.shouldRestoreFocus = false;
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+            this.focusTrap = undefined;
+        }
+        this.dropdownMenuElement = undefined;
+        this.toggleButton = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFocusTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: DropdownFocusTrapDirective, isStandalone: true, selector: "[c8yDropdownFocusTrap]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFocusTrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c8yDropdownFocusTrap]'
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Pipe that strips HTML tags from a string.
  *
@@ -10654,7 +10786,8 @@ const PRODUCT_EXPERIENCE_INTERVAL_BASED_RELOAD = {
 };
 const WIDGET_TYPE_VALUES = {
     ALARMS: 'alarms',
-    DATA_POINTS_TABLE: 'dataPointsTable'
+    DATA_POINTS_TABLE: 'dataPointsTable',
+    ASSET_TABLE: 'assetTable'
 };
 /**
  * Abstract class representing an interval reload functionality.
@@ -16427,7 +16560,7 @@ class ListItemComponent {
         this.pulse$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ListItemComponent, isStandalone: true, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], ngImport: i0, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n      <div\n        class=\"c8y-list__item__footer\"\n        *ngIf=\"showFooter\"\n      >\n        <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n      </div>\n    </div>\n\n    <div\n      class=\"c8y-list__item__actions\"\n      *ngIf=\"(showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions\"\n    >\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        [attr.aria-expanded]=\"!collapsed\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        *ngIf=\"showCollapse && itemCollapse.collapseWay === 'button'\"\n        data-cy=\"c8y-li--collapse-btn\"\n      >\n        <i [c8yIcon]=\"'chevron-down'\"></i>\n      </button>\n      <div\n        class=\"dropdown\"\n        #liDropdownActions=\"bs-dropdown\"\n        [cdkTrapFocus]=\"liDropdownActions.isOpen\"\n        dropdown\n        c8yDropdownDirection\n        #dropDirection=\"bs-dropdown\"\n        [cdkTrapFocus]=\"dropDirection.isOpen\"\n        *ngIf=\"showActions\"\n      >\n        <button\n          class=\"dropdown-toggle c8y-dropdown\"\n          title=\"{{ 'Actions' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n          data-cy=\"c8y-li--actions-btn\"\n        >\n          <i [c8yIcon]=\"'ellipsis-v'\"></i>\n        </button>\n        <ul\n          class=\"dropdown-menu dropdown-menu-right\"\n          data-cy=\"list-item--dropdown-menu\"\n          *dropdownMenu\n        >\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n          <ng-container *ngFor=\"let action of actions\">\n            <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n\n      <ng-content\n        select=\"c8y-list-item-action, c8y-li-action\"\n        *ngIf=\"showActions\"\n      ></ng-content>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showCollapse\"\n    [collapse]=\"collapsed\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { 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: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListItemComponent, isStandalone: true, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], ngImport: i0, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if ((showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapse && itemCollapse.collapseWay === 'button') {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i2$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
@@ -16444,7 +16577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         NgTemplateOutlet,
                         CollapseModule,
                         C8yTranslatePipe
-                    ], template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n      <div\n        class=\"c8y-list__item__footer\"\n        *ngIf=\"showFooter\"\n      >\n        <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n      </div>\n    </div>\n\n    <div\n      class=\"c8y-list__item__actions\"\n      *ngIf=\"(showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions\"\n    >\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        [attr.aria-expanded]=\"!collapsed\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        *ngIf=\"showCollapse && itemCollapse.collapseWay === 'button'\"\n        data-cy=\"c8y-li--collapse-btn\"\n      >\n        <i [c8yIcon]=\"'chevron-down'\"></i>\n      </button>\n      <div\n        class=\"dropdown\"\n        #liDropdownActions=\"bs-dropdown\"\n        [cdkTrapFocus]=\"liDropdownActions.isOpen\"\n        dropdown\n        c8yDropdownDirection\n        #dropDirection=\"bs-dropdown\"\n        [cdkTrapFocus]=\"dropDirection.isOpen\"\n        *ngIf=\"showActions\"\n      >\n        <button\n          class=\"dropdown-toggle c8y-dropdown\"\n          title=\"{{ 'Actions' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n          data-cy=\"c8y-li--actions-btn\"\n        >\n          <i [c8yIcon]=\"'ellipsis-v'\"></i>\n        </button>\n        <ul\n          class=\"dropdown-menu dropdown-menu-right\"\n          data-cy=\"list-item--dropdown-menu\"\n          *dropdownMenu\n        >\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n          <ng-container *ngFor=\"let action of actions\">\n            <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n\n      <ng-content\n        select=\"c8y-list-item-action, c8y-li-action\"\n        *ngIf=\"showActions\"\n      ></ng-content>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showCollapse\"\n    [collapse]=\"collapsed\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n\n      @if (showFooter) {\n        <div class=\"c8y-list__item__footer\">\n          <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n        </div>\n      }\n    </div>\n\n    @if ((showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions) {\n      <div class=\"c8y-list__item__actions\">\n        @if (showCollapse && itemCollapse.collapseWay === 'button') {\n          <button\n            class=\"collapse-btn\"\n            title=\"{{ 'Expand' | translate }}\"\n            [attr.aria-expanded]=\"!collapsed\"\n            type=\"button\"\n            (click)=\"toggleCollapsed($event)\"\n            data-cy=\"c8y-li--collapse-btn\"\n          >\n            <i [c8yIcon]=\"'chevron-down'\"></i>\n          </button>\n        }\n\n        @if (showActions) {\n          <div\n            class=\"dropdown\"\n            container=\"body\"\n            #liDropdownActions=\"bs-dropdown\"\n            dropdown\n            #dropDirection=\"bs-dropdown\"\n            c8yDropdownFocusTrap\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown\"\n              title=\"{{ 'Actions' | translate }}\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"c8y-li--actions-btn\"\n            >\n              <i [c8yIcon]=\"'ellipsis-v'\"></i>\n            </button>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              data-cy=\"list-item--dropdown-menu\"\n              *dropdownMenu\n            >\n              <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCollapse) {\n    <div\n      [collapse]=\"collapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"c8y-list__item__collapse--container\">\n        <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -29080,85 +29213,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['window:resize']
             }] } });
 
-const AGGREGATIONS = [
-    { id: null, title: gettext$1('None') },
-    { id: aggregationType.MINUTELY, title: gettext$1('Minutely') },
-    { id: aggregationType.HOURLY, title: gettext$1('Hourly') },
-    { id: aggregationType.DAILY, title: gettext$1('Daily') }
-];
-const AGGREGATION_LIMITS = {
-    MINUTELY_LIMIT: TimeSpanInMs.MINUTE * 10,
-    HOURLY_LIMIT: TimeSpanInMs.DAY * 1,
-    DAILY_LIMIT: TimeSpanInMs.DAY * 4
-};
-const AGGREGATION_ICONS = {
-    undefined: 'line-chart',
-    MINUTELY: 'hourglass',
-    HOURLY: 'clock-o',
-    DAILY: 'calendar-o'
-};
-const AGGREGATION_TEXTS = {
-    disabled: gettext$1('No aggregation with real-time or auto-refresh enabled'),
-    undefined: gettext$1('No aggregation'),
-    MINUTELY: gettext$1('Minutely aggregation'),
-    HOURLY: gettext$1('Hourly aggregation'),
-    DAILY: gettext$1('Daily aggregation')
-};
-const AGGREGATION_VALUES = {
-    none: 'NONE',
-    minutely: aggregationType.MINUTELY,
-    hourly: aggregationType.HOURLY,
-    daily: aggregationType.DAILY
-};
-const AGGREGATION_VALUES_ARR = [
-    AGGREGATION_VALUES.none,
-    AGGREGATION_VALUES.minutely,
-    AGGREGATION_VALUES.hourly,
-    AGGREGATION_VALUES.daily
-];
-const AGGREGATION_LABELS = {
-    NONE: AGGREGATIONS[0].title,
-    [aggregationType.MINUTELY]: AGGREGATIONS[1].title,
-    [aggregationType.HOURLY]: AGGREGATIONS[2].title,
-    [aggregationType.DAILY]: AGGREGATIONS[3].title
-};
-
-class WidgetTimeContextIconBar {
-    constructor() {
-        this.AGGREGATION_ICONS = AGGREGATION_ICONS;
-        this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
-    }
-    ngOnInit() {
-        if (this.config.displaySettings.globalRealtimeContext &&
-            !this.config.displaySettings.globalTimeContext) {
-            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard realtime context.');
-        }
-        else {
-            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard time range.');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetTimeContextIconBar, isStandalone: true, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-widget-time-context-icon-bar', standalone: true, imports: [NgIf, TooltipModule, IconDirective, NgClass, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n" }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-class WidgetAutoRefreshContextIconBarComponent {
-    constructor() {
-        this.globalAutoRefreshTooltip = gettext$1('This widget is in sync with the dashboard auto refresh context.');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetAutoRefreshContextIconBarComponent, isStandalone: true, selector: "c8y-widget-auto-refresh-context-icon-bar", ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-widget-auto-refresh-context-icon-bar', standalone: true, imports: [TooltipModule, IconDirective, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n" }]
-        }] });
-
 /**
  * A dashboard child allows to position elements
  * correctly on a grid.
@@ -29400,7 +29454,7 @@ class DashboardChildComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$2.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DashboardChildComponent, isStandalone: true, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            [container]=\"'body'\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                aria-haspopup=\"true\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DashboardChildComponent, isStandalone: true, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            c8yDropdownFocusTrap\n            [container]=\"'body'\"\n            #cardDashboardActions=\"bs-dropdown\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon dropdown-toggle c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                [attr.aria-label]=\"'Settings' | translate\"\n                aria-haspopup=\"true\"\n                [attr.aria-expanded]=\"cardDashboardActions.isOpen\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardChildComponent, decorators: [{
             type: Component,
@@ -29412,16 +29466,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         NgStyle,
                         NgClass,
                         CdkDragHandle,
-                        WidgetTimeContextIconBar,
-                        WidgetAutoRefreshContextIconBarComponent,
                         TooltipModule,
                         IconDirective,
                         BsDropdownModule,
                         NgTemplateOutlet,
                         CdkDragPlaceholder,
                         C8yTranslatePipe,
+                        DropdownFocusTrapDirective,
                         AsyncPipe
-                    ], template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            [container]=\"'body'\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                aria-haspopup=\"true\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n" }]
+                    ], template: "<div cdkDropList>\n  @if (isResize) {\n    <div class=\"card-placeholder\"></div>\n  }\n\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n\n      @if (actions.length > 0) {\n        <div class=\"header-actions d-flex a-i-center\">\n          @for (headerTemplate of additionalHeaderTemplates$ | async; track headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate.template\"></ng-container>\n          }\n\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Full screen' | translate\"\n            [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n            container=\"body\"\n            [delay]=\"500\"\n            [disabled]=\"editMode || !canToggleFullscreen\"\n            (click)=\"toggleFullscreen.next()\"\n            data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n          >\n            <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n          </button>\n\n          <div\n            class=\"optionsBtn dropdown\"\n            placement=\"bottom right\"\n            dropdown\n            c8yDropdownFocusTrap\n            [container]=\"'body'\"\n            #cardDashboardActions=\"bs-dropdown\"\n          >\n            @if (editMode) {\n              <button\n                class=\"btn btn-icon dropdown-toggle c8y-dropdown\"\n                title=\"{{ 'Settings' | translate }}\"\n                [attr.aria-label]=\"'Settings' | translate\"\n                aria-haspopup=\"true\"\n                [attr.aria-expanded]=\"cardDashboardActions.isOpen\"\n                data-cy=\"c8y-dashboard-child--settings\"\n                (click)=\"(false)\"\n                dropdownToggle\n              >\n                <i [c8yIcon]=\"'cog'\"></i>\n              </button>\n            } @else {\n              <button\n                class=\"btn btn-icon\"\n                [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n                tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n                container=\"body\"\n                (click)=\"(false)\"\n                data-cy=\"c8y-dashboard-child--settings-locked\"\n              >\n                <i [c8yIcon]=\"'lock'\"></i>\n              </button>\n            }\n\n            <ul\n              class=\"dropdown-menu dropdown-menu-right\"\n              style=\"right: -1px\"\n              data-cy=\"c8y-dashboard-child--actions-dropdown\"\n              *dropdownMenu\n            >\n              @for (action of actions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n              }\n            </ul>\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (editMode && !isDragging && !fullscreen) {\n      <div\n        class=\"resize-handle hidden-xs\"\n        cdkDrag\n        [cdkDragDisabled]=\"!editMode || fullscreen\"\n        (cdkDragStarted)=\"resizeStarted($event)\"\n        (cdkDragEnded)=\"reset($event)\"\n      ></div>\n      <div class=\"resize-icon hidden-xs\"></div>\n    }\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$2.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
                 type: ContentChildren,
                 args: [DashboardChildActionComponent]
@@ -29461,6 +29514,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['attr.style']
             }] } });
 
+const AGGREGATIONS = [
+    { id: null, title: gettext$1('None') },
+    { id: aggregationType.MINUTELY, title: gettext$1('Minutely') },
+    { id: aggregationType.HOURLY, title: gettext$1('Hourly') },
+    { id: aggregationType.DAILY, title: gettext$1('Daily') }
+];
+const AGGREGATION_LIMITS = {
+    MINUTELY_LIMIT: TimeSpanInMs.MINUTE * 10,
+    HOURLY_LIMIT: TimeSpanInMs.DAY * 1,
+    DAILY_LIMIT: TimeSpanInMs.DAY * 4
+};
+const AGGREGATION_ICONS = {
+    undefined: 'line-chart',
+    MINUTELY: 'hourglass',
+    HOURLY: 'clock-o',
+    DAILY: 'calendar-o'
+};
+const AGGREGATION_TEXTS = {
+    disabled: gettext$1('No aggregation with real-time or auto-refresh enabled'),
+    undefined: gettext$1('No aggregation'),
+    MINUTELY: gettext$1('Minutely aggregation'),
+    HOURLY: gettext$1('Hourly aggregation'),
+    DAILY: gettext$1('Daily aggregation')
+};
+const AGGREGATION_VALUES = {
+    none: 'NONE',
+    minutely: aggregationType.MINUTELY,
+    hourly: aggregationType.HOURLY,
+    daily: aggregationType.DAILY
+};
+const AGGREGATION_VALUES_ARR = [
+    AGGREGATION_VALUES.none,
+    AGGREGATION_VALUES.minutely,
+    AGGREGATION_VALUES.hourly,
+    AGGREGATION_VALUES.daily
+];
+const AGGREGATION_LABELS = {
+    NONE: AGGREGATIONS[0].title,
+    [aggregationType.MINUTELY]: AGGREGATIONS[1].title,
+    [aggregationType.HOURLY]: AGGREGATIONS[2].title,
+    [aggregationType.DAILY]: AGGREGATIONS[3].title
+};
+
 class AggregationService {
     constructor() {
         this.AGGREGATION_MAP = {
@@ -31085,6 +31181,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+class WidgetAutoRefreshContextIconBarComponent {
+    constructor() {
+        this.globalAutoRefreshTooltip = gettext$1('This widget is in sync with the dashboard auto refresh context.');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetAutoRefreshContextIconBarComponent, isStandalone: true, selector: "c8y-widget-auto-refresh-context-icon-bar", ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-widget-auto-refresh-context-icon-bar', standalone: true, imports: [TooltipModule, IconDirective, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n" }]
+        }] });
+
 function globalAutoRefreshLoading(globalRefreshService) {
     return (source) => source.pipe(distinctUntilChanged(), tap(isLoading => isLoading
         ? globalRefreshService.incrementLoading()
@@ -31690,6 +31798,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class WidgetTimeContextIconBar {
+    constructor() {
+        this.AGGREGATION_ICONS = AGGREGATION_ICONS;
+        this.AGGREGATION_TEXTS = AGGREGATION_TEXTS;
+    }
+    ngOnInit() {
+        if (this.config.displaySettings.globalRealtimeContext &&
+            !this.config.displaySettings.globalTimeContext) {
+            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard realtime context.');
+        }
+        else {
+            this.globalContextButtonText = gettext$1('This widget is in sync with the dashboard time range.');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WidgetTimeContextIconBar, isStandalone: true, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetTimeContextIconBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-widget-time-context-icon-bar', standalone: true, imports: [NgIf, TooltipModule, IconDirective, NgClass, C8yTranslatePipe], template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n    *ngIf=\"config?.widgetInstanceGlobalTimeContext\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
 class DashboardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DashboardModule, imports: [CommonModule,
@@ -33450,7 +33582,8 @@ class DataGridComponent {
             bordered: false,
             gridHeader: true,
             filter: true,
-            hover: true
+            hover: true,
+            showLoadingIndicator: true
         };
         this.actionControls = [];
         /** Sets initial search text. */
@@ -34453,7 +34586,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: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData) {\n    <div class=\"table-data-grid__loading--wrapper\">\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\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!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            }\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=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\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                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\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                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\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                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\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\n        @if (displayOptions.filter) {\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            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\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              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\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                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\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();\n                                  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                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0 l-h-1\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger 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                              >\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                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\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)=\"openCustomColumn(); 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                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\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\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\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                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\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            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\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            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    }\n                  }\n                </ng-container>\n              }\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      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\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    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('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          }\n\n          @case ('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          }\n\n          @case ('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              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\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                    @case (builtInActionType.Delete) {\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                        [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                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\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                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\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                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\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                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\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                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\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              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\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                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\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                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\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                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\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              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\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; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\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    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\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  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\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\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\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        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\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                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\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' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: BsDropdownModule }, { 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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.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: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "directive", type: CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "component", type: CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i11.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: 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" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
+        ], 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: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData && displayOptions.showLoadingIndicator) {\n    <div class=\"table-data-grid__loading--wrapper\">\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\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!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            }\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=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\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                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\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                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\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                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\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\n        @if (displayOptions.filter) {\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            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\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              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\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                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\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();\n                                  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                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1 m-t-2\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger 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                              >\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                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\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)=\"openCustomColumn(); 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                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\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\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\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                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\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            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\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            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    }\n                  }\n                </ng-container>\n              }\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      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\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    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('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          }\n\n          @case ('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          }\n\n          @case ('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              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\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                    @case (builtInActionType.Delete) {\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                        [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                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\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                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\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                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\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                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\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                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\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              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\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                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\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                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\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                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\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              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\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; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\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    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\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  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\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\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\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        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\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                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\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' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: BsDropdownModule }, { 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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.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: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "directive", type: CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "component", type: CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i11.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: 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" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -34504,7 +34637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         GroupedFilterChips,
                         VisibleControlsPipe,
                         HumanizePipe
-                    ], template: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData) {\n    <div class=\"table-data-grid__loading--wrapper\">\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\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!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            }\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=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\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                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\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                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\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                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\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\n        @if (displayOptions.filter) {\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            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\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              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\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                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\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();\n                                  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                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0 l-h-1\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger 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                              >\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                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\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)=\"openCustomColumn(); 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                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\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\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\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                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\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            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\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            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    }\n                  }\n                </ng-container>\n              }\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      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\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    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('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          }\n\n          @case ('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          }\n\n          @case ('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              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\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                    @case (builtInActionType.Delete) {\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                        [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                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\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                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\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                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\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                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\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                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\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              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\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                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\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                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\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                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\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              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\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; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\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    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\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  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\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\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\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        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\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                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\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' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "@let loadingData = ((dataSource.loading$ | async) && !loadMoreComponent?.isLoading) || loading;\n\n<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': loadingData\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  @if (loadingData && displayOptions.showLoadingIndicator) {\n    <div class=\"table-data-grid__loading--wrapper\">\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\n  @if (displayOptions.gridHeader) {\n    <div class=\"table-data-grid-header separator large-padding\">\n      <div\n        class=\"h4\"\n        [ngClass]=\"{ 'm-r-16': !!title }\"\n      >\n        {{ title | translate }}\n      </div>\n\n      @if (displayOptions.filter) {\n        @if (!filteringApplied) {\n          <span>\n            @if (!!filteringLabelsParams.allItemsCount) {\n              <small\n                class=\"m-r-4\"\n                ngNonBindable\n                translate\n                [translateParams]=\"filteringLabelsParams\"\n              >\n                {{ filteredItemsCount }} of {{ allItemsCount }} items\n              </small>\n            }\n            <span\n              class=\"label label-default m-r-4\"\n              translate\n            >\n              No filters\n            </span>\n          </span>\n        }\n        @if (filteringApplied) {\n          <span class=\"d-flex a-i-center\">\n            @if (!!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            }\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=\"badge badge-system\">\n                  {{ columnsWithFiltersApplied.length }}\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                    @for (column of columnsWithFiltersApplied; track $index; let last = $last) {\n                      <li [ngClass]=\"{ 'separator-bottom': !last }\">\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                          @for (\n                            groupedFilterChips of column\n                              | mapToFilterChips\n                              | async\n                              | groupedFilterChips;\n                            track $index;\n                            let first = $first\n                          ) {\n                            <div\n                              class=\"list-group-item borderless d-flex d-col\"\n                              [ngClass]=\"{ 'p-t-0': first }\"\n                            >\n                              @if (groupedFilterChips.label) {\n                                <p class=\"small p-b-4\">\n                                  {{ groupedFilterChips.label | translate }}\n                                </p>\n                              }\n                              <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                                @for (chip of groupedFilterChips.chips; track $index) {\n                                  <span class=\"tag tag--info chip\">\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                                }\n                              </div>\n                            </div>\n                          }\n                        </ng-container>\n                      </li>\n                    }\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\n        @if (displayOptions.filter) {\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            data-cy=\"data-grid--help-filters\"\n          >\n            <i c8yIcon=\"question-circle-o\"></i>\n          </button>\n        }\n        <ng-template #filtersHelpPopover>\n          <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n        </ng-template>\n\n        @if (showCounterWarning) {\n          <button\n            class=\"btn-clean text-primary hidden-xs hidden-sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            popover=\"{{\n              'The counter for the total number of items might be inaccurate.' | translate\n            }}\"\n            placement=\"right\"\n            triggers=\"focus\"\n            type=\"button\"\n          >\n            <i c8yIcon=\"warning\"></i>\n          </button>\n        }\n      }\n\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex a-i-center\">\n          @for (\n            headerActionControl of headerActionControls | visibleControls | async;\n            track $index\n          ) {\n            <ng-container>\n              @if (!headerActionControl.template) {\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              } @else {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    headerActionControl.template;\n                    context: { headerActionControl: headerActionControl }\n                  \"\n                ></ng-container>\n              }\n            </ng-container>\n          }\n\n          @if (configureColumnsEnabled) {\n            <div\n              class=\"dropdown\"\n              placement=\"bottom left\"\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                    @for (column of columns; track $index) {\n                      <div\n                        cdkDrag\n                        cdkDragLockAxis=\"y\"\n                      >\n                        @if (!column.positionFixed) {\n                          <div class=\"list-group-item draggable-after p-l-16 p-r-16 a-i-center\">\n                            <label\n                              class=\"c8y-checkbox min-width-0\"\n                              title=\"{{ column.custom ? ('Custom' | translate) + ' ' : '' }}{{\n                                (column.header | translate) || column.name\n                              }}\"\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();\n                                  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                              <div class=\"d-col min-width-0 m-l-8 m-r-8\">\n                                @if (column?.custom) {\n                                  <span class=\"text-muted text-10 m-b-0\">\n                                    {{ 'Custom' | translate }}\n                                  </span>\n                                }\n                                <span class=\"text-truncate l-h-1 m-t-2\">\n                                  {{ (column.header | translate) || column.name }}\n                                </span>\n                              </div>\n                              @let canRetrieve = canRetrieveAssetProperties | async;\n                              @if (canRetrieve) {\n                                @if (canRetrieve && column?.type) {\n                                  <span\n                                    class=\"tag tag--default a-s-end\"\n                                    title=\"{{ column.type | translate | humanize }}\"\n                                  >\n                                    {{ column.type | translate | humanize }}\n                                  </span>\n                                }\n                              }\n                            </label>\n                            @if (column.custom) {\n                              <button\n                                class=\"btn btn-dot btn-dot--danger 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                              >\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                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </li>\n                @if (isConfigContextKnown) {\n                  <li class=\"p-8 sticky-bottom separator-top\">\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)=\"openCustomColumn(); 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                }\n              </ul>\n            </div>\n          }\n\n          @if (!hideReload) {\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ 'Reload' | translate }}\"\n              type=\"button\"\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\n          @if (!serverSideDataCallback || showSearch) {\n            <div class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\">\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                @if (searchText.length === 0) {\n                  <i c8yIcon=\"search\"></i>\n                }\n                @if (searchText.length > 0) {\n                  <i\n                    class=\"pointer\"\n                    c8yIcon=\"times\"\n                    (click)=\"searchText = ''; searchText$.emit('')\"\n                    c8yProductExperience\n                    inherit\n                    [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (selectedItemIds.length !== 0) {\n        <div\n          class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n          data-cy=\"table-data-grid-header-bulk-actions\"\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            @if (!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize) {\n              <small>\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            }\n          </h4>\n          <div class=\"m-l-auto\">\n            <div class=\"btnbar d-flex\">\n              @for (\n                bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async;\n                track $index\n              ) {\n                <ng-container>\n                  @switch (bulkActionControl.type) {\n                    @case (builtInActionType.Export) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @case (builtInActionType.Delete) {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    @default {\n                      <button\n                        class=\"btnbar-btn\"\n                        title=\"{{ bulkActionControl.text | translate }}\"\n                        type=\"button\"\n                        (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\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                    }\n                  }\n                </ng-container>\n              }\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      }\n    </div>\n  }\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !treeGrid\"\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    data-cy=\"c8y-data-grid--table\"\n  >\n    @for (column of columns; track column.name; let i = $index) {\n      <ng-container [cdkColumnDef]=\"column.name\">\n        @switch (column.name) {\n          @case ('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          }\n\n          @case ('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          }\n\n          @case ('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              @for (\n                actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice\n                    : 0\n                    : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                track $index\n              ) {\n                <ng-container>\n                  @switch (actionControl.type) {\n                    @case (builtInActionType.Edit) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"'Edit' | translate\"\n                        tooltip=\"{{ 'Edit' | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\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                    @case (builtInActionType.Delete) {\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                        [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                    @default {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          (actionControl.icon ? actionControl.text : '') | translate\n                        \"\n                        tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                        container=\"body\"\n                        type=\"button\"\n                        [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                        [delay]=\"500\"\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                        @if (actionControl.icon) {\n                          <i\n                            c8yIcon=\"{{ actionControl.icon }}\"\n                            [ngClass]=\"actionControl.iconClasses\"\n                          ></i>\n                        } @else {\n                          <span>{{ actionControl.text | translate }}</span>\n                        }\n                      </button>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <div\n                [ngClass]=\"{\n                  'm-l-auto overflow-visible':\n                    (actionControls | visibleControls: row | async)?.length > 2\n                }\"\n              >\n                @if ((actionControls | visibleControls: row | async)?.length > 2) {\n                  <div\n                    class=\"dropdown\"\n                    placement=\"bottom right\"\n                    container=\"body\"\n                    dropdown\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                      @for (\n                        actionControl of actionControls\n                          | visibleControls: row\n                          | async\n                          | slice\n                            : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2);\n                        track $index\n                      ) {\n                        <li>\n                          @switch (actionControl.type) {\n                            @case (builtInActionType.Edit) {\n                              <button\n                                title=\"{{ 'Edit' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Delete) {\n                              <button\n                                title=\"{{ 'Delete' | translate }}\"\n                                type=\"button\"\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                            }\n                            @case (builtInActionType.Export) {\n                              <button\n                                title=\"{{ 'Export' | translate }}\"\n                                type=\"button\"\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                            }\n                            @default {\n                              <button\n                                title=\"{{ actionControl.text | translate }}\"\n                                type=\"button\"\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                            }\n                          }\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n          @default {\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              @if (!column.filterable) {\n                <div [title]=\"(column.header | translate) || column.name\">\n                  @let cellRendererSpec =\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this;\n\n                  @if (cellRendererSpec) {\n                    <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                  }\n                </div>\n              }\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              @if (column.filterable) {\n                <div\n                  class=\"dropdown\"\n                  placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\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                    @let cellRendererSpec =\n                      [\n                        {\n                          columnName: column.name,\n                          value: (column.header | translate) || column.name\n                        }\n                      ] | map: getHeaderCellRendererSpec : this;\n\n                    @if (cellRendererSpec) {\n                      <c8y-cell-renderer\n                        data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                        [spec]=\"cellRendererSpec\"\n                      ></c8y-cell-renderer>\n                    }\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                      @let filteringFormRendererSpec =\n                        [\n                          {\n                            column: column,\n                            dropdown: gridHeaderDropdown\n                          }\n                        ] | map: getFilteringFormRendererSpec : this;\n\n                      @if (filteringFormRendererSpec) {\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                      }\n                    </li>\n                  </ul>\n                </div>\n              }\n\n              @if (column.sortable) {\n                <button\n                  class=\"btn-sort\"\n                  [style]=\"{\n                    'margin-left': !column.filterable && column.sortable ? '-20px' : null\n                  }\"\n                  [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n                  type=\"button\"\n                  (click)=\"changeSortOrder(column.name)\"\n                  data-cy=\"change-sort-order\"\n                >\n                  @switch (column.sortOrder) {\n                    @case ('asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    }\n                    @case ('desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    }\n                    @default {\n                      <i c8yIcon=\"exchange\"></i>\n                    }\n                  }\n                </button>\n              }\n\n              @if (column.resizable) {\n                <span\n                  class=\"resize-handle\"\n                  (mousedown)=\"\n                    resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n                  \"\n                ></span>\n              }\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              @let cellRendererSpec =\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this;\n\n              @if (cellRendererSpec) {\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              }\n            </td>\n          }\n        }\n      </ng-container>\n    }\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; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node level-' + row.level : ''\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    <tr\n      [class]=\"'pagination-row level-' + (row.parentRow.level + 1)\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          @if ((dataSource.stats$ | async).currentPageSize > 0) {\n            <div\n              class=\"counter p-t-8 p-b-8\"\n              data-cy=\"data-grid--child-counter\"\n            >\n              <span\n                class=\"text-muted\"\n                ngNonBindable\n                translate\n                [translateParams]=\"{\n                  pageFirstItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize + 1,\n                  pageLastItemIdx:\n                    (row.childrenStats.currentPage - 1) * row.childrenStats.firstPageSize +\n                    1 +\n                    (row.childrenStats.currentPageSize - 1),\n                  itemsTotal: row.childrenStats.filteredSize\n                }\"\n              >\n                {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n              </span>\n              <span class=\"text-muted text-12 m-r-4\">{{ 'Parent node' | translate }}</span>\n              <span class=\"tag tag--default\">{{ row.parentRow?.[parentNodeLabelProperty] }}</span>\n            </div>\n          }\n        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          @if (row.childrenStats.filteredSize > row.childrenStats.currentPageSize) {\n            <pagination\n              class=\"d-flex j-c-end\"\n              [ngModel]=\"row.childrenStats.currentPage\"\n              (pageChanged)=\"updateChildPagination($event, row)\"\n              [totalItems]=\"row.childrenStats.filteredSize\"\n              [itemsPerPage]=\"row?.parentRow?.pagination?.pageSize ?? childNodePagination.pageSize\"\n              [maxSize]=\"5\"\n              [boundaryLinks]=\"false\"\n              [previousText]=\"'Previous' | translate\"\n              [nextText]=\"'Next' | translate\"\n            ></pagination>\n          }\n        </div>\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  @if (\n    !(dataSource.loading$ | async) &&\n    !loading &&\n    ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n  ) {\n    <div class=\"d-flex m-0 p-t-40 p-b-40\">\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\n  @if (pagination && !infiniteScroll) {\n    <div class=\"table-data-grid-footer separator large-padding\">\n      <div class=\"col-sm-4 no-gutter\">\n        @if ((dataSource.stats$ | async).currentPageSize > 0) {\n          <div\n            class=\"counter p-t-8 p-b-8\"\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        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-center\">\n        @if ((dataSource.stats$ | async).filteredSize > minPossiblePageSize) {\n          <div class=\"form-group form-inline p-t-8 p-b-8\">\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                @for (pageSize of possiblePageSizes; track $index) {\n                  <option [ngValue]=\"pageSize\">\n                    {{ pageSize }}\n                  </option>\n                }\n              </select>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-sm-4 no-gutter text-right\">\n        @if ((dataSource.stats$ | async).filteredSize > 0) {\n          <pagination\n            [class.hidden]=\"hidePagination$ | async\"\n            class=\"d-flex j-c-end\"\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' | translate\"\n            [nextText]=\"'Next' | translate\"\n          ></pagination>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -37892,7 +38025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: RealtimeSubjectService }] });
 
 /**
- * A service for handling bulk operation realtime notifications in RxJS fashion.
+ * A service for handling operation realtime notifications in RxJS fashion.
  */
 class OperationRealtimeService extends RealtimeService {
     constructor(realtimeSubject) {
@@ -39387,5 +39520,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * 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, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, 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, DatapointSyncService, 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, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, 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_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, 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, IconPanelComponent, 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, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, 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, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, 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, SimplifiedAuthService, SkipLinkDirective, SplitViewAlertsComponent, SplitViewComponent, SplitViewDetailsActionsComponent, SplitViewDetailsComponent, SplitViewExtraHeaderComponent, SplitViewFooterComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, SplitViewListItemDirective, SplitViewSelectionService, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, StripHtmlPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, 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_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetActionWrapperComponent, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, 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, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetHierarchyService, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yTranslationCache, C8yTranslationLoader, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, CustomTranslateService, CustomTranslateStore, 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, DatapointSyncService, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DropdownFocusTrapDirective, 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, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterByPipe, 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_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, 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, IconPanelComponent, 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, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, MOChunkLoaderService, 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, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, 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, SimplifiedAuthService, SkipLinkDirective, SplitViewAlertsComponent, SplitViewComponent, SplitViewDetailsActionsComponent, SplitViewDetailsComponent, SplitViewExtraHeaderComponent, SplitViewFooterComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, SplitViewListItemDirective, SplitViewSelectionService, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, StripHtmlPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, 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_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetActionWrapperComponent, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetTimeContextMediatorService, WidgetsDashboardComponent, WidgetsDashboardEventService, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, provideCommonPipes, provideCommonServices, provideDefaultOptionsAppInitializer, provideI18n, provideLanguageSelectorAppInitializer, providePluginsLoaderServiceAppInitializer, provideTranslationServiceInstance, ratiosByColumnTypes, removeContextIndicators, 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