@c8y/ngx-components 1018.0.55 → 1018.0.57

package/fesm2015/c8y-ngx-components.mjs

@@ -25098,7 +25098,7 @@ class BaseFilteringFormRendererComponent {
         this.context = context;
         this.jsonschema = jsonschema;
     }
-    onEnterKeyDown(event) {
+    onEnterKeyUp(event) {
         event.stopPropagation();
         this.applyFilter();
     }
@@ -25132,13 +25132,13 @@ class BaseFilteringFormRendererComponent {
     }
 }
 BaseFilteringFormRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BaseFilteringFormRendererComponent, deps: [{ token: FilteringFormRendererContext }, { token: C8yJSONSchema }], target: i0.ɵɵFactoryTarget.Component });
-BaseFilteringFormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BaseFilteringFormRendererComponent, selector: "ng-component", host: { listeners: { "keydown.enter": "onEnterKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    (click)=\"resetFilter()\"\n    title=\"{{ 'Reset' | translate }}\"\n    translate\n  >\n    Reset\n  </button>\n\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n    title=\"{{ 'Apply' | translate }}\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+BaseFilteringFormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: BaseFilteringFormRendererComponent, selector: "ng-component", host: { listeners: { "keyup.enter": "onEnterKeyUp($event)", "keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    (click)=\"resetFilter()\"\n    title=\"{{ 'Reset' | translate }}\"\n    translate\n  >\n    Reset\n  </button>\n\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n    title=\"{{ 'Apply' | translate }}\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: BaseFilteringFormRendererComponent, decorators: [{
             type: Component,
             args: [{ template: "<formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    (click)=\"resetFilter()\"\n    title=\"{{ 'Reset' | translate }}\"\n    translate\n  >\n    Reset\n  </button>\n\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n    title=\"{{ 'Apply' | translate }}\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: FilteringFormRendererContext }, { type: C8yJSONSchema }]; }, propDecorators: { onEnterKeyDown: [{
+        }], ctorParameters: function () { return [{ type: FilteringFormRendererContext }, { type: C8yJSONSchema }]; }, propDecorators: { onEnterKeyUp: [{
                 type: HostListener,
-                args: ['keydown.enter', ['$event']]
+                args: ['keyup.enter', ['$event']]
             }], onEscapeKeyDown: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
@@ -26568,7 +26568,7 @@ DataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
             useExisting: forwardRef(() => DataGridComponent)
         }
-    ], queries: [{ 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: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\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\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          type=\"button\"\n          title=\"{{ 'Clear filters' | translate }}\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        *ngIf=\"displayOptions.filter\"\n        type=\"button\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        [attr.aria-label]=\"'Click the column headers to apply filters.' | translate\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        *ngIf=\"showCounterWarning\"\n        type=\"button\"\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      >\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 *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                class=\"btnbar-btn btn-link\"\n                type=\"button\"\n                title=\"{{ headerActionControl.text | translate }}\"\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 [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></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        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            data-cy=\"data-grid--custom-column-btn\"\n            class=\"btnbar-btn\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                        class=\"c8y-checkbox p-l-16\"\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                        type=\"button\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\" data-cy=\"data-grid--custom-column-remove-btn\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"list-group-item\">\n              <button\n                class=\"btn btn-default btn-block\"\n                type=\"button\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          data-cy=\"data-grid--reload-btn\"\n          class=\"btnbar-btn btn-link\"\n          type=\"button\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\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      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\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 *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                type=\"button\"\n                title=\"{{ 'Export' | translate }}\"\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                type=\"button\"\n                title=\"{{ 'Delete' | translate }}\"\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                type=\"button\"\n                title=\"{{ bulkActionControl.text | translate }}\"\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 c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            type=\"button\"\n            title=\"{{ 'Cancel' | translate }}\"\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-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\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    (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 cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\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 cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\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=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                    type=\"button\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n                *ngIf=\"actionControls.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  type=\"button\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  dropdownToggle\n                  aria-haspopup=\"true\"\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        type=\"button\"\n                        title=\"{{ 'Edit' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Delete' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Export' | translate }}\"\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=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        type=\"button\"\n                        title=\"{{ actionControl.text | translate }}\"\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 c8yIcon=\"{{ actionControl.icon }}\"></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            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\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              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                type=\"button\"\n                [title]=\"(column.header | translate) || column.name\"\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 c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\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                      [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              type=\"button\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\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 cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\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=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\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    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        class=\"counter p-t-8 p-b-8\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</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 *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\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        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i7.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i7.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i7.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i7.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i7.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i7.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i7.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i7.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i7.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i7.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i7.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i7.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i7.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.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$1.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: i1$7.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: i17.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: i6$1.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: IsControlVisiblePipe, name: "isControlVisible" }] });
+    ], queries: [{ 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: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\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\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          type=\"button\"\n          title=\"{{ 'Clear filters' | translate }}\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        *ngIf=\"displayOptions.filter\"\n        type=\"button\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        [attr.aria-label]=\"'Click the column headers to apply filters.' | translate\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        *ngIf=\"showCounterWarning\"\n        type=\"button\"\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      >\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 *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                class=\"btnbar-btn btn-link\"\n                type=\"button\"\n                title=\"{{ headerActionControl.text | translate }}\"\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 [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></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        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            data-cy=\"data-grid--custom-column-btn\"\n            class=\"btnbar-btn\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu data-grid__dropdown\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                        class=\"c8y-checkbox p-l-16\"\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                        type=\"button\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\" data-cy=\"data-grid--custom-column-remove-btn\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"p-8 sticky-bottom separator-top\">\n              <button\n                class=\"btn btn-default btn-block\"\n                type=\"button\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          data-cy=\"data-grid--reload-btn\"\n          class=\"btnbar-btn btn-link\"\n          type=\"button\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\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      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\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 *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                type=\"button\"\n                title=\"{{ 'Export' | translate }}\"\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                type=\"button\"\n                title=\"{{ 'Delete' | translate }}\"\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                type=\"button\"\n                title=\"{{ bulkActionControl.text | translate }}\"\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 c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            type=\"button\"\n            title=\"{{ 'Cancel' | translate }}\"\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-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\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    (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 cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\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 cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\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=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                    type=\"button\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n                *ngIf=\"actionControls.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  type=\"button\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  dropdownToggle\n                  aria-haspopup=\"true\"\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        type=\"button\"\n                        title=\"{{ 'Edit' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Delete' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Export' | translate }}\"\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=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        type=\"button\"\n                        title=\"{{ actionControl.text | translate }}\"\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 c8yIcon=\"{{ actionControl.icon }}\"></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            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\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              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                type=\"button\"\n                [title]=\"(column.header | translate) || column.name\"\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 c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\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                      [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              type=\"button\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\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 cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\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=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\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    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        class=\"counter p-t-8 p-b-8\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</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 *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\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        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i7.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i7.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i7.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i7.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i7.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i7.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i7.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i7.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i7.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i7.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i7.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i7.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i7.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: ProgressBarComponent, selector: "c8y-progress-bar", inputs: ["message", "progress"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.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$1.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: i1$7.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: i17.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: i6$1.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: IsControlVisiblePipe, name: "isControlVisible" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-data-grid', host: { class: 'd-contents' }, providers: [
@@ -26576,7 +26576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                             useExisting: forwardRef(() => DataGridComponent)
                         }
-                    ], template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\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\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          type=\"button\"\n          title=\"{{ 'Clear filters' | translate }}\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        *ngIf=\"displayOptions.filter\"\n        type=\"button\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        [attr.aria-label]=\"'Click the column headers to apply filters.' | translate\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        *ngIf=\"showCounterWarning\"\n        type=\"button\"\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      >\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 *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                class=\"btnbar-btn btn-link\"\n                type=\"button\"\n                title=\"{{ headerActionControl.text | translate }}\"\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 [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></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        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            data-cy=\"data-grid--custom-column-btn\"\n            class=\"btnbar-btn\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                        class=\"c8y-checkbox p-l-16\"\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                        type=\"button\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\" data-cy=\"data-grid--custom-column-remove-btn\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"list-group-item\">\n              <button\n                class=\"btn btn-default btn-block\"\n                type=\"button\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          data-cy=\"data-grid--reload-btn\"\n          class=\"btnbar-btn btn-link\"\n          type=\"button\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\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      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\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 *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                type=\"button\"\n                title=\"{{ 'Export' | translate }}\"\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                type=\"button\"\n                title=\"{{ 'Delete' | translate }}\"\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                type=\"button\"\n                title=\"{{ bulkActionControl.text | translate }}\"\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 c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            type=\"button\"\n            title=\"{{ 'Cancel' | translate }}\"\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-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\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    (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 cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\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 cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\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=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                    type=\"button\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n                *ngIf=\"actionControls.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  type=\"button\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  dropdownToggle\n                  aria-haspopup=\"true\"\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        type=\"button\"\n                        title=\"{{ 'Edit' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Delete' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Export' | translate }}\"\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=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        type=\"button\"\n                        title=\"{{ actionControl.text | translate }}\"\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 c8yIcon=\"{{ actionControl.icon }}\"></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            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\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              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                type=\"button\"\n                [title]=\"(column.header | translate) || column.name\"\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 c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\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                      [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              type=\"button\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\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 cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\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=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\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    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        class=\"counter p-t-8 p-b-8\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</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 *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\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        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  #scroll\n  class=\"table-data-grid-scroll\"\n  [ngClass]=\"{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }\"\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\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n    </div>\n  </div>\n\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <div class=\"h4\" [ngClass]=\"{ 'm-r-16': !!title }\">{{ title | translate }}</div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-default m-r-4\" translate>No filters</span>\n        <small\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          class=\"m-r-4\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n      </span>\n      <span *ngIf=\"filteringApplied\">\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <span class=\"badge badge-info m-r-4\">\n            {{ (dataSource.stats$ | async).filteredSize }}\n          </span>\n          <small ngNonBindable translate [translateParams]=\"filteringLabelsParams\">\n            of {{ allItemsCount }} items\n          </small>\n        </ng-container>\n        <button\n          class=\"btn btn-sm btn-default m-l-8 m-r-4\"\n          type=\"button\"\n          title=\"{{ 'Clear filters' | translate }}\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        *ngIf=\"displayOptions.filter\"\n        type=\"button\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        [attr.aria-label]=\"'Click the column headers to apply filters.' | translate\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        *ngIf=\"showCounterWarning\"\n        type=\"button\"\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      >\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 *ngFor=\"let headerActionControl of headerActionControls\">\n          <ng-container *ngIf=\"headerActionControl | isControlVisible\">\n            <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n              <button\n                class=\"btnbar-btn btn-link\"\n                type=\"button\"\n                title=\"{{ headerActionControl.text | translate }}\"\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 [c8yIcon]=\"headerActionControl.icon\" class=\"m-r-4\"></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        </ng-container>\n\n        <div\n          *ngIf=\"configureColumnsEnabled\"\n          class=\"dropdown\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            data-cy=\"data-grid--custom-column-btn\"\n            class=\"btnbar-btn\"\n            type=\"button\"\n            dropdownToggle\n          >\n            <i c8yIcon=\"columns\" class=\"m-r-4\"></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul *dropdownMenu class=\"dropdown-menu data-grid__dropdown\" (click)=\"$event.stopPropagation()\">\n            <li class=\"bg-level-0\">\n              <div cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" class=\"list-group m-0\">\n                <div *ngFor=\"let column of columns\" cdkDrag cdkDragLockAxis=\"y\">\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                        class=\"c8y-checkbox p-l-16\"\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                        type=\"button\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [placement]=\"'left'\"\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i c8yIcon=\"minus-circle\" data-cy=\"data-grid--custom-column-remove-btn\"></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li *ngIf=\"isConfigContextKnown\" class=\"p-8 sticky-bottom separator-top\">\n              <button\n                class=\"btn btn-default btn-block\"\n                type=\"button\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          data-cy=\"data-grid--reload-btn\"\n          class=\"btnbar-btn btn-link\"\n          type=\"button\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n        >\n          <input\n            type=\"search\"\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i c8yIcon=\"search\" *ngIf=\"searchText.length === 0\"></i>\n            <i\n              c8yIcon=\"times\"\n              class=\"pointer\"\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      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <span ngNonBindable translate [translateParams]=\"{ count: selectedItemIds.length }\">\n          {{ count }} selected item(s).\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            (click)=\"setAllItemsSelected(true)\"\n            class=\"interact\"\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 *ngFor=\"let bulkActionControl of bulkActionControls\">\n            <ng-container\n              *ngIf=\"bulkActionControl | isControlVisible: selectedItemIds\"\n              [ngSwitch]=\"bulkActionControl.type\"\n            >\n              <button\n                class=\"btnbar-btn\"\n                type=\"button\"\n                title=\"{{ 'Export' | translate }}\"\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                type=\"button\"\n                title=\"{{ 'Delete' | translate }}\"\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                type=\"button\"\n                title=\"{{ bulkActionControl.text | translate }}\"\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 c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            type=\"button\"\n            title=\"{{ 'Cancel' | translate }}\"\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-hover table-filtered-sorted table-data-grid large-padding\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [trackBy]=\"trackByName\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\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    (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 cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\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 cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\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=\"'actions'\">\n          <th cdk-header-cell *cdkHeaderCellDef data-type=\"icon\">\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\" data-type=\"icon\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container *ngFor=\"let actionControl of actionControls\">\n                <ng-container\n                  *ngIf=\"actionControl | isControlVisible: row\"\n                  [ngSwitch]=\"actionControl.type\"\n                >\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-dot\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Edit' | translate\"\n                    tooltip=\"{{ 'Edit' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n\n                  <button\n                    class=\"btn btn-dot btn-dot--danger showOnHover\"\n                    type=\"button\"\n                    [attr.aria-label]=\"'Delete' | translate\"\n                    tooltip=\"{{ 'Delete' | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                    type=\"button\"\n                    [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                    tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                    [delay]=\"500\"\n                    container=\"body\"\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                  >\n                    <i *ngIf=\"actionControl.icon\" c8yIcon=\"{{ actionControl.icon }}\"></i>\n                    <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div [ngClass]=\"{ 'm-l-auto overflow-visible': actionControls.length > 2 }\">\n              <div\n                class=\"dropdown\"\n                dropdown\n                container=\"body\"\n                placement=\"bottom right\"\n                *ngIf=\"actionControls.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  type=\"button\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  dropdownToggle\n                  aria-haspopup=\"true\"\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n                  <li *ngFor=\"let actionControl of actionControls\">\n                    <ng-container\n                      *ngIf=\"actionControl | isControlVisible: row\"\n                      [ngSwitch]=\"actionControl.type\"\n                    >\n                      <button\n                        type=\"button\"\n                        title=\"{{ 'Edit' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Delete' | translate }}\"\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                        type=\"button\"\n                        title=\"{{ 'Export' | translate }}\"\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=\"download\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        type=\"button\"\n                        title=\"{{ actionControl.text | translate }}\"\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 c8yIcon=\"{{ actionControl.icon }}\"></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            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n          >\n            <div *ngIf=\"!column.filterable\" [title]=\"(column.header | translate) || column.name\">\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              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                type=\"button\"\n                [title]=\"(column.header | translate) || column.name\"\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 c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                *dropdownMenu\n                class=\"dropdown-menu\"\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                      [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              type=\"button\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i *ngSwitchCase=\"'asc'\" c8yIcon=\"long-arrow-up\"></i>\n                <i *ngSwitchCase=\"'desc'\" c8yIcon=\"long-arrow-down\"></i>\n                <i *ngSwitchDefault c8yIcon=\"exchange\"></i>\n              </ng-container>\n            </button>\n\n            <span\n              *ngIf=\"column.resizable\"\n              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n            [class.hidden]=\"!column.visible\"\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 cdk-footer-cell *cdkFooterCellDef [style.grid-column]=\"styles.gridInfiniteScrollColumn\">\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr cdk-header-row *cdkHeaderRowDef=\"columnNames\"></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"rowClick.emit(row)\"\n    ></tr>\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=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\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    </div>\n  </div>\n\n  <div *ngIf=\"pagination && !infiniteScroll\" class=\"table-data-grid-footer separator large-padding\">\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        class=\"counter p-t-8 p-b-8\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n        class=\"form-group form-inline p-t-8 p-b-8\"\n      >\n        <label class=\"m-r-4\" for=\"filteredSize\">{{ 'Items per page' | translate }}</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 *ngFor=\"let pageSize of possiblePageSizes\" [ngValue]=\"pageSize\">\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        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [class.hidden]=\"hidePagination$ | async\"\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        class=\"p-t-8 p-b-8\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Optional