@c8y/ngx-components 1021.80.1 → 1021.81.0

package/fesm2022/{c8y-ngx-components-c8y-ngx-components-D-YOjLHK.mjs → c8y-ngx-components-c8y-ngx-components-D2rmddmn.mjs}

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Injector, InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, HostListener, NgModuleRef, createNgModule, Component, Output, HostBinding, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, APP_INITIALIZER, Self, SkipSelf, Attribute, ContentChild, ViewContainerRef, ContentChildren, ElementRef, ViewChildren, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, effect, Type } from '@angular/core';
+import { Directive, Input, Injector, InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, HostListener, NgModuleRef, createNgModule, Component, Output, HostBinding, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, APP_INITIALIZER, Self, SkipSelf, Attribute, ContentChild, ViewContainerRef, ContentChildren, ElementRef, ViewChildren, createComponent, runInInjectionContext, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, effect, Type, computed } from '@angular/core';
 import * as i1$3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import * as i3 from '@angular/cdk/a11y';
 import { A11yModule, CdkTrapFocus } from '@angular/cdk/a11y';
-import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, keys, get, isNaN as isNaN$1, isFinite, each, mapValues, mapKeys, forEach, reduce, union, cloneDeep, uniqBy, assign, min, every, first, map as map$2, find, negate, upperFirst, memoize as memoize$1, property, some, entries, omitBy, isDate, pick, flatMap, orderBy, isEmpty, filter as filter$2, snakeCase, matches, isString, clone, toNumber, isEqualWith, escape as escape$1, escapeRegExp, assignWith, set, omit, has, transform, identity, flow, isNil, chunk, values, without, indexOf, parseInt as parseInt$1, kebabCase, forOwn } from 'lodash-es';
+import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, keys, get, isNaN as isNaN$1, isFinite, each, mapValues, mapKeys, forEach, reduce, union, cloneDeep, uniqBy, assign, min, every, first, map as map$2, find, negate, upperFirst, memoize as memoize$1, property, some, entries, omitBy, isDate, pick, flatMap, orderBy, isEmpty, filter as filter$2, snakeCase, matches, isString, clone, toNumber, isEqualWith, escape as escape$1, escapeRegExp, assignWith, set, omit, has, transform, identity, flow, findIndex as findIndex$1, isNil, chunk, values, without, indexOf, parseInt as parseInt$1, kebabCase, forOwn } from 'lodash-es';
 import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, NEVER, Observable, firstValueFrom, map as map$1, distinctUntilChanged as distinctUntilChanged$1, fromEvent, pipe, throwError, concat, filter as filter$1, tap as tap$1, EMPTY, timer, fromEventPattern, startWith as startWith$1, switchMap as switchMap$1, takeUntil as takeUntil$1, empty, forkJoin, ReplaySubject, interval, shareReplay as shareReplay$1, mergeMap as mergeMap$1 } from 'rxjs';
 import { map, distinctUntilChanged, filter, startWith, switchMap, take, shareReplay, scan, debounceTime, share, takeUntil, tap, catchError, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom, mergeMap, every as every$1, toArray, merge as merge$1, expand, skip, mapTo, finalize, reduce as reduce$1, combineLatestWith } from 'rxjs/operators';
 import * as i1 from '@c8y/client';
@@ -31604,6 +31604,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }, { type: i1$4.Router }] });
 
+class BaseColumn {
+    constructor(config = {}) {
+        this.filteringFormRendererComponent = BaseFilteringFormRendererComponent;
+        Object.assign(this, config);
+        if (config.filter?.externalFilterQuery) {
+            this.externalFilterQuery = config.filter.externalFilterQuery;
+        }
+    }
+    /**
+     * Gets a label template to be used in the schema-form's `type: 'template'` form item.
+     * @param label The label to be displayed.
+     * @param options Additional options:
+     *   - `showWildcardTooltip`: `boolean` - appends a tooltip explaining wildcard usage
+     * @returns The string with the template.
+     */
+    getLabelTemplate(label, options = {}) {
+        const wildcardTooltip = `
+      <i
+        class="text-info"
+        c8y-icon="info-circle"
+        title="{{ 'Use * as a wildcard character' | translate }}"
+      ></i>
+    `;
+        return `
+      <label>
+        <span>
+          {{ '${label}' | translate }}
+        </span>
+        ${options.showWildcardTooltip ? wildcardTooltip : ''}
+      </label>
+    `;
+    }
+}
+
+class CustomColumn extends BaseColumn {
+    constructor(initialColumnConfig) {
+        super(initialColumnConfig);
+        this.name = this.name || 'custom';
+        this.header = this.header || gettext('Custom');
+        this.filterable = true;
+        this.filteringConfig = {
+            fields: [
+                {
+                    key: 'exists',
+                    type: 'switch',
+                    defaultValue: false,
+                    templateOptions: {
+                        label: gettext('Only rows where value is defined')
+                    }
+                },
+                ...getBasicInputArrayFormFieldConfig({
+                    key: 'equals',
+                    label: gettext('Only rows where value equals to'),
+                    addText: gettext('Add next`value`'),
+                    tooltip: gettext('Use * as a wildcard character'),
+                    placeholder: '10300',
+                    optional: true
+                })
+            ],
+            getFilter: (model) => {
+                const filter = {};
+                if (model.exists) {
+                    filter.__has = this.path;
+                }
+                if (model.equals) {
+                    filter[this.path] = { __in: model.equals };
+                }
+                return filter;
+            }
+        };
+        this.sortable = true;
+        this.sortingConfig = {
+            pathSortingConfigs: [{ path: this.path }]
+        };
+    }
+}
+
 class ExpandableHeaderCellRendererComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExpandableHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExpandableHeaderCellRendererComponent, selector: "c8y-expandable-header-cell-renderer", ngImport: i0, template: `&nbsp;`, isInline: true }); }
@@ -31698,6 +31775,226 @@ class ExpandableRowColumn {
     }
 }
 
