@c8y/ngx-components 1011.0.33 → 1011.0.35

package/bundles/c8y-ngx-components.umd.js

@@ -4050,6 +4050,13 @@
      * <div *c8yOutlet="template"></div>
      * <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
      * <div *c8yOutlet="nodes"></div>
+     *
+     *
+     * note: If template is instance of HTMLElement (for example, node compiled by angularJS) then there can be
+     * only single instance rendered, as only one instance of HTMLElement can exist in DOM.
+     * If there is need for displaying same element multiple times, please make sure to inject into
+     * this element createCopy function, which should return another instance of given element.
+     *
      */
     var OutletDirective = /** @class */ (function () {
         function OutletDirective(viewContainer, resolver, renderer, el) {
@@ -4083,7 +4090,17 @@
                 else if (template instanceof Element) {
                     var parent = this.renderer.parentNode(this.el.nativeElement);
                     this.destroy();
-                    this._element = template;
+                    /**
+                     * Because compiled element can be used only once, we need to create copy of it
+                     * in order to display it in multiple locations.
+                     * For example standard "More" menu, and its RWD version.
+                     */
+                    if (template.createCopy) {
+                        this._element = template.createCopy();
+                    }
+                    else {
+                        this._element = template;
+                    }
                     this.renderer.insertBefore(parent, this._element, this.el.nativeElement);
                     // case Component -> <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
                 }
@@ -4565,24 +4582,45 @@
             /**
              * The current items to display in the ActionBar.
              */
-            this.items = [];
-        }
-        Object.defineProperty(ActionBarComponent.prototype, "hidden", {
+            this.items$ = rxjs.of([]);
+            /**
+             * Provides observable for right action items.
+             */
+            this.right$ = rxjs.of([]);
+            /**
+             * Provides observable for left action items.
+             */
+            this.left$ = rxjs.of([]);
+            /**
+             * Provides observable for more action items.
+             */
+            this.more$ = rxjs.of([]);
             /**
              * Returns true if no items are present and hides the action bar.
              */
-            get: function () {
-                return !(this.items && this.items.length);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Returns the items sorted by priority and grouped by the placement passed.
-         * @param {placement} Which placement should be returned sorted.
-         */
-        ActionBarComponent.prototype.getSortedItems = function (placement) {
-            return lodashEs.sortBy(lodashEs.filter(this.items, { placement: placement }), this.byPriority);
+            this.hidden$ = rxjs.of(true);
+            /**
+             * Binds hidden property to this component's native element
+             */
+            this.hidden = true;
+            this.destroy$ = new rxjs.Subject();
+        }
+        ActionBarComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.right$ = this.items$.pipe(operators.map(function (items) { return lodashEs.filter(items, { placement: 'right' }); }), operators.map(function (items) { return lodashEs.sortBy(items, _this.byPriority); }));
+            this.left$ = this.items$.pipe(operators.map(function (items) { return lodashEs.filter(items, { placement: 'left' }); }), operators.map(function (items) { return lodashEs.sortBy(items, _this.byPriority); }));
+            this.more$ = this.items$.pipe(operators.map(function (items) { return lodashEs.filter(items, { placement: 'more' }); }), operators.map(function (items) { return lodashEs.sortBy(items, _this.byPriority); }));
+            this.hidden$ = this.items$.pipe(operators.map(function (items) {
+                return !(items && items.length);
+            }));
+            this.hidden$
+                .pipe(operators.takeUntil(this.destroy$)).subscribe(function (hidden) {
+                _this.hidden = hidden;
+            });
+        };
+        ActionBarComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
         };
         ActionBarComponent.prototype.byPriority = function (item) {
             return -item.priority;
@@ -4592,7 +4630,7 @@
     ActionBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'c8y-action-bar',
-                    template: "<div class=\"navbar-header\">\n  <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n    <span class=\"text-primary\">{{'Action bar' | translate}}</span>\n  </p>\n</div>\n\n<div id=\"page-toolbar\" class=\"navbar-collapse\" >\n  <ul class=\"nav navbar-nav navbar-left\">\n    <ng-container *ngFor=\"let item of getSortedItems('left')\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n  </ul>\n  <ul class=\"nav navbar-nav navbar-right\">\n    <ng-container *ngFor=\"let item of getSortedItems('right')\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n    <li class=\"no-remove more-wrapper\" *ngIf=\"getSortedItems('more').length > 0\">\n      <div class=\"dropdown\" dropdown>\n        <button\n          title=\"{{ 'More' | translate }}\u2026\"\n          class=\"dropdown-toggle c8y-dropdown d-flex\"\n          dropdownToggle\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          <span class=\"text-truncate\" translate>More\u2026</span>\n          <i [c8yIcon]=\"'caret-down'\"></i>\n        </button>\n        <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n          <ng-container *ngFor=\"let item of getSortedItems('more')\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n        <ul class=\"dropdown-menu visible-xs\"> \n          <ng-container *ngFor=\"let item of getSortedItems('more')\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n    </li>\n  </ul>\n</div>\n",
+                    template: "<div class=\"navbar-header\">\n  <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n    <span class=\"text-primary\">{{ 'Action bar' | translate }}</span>\n  </p>\n</div>\n\n<div id=\"page-toolbar\" class=\"navbar-collapse\">\n  <ul class=\"nav navbar-nav navbar-left\">\n    <ng-container *ngFor=\"let item of left$ | async\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n  </ul>\n  <ul class=\"nav navbar-nav navbar-right\">\n    <ng-container *ngFor=\"let item of right$ | async\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n    <li class=\"no-remove more-wrapper\" *ngIf=\"(more$ | async).length > 0\">\n      <div class=\"dropdown\" dropdown>\n        <button\n          title=\"{{ 'More' | translate }}\u2026\"\n          class=\"dropdown-toggle c8y-dropdown d-flex\"\n          dropdownToggle\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          <span class=\"text-truncate\" translate>More\u2026</span>\n          <i [c8yIcon]=\"'caret-down'\"></i>\n        </button>\n        <ul class=\"dropdown-menu dropdown-menu-right hidden-xs\" *dropdownMenu>\n          <ng-container *ngFor=\"let item of more$ | async\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n        <ul class=\"dropdown-menu visible-xs\">\n          <ng-container *ngFor=\"let item of more$ | async\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n    </li>\n  </ul>\n</div>\n",
                     host: { class: 'c8y-ui-action-bar' }
                 },] }
     ];
@@ -4601,7 +4639,7 @@
         hasTabs: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.has-tabs',] }],
         isTabsHorizontal: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.horizontal-tabs',] }],
         uiActionBar: [{ type: i0.HostBinding, args: ['class.c8y-ui-action-bar',] }],
-        items: [{ type: i0.Input }],
+        items$: [{ type: i0.Input }],
         hidden: [{ type: i0.HostBinding }]
     };
 
@@ -6171,7 +6209,7 @@
     BootstrapComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'c8y-bootstrap',
-                    template: "<c8y-login *ngIf=\"!(ui.currentUser | async)\"></c8y-login>\n\n<div *ngIf=\"ui.currentUser | async\" [class.head-open]=\"headerService.headerOpen\">\n  <c8y-header-bar #header></c8y-header-bar>\n  <c8y-navigator-outlet\n    [nodes]=\"navigator.items$ | async\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  >\n    <header class=\"title navigator-slot-top\">\n      <div class=\"tenant-brand\"></div>\n      <c8y-app-icon\n        [name]=\"(ui.state$ | async).app.name\"\n        [contextPath]=\"(ui.state$ | async).app.contextPath\"\n      ></c8y-app-icon>\n      <span>{{ (ui.state$ | async).app | humanizeAppName | async }}</span>\n    </header>\n    <div class=\"powered-by navigator-slot-bottom\" *ngIf=\"showPoweredBy\">\n      <p translate>powered by Cumulocity</p>\n    </div>\n  </c8y-navigator-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  >\n  </c8y-tabs-outlet>\n  <c8y-action-bar\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [isTabsHorizontal]=\"tabsComponent.isHorizontal\"\n    [items]=\"actionBar.items$ | async\"\n  >\n  </c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent.hidden\n    }\"\n  >\n    <div class=\"container-fluid\">\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </div>\n  </div>\n</div>\n<c8y-cookie-banner></c8y-cookie-banner>\n"
+                    template: "<c8y-login *ngIf=\"!(ui.currentUser | async)\"></c8y-login>\n\n<div *ngIf=\"ui.currentUser | async\" [class.head-open]=\"headerService.headerOpen\">\n  <c8y-header-bar #header></c8y-header-bar>\n  <c8y-navigator-outlet\n    [nodes]=\"navigator.items$ | async\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  >\n    <header class=\"title navigator-slot-top\">\n      <div class=\"tenant-brand\"></div>\n      <c8y-app-icon\n        [name]=\"(ui.state$ | async).app.name\"\n        [contextPath]=\"(ui.state$ | async).app.contextPath\"\n      ></c8y-app-icon>\n      <span>{{ (ui.state$ | async).app | humanizeAppName | async }}</span>\n    </header>\n    <div class=\"powered-by navigator-slot-bottom\" *ngIf=\"showPoweredBy\">\n      <p translate>powered by Cumulocity</p>\n    </div>\n  </c8y-navigator-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  >\n  </c8y-tabs-outlet>\n  <c8y-action-bar\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [isTabsHorizontal]=\"tabsComponent.isHorizontal\"\n    [items$]=\"actionBar.items$\"\n  >\n  </c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent.hidden\n    }\"\n  >\n    <div class=\"container-fluid\">\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </div>\n  </div>\n</div>\n<c8y-cookie-banner></c8y-cookie-banner>\n"
                 },] }
     ];
     BootstrapComponent.ctorParameters = function () { return [
@@ -16477,6 +16515,9 @@
                 filter: true
             };
             this.searchText = '';
+            /** Shows the warning for the sub-assets counter */
+            this.showCounterWarning = false;
+            /** Emits an event when mouse is over a row. */
             this.rowMouseOver = new i0.EventEmitter();
             this.rowMouseLeave = new i0.EventEmitter();
             this.rowClick = new i0.EventEmitter();
@@ -17009,7 +17050,7 @@
     DataGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'c8y-data-grid',
-                    template: "<div class=\"table-data-grid-scroll\" #scroll>\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <h4 class=\"m-r-16\">{{ title | translate }}</h4>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-warning 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          >{{ filteredItemsCount }} of {{ allItemsCount }} items</small\n        >\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</small\n          >\n        </ng-container>\n        <button\n          title=\" {{ 'Clear filters' | translate }}\"\n          class=\"m-l-8 btn btn-xs btn-default m-r-4\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n      <span class=\"hidden-xs hidden-sm\">\n        <button\n          class=\"btn-clean text-primary\"\n          popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n        >\n          <i c8yIcon=\"question-circle-o\"></i>\n        </button> </span\n    ></ng-container>\n\n    <div class=\"flex-item-right\">\n      <div class=\"btnbar flex-row\">\n        <label class=\"c8y-switch\" *ngIf=\"showChildDevices.show\">\n          <input type=\"checkbox\" [(ngModel)]=\"showChildDevices.value\" (click)=\"loadChildDevices()\"/>\n          <span></span>\n          {{ 'Show child devices' | translate }}\n        </label>\n        <button class=\"btn-clean m-l-4 m-r-16\" \n          *ngIf=\"showChildDevices.show\"\n          [popover]=\"childDevicesPop\"\n          placement=\"bottom\"\n          [outsideClick]=\"true\"\n          >\n          <i c8yIcon=\"question-circle-o\" class=\"text-primary\"></i>\n        </button>\n        <ng-template #childDevicesPop>\n          <span translate>\n            Displays the button\n            <button class=\"btn btn-xs btn-icon btn-default\"><i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i></button>\n            next to devices with children. Clicking it displays a list with all child devices.\n          </span>\n        </ng-template>\n        <div\n          class=\"dropdown\"\n          dropdown\n          [insideClick]=\"true\"\n          container=\"body\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            class=\"btnbar-btn c8y-dropdown\"\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-white\">\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 \">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        class=\"c8y-checkbox p-l-16 p-r-32 p-t-8 p-b-8 flex-item-v-stretch\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"updateGridColumnsSize()\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          class=\"btnbar-btn btn-link\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"searchText = ''; reload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div *ngIf=\"!serverSideDataCallback || showSearch\" class=\"input-group input-group-search m-l-sm-16\">\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            ></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 items.\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"selectedItemIds.length >= pagination.pageSize\">\n          <a (click)=\"setAllItemsSelected(true)\" class=\"interact\">\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=\"flex-item-right\">\n        <div class=\"btnbar flex-row\">\n          <ng-container\n            *ngFor=\"let bulkActionControl of bulkActionControls\"\n            [ngSwitch]=\"bulkActionControl.type\"\n          >\n            <button\n              title=\"{{ 'Export' | translate }}\"\n              *ngSwitchCase=\"builtInActionType.Export\"\n              class=\"btnbar-btn\"\n              (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n            >\n              <i c8yIcon=\"sign-out\"></i>\n              <span>{{ 'Export' | translate }}</span>\n            </button>\n\n            <button\n              title=\"{{ 'Delete' | translate }}\"\n              *ngSwitchCase=\"builtInActionType.Delete\"\n              class=\"btnbar-btn\"\n              (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n            >\n              <i c8yIcon=\"trash\"></i>\n              <span>{{ 'Delete' | translate }}</span>\n            </button>\n\n            <button\n              title=\"{{ bulkActionControl.text | translate }}\"\n              *ngSwitchDefault\n              class=\"btnbar-btn\"\n              (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n            >\n              <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n              <span>{{ bulkActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n\n          <button\n            title=\"{{ 'Cancel' | translate }}\"\n            class=\"btnbar-btn\"\n            (click)=\"cancel()\"\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  >\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\" [cdkColumnDef]=\"column.name\">\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                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\">\n            <label class=\"c8y-checkbox\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\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\"></th>\n\n          <td cdk-cell *cdkCellDef=\"let row\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container\n                *ngFor=\"let actionControl of actionControls\"\n                [ngSwitch]=\"actionControl.type\"\n              >\n                <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-icon btn-xs btn-default\"\n                    title=\"{{ 'Edit' | translate }}\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Delete\"\n                    class=\"btn btn-dot showOnHover\"\n                    title=\"{{ 'Delete' | translate }}\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  >\n                    <i class=\"text-danger\" c8yIcon=\"minus-circle\"></i>\n                  </button>\n                  <button\n                    *ngSwitchDefault\n                    class=\"btn btn-icon btn-xs btn-default\"\n                    title=\"{{ actionControl.text | translate }}\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    tooltip=\"{{ actionControl.text | translate }}\"\n                    container=\"body\"\n                  >\n                    <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div *ngIf=\"actionControls.length > 2\" class=\"dropdown\" dropdown>\n              <button\n                title=\"{{ 'Actions' | translate }}\"\n                class=\"dropdown-toggle c8y-dropdown\"\n                dropdownToggle\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\" [ngSwitch]=\"actionControl.type\">\n                  <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n                    <button\n                      title=\"{{ 'Edit' | translate }}\"\n                      *ngSwitchCase=\"builtInActionType.Edit\"\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"pencil\"></i>\n                      {{ 'Edit' | translate }}\n                    </button>\n                    <button\n                      title=\"{{ 'Delete' | translate }}\"\n                      *ngSwitchCase=\"builtInActionType.Delete\"\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"trash\"></i>\n                      {{ 'Delete' | translate }}\n                    </button>\n                    <button\n                      title=\"{{ 'Export' | translate }}\"\n                      *ngSwitchCase=\"builtInActionType.Export\"\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"download\"></i>\n                      {{ 'Export' | translate }}\n                    </button>\n                    <button\n                      title=\"{{ actionControl.text | translate }}\"\n                      *ngSwitchDefault\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                      {{ actionControl.text | translate }}\n                    </button>\n                  </ng-container>\n                </li>\n              </ul>\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\n                  ) as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <div\n              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #dropdown=\"bs-dropdown\"\n              container=\"body\"\n              placement=\"bottom left\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header c8y-dropdown\"\n                dropdownToggle\n                [title]=\"(column.header | translate) || column.name\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    (\n                      [{\n                        columnName: column.name,\n                        value: ((column.header | translate) || column.name)\n                      }]\n                        | map:getHeaderCellRendererSpec:this\n                    ) as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                </ng-container>\n                <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      (\n                        [{\n                          column: column,\n                          dropdown: dropdown\n                        }]\n                          | map:getFilteringFormRendererSpec:this\n                      ) as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer [spec]=\"filteringFormRendererSpec\">\n                    </c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              *ngIf=\"column.sortable\"\n              class=\"btn-sort\"\n              title=\"{{ 'Sort' | translate }}\"\n              (click)=\"changeSortOrder(column.name)\"\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              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\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            [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\n                ) 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      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 *ngIf=\"infiniteScroll\">\n      <tr cdk-footer-row *cdkFooterRowDef=\"['infiniteScrollFooter']\"></tr>\n    </ng-container>\n  </table>\n\n  <div *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\" class=\"text-center\">\n    <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n  </div>\n\n  <div\n    class=\"row m-0 p-t-40 p-b-40\"\n    *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n  >\n    <div class=\"col-md-4 col-md-offset-4\">\n      <ng-content select=\".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 *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter\">\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\"\n          >{{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}</span\n        >\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\"\n      >\n        <label class=\"m-r-4\">{{ 'Items per page' | translate }}</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\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        [class.hidden]=\"totalPagesCount <= 1\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount = $event\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\" \"\n        nextText=\" \"\n      ></pagination>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"table-data-grid-scroll\" #scroll>\n  <div *ngIf=\"displayOptions.gridHeader\" class=\"table-data-grid-header separator large-padding\">\n    <h4 class=\"m-r-16\">{{ title | translate }}</h4>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <span class=\"label label-warning 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          >{{ filteredItemsCount }} of {{ allItemsCount }} items</small\n        >\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</small\n          >\n        </ng-container>\n        <button\n          title=\" {{ 'Clear filters' | translate }}\"\n          class=\"m-l-8 btn btn-xs btn-default m-r-4\"\n          (click)=\"clearFilters()\"\n        >\n          {{ 'Clear filters' | translate }}\n        </button>\n      </span>\n      <span class=\"hidden-xs hidden-sm\">\n        <button\n          class=\"btn-clean text-primary\"\n          popover=\"{{ 'Click the column headers to apply filters.' | translate }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n        >\n          <i c8yIcon=\"question-circle-o\"></i>\n        </button>\n      </span>\n\n      <span class=\"hidden-xs hidden-sm\" *ngIf=\"showCounterWarning\">\n        <button\n          class=\"btn-clean text-primary\"\n          popover=\"{{\n            'The counter for the total number of items might be inaccurate.' | translate\n          }}\"\n          placement=\"right\"\n          triggers=\"focus\"\n        >\n          <i c8yIcon=\"warning\"></i>\n        </button>\n      </span>\n    </ng-container>\n\n    <div class=\"flex-item-right\">\n      <div class=\"btnbar flex-row\">\n        <label class=\"c8y-switch\" *ngIf=\"showChildDevices.show\">\n          <input type=\"checkbox\" [(ngModel)]=\"showChildDevices.value\" (click)=\"loadChildDevices()\"/>\n          <span></span>\n          {{ 'Show child devices' | translate }}\n        </label>\n        <button class=\"btn-clean m-l-4 m-r-16\" \n          *ngIf=\"showChildDevices.show\"\n          [popover]=\"childDevicesPop\"\n          placement=\"bottom\"\n          [outsideClick]=\"true\"\n          >\n          <i c8yIcon=\"question-circle-o\" class=\"text-primary\"></i>\n        </button>\n        <ng-template #childDevicesPop>\n          <span translate>\n            Displays the button\n            <button class=\"btn btn-xs btn-icon btn-default\"><i class=\"text-primary dlt-c8y-icon-enter-bottom\"></i></button>\n            next to devices with children. Clicking it displays a list with all child devices.\n          </span>\n        </ng-template>\n        <div\n          class=\"dropdown\"\n          dropdown\n          [insideClick]=\"true\"\n          container=\"body\"\n          placement=\"bottom left\"\n        >\n          <button\n            title=\"{{ 'Configure columns' | translate }}\"\n            class=\"btnbar-btn c8y-dropdown\"\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-white\">\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 \">\n                      <label\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        class=\"c8y-checkbox p-l-16 p-r-32 p-t-8 p-b-8 flex-item-v-stretch\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"updateGridColumnsSize()\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          title=\"{{ 'Reload' | translate }}\"\n          class=\"btnbar-btn btn-link\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"searchText = ''; reload()\"\n        >\n          <i c8yIcon=\"refresh\" class=\"m-r-4\"></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div *ngIf=\"!serverSideDataCallback || showSearch\" class=\"input-group input-group-search m-l-sm-16\">\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            ></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 items.\n        </span>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"selectedItemIds.length >= pagination.pageSize\">\n          <a (click)=\"setAllItemsSelected(true)\" class=\"interact\">\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=\"flex-item-right\">\n        <div class=\"btnbar flex-row\">\n          <ng-container\n            *ngFor=\"let bulkActionControl of bulkActionControls\"\n            [ngSwitch]=\"bulkActionControl.type\"\n          >\n            <button\n              title=\"{{ 'Export' | translate }}\"\n              *ngSwitchCase=\"builtInActionType.Export\"\n              class=\"btnbar-btn\"\n              (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n            >\n              <i c8yIcon=\"sign-out\"></i>\n              <span>{{ 'Export' | translate }}</span>\n            </button>\n\n            <button\n              title=\"{{ 'Delete' | translate }}\"\n              *ngSwitchCase=\"builtInActionType.Delete\"\n              class=\"btnbar-btn\"\n              (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n            >\n              <i c8yIcon=\"trash\"></i>\n              <span>{{ 'Delete' | translate }}</span>\n            </button>\n\n            <button\n              title=\"{{ bulkActionControl.text | translate }}\"\n              *ngSwitchDefault\n              class=\"btnbar-btn\"\n              (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n            >\n              <i c8yIcon=\"{{ bulkActionControl.icon }}\"></i>\n              <span>{{ bulkActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n\n          <button\n            title=\"{{ 'Cancel' | translate }}\"\n            class=\"btnbar-btn\"\n            (click)=\"cancel()\"\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  >\n    <ng-container *ngFor=\"let column of columns; trackBy: trackByName\" [cdkColumnDef]=\"column.name\">\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                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td cdk-cell *cdkCellDef=\"let row\">\n            <label class=\"c8y-checkbox\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\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\"></th>\n\n          <td cdk-cell *cdkCellDef=\"let row\">\n            <ng-container *ngIf=\"actionControls.length <= 2\">\n              <ng-container\n                *ngFor=\"let actionControl of actionControls\"\n                [ngSwitch]=\"actionControl.type\"\n              >\n                <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Edit\"\n                    class=\"btn btn-icon btn-xs btn-default\"\n                    title=\"{{ 'Edit' | translate }}\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  >\n                    <i c8yIcon=\"pencil\"></i>\n                  </button>\n                  <button\n                    *ngSwitchCase=\"builtInActionType.Delete\"\n                    class=\"btn btn-dot showOnHover\"\n                    title=\"{{ 'Delete' | translate }}\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  >\n                    <i class=\"text-danger\" c8yIcon=\"minus-circle\"></i>\n                  </button>\n                  <button\n                    *ngSwitchDefault\n                    class=\"btn btn-icon btn-xs btn-default\"\n                    title=\"{{ actionControl.text | translate }}\"\n                    (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    tooltip=\"{{ actionControl.text | translate }}\"\n                    container=\"body\"\n                  >\n                    <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                  </button>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <div *ngIf=\"actionControls.length > 2\" class=\"dropdown\" dropdown>\n              <button\n                title=\"{{ 'Actions' | translate }}\"\n                class=\"dropdown-toggle c8y-dropdown\"\n                dropdownToggle\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\" [ngSwitch]=\"actionControl.type\">\n                  <ng-container *ngIf=\"actionControl.showIf ? actionControl.showIf(row) : true\">\n                    <button\n                      title=\"{{ 'Edit' | translate }}\"\n                      *ngSwitchCase=\"builtInActionType.Edit\"\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"pencil\"></i>\n                      {{ 'Edit' | translate }}\n                    </button>\n                    <button\n                      title=\"{{ 'Delete' | translate }}\"\n                      *ngSwitchCase=\"builtInActionType.Delete\"\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"trash\"></i>\n                      {{ 'Delete' | translate }}\n                    </button>\n                    <button\n                      title=\"{{ 'Export' | translate }}\"\n                      *ngSwitchCase=\"builtInActionType.Export\"\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"download\"></i>\n                      {{ 'Export' | translate }}\n                    </button>\n                    <button\n                      title=\"{{ actionControl.text | translate }}\"\n                      *ngSwitchDefault\n                      (click)=\"actionControl.callback(row, reload.bind(this))\"\n                    >\n                      <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                      {{ actionControl.text | translate }}\n                    </button>\n                  </ng-container>\n                </li>\n              </ul>\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\n                  ) as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <div\n              *ngIf=\"column.filterable\"\n              class=\"dropdown\"\n              dropdown\n              #dropdown=\"bs-dropdown\"\n              container=\"body\"\n              placement=\"bottom left\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header c8y-dropdown\"\n                dropdownToggle\n                [title]=\"(column.header | translate) || column.name\"\n              >\n                <ng-container\n                  *ngIf=\"\n                    (\n                      [{\n                        columnName: column.name,\n                        value: ((column.header | translate) || column.name)\n                      }]\n                        | map:getHeaderCellRendererSpec:this\n                    ) as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n                </ng-container>\n                <i c8yIcon=\"filter\" title=\"{{ 'Filter' | translate }}\"></i>\n              </button>\n\n              <ul *dropdownMenu class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      (\n                        [{\n                          column: column,\n                          dropdown: dropdown\n                        }]\n                          | map:getFilteringFormRendererSpec:this\n                      ) as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer [spec]=\"filteringFormRendererSpec\">\n                    </c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              *ngIf=\"column.sortable\"\n              class=\"btn-sort\"\n              title=\"{{ 'Sort' | translate }}\"\n              (click)=\"changeSortOrder(column.name)\"\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              class=\"resize-handle\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\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            [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\n                ) 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      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 *ngIf=\"infiniteScroll\">\n      <tr cdk-footer-row *cdkFooterRowDef=\"['infiniteScrollFooter']\"></tr>\n    </ng-container>\n  </table>\n\n  <div *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent\" class=\"text-center\">\n    <c8y-progress-bar [message]=\"loadingItemsLabel\"></c8y-progress-bar>\n  </div>\n\n  <div\n    class=\"row m-0 p-t-40 p-b-40\"\n    *ngIf=\"!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0\"\n  >\n    <div class=\"col-md-4 col-md-offset-4\">\n      <ng-content select=\".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 *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\" class=\"counter\">\n        <span class=\"text-muted\" ngNonBindable translate [translateParams]=\"paginationLabelParams\"\n          >{{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}</span\n        >\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\"\n      >\n        <label class=\"m-r-4\">{{ 'Items per page' | translate }}</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\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        [class.hidden]=\"totalPagesCount <= 1\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount = $event\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\" \"\n        nextText=\" \"\n      ></pagination>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     DataGridComponent.ctorParameters = function () { return [
@@ -17036,6 +17077,7 @@
         _actionControls: [{ type: i0.Input, args: ['actionControls',] }],
         _bulkActionControls: [{ type: i0.Input, args: ['bulkActionControls',] }],
         searchText: [{ type: i0.Input }],
+        showCounterWarning: [{ type: i0.Input }],
         rowMouseOver: [{ type: i0.Output }],
         rowMouseLeave: [{ type: i0.Output }],
         rowClick: [{ type: i0.Output }],