+class TreeNodeCellRendererComponent {
+    constructor(context, dataGridComponent // forwardRef is needed because of circular dependency
+    ) {
+        this.context = context;
+        this.dataGridComponent = dataGridComponent;
+        this.collapse = gettext('Collapse');
+        this.expand = gettext('Expand');
+        this.isExpanded = signal(false);
+        this.loading = signal(false);
+        this.level = this.getLevel(this.context.item);
+        this.btnClass = computed(() => ({
+            active: this.isExpanded(),
+            [`level-${this.level}`]: this.level > 0
+        }));
+        this.context.item.level = this.level;
+        this.dataGridComponent.dataSource.nodesLoading$
+            .pipe(takeUntilDestroyed())
+            .subscribe(loading => this.loading.set(loading.includes(this.context.item)));
+    }
+    toggleExpand() {
+        if (this.isExpanded()) {
+            this.dataGridComponent.collapseNode(this.context.item);
+            this.isExpanded.set(false);
+        }
+        else {
+            this.dataGridComponent.expandNode(this.context.item);
+            this.isExpanded.set(true);
+        }
+    }
+    getLevel(row) {
+        return !!row.parentRow ? this.getLevel(row.parentRow) + 1 : 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeCellRendererComponent, deps: [{ token: CellRendererContext }, { token: forwardRef(() => DataGridComponent) }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeNodeCellRendererComponent, isStandalone: true, selector: "c8y-tree-node-cell-renderer", ngImport: i0, template: `
+    <button
+      class="data-grid-collapse-btn"
+      title="{{ (isExpanded() ? collapse : expand) | translate }}"
+      [attr.aria-label]="(isExpanded() ? collapse : expand) | translate"
+      [attr.aria-controls]="context.item.id"
+      [attr.aria-expanded]="isExpanded()"
+      *ngIf="context.item.hasChildren"
+      [ngClass]="btnClass()"
+      (click)="toggleExpand()"
+    >
+      <i c8yIcon="chevron-right" *ngIf="!loading()"></i>
+      <i class="icon-spin" c8yIcon="circle-o-notch" *ngIf="loading()"></i>
+    </button>
+  `, isInline: true, 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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <button
+      class="data-grid-collapse-btn"
+      title="{{ (isExpanded() ? collapse : expand) | translate }}"
+      [attr.aria-label]="(isExpanded() ? collapse : expand) | translate"
+      [attr.aria-controls]="context.item.id"
+      [attr.aria-expanded]="isExpanded()"
+      *ngIf="context.item.hasChildren"
+      [ngClass]="btnClass()"
+      (click)="toggleExpand()"
+    >
+      <i c8yIcon="chevron-right" *ngIf="!loading()"></i>
+      <i class="icon-spin" c8yIcon="circle-o-notch" *ngIf="loading()"></i>
+    </button>
+  `,
+                    selector: 'c8y-tree-node-cell-renderer',
+                    standalone: true,
+                    imports: [NgClass, NgIf, IconDirective, C8yTranslatePipe]
+                }]
+        }], ctorParameters: () => [{ type: CellRendererContext }, { type: DataGridComponent, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => DataGridComponent)]
+                }] }] });
+
+class TreeNodeHeaderCellRendererComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeNodeHeaderCellRendererComponent, isStandalone: true, selector: "c8y-tree-node-header-cell-renderer", ngImport: i0, template: `&nbsp;`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeNodeHeaderCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `&nbsp;`,
+                    selector: 'c8y-tree-node-header-cell-renderer',
+                    standalone: true
+                }]
+        }] });
+
+class TreeNodeColumn {
+    constructor() {
+        this.name = 'tree-node';
+        this.header = gettext('Tree node toggle');
+        this.dataType = "icon" /* ColumnDataType.Icon */;
+        this.headerCellRendererComponent = TreeNodeHeaderCellRendererComponent;
+        this.cellRendererComponent = TreeNodeCellRendererComponent;
+        this.filterable = false;
+        this.sortable = false;
+    }
+}
+
+class AssetPropertyService extends Service {
+    constructor(client, appState) {
+        super(client);
+        this.appState = appState;
+        this.baseUrl = 'service/dtm';
+        this.listUrl = '/definitions/properties';
+        this.propertyName = 'definitions';
+    }
+    async canRetrieveAssetProperties() {
+        const isAppAvailable = await this.appState.isApplicationAvailable('dtm');
+        if (!isAppAvailable) {
+            return false;
+        }
+        try {
+            const result = await this.list({ currentPage: 1, pageSize: 1 });
+            return result?.data?.length > 0;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    async list(filterInput = {}) {
+        const headers = { accept: 'application/json' };
+        const filter = this.buildFilter(filterInput);
+        const res = await this.fetch(this.listUrl, this.changeFetchOptions({ headers, params: filter }, this.listUrl));
+        const json = (await res.json());
+        const data = json.definitions;
+        const paging = this.getPaging(json, filter);
+        return { res, data, paging };
+    }
+    async getByIdentifier(identifier) {
+        const url = `${this.listUrl}/${encodeURIComponent(identifier)}`;
+        const headers = { accept: 'application/json' };
+        const res = await this.fetch(url, this.changeFetchOptions({ headers }, url));
+        if (res.status === 404) {
+            throw new Error(`Property Definition with identifier '${identifier}' not found (404).`);
+        }
+        if (!res.ok) {
+            throw new Error(`Error fetching Property Definition '${identifier}': ${res.status} ${res.statusText}`);
+        }
+        return (await res.json());
+    }
+    search(searchTerm) {
+        return this.list({ titles: [searchTerm] });
+    }
+    buildFilter(filter) {
+        const newFilter = { ...filter };
+        ['identifiers', 'titles', 'tags'].forEach(key => {
+            if (Array.isArray(newFilter[key])) {
+                newFilter[key] = newFilter[key].join(',');
+            }
+        });
+        return newFilter;
+    }
+    getPaging(json, filter) {
+        if (json.pageStatistics) {
+            const { currentPage, hasMorePages } = json.pageStatistics;
+            const statistics = {
+                ...json.pageStatistics,
+                nextPage: hasMorePages ? currentPage + 1 : null,
+                prevPage: currentPage > 1 ? currentPage - 1 : null,
+                totalPages: json.pageStatistics.pageCount,
+                totalElements: json.totalCount
+            };
+            return new Paging(this, statistics, filter);
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AssetPropertyService, deps: [{ token: i1.FetchClient }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AssetPropertyService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AssetPropertyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: AppStateService }] });
+
+class CustomColumnService {
+    constructor(assetPropertiesService, bottomDrawerService, bsModalService) {
+        this.assetPropertiesService = assetPropertiesService;
+        this.bottomDrawerService = bottomDrawerService;
+        this.bsModalService = bsModalService;
+    }
+    async openCustomColumns(existingColumns, onAdd) {
+        const dtmAvailable = await this.assetPropertiesService.canRetrieveAssetProperties();
+        if (dtmAvailable) {
+            this.openDrawer(onAdd);
+        }
+        else {
+            this.openModal(existingColumns, onAdd);
+        }
+    }
+    openModal(columns, onAdd) {
+        const modalRef = this.bsModalService.show(ConfigureCustomColumnComponent, {
+            class: 'modal-sm',
+            ignoreBackdropClick: true,
+            initialState: { columns }
+        });
+        modalRef.content.onAddCustomColumn
+            .pipe(tap((cfg) => onAdd(cfg)), takeUntil(modalRef.onHidden))
+            .subscribe();
+    }
+    async openDrawer(onAdd) {
+        // Importing here because otherwise introducing a circular dependency between data-grid and asset-property-grid compponents.
+        const { AssetPropertyGridComponent } = await import('./c8y-ngx-components-asset-property-grid.component-xQgHuomT.mjs');
+        const drawerRef = this.bottomDrawerService.openDrawer(AssetPropertyGridComponent);
+        drawerRef.instance.onAddCustomColumn
+            .pipe(tap((cfg) => onAdd(cfg)))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomColumnService, deps: [{ token: AssetPropertyService }, { token: BottomDrawerService }, { token: i1$5.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomColumnService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomColumnService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: AssetPropertyService }, { type: BottomDrawerService }, { type: i1$5.BsModalService }] });
+
 /**
  * Injection token used to provide a configuration strategy service for data-grid component.
  */
@@ -31746,83 +32043,6 @@ var BuiltInActionType;
     BuiltInActionType["Export"] = "EXPORT";
 })(BuiltInActionType || (BuiltInActionType = {}));
 
-class BaseColumn {
-    constructor(config = {}) {
-        this.filteringFormRendererComponent = BaseFilteringFormRendererComponent;
-        Object.assign(this, config);
-        if (config.filter?.externalFilterQuery) {
-            this.externalFilterQuery = config.filter.externalFilterQuery;
-        }
-    }
-    /**
-     * Gets a label template to be used in the schema-form's `type: 'template'` form item.
-     * @param label The label to be displayed.
-     * @param options Additional options:
-     *   - `showWildcardTooltip`: `boolean` - appends a tooltip explaining wildcard usage
-     * @returns The string with the template.
-     */
-    getLabelTemplate(label, options = {}) {
-        const wildcardTooltip = `
-      <i
-        class="text-info"
-        c8y-icon="info-circle"
-        title="{{ 'Use * as a wildcard character' | translate }}"
-      ></i>
-    `;
-        return `
-      <label>
-        <span>
-          {{ '${label}' | translate }}
-        </span>
-        ${options.showWildcardTooltip ? wildcardTooltip : ''}
-      </label>
-    `;
-    }
-}
-
-class CustomColumn extends BaseColumn {
-    constructor(initialColumnConfig) {
-        super(initialColumnConfig);
-        this.name = this.name || 'custom';
-        this.header = this.header || gettext('Custom');
-        this.filterable = true;
-        this.filteringConfig = {
-            fields: [
-                {
-                    key: 'exists',
-                    type: 'switch',
-                    defaultValue: false,
-                    templateOptions: {
-                        label: gettext('Only rows where value is defined')
-                    }
-                },
-                ...getBasicInputArrayFormFieldConfig({
-                    key: 'equals',
-                    label: gettext('Only rows where value equals to'),
-                    addText: gettext('Add next`value`'),
-                    tooltip: gettext('Use * as a wildcard character'),
-                    placeholder: '10300',
-                    optional: true
-                })
-            ],
-            getFilter: (model) => {
-                const filter = {};
-                if (model.exists) {
-                    filter.__has = this.path;
-                }
-                if (model.equals) {
-                    filter[this.path] = { __in: model.equals };
-                }
-                return filter;
-            }
-        };
-        this.sortable = true;
-        this.sortingConfig = {
-            pathSortingConfigs: [{ path: this.path }]
-        };
-    }
-}
-
 class DataGridService {
     constructor(userPreferencesService) {
         this.userPreferencesService = userPreferencesService;
@@ -31934,6 +32154,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }] });
 
 class GridDataSource {
+    set childNodesProperty(name) {
+        this.childNodesPropertyName = name ?? 'childNodes';
+    }
     constructor() {
         this.loadingSubject = new BehaviorSubject(true);
         this.dataSourceSubject = new BehaviorSubject([]);
@@ -31948,11 +32171,14 @@ class GridDataSource {
             filteredDataIds: []
         });
         this.resultListSubject = new Subject();
+        this.nodesLoadingSubject = new BehaviorSubject([]);
+        this.childNodesPropertyName = 'childNodes';
         this.loading$ = this.loadingSubject.asObservable();
         this.data$ = this.dataSourceSubject.asObservable();
         this.stats$ = this.dataStatsSubject.asObservable();
         this.selection$ = this.dataSelectionSubject.asObservable();
         this.resultList$ = this.resultListSubject.asObservable();
+        this.nodesLoading$ = this.nodesLoadingSubject.asObservable();
     }
     connect(_collectionViewer) {
         return this.data$;
@@ -31962,9 +32188,15 @@ class GridDataSource {
         this.dataSourceSubject.complete();
         this.dataStatsSubject.complete();
         this.dataSelectionSubject.complete();
+        this.resultListSubject.complete();
     }
-    loadData({ rows, columns, pagination, searchText, serverSideDataCallback, selectable, selectionPrimaryKey, infiniteScroll, reload = false }) {
+    loadData({ rows, columns, pagination, searchText, serverSideDataCallback, selectable, selectionPrimaryKey, infiniteScroll, reload = false, parentRow = null }) {
         const clientSideData$ = toObservable(rows).pipe(map(initialData => {
+            if (!!parentRow) {
+                return parentRow[this.childNodesPropertyName] || [];
+            }
+            return initialData;
+        }), map(initialData => {
             let filteredSize = 0;
             let filteredDataIds = [];
             const transformedData = flow(data => this.doClientSideSearch({ data, columns, searchText }), data => this.doClientSideFiltering({ data, columns }), data => this.doClientSideSorting({ data, columns }), data => {
@@ -31974,13 +32206,15 @@ class GridDataSource {
                     : filteredDataIds;
                 return data;
             }, data => this.doClientSidePagination({ data, pagination }))(initialData);
-            this.dataStatsSubject.next({
-                size: initialData.length,
-                filteredSize,
-                currentPage: pagination.currentPage,
-                currentPageSize: transformedData.length,
-                firstPageSize: pagination.pageSize
-            });
+            if (!parentRow) {
+                this.dataStatsSubject.next({
+                    size: initialData.length,
+                    filteredSize,
+                    currentPage: pagination.currentPage,
+                    currentPageSize: transformedData.length,
+                    firstPageSize: pagination.pageSize
+                });
+            }
             this.dataSelectionSubject.next({ filteredDataIds });
             return transformedData;
         }));
@@ -31988,24 +32222,44 @@ class GridDataSource {
             columns,
             searchText,
             pagination,
-            selection: { enabled: selectable, primaryKey: selectionPrimaryKey }
+            selection: { enabled: selectable, primaryKey: selectionPrimaryKey },
+            parentRow
         }))).pipe(map((result) => {
             const { data, paging, size, filteredSize, filteredDataIds } = result;
-            this.dataStatsSubject.next({
-                size,
-                filteredSize,
-                currentPage: paging.currentPage,
-                currentPageSize: data.length,
-                nextPage: paging.nextPage,
-                firstPageSize: paging.pageSize
-            });
+            if (!parentRow) {
+                this.dataStatsSubject.next({
+                    size,
+                    filteredSize,
+                    currentPage: paging.currentPage,
+                    currentPageSize: data.length,
+                    nextPage: paging.nextPage,
+                    firstPageSize: paging.pageSize
+                });
+            }
+            else {
+                /* Add additional row to be rendered as pagination row containing statistics data */
+                const childrenStats = {
+                    size,
+                    filteredSize,
+                    currentPage: paging.currentPage,
+                    currentPageSize: data.length,
+                    nextPage: paging.nextPage,
+                    firstPageSize: paging.pageSize
+                };
+                data.push({
+                    /* θpagination is an internal flag for pagination rows */
+                    θpagination: true,
+                    childrenStats,
+                    parentRow
+                });
+            }
             this.dataSelectionSubject.next({ filteredDataIds: filteredDataIds || [] });
             this.resultListSubject.next(result);
             return data;
         }));
         const data$ = typeof serverSideDataCallback === 'function' ? serverSideData$ : clientSideData$;
         of([])
-            .pipe(tap(() => this.loadingSubject.next(true)), switchMap(() => data$), catchError(() => {
+            .pipe(tap(() => this.emitLoadingStart(parentRow)), switchMap(() => data$), catchError(() => {
             this.dataStatsSubject.next({
                 size: 0,
                 filteredSize: 0,
@@ -32015,12 +32269,28 @@ class GridDataSource {
             });
             this.dataSelectionSubject.next({ filteredDataIds: [] });
             return of([]);
-        }), finalize(() => this.loadingSubject.next(false)))
+        }), finalize(() => this.emitLoadingEnd(parentRow)))
             .subscribe(result => {
-            const data = infiniteScroll && !reload ? [...this.dataSourceSubject.value, ...result] : result;
+            let data;
+            if (parentRow) {
+                result.forEach(item => (item.parentRow = parentRow));
+                data = this.dataSourceSubject.value;
+                /* Replace child rows with next page data when paginating */
+                const parentRowIndex = data.indexOf(parentRow);
+                const paginationRowIndex = findIndex$1(data, r => r.θpagination && r.parentRow === parentRow);
+                const numberOfRowsToRemove = paginationRowIndex > -1 ? paginationRowIndex - parentRowIndex : 0;
+                data.splice(parentRowIndex + 1, numberOfRowsToRemove, ...result);
+            }
+            else {
+                data = infiniteScroll && !reload ? [...this.dataSourceSubject.value, ...result] : result;
+            }
             this.dataSourceSubject.next(data);
         });
     }
+    collapseNode(row) {
+        const data = this.dataSourceSubject.value.filter((item) => !this.isParent(item, row));
+        this.dataSourceSubject.next(data);
+    }
     resolveValue(x, path) {
         return get(x, path);
     }
@@ -32030,6 +32300,22 @@ class GridDataSource {
     normalizeNil(x) {
         return isNil(x) ? '' : x;
     }
+    emitLoadingStart(parentRow) {
+        if (parentRow) {
+            this.nodesLoadingSubject.next([...this.nodesLoadingSubject.value, parentRow]);
+        }
+        else {
+            this.loadingSubject.next(true);
+        }
+    }
+    emitLoadingEnd(parentRow) {
+        if (parentRow) {
+            this.nodesLoadingSubject.next(this.nodesLoadingSubject.value.filter(item => item !== parentRow));
+        }
+        else {
+            this.loadingSubject.next(false);
+        }
+    }
     doClientSideFiltering({ data, columns }) {
         return columns.reduce((result, column) => {
             const { filterPredicate } = column;
@@ -32071,6 +32357,10 @@ class GridDataSource {
     createRegexSearch(filterValue) {
         return RegExp(escapeRegExpPattern(filterValue), 'i');
     }
+    isParent(row, parentRow) {
+        return (!!row?.parentRow &&
+            (row.parentRow.id === parentRow.id || this.isParent(row.parentRow, parentRow)));
+    }
 }
 /**
  *
@@ -32110,125 +32400,6 @@ const PX_ACTIONS = {
     CLEAR_SEARCH: 'clearSearch'
 };
 
-class AssetPropertyService extends Service {
-    constructor(client, appState) {
-        super(client);
-        this.appState = appState;
-        this.baseUrl = 'service/dtm';
-        this.listUrl = '/definitions/properties';
-        this.propertyName = 'definitions';
-    }
-    async canRetrieveAssetProperties() {
-        const isAppAvailable = await this.appState.isApplicationAvailable('dtm');
-        if (!isAppAvailable) {
-            return false;
-        }
-        try {
-            const result = await this.list({ currentPage: 1, pageSize: 1 });
-            return result?.data?.length > 0;
-        }
-        catch (error) {
-            return false;
-        }
-    }
-    async list(filterInput = {}) {
-        const headers = { accept: 'application/json' };
-        const filter = this.buildFilter(filterInput);
-        const res = await this.fetch(this.listUrl, this.changeFetchOptions({ headers, params: filter }, this.listUrl));
-        const json = (await res.json());
-        const data = json.definitions;
-        const paging = this.getPaging(json, filter);
-        return { res, data, paging };
-    }
-    async getByIdentifier(identifier) {
-        const url = `${this.listUrl}/${encodeURIComponent(identifier)}`;
-        const headers = { accept: 'application/json' };
-        const res = await this.fetch(url, this.changeFetchOptions({ headers }, url));
-        if (res.status === 404) {
-            throw new Error(`Property Definition with identifier '${identifier}' not found (404).`);
-        }
-        if (!res.ok) {
-            throw new Error(`Error fetching Property Definition '${identifier}': ${res.status} ${res.statusText}`);
-        }
-        return (await res.json());
-    }
-    search(searchTerm) {
-        return this.list({ titles: [searchTerm] });
-    }
-    buildFilter(filter) {
-        const newFilter = { ...filter };
-        ['identifiers', 'titles', 'tags'].forEach(key => {
-            if (Array.isArray(newFilter[key])) {
-                newFilter[key] = newFilter[key].join(',');
-            }
-        });
-        return newFilter;
-    }
-    getPaging(json, filter) {
-        if (json.pageStatistics) {
-            const { currentPage, hasMorePages } = json.pageStatistics;
-            const statistics = {
-                ...json.pageStatistics,
-                nextPage: hasMorePages ? currentPage + 1 : null,
-                prevPage: currentPage > 1 ? currentPage - 1 : null,
-                totalPages: json.pageStatistics.pageCount,
-                totalElements: json.totalCount
-            };
-            return new Paging(this, statistics, filter);
-        }
-        return null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AssetPropertyService, deps: [{ token: i1.FetchClient }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AssetPropertyService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AssetPropertyService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: AppStateService }] });
-
-class CustomColumnService {
-    constructor(assetPropertiesService, bottomDrawerService, bsModalService) {
-        this.assetPropertiesService = assetPropertiesService;
-        this.bottomDrawerService = bottomDrawerService;
-        this.bsModalService = bsModalService;
-    }
-    async openCustomColumns(existingColumns, onAdd) {
-        const dtmAvailable = await this.assetPropertiesService.canRetrieveAssetProperties();
-        if (dtmAvailable) {
-            this.openDrawer(onAdd);
-        }
-        else {
-            this.openModal(existingColumns, onAdd);
-        }
-    }
-    openModal(columns, onAdd) {
-        const modalRef = this.bsModalService.show(ConfigureCustomColumnComponent, {
-            class: 'modal-sm',
-            ignoreBackdropClick: true,
-            initialState: { columns }
-        });
-        modalRef.content.onAddCustomColumn
-            .pipe(tap((cfg) => onAdd(cfg)), takeUntil(modalRef.onHidden))
-            .subscribe();
-    }
-    async openDrawer(onAdd) {
-        // Importing here because otherwise introducing a circular dependency between data-grid and asset-property-grid compponents.
-        const { AssetPropertyGridComponent } = await import('./c8y-ngx-components-asset-property-grid.component-CmhkghTo.mjs');
-        const drawerRef = this.bottomDrawerService.openDrawer(AssetPropertyGridComponent);
-        drawerRef.instance.onAddCustomColumn
-            .pipe(tap((cfg) => onAdd(cfg)))
-            .subscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomColumnService, deps: [{ token: AssetPropertyService }, { token: BottomDrawerService }, { token: i1$5.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomColumnService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomColumnService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: AssetPropertyService }, { type: BottomDrawerService }, { type: i1$5.BsModalService }] });
-
 const HOOK_FILTER_MAPPER = new InjectionToken('HOOK_FILTER_MAPPER');
 /**
  * You can either provide a single `FilterMapper` as parameter:
@@ -32532,6 +32703,14 @@ class DataGridComponent {
     set _headerActionControls(headerActionControls) {
         this.headerActionControls = headerActionControls || [];
     }
+    /**
+     * In a client side data fed tree-grid, this input determines the name of the
+     * property holding the child nodes of the current node.
+     * Default value is `childNodes`.
+     */
+    set childNodesProperty(childNodesProperty) {
+        this.dataSource.childNodesProperty = childNodesProperty;
+    }
     constructor(configurationStrategy, dataGridService, sanitizer, gainsightService, alertService, actionControlsService, route) {
         this.configurationStrategy = configurationStrategy;
         this.dataGridService = dataGridService;
@@ -32592,6 +32771,11 @@ class DataGridComponent {
         this.expandableRows = 'NONE';
         /** Determines if the Reload button will be hidden. */
         this.hideReload = false;
+        /**
+         * In a tree-grid, this input determines the name of the property that will be used as a label
+         * to refer to the parent node its pagination row.
+         */
+        this.parentNodeLabelProperty = 'id';
         /** Emits an event when mouse is over a row. */
         this.rowMouseOver = new EventEmitter();
         /** Emits an event when mouse leaves a row. */
@@ -32685,9 +32869,15 @@ class DataGridComponent {
          * This is used to avoid having multiple this.loadData() function calls.
          */
         this.triggerLoadData = new EventEmitter();
+        this.isDataRow = (idx, row) => {
+            return !this.isPaginationRow(idx, row);
+        };
         this.isRowExpanded = (_, row) => {
             return !!this.expandedRows.get(row);
         };
+        this.isPaginationRow = (_, row) => {
+            return !!row?.θpagination;
+        };
         this.triggerLoadData.pipe(debounceTime(1), takeUntil(this.unsubscribe$)).subscribe(reload => {
             this.loadData(reload);
         });
@@ -32790,6 +32980,13 @@ class DataGridComponent {
         this.expandedRows.delete(row);
         this.tableRef.renderRows();
     }
+    expandNode(row) {
+        row.pagination = row.pagination ?? this.childNodePagination;
+        this.loadData(false, row);
+    }
+    collapseNode(row) {
+        this.dataSource.collapseNode(row);
+    }
     setColumns(config) {
         if (!!this.configurationStrategy && !isEmpty(this._columns)) {
             this.columns = this.dataGridService.applyConfigToColumns(config, this._columns);
@@ -32985,6 +33182,18 @@ class DataGridComponent {
         }
         this.triggerEvent({ action: PX_ACTIONS.CHANGE_PAGINATION, itemsPerPage, page });
     }
+    updateChildPagination({ itemsPerPage, page }, { parentRow }) {
+        if (page === parentRow?.pagination?.currentPage &&
+            itemsPerPage === parentRow?.pagination?.pageSize) {
+            // avoid endless loop through same page feedback
+            return;
+        }
+        parentRow.pagination = {
+            currentPage: page,
+            pageSize: itemsPerPage
+        };
+        this.loadData(false, parentRow);
+    }
     clickReload() {
         this.searchText = '';
         this.reload();
@@ -33179,7 +33388,7 @@ class DataGridComponent {
         }
         return config;
     }
-    loadData(reload = false) {
+    loadData(reload = false, parentRow) {
         const { rows, columns, pagination, searchText, serverSideDataCallback, selectable, selectionPrimaryKey, infiniteScroll } = this;
         this.dataSource.loadData({
             rows,
@@ -33190,7 +33399,8 @@ class DataGridComponent {
             selectable,
             selectionPrimaryKey,
             infiniteScroll,
-            reload
+            reload,
+            parentRow
         });
     }
     updateColumns() {
@@ -33213,7 +33423,14 @@ class DataGridComponent {
             }
             : undefined;
         const expandableRowsColumn = this.expandableRows !== 'NONE' ? new ExpandableRowColumn() : null;
-        const columns = [expandableRowsColumn, selectionColumn, ...this.columns, actionsColumn]
+        const treeNodeColums = this.treeGrid ? new TreeNodeColumn() : null;
+        const columns = [
+            treeNodeColums,
+            expandableRowsColumn,
+            selectionColumn,
+            ...this.columns,
+            actionsColumn
+        ]
             .filter(Boolean)
             .map(this.withColumnDefaults);
         this.columns = uniqBy(columns, 'name');
@@ -33241,14 +33458,16 @@ class DataGridComponent {
         return {
             visible: true,
             positionFixed: false,
-            resizable: true,
+            resizable: dataType === 'icon' ? false : true,
             sortable: true,
             sortOrder: '',
             filterable: false,
             ...column,
             dataType,
             gridTrackSize: column.gridTrackSize ||
-                `minmax(${minColumnGridTrackSize}px, ${ratiosByColumnTypes[dataType]}fr)`,
+                (dataType === 'icon'
+                    ? `max-content`
+                    : `minmax(${minColumnGridTrackSize}px, ${ratiosByColumnTypes[dataType]}fr)`),
             headerCSSClassName: (typeof headerCSSClassName === 'string'
                 ? headerCSSClassName.split(' ')
                 : headerCSSClassName) || [],
@@ -33515,12 +33734,12 @@ class DataGridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataGridComponent, deps: [{ token: DATA_GRID_CONFIGURATION_STRATEGY, optional: true }, { token: DataGridService }, { token: i1$2.DomSanitizer }, { token: GainsightService }, { token: AlertService }, { token: ActionControlsExtensionService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataGridComponent, selector: "c8y-data-grid", inputs: { title: "title", loadMoreItemsLabel: "loadMoreItemsLabel", loadingItemsLabel: "loadingItemsLabel", showSearch: "showSearch", refresh: "refresh", _columns: ["columns", "_columns"], _rows: ["rows", "_rows"], _pagination: ["pagination", "_pagination"], _infiniteScroll: ["infiniteScroll", "_infiniteScroll"], _serverSideDataCallback: ["serverSideDataCallback", "_serverSideDataCallback"], _selectable: ["selectable", "_selectable"], _singleSelection: ["singleSelection", "_singleSelection"], _selectionPrimaryKey: ["selectionPrimaryKey", "_selectionPrimaryKey"], _displayOptions: ["displayOptions", "_displayOptions"], _actionControls: ["actionControls", "_actionControls"], _bulkActionControls: ["bulkActionControls", "_bulkActionControls"], _headerActionControls: ["headerActionControls", "_headerActionControls"], searchText: "searchText", configureColumnsEnabled: "configureColumnsEnabled", showCounterWarning: "showCounterWarning", activeClassName: "activeClassName", expandableRows: "expandableRows", hideReload: "hideReload" }, outputs: { rowMouseOver: "rowMouseOver", rowMouseLeave: "rowMouseLeave", rowClick: "rowClick", onConfigChange: "onConfigChange", onBeforeFilter: "onBeforeFilter", onBeforeSearch: "onBeforeSearch", onFilter: "onFilter", itemsSelect: "itemsSelect", onReload: "onReload", onAddCustomColumn: "onAddCustomColumn", onRemoveCustomColumn: "onRemoveCustomColumn", onColumnFilterReset: "onColumnFilterReset", onSort: "onSort", onPageSizeChange: "onPageSizeChange", onColumnReordered: "onColumnReordered", onColumnVisibilityChange: "onColumnVisibilityChange" }, host: { classAttribute: "d-contents" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataGridComponent, selector: "c8y-data-grid", inputs: { title: "title", loadMoreItemsLabel: "loadMoreItemsLabel", loadingItemsLabel: "loadingItemsLabel", showSearch: "showSearch", refresh: "refresh", _columns: ["columns", "_columns"], _rows: ["rows", "_rows"], _pagination: ["pagination", "_pagination"], childNodePagination: "childNodePagination", _infiniteScroll: ["infiniteScroll", "_infiniteScroll"], _serverSideDataCallback: ["serverSideDataCallback", "_serverSideDataCallback"], _selectable: ["selectable", "_selectable"], _singleSelection: ["singleSelection", "_singleSelection"], _selectionPrimaryKey: ["selectionPrimaryKey", "_selectionPrimaryKey"], _displayOptions: ["displayOptions", "_displayOptions"], _actionControls: ["actionControls", "_actionControls"], _bulkActionControls: ["bulkActionControls", "_bulkActionControls"], _headerActionControls: ["headerActionControls", "_headerActionControls"], searchText: "searchText", configureColumnsEnabled: "configureColumnsEnabled", showCounterWarning: "showCounterWarning", activeClassName: "activeClassName", expandableRows: "expandableRows", treeGrid: "treeGrid", hideReload: "hideReload", childNodesProperty: "childNodesProperty", parentNodeLabelProperty: "parentNodeLabelProperty" }, outputs: { rowMouseOver: "rowMouseOver", rowMouseLeave: "rowMouseLeave", rowClick: "rowClick", onConfigChange: "onConfigChange", onBeforeFilter: "onBeforeFilter", onBeforeSearch: "onBeforeSearch", onFilter: "onFilter", itemsSelect: "itemsSelect", onReload: "onReload", onAddCustomColumn: "onAddCustomColumn", onRemoveCustomColumn: "onRemoveCustomColumn", onColumnFilterReset: "onColumnFilterReset", onSort: "onSort", onPageSizeChange: "onPageSizeChange", onColumnReordered: "onColumnReordered", onColumnVisibilityChange: "onColumnVisibilityChange" }, host: { classAttribute: "d-contents" }, providers: [
             {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => DataGridComponent)
             }
-        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"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                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"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          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [style]=\"{ 'margin-left': !column.filterable && column.sortable ? '-20px' : null }\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2$1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i8.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i8.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i8.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i8.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i8.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i8.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i8.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i8.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i8.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i8.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i8.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i8.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i8.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i8.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i18.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
+        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"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                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"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          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !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    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [style]=\"{ 'margin-left': !column.filterable && column.sortable ? '-20px' : null }\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node' : ''\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\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [class]=\"'level-' + (row.parentRow.level + 1)\"\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          <div\n            class=\"counter p-t-8 p-b-8\"\n            *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n            data-cy=\"data-grid--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        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          <pagination\n            class=\"d-flex j-c-end\"\n            *ngIf=\"row.childrenStats.filteredSize > row.childrenStats.currentPageSize\"\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\"\n            nextText=\"Next\"\n          ></pagination>\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  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"d-flex j-c-end\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2$1.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i8.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i8.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i8.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i8.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i8.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i8.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i8.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i8.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i8.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i8.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i8.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i8.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i8.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i8.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$5.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i18.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -33529,7 +33748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                             useExisting: forwardRef(() => DataGridComponent)
                         }
-                    ], template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"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                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"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          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [style]=\"{ 'margin-left': !column.filterable && column.sortable ? '-20px' : null }\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"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                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"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          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          *ngIf=\"!hideReload\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [(ngModel)]=\"searchText\"\n            (ngModelChange)=\"searchText$.emit($event)\"\n            (keydown.enter)=\"$event.stopPropagation(); performSearch(searchText)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped && !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    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    [ngClass]=\"actionControl.iconClasses\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i\n                          c8yIcon=\"{{ actionControl.icon }}\"\n                          [ngClass]=\"actionControl.iconClasses\"\n                        ></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [style]=\"{ 'margin-left': !column.filterable && column.sortable ? '-20px' : null }\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex; when: isDataRow\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd',\n        row.level > 0 ? 'data-grid-child-node' : ''\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\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['pagination-row']; when: isPaginationRow\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"pagination-row\">\n      <td\n        [class]=\"'level-' + (row.parentRow.level + 1)\"\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <div class=\"col-sm-4 no-gutter\">\n          <div\n            class=\"counter p-t-8 p-b-8\"\n            *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n            data-cy=\"data-grid--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        </div>\n        <div class=\"col-sm-4 col-sm-offset-4 no-gutter text-right\">\n          <pagination\n            class=\"d-flex j-c-end\"\n            *ngIf=\"row.childrenStats.filteredSize > row.childrenStats.currentPageSize\"\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\"\n            nextText=\"Next\"\n          ></pagination>\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  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"d-flex j-c-end\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -33554,6 +33773,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], _pagination: [{
                 type: Input,
                 args: ['pagination']
+            }], childNodePagination: [{
+                type: Input
             }], _infiniteScroll: [{
                 type: Input,
                 args: ['infiniteScroll']
@@ -33591,8 +33812,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], expandableRows: [{
                 type: Input
+            }], treeGrid: [{
+                type: Input
             }], hideReload: [{
                 type: Input
+            }], childNodesProperty: [{
+                type: Input
+            }], parentNodeLabelProperty: [{
+                type: Input
             }], rowMouseOver: [{
                 type: Output
             }], rowMouseLeave: [{
@@ -36642,5 +36869,5 @@ function colorValidator(allowedModes) {
  * Generated bundle index. Do not edit.
  */
 
-export { CommonModule as $, AssetPropertyService as A, BaseColumn as B, CellRendererContext as C, DataGridModule as D, AlertComponent as E, AlertModule as F, BootstrapComponent as G, HOOK_ACTION_BAR as H, BootstrapModule as I, CookieBannerComponent as J, BreadcrumbOutletComponent as K, BreadcrumbComponent as L, MessageBannerService as M, HOOK_BREADCRUMB as N, hookBreadcrumb as O, BreadcrumbService as P, BreadcrumbItemComponent as Q, BreadcrumbModule as R, DRAWER_ANIMATION_TIME as S, BottomDrawerComponent as T, BottomDrawerService as U, PluginsExportScopes as V, AssetLinkPipe as W, BytesPipe as X, ColorService as Y, MAX_PAGE_SIZE as Z, initializeServices as _, BottomDrawerRef as a, ShortenUserNamePipe as a$, C8yComponentOutlet as a0, ES_MAX_TIME_MILLISECONDS as a1, DatePipe as a2, DeviceService as a3, DropdownDirectionDirective as a4, EmptyStateContextDirective as a5, EmptyStateComponent as a6, fromTrigger as a7, fromTriggerOnce as a8, InjectionType as a9, GroupService as aA, internalApps as aB, HumanizeAppNamePipe as aC, HumanizePipe as aD, IconDirective as aE, IfAllowedDirective as aF, LoadMoreComponent as aG, LoadingComponent as aH, ManagedObjectType as aI, MapFunctionPipe as aJ, MarkdownToHtmlPipe as aK, memoize as aL, MoNamePipe as aM, NUMBER_FORMAT_REGEXP as aN, NumberPipe as aO, OperationResultComponent as aP, HOOK_OPTIONS as aQ, hookOptions as aR, OptionsService as aS, OutletDirective as aT, Permissions as aU, ProgressBarComponent as aV, NULL_VALUE_PLACEHOLDER as aW, RelativeTimePipe as aX, retryWithDelay as aY, hookService as aZ, ServiceRegistry as a_, StandalonePluginInjector as aa, getInjectedHooks as ab, fromFactories as ac, resolveInjectedFactories as ad, stateToFactory as ae, sortByPriority as af, removeDuplicatesIds as ag, toObservableOfArrays as ah, isPromise as ai, isExtensionFactory as aj, toObservable as ak, ExtensionPointWithoutStateForPlugins as al, ExtensionPointForPlugins as am, getActivatedRoute as an, hookGeneric as ao, HookProviderTypes as ap, allEntriesAreEqual as aq, GENERIC_FILE_TYPE as ar, FilesService as as, ForOfDirective as at, GenericFileIconPipe as au, GeoService as av, GetGroupIconPipe as aw, GlobalConfigService as ax, GroupFragment as ay, ASSET_PATH as az, AlertService as b, RecoverPasswordComponent as b$, ShouldShowMoPipe as b0, ShowIfFilterPipe as b1, SkipLinkDirective as b2, StateService as b3, Status as b4, statusIcons as b5, statusClasses as b6, statusAlert as b7, operationStatusIcons as b8, operationStatusClasses as b9, localePathFactory as bA, languagesFactory as bB, localeId as bC, getAngularLocalesLanguageString as bD, I18nModule as bE, LANGUAGES as bF, TranslateParserCustom as bG, LOCALE_PATH as bH, loadLocale as bI, MissingTranslationCustomHandler as bJ, TranslateService as bK, MESSAGES_CORE_I18N as bL, HOOK_PATTERN_MESSAGES as bM, hookPatternMessages as bN, C8yTranslateModule as bO, C8yTranslateDirective as bP, CachedLocaleDictionaryService as bQ, PropertyValueTransformService as bR, NameTransformPipe as bS, TranslationLoaderService as bT, trimTranslationKey as bU, getDictionaryWithTrimmedKeys as bV, LoginService as bW, LoginViews as bX, LoginComponent as bY, PasswordStrengthValidatorDirective as bZ, StrengthValidatorService as b_, StringifyObjectPipe as ba, TabsetAriaDirective as bb, TenantUiService as bc, TextareaAutoresizeDirective as bd, throttle as be, AppStateService as bf, UserNameInitialsPipe as bg, UserPreferencesStorageLocal as bh, UserPreferencesStorageInventory as bi, UserPreferencesService as bj, VirtualScrollWindowStrategy as bk, _virtualScrollWindowStrategyFactory as bl, VirtualScrollWindowDirective as bm, VirtualScrollerWrapperComponent as bn, ZipService as bo, SupportedApps as bp, InterAppService as bq, WIDGET_TYPE_VALUES as br, IntervalBasedReload as bs, DateFormatService as bt, HeaderModule as bu, HeaderService as bv, TitleOutletComponent as bw, TitleComponent as bx, HeaderBarComponent as by, PatternMessagesService as bz, C8yTranslatePipe as c, UserEditComponent as c$, ChangePasswordComponent as c0, TotpAuthComponent as c1, LoginModule as c2, CredentialsComponent as c3, ModalModule as c4, ModalComponent as c5, ConfirmModalComponent as c6, ModalService as c7, PopoverConfirmComponent as c8, NavigatorModule as c9, hookSearch as cA, SearchFilters as cB, SearchService as cC, HighlightComponent as cD, InventorySearchService as cE, SearchComponent as cF, CoreSearchModule as cG, SearchResultEmptyComponent as cH, SearchOutletComponent as cI, ConditionalTabsOutletComponent as cJ, TabsOutletComponent as cK, TabComponent as cL, HOOK_TABS as cM, hookTab as cN, TabsService as cO, TabsModule as cP, DropAreaComponent as cQ, DropAreaModule as cR, FilePickerModule as cS, FilePickerComponent as cT, FilePickerFormControlModule as cU, FilePickerFormControlComponent as cV, DatePickerModule as cW, DatePickerComponent as cX, UserEditModalComponent as cY, hookUserMenu as cZ, UserMenuService as c_, NavigatorIconComponent as ca, HOOK_NAVIGATOR_NODES as cb, hookNavigator as cc, NavigatorService as cd, NavigatorNodeRoot as ce, NavigatorOutletComponent as cf, NavigatorNodeComponent as cg, NavigatorNode as ch, NavigatorTopModule as ci, NavigatorBottomModule as cj, TotpSetupComponent as ck, TotpChallengeComponent as cl, AuthenticationModule as cm, PasswordStrengthCheckerService as cn, PasswordStrengthComponent as co, SmsChallengeComponent as cp, NewPasswordComponent as cq, PasswordCheckListComponent as cr, PasswordConfirmModalComponent as cs, PasswordConfirm as ct, PasswordService as cu, CurrentPasswordModalComponent as cv, ProvidePhoneNumberComponent as cw, PasswordInputComponent as cx, SearchInputComponent as cy, HOOK_SEARCH as cz, DataGridComponent as d, GuideDocsComponent as d$, UserTotpRevokeComponent as d0, UserModule as d1, UserMenuItemComponent as d2, UserTotpSetupComponent as d3, UserMenuOutletComponent as d4, ViewContext as d5, ContextRouteService as d6, extraRoutes as d7, viewContextRoutes as d8, RouterModule as d9, C8yValidators as dA, RequiredInputPlaceholderDirective as dB, simpleJsonPathValidator as dC, SimpleJsonPathValidatorDirective as dD, TextAreaRowHeightDirective as dE, uniqueInCollectionByPathValidator as dF, UniqueInCollectionByPathValidationDirective as dG, DatapointLibraryValidationErrors as dH, ValidationPattern as dI, HumanizeValidationMessagePipe as dJ, ExtractArrayValidationErrorsPipe as dK, FilterNonArrayValidationErrorsPipe as dL, ARRAY_VALIDATION_PREFIX as dM, validateArrayElements as dN, asyncValidateArrayElements as dO, SendStatus as dP, PushStatus as dQ, SendStatusLabels as dR, PushStatusLabels as dS, deviceAvailabilityIconMap as dT, tooltips as dU, DeviceStatusModule as dV, DeviceStatusComponent as dW, DocsModule as dX, HOOK_DOCS as dY, hookDocs as dZ, DocsService as d_, ContextRouteGuard as da, RouterTabsResolver as db, HOOK_ROUTE as dc, hookRoute as dd, RouterService as de, EmptyComponent as df, ContextRouteComponent as dg, ViewContextServices as dh, DefaultValidationDirective as di, EmailsValidatorDirective as dj, FilterInputComponent as dk, FormGroupComponent as dl, FormsModule as dm, InputGroupListContainerDirective as dn, InputGroupListComponent as dp, IpRangeInputListComponent as dq, JsonValidationPrettifierDirective as dr, MaxValidationDirective as ds, MessageDirective as dt, MessagesComponent as du, MinValidationDirective as dv, PhoneValidationDirective as dw, validateInternationalPhoneNumber as dx, RangeComponent as dy, RangeDirective as dz, AppSwitcherComponent as e, ListItemFooterComponent as e$, GuideHrefDirective as e0, DynamicFormsModule as e1, C8yJSONSchema as e2, wrapperLegendFieldConfig as e3, LegendFieldWrapper as e4, RESOLVING_COMPONENT_WAIT_TIME as e5, HOOK_COMPONENTS as e6, hookComponent as e7, hookWidget as e8, isLazyDynamicComponents as e9, WidgetTimeContextDateRangeService as eA, DEFAULT_INTERVAL_VALUE as eB, DEFAULT_INTERVAL_VALUES as eC, DEFAULT_INTERVAL_STATE as eD, GLOBAL_CONTEXT_AUTO_REFRESH as eE, WidgetGlobalAutoRefreshService as eF, globalAutoRefreshLoading as eG, AggregationPickerComponent as eH, RealtimeControlComponent as eI, C8yStepperButtons as eJ, C8yStepperIcon as eK, StepperOutletComponent as eL, C8yStepperProgress as eM, ACTIONS_STEPPER as eN, C8yStepper as eO, Steppers as eP, StepperModule as eQ, HOOK_STEPPER as eR, hookStepper as eS, StepperService as eT, ListGroupComponent as eU, ListGroupModule as eV, ListItemActionComponent as eW, ListItemBodyComponent as eX, ListItemCheckboxComponent as eY, ListItemCollapseComponent as eZ, ListItemDragHandleComponent as e_, isEagerDynamicComponents as ea, DynamicComponentErrorStrategy as eb, DynamicComponentModule as ec, DynamicComponentComponent as ed, DynamicComponentService as ee, DynamicBulkDetailsResolver as ef, DynamicDatapointsResolver as eg, DynamicManagedObjectResolver as eh, DynamicResolverService as ei, DynamicComponentAlertAggregator as ej, DynamicComponentAlert as ek, DismissAlertStrategy as el, DynamicBulkIIdentifiedResolver as em, DynamicComponentAlertsComponent as en, DashboardModule as eo, WidgetsDashboardComponent as ep, DashboardComponent as eq, CopyDashboardDisabledReason as er, NEW_DASHBOARD_ROUTER_STATE_PROP as es, DashboardChildComponent as et, DashboardChildActionComponent as eu, DashboardChildChange as ev, DashboardChildTitleComponent as ew, WidgetTimeContextComponent as ex, DateContextQueryParamNames as ey, WidgetTimeContextActionBarPriority as ez, AppSwitcherInlineComponent as f, SelectModalModule as f$, ListItemIconComponent as f0, ListItemRadioComponent as f1, ListItemTimelineComponent as f2, ListItemComponent as f3, QuickLinkModule as f4, QuickLinkComponent as f5, SelectItemDirective as f6, SelectKeyboardService as f7, SelectLegacyComponent as f8, SelectComponent as f9, DATA_GRID_CONFIGURATION_CONTEXT as fA, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER as fB, minColumnGridTrackSize as fC, ratiosByColumnTypes as fD, FilteringActionType as fE, BuiltInActionType as fF, DataGridService as fG, BooleanFilterMapper as fH, RadioFilterMapper as fI, TypeaheadFilterMapper as fJ, DateFilterMapper as fK, SelectFilterMapper as fL, StringFilterMapper as fM, hookFilterMapper as fN, FilterMapperFactory as fO, FilterMapperModule as fP, FilterMapperPipe as fQ, FilterMapperService as fR, GroupedFilterChips as fS, GridDataSource as fT, LegacyGridConfigMapperService as fU, PX_EVENT_NAME as fV, PX_ACTIONS as fW, UserPreferencesConfigurationStrategy as fX, VisibleControlsPipe as fY, ExpandableRowDirective as fZ, SelectModalFilterPipe as f_, SelectModule as fa, SelectedItemsComponent as fb, SelectedItemsDirective as fc, TypeaheadComponent as fd, HOOK_DYNAMIC_PROVIDER_CONFIG as fe, hookDynamicProviderConfig as ff, ProviderConfigurationNodeFactory as fg, ProviderConfigurationRouteFactory as fh, ProviderConfigurationComponent as fi, ProviderConfigurationModule as fj, ProviderConfigurationService as fk, ProviderDefinitionsService as fl, AbstractConfigurationStrategy as fm, hookDataGridActionControls as fn, ActionControlsExtensionService as fo, BaseFilteringFormRendererComponent as fp, CellRendererDefDirective as fq, HeaderCellRendererDefDirective as fr, CellRendererComponent as fs, ColumnDirective as ft, CustomColumn as fu, FilteringFormRendererContext as fv, FilteringFormRendererDefDirective as fw, FilteringFormRendererComponent as fx, ConfigureCustomColumnComponent as fy, DATA_GRID_CONFIGURATION_STRATEGY as fz, getBasicInputArrayFormFieldConfig as g, AssetTypesRealtimeService as g$, ModalSelectionMode as g0, SelectModalComponent as g1, GainsightService as g2, ProductExperienceDirective as g3, PRODUCT_EXPERIENCE_EVENT_SOURCE as g4, ProductExperienceModule as g5, UserEngagementsService as g6, HelpComponent as g7, HelpModule as g8, AlarmRealtimeService as g9, SetupStepperFactory as gA, SetupService as gB, HOOK_WIZARD as gC, hookWizard as gD, WizardComponent as gE, WizardModule as gF, WizardBodyComponent as gG, WizardFooterComponent as gH, WizardHeaderComponent as gI, WizardService as gJ, WizardOutletComponent as gK, WizardModalService as gL, PropertiesListComponent as gM, PropertiesListModule as gN, CoreModule as gO, TimeIntervalComponent as gP, LAST_MINUTE as gQ, LAST_HOUR as gR, LAST_DAY as gS, LAST_WEEK as gT, LAST_MONTH as gU, CUSTOM as gV, INTERVAL_OPTIONS as gW, DateTimePickerModule as gX, DateTimePickerComponent as gY, TimePickerComponent as gZ, TimePickerModule as g_, AlarmWithChildrenRealtimeService as ga, EventRealtimeService as gb, ManagedObjectRealtimeService as gc, MeasurementRealtimeService as gd, OperationBulkRealtimeService as ge, OperationRealtimeService as gf, DeviceBootstrapRealtimeService as gg, RealtimeButtonComponent as gh, RealtimeSubjectService as gi, RealtimeMessage as gj, RealtimeModule as gk, RealtimeService as gl, PluginsModule as gm, PluginsService as gn, PluginsResolveService as go, ApplicationPluginStatus as gp, PackageType as gq, PluginLoadedPipe as gr, RangeDisplayModule as gs, RangeDisplayComponent as gt, SetupCompletedComponent as gu, SetupComponent as gv, SetupState as gw, NEEDED_ROLE_FOR_SETUP as gx, SETUP_FINISHED_STEP_ID as gy, SetupModule as gz, AppIconComponent as h, AssetTypesService as h0, AuditLogModule as h1, AuditLogComponent as h2, ListDisplaySwitchModule as h3, ListDisplaySwitchComponent as h4, ClipboardService as h5, ClipboardModule as h6, VersionModule as h7, VersionService as h8, HOOK_VERSION as h9, hookPreview as hA, PreviewService as hB, SHOW_BETA_PREVIEW as hC, BetaPreviewButtonComponent as hD, FeatureCacheService as hE, BETA_FEATURE_PROVIDERS as hF, BetaFeatureShowNotification as hG, VERSION_MODULE_CONFIG as ha, hookVersion as hb, BackendVersionFactory as hc, WebSDKVersionFactory as hd, VersionListComponent as he, PlatformDetailsService as hf, DrawerModule as hg, DrawerOutletComponent as hh, hookDrawer as hi, DrawerService as hj, UiSettingsModule as hk, UiSettingsComponent as hl, ThemeSwitcherService as hm, CountdownIntervalComponent as hn, CountdownIntervalModule as ho, ColorInputComponent as hp, colorValidator as hq, AGGREGATIONS as hr, AGGREGATION_LIMITS as hs, AGGREGATION_ICONS as ht, AGGREGATION_TEXTS as hu, AGGREGATION_VALUES as hv, AGGREGATION_VALUES_ARR as hw, AGGREGATION_LABELS as hx, AggregationService as hy, HOOK_PREVIEW as hz, AppSwitcherService as i, ApplicationModule as j, ActionBarItemComponent as k, ActionBarModule as l, hookActionBar as m, ActionBarService as n, ActionBarComponent as o, HOOK_ACTION as p, hookAction as q, ActionService as r, ActionModule as s, ActionComponent as t, ActionOutletComponent as u, AlertDetailsComponent as v, alertOnError as w, AlertOutletBase as x, AlertOutletComponent as y, AlertTextComponent as z };
-//# sourceMappingURL=c8y-ngx-components-c8y-ngx-components-D-YOjLHK.mjs.map
+export { CommonModule as $, AssetPropertyService as A, BaseColumn as B, CellRendererContext as C, DataGridModule as D, AlertComponent as E, AlertModule as F, BootstrapComponent as G, HOOK_ACTION_BAR as H, BootstrapModule as I, CookieBannerComponent as J, BreadcrumbOutletComponent as K, BreadcrumbComponent as L, MessageBannerService as M, HOOK_BREADCRUMB as N, hookBreadcrumb as O, BreadcrumbService as P, BreadcrumbItemComponent as Q, BreadcrumbModule as R, DRAWER_ANIMATION_TIME as S, BottomDrawerComponent as T, BottomDrawerService as U, PluginsExportScopes as V, AssetLinkPipe as W, BytesPipe as X, ColorService as Y, MAX_PAGE_SIZE as Z, initializeServices as _, BottomDrawerRef as a, ShortenUserNamePipe as a$, C8yComponentOutlet as a0, ES_MAX_TIME_MILLISECONDS as a1, DatePipe as a2, DeviceService as a3, DropdownDirectionDirective as a4, EmptyStateContextDirective as a5, EmptyStateComponent as a6, fromTrigger as a7, fromTriggerOnce as a8, InjectionType as a9, GroupService as aA, internalApps as aB, HumanizeAppNamePipe as aC, HumanizePipe as aD, IconDirective as aE, IfAllowedDirective as aF, LoadMoreComponent as aG, LoadingComponent as aH, ManagedObjectType as aI, MapFunctionPipe as aJ, MarkdownToHtmlPipe as aK, memoize as aL, MoNamePipe as aM, NUMBER_FORMAT_REGEXP as aN, NumberPipe as aO, OperationResultComponent as aP, HOOK_OPTIONS as aQ, hookOptions as aR, OptionsService as aS, OutletDirective as aT, Permissions as aU, ProgressBarComponent as aV, NULL_VALUE_PLACEHOLDER as aW, RelativeTimePipe as aX, retryWithDelay as aY, hookService as aZ, ServiceRegistry as a_, StandalonePluginInjector as aa, getInjectedHooks as ab, fromFactories as ac, resolveInjectedFactories as ad, stateToFactory as ae, sortByPriority as af, removeDuplicatesIds as ag, toObservableOfArrays as ah, isPromise as ai, isExtensionFactory as aj, toObservable as ak, ExtensionPointWithoutStateForPlugins as al, ExtensionPointForPlugins as am, getActivatedRoute as an, hookGeneric as ao, HookProviderTypes as ap, allEntriesAreEqual as aq, GENERIC_FILE_TYPE as ar, FilesService as as, ForOfDirective as at, GenericFileIconPipe as au, GeoService as av, GetGroupIconPipe as aw, GlobalConfigService as ax, GroupFragment as ay, ASSET_PATH as az, AlertService as b, RecoverPasswordComponent as b$, ShouldShowMoPipe as b0, ShowIfFilterPipe as b1, SkipLinkDirective as b2, StateService as b3, Status as b4, statusIcons as b5, statusClasses as b6, statusAlert as b7, operationStatusIcons as b8, operationStatusClasses as b9, localePathFactory as bA, languagesFactory as bB, localeId as bC, getAngularLocalesLanguageString as bD, I18nModule as bE, LANGUAGES as bF, TranslateParserCustom as bG, LOCALE_PATH as bH, loadLocale as bI, MissingTranslationCustomHandler as bJ, TranslateService as bK, MESSAGES_CORE_I18N as bL, HOOK_PATTERN_MESSAGES as bM, hookPatternMessages as bN, C8yTranslateModule as bO, C8yTranslateDirective as bP, CachedLocaleDictionaryService as bQ, PropertyValueTransformService as bR, NameTransformPipe as bS, TranslationLoaderService as bT, trimTranslationKey as bU, getDictionaryWithTrimmedKeys as bV, LoginService as bW, LoginViews as bX, LoginComponent as bY, PasswordStrengthValidatorDirective as bZ, StrengthValidatorService as b_, StringifyObjectPipe as ba, TabsetAriaDirective as bb, TenantUiService as bc, TextareaAutoresizeDirective as bd, throttle as be, AppStateService as bf, UserNameInitialsPipe as bg, UserPreferencesStorageLocal as bh, UserPreferencesStorageInventory as bi, UserPreferencesService as bj, VirtualScrollWindowStrategy as bk, _virtualScrollWindowStrategyFactory as bl, VirtualScrollWindowDirective as bm, VirtualScrollerWrapperComponent as bn, ZipService as bo, SupportedApps as bp, InterAppService as bq, WIDGET_TYPE_VALUES as br, IntervalBasedReload as bs, DateFormatService as bt, HeaderModule as bu, HeaderService as bv, TitleOutletComponent as bw, TitleComponent as bx, HeaderBarComponent as by, PatternMessagesService as bz, C8yTranslatePipe as c, UserEditComponent as c$, ChangePasswordComponent as c0, TotpAuthComponent as c1, LoginModule as c2, CredentialsComponent as c3, ModalModule as c4, ModalComponent as c5, ConfirmModalComponent as c6, ModalService as c7, PopoverConfirmComponent as c8, NavigatorModule as c9, hookSearch as cA, SearchFilters as cB, SearchService as cC, HighlightComponent as cD, InventorySearchService as cE, SearchComponent as cF, CoreSearchModule as cG, SearchResultEmptyComponent as cH, SearchOutletComponent as cI, ConditionalTabsOutletComponent as cJ, TabsOutletComponent as cK, TabComponent as cL, HOOK_TABS as cM, hookTab as cN, TabsService as cO, TabsModule as cP, DropAreaComponent as cQ, DropAreaModule as cR, FilePickerModule as cS, FilePickerComponent as cT, FilePickerFormControlModule as cU, FilePickerFormControlComponent as cV, DatePickerModule as cW, DatePickerComponent as cX, UserEditModalComponent as cY, hookUserMenu as cZ, UserMenuService as c_, NavigatorIconComponent as ca, HOOK_NAVIGATOR_NODES as cb, hookNavigator as cc, NavigatorService as cd, NavigatorNodeRoot as ce, NavigatorOutletComponent as cf, NavigatorNodeComponent as cg, NavigatorNode as ch, NavigatorTopModule as ci, NavigatorBottomModule as cj, TotpSetupComponent as ck, TotpChallengeComponent as cl, AuthenticationModule as cm, PasswordStrengthCheckerService as cn, PasswordStrengthComponent as co, SmsChallengeComponent as cp, NewPasswordComponent as cq, PasswordCheckListComponent as cr, PasswordConfirmModalComponent as cs, PasswordConfirm as ct, PasswordService as cu, CurrentPasswordModalComponent as cv, ProvidePhoneNumberComponent as cw, PasswordInputComponent as cx, SearchInputComponent as cy, HOOK_SEARCH as cz, DataGridComponent as d, GuideDocsComponent as d$, UserTotpRevokeComponent as d0, UserModule as d1, UserMenuItemComponent as d2, UserTotpSetupComponent as d3, UserMenuOutletComponent as d4, ViewContext as d5, ContextRouteService as d6, extraRoutes as d7, viewContextRoutes as d8, RouterModule as d9, C8yValidators as dA, RequiredInputPlaceholderDirective as dB, simpleJsonPathValidator as dC, SimpleJsonPathValidatorDirective as dD, TextAreaRowHeightDirective as dE, uniqueInCollectionByPathValidator as dF, UniqueInCollectionByPathValidationDirective as dG, DatapointLibraryValidationErrors as dH, ValidationPattern as dI, HumanizeValidationMessagePipe as dJ, ExtractArrayValidationErrorsPipe as dK, FilterNonArrayValidationErrorsPipe as dL, ARRAY_VALIDATION_PREFIX as dM, validateArrayElements as dN, asyncValidateArrayElements as dO, SendStatus as dP, PushStatus as dQ, SendStatusLabels as dR, PushStatusLabels as dS, deviceAvailabilityIconMap as dT, tooltips as dU, DeviceStatusModule as dV, DeviceStatusComponent as dW, DocsModule as dX, HOOK_DOCS as dY, hookDocs as dZ, DocsService as d_, ContextRouteGuard as da, RouterTabsResolver as db, HOOK_ROUTE as dc, hookRoute as dd, RouterService as de, EmptyComponent as df, ContextRouteComponent as dg, ViewContextServices as dh, DefaultValidationDirective as di, EmailsValidatorDirective as dj, FilterInputComponent as dk, FormGroupComponent as dl, FormsModule as dm, InputGroupListContainerDirective as dn, InputGroupListComponent as dp, IpRangeInputListComponent as dq, JsonValidationPrettifierDirective as dr, MaxValidationDirective as ds, MessageDirective as dt, MessagesComponent as du, MinValidationDirective as dv, PhoneValidationDirective as dw, validateInternationalPhoneNumber as dx, RangeComponent as dy, RangeDirective as dz, AppSwitcherComponent as e, ListItemFooterComponent as e$, GuideHrefDirective as e0, DynamicFormsModule as e1, C8yJSONSchema as e2, wrapperLegendFieldConfig as e3, LegendFieldWrapper as e4, RESOLVING_COMPONENT_WAIT_TIME as e5, HOOK_COMPONENTS as e6, hookComponent as e7, hookWidget as e8, isLazyDynamicComponents as e9, WidgetTimeContextDateRangeService as eA, DEFAULT_INTERVAL_VALUE as eB, DEFAULT_INTERVAL_VALUES as eC, DEFAULT_INTERVAL_STATE as eD, GLOBAL_CONTEXT_AUTO_REFRESH as eE, WidgetGlobalAutoRefreshService as eF, globalAutoRefreshLoading as eG, AggregationPickerComponent as eH, RealtimeControlComponent as eI, C8yStepperButtons as eJ, C8yStepperIcon as eK, StepperOutletComponent as eL, C8yStepperProgress as eM, ACTIONS_STEPPER as eN, C8yStepper as eO, Steppers as eP, StepperModule as eQ, HOOK_STEPPER as eR, hookStepper as eS, StepperService as eT, ListGroupComponent as eU, ListGroupModule as eV, ListItemActionComponent as eW, ListItemBodyComponent as eX, ListItemCheckboxComponent as eY, ListItemCollapseComponent as eZ, ListItemDragHandleComponent as e_, isEagerDynamicComponents as ea, DynamicComponentErrorStrategy as eb, DynamicComponentModule as ec, DynamicComponentComponent as ed, DynamicComponentService as ee, DynamicBulkDetailsResolver as ef, DynamicDatapointsResolver as eg, DynamicManagedObjectResolver as eh, DynamicResolverService as ei, DynamicComponentAlertAggregator as ej, DynamicComponentAlert as ek, DismissAlertStrategy as el, DynamicBulkIIdentifiedResolver as em, DynamicComponentAlertsComponent as en, DashboardModule as eo, WidgetsDashboardComponent as ep, DashboardComponent as eq, CopyDashboardDisabledReason as er, NEW_DASHBOARD_ROUTER_STATE_PROP as es, DashboardChildComponent as et, DashboardChildActionComponent as eu, DashboardChildChange as ev, DashboardChildTitleComponent as ew, WidgetTimeContextComponent as ex, DateContextQueryParamNames as ey, WidgetTimeContextActionBarPriority as ez, AppSwitcherInlineComponent as f, UserPreferencesConfigurationStrategy as f$, ListItemIconComponent as f0, ListItemRadioComponent as f1, ListItemTimelineComponent as f2, ListItemComponent as f3, QuickLinkModule as f4, QuickLinkComponent as f5, SelectItemDirective as f6, SelectKeyboardService as f7, SelectLegacyComponent as f8, SelectComponent as f9, TreeNodeHeaderCellRendererComponent as fA, ConfigureCustomColumnComponent as fB, DATA_GRID_CONFIGURATION_STRATEGY as fC, DATA_GRID_CONFIGURATION_CONTEXT as fD, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER as fE, minColumnGridTrackSize as fF, ratiosByColumnTypes as fG, FilteringActionType as fH, BuiltInActionType as fI, DataGridService as fJ, ExpandableRowDirective as fK, BooleanFilterMapper as fL, RadioFilterMapper as fM, TypeaheadFilterMapper as fN, DateFilterMapper as fO, SelectFilterMapper as fP, StringFilterMapper as fQ, hookFilterMapper as fR, FilterMapperFactory as fS, FilterMapperModule as fT, FilterMapperPipe as fU, FilterMapperService as fV, GroupedFilterChips as fW, GridDataSource as fX, LegacyGridConfigMapperService as fY, PX_EVENT_NAME as fZ, PX_ACTIONS as f_, SelectModule as fa, SelectedItemsComponent as fb, SelectedItemsDirective as fc, TypeaheadComponent as fd, HOOK_DYNAMIC_PROVIDER_CONFIG as fe, hookDynamicProviderConfig as ff, ProviderConfigurationNodeFactory as fg, ProviderConfigurationRouteFactory as fh, ProviderConfigurationComponent as fi, ProviderConfigurationModule as fj, ProviderConfigurationService as fk, ProviderDefinitionsService as fl, AbstractConfigurationStrategy as fm, hookDataGridActionControls as fn, ActionControlsExtensionService as fo, BaseFilteringFormRendererComponent as fp, CellRendererDefDirective as fq, HeaderCellRendererDefDirective as fr, CellRendererComponent as fs, ColumnDirective as ft, CustomColumn as fu, FilteringFormRendererContext as fv, FilteringFormRendererDefDirective as fw, FilteringFormRendererComponent as fx, TreeNodeCellRendererComponent as fy, TreeNodeColumn as fz, getBasicInputArrayFormFieldConfig as g, DateTimePickerComponent as g$, VisibleControlsPipe as g0, SelectModalFilterPipe as g1, SelectModalModule as g2, ModalSelectionMode as g3, SelectModalComponent as g4, GainsightService as g5, ProductExperienceDirective as g6, PRODUCT_EXPERIENCE_EVENT_SOURCE as g7, ProductExperienceModule as g8, UserEngagementsService as g9, NEEDED_ROLE_FOR_SETUP as gA, SETUP_FINISHED_STEP_ID as gB, SetupModule as gC, SetupStepperFactory as gD, SetupService as gE, HOOK_WIZARD as gF, hookWizard as gG, WizardComponent as gH, WizardModule as gI, WizardBodyComponent as gJ, WizardFooterComponent as gK, WizardHeaderComponent as gL, WizardService as gM, WizardOutletComponent as gN, WizardModalService as gO, PropertiesListComponent as gP, PropertiesListModule as gQ, CoreModule as gR, TimeIntervalComponent as gS, LAST_MINUTE as gT, LAST_HOUR as gU, LAST_DAY as gV, LAST_WEEK as gW, LAST_MONTH as gX, CUSTOM as gY, INTERVAL_OPTIONS as gZ, DateTimePickerModule as g_, HelpComponent as ga, HelpModule as gb, AlarmRealtimeService as gc, AlarmWithChildrenRealtimeService as gd, EventRealtimeService as ge, ManagedObjectRealtimeService as gf, MeasurementRealtimeService as gg, OperationBulkRealtimeService as gh, OperationRealtimeService as gi, DeviceBootstrapRealtimeService as gj, RealtimeButtonComponent as gk, RealtimeSubjectService as gl, RealtimeMessage as gm, RealtimeModule as gn, RealtimeService as go, PluginsModule as gp, PluginsService as gq, PluginsResolveService as gr, ApplicationPluginStatus as gs, PackageType as gt, PluginLoadedPipe as gu, RangeDisplayModule as gv, RangeDisplayComponent as gw, SetupCompletedComponent as gx, SetupComponent as gy, SetupState as gz, AppIconComponent as h, TimePickerComponent as h0, TimePickerModule as h1, AssetTypesRealtimeService as h2, AssetTypesService as h3, AuditLogModule as h4, AuditLogComponent as h5, ListDisplaySwitchModule as h6, ListDisplaySwitchComponent as h7, ClipboardService as h8, ClipboardModule as h9, AGGREGATION_LABELS as hA, AggregationService as hB, HOOK_PREVIEW as hC, hookPreview as hD, PreviewService as hE, SHOW_BETA_PREVIEW as hF, BetaPreviewButtonComponent as hG, FeatureCacheService as hH, BETA_FEATURE_PROVIDERS as hI, BetaFeatureShowNotification as hJ, VersionModule as ha, VersionService as hb, HOOK_VERSION as hc, VERSION_MODULE_CONFIG as hd, hookVersion as he, BackendVersionFactory as hf, WebSDKVersionFactory as hg, VersionListComponent as hh, PlatformDetailsService as hi, DrawerModule as hj, DrawerOutletComponent as hk, hookDrawer as hl, DrawerService as hm, UiSettingsModule as hn, UiSettingsComponent as ho, ThemeSwitcherService as hp, CountdownIntervalComponent as hq, CountdownIntervalModule as hr, ColorInputComponent as hs, colorValidator as ht, AGGREGATIONS as hu, AGGREGATION_LIMITS as hv, AGGREGATION_ICONS as hw, AGGREGATION_TEXTS as hx, AGGREGATION_VALUES as hy, AGGREGATION_VALUES_ARR as hz, AppSwitcherService as i, ApplicationModule as j, ActionBarItemComponent as k, ActionBarModule as l, hookActionBar as m, ActionBarService as n, ActionBarComponent as o, HOOK_ACTION as p, hookAction as q, ActionService as r, ActionModule as s, ActionComponent as t, ActionOutletComponent as u, AlertDetailsComponent as v, alertOnError as w, AlertOutletBase as x, AlertOutletComponent as y, AlertTextComponent as z };
+//# sourceMappingURL=c8y-ngx-components-c8y-ngx-components-D2rmddmn.mjs.map