@c8y/ngx-components 1020.29.0 → 1020.33.1

package/fesm2022/c8y-ngx-components.mjs

@@ -5,7 +5,7 @@ import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import * as i3$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, keys, get, isNaN as isNaN$1, isFinite, each, mapValues, mapKeys, isString, forEach, assign, min, every, first, map as map$1, find, negate, upperFirst, memoize as memoize$1, property, some, entries, omitBy, isDate, reduce, union, cloneDeep, uniqBy, orderBy, flatMap, isEmpty, filter as filter$1, snakeCase, matches, clone, toNumber, isEqualWith, escape as escape$1, escapeRegExp, assignWith, set, findIndex, omit, pick, has, transform, identity, flow, isNil, chunk, values, without, indexOf, parseInt as parseInt$1, kebabCase, forOwn } from 'lodash-es';
-import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, NEVER, Observable, firstValueFrom, fromEvent, pipe, throwError, concat, EMPTY, timer, fromEventPattern, empty, forkJoin, ReplaySubject, interval, shareReplay as shareReplay$1 } from 'rxjs';
+import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, NEVER, Observable, firstValueFrom, fromEvent, pipe, throwError, concat, EMPTY, timer, fromEventPattern, empty, forkJoin, ReplaySubject, interval, shareReplay as shareReplay$1, mergeMap as mergeMap$1, map as map$2 } from 'rxjs';
 import { map, distinctUntilChanged, filter, startWith, switchMap, take, shareReplay, scan, debounceTime, share, tap, catchError, takeUntil, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom, mergeMap, every as every$1, toArray, merge as merge$1, expand, finalize, reduce as reduce$1, combineLatestWith, mapTo } from 'rxjs/operators';
 import * as i1$1 from '@c8y/client';
 import { ApplicationAvailability, OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BearerAuthFromSessionStorage, FetchClient, Client, PasswordStrength, QueriesUtil, InventoryService, UserService, ApplicationService, TenantService, aggregationType, Service } from '@c8y/client';
@@ -5975,8 +5975,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
 const internalApps = {
     administration: gettext$1('Administration'),
     cockpit: gettext$1('Cockpit'),
-    devicemanagement: gettext$1('Device management'),
-    'digital-twin-manager': gettext$1('Digital twin manager'),
+    devicemanagement: gettext$1('Device Management'),
+    'digital-twin-manager': gettext$1('Digital Twin Manager'),
     streaminganalytics: gettext$1('Streaming Analytics')
 };
 
@@ -6019,9 +6019,10 @@ class HumanizeAppNamePipe {
         return Boolean(get(appNameOrApp, 'public'));
     }
     humanize(str = '') {
-        const result = str.replace(/_/g, ' ').split('');
-        result[0] = (result[0] || '').toUpperCase();
-        return result.join('');
+        return str
+            .split('_')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: HumanizeAppNamePipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: HumanizeAppNamePipe, isStandalone: true, name: "humanizeAppName" }); }
@@ -7287,8 +7288,8 @@ function initializeServices(translateService, state, userPreferences) {
  * @exports I18nModule Translation module.
  * @exports NgCommonModule Angular common module.
  * @exports DataModule The data layer to allow DI with @c8y/client.
- * @exports HumanizeAppNamePipe Humanize an application name (e.g. in the app switcher).
- * @exports HumanizePipe Humanize a word. E.g. `device management` gets `Device management`.
+ * @exports HumanizeAppNamePipe Humanize an application name for display in e.g. the app switcher (e.g. `devicemanagement` becomes `Device Management`).
+ * @exports HumanizePipe Humanize a string, e.g. `c8y_water_temperature` becomes `Water Temperature`.
  * @exports ShouldShowMoPipe Checks if passed managed object is device or group type.
  * @exports GetGroupIconPipe Gets proper group icon.
  * @exports ShortenUserNamePipe Allows a short name. E.g. `Foo Bar` gets `F. Bar`.
@@ -13025,7 +13026,7 @@ const documentationItems = [
     },
     {
         icon: 'c8y-device-management',
-        label: gettext$1('Device management`KEEP_ORIGINAL`'),
+        label: gettext$1('Device Management'),
         url: '/docs/section/device_management',
         type: 'doc'
     },
@@ -27801,6 +27802,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: [BsDropdownDirective]
             }] } });
 
+const NEW_DASHBOARD_QUERY_PARAM = 'newDashboard';
+
 class WidgetsDashboardComponent {
     set widgets(value) {
         this._widgets.next(value);
@@ -27860,6 +27863,10 @@ class WidgetsDashboardComponent {
             const ctx = viewContext.split('/').shift();
             this.copyDashboardWarningMessage = this.translateService.instant('Only dashboards with widgets referencing the current {{ ctx }} can be copied.', { ctx });
         }
+        const isNewDashboard = this.route.snapshot.queryParams[NEW_DASHBOARD_QUERY_PARAM];
+        if (isNewDashboard === 'true') {
+            this.enableEditMode();
+        }
         this.resolvedWidgets$ = this._widgets.pipe(switchMap(widgets => this.executeResolversOfWidgets(widgets)), shareReplay(1));
         this.isExecutingResolvers$ = merge(this._widgets.pipe(map(() => true)), this.resolvedWidgets$.pipe(map(() => false)));
         this.isLoadingWidgets$ = combineLatest([this.isLoading$, this.isExecutingResolvers$]).pipe(map(loadings => loadings.some(loading => loading)), shareReplay(1));
@@ -27954,6 +27961,10 @@ class WidgetsDashboardComponent {
         this.editMode = false;
         this.onSaveDashboard.emit();
     }
+    enableEditMode() {
+        this.editMode = true;
+        this.contextDashboard.historyDescription = {};
+    }
     async confirmClosing() {
         try {
             await this.modal.confirm(gettext$1('Exit edit mode'), gettext$1('Are you sure you want to exit the edit mode? All unsaved changes will be lost.'), Status.WARNING, {
@@ -27986,7 +27997,7 @@ class WidgetsDashboardComponent {
         return widgets;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$2.TranslateService }, { token: i1$6.ActivatedRoute }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], ngImport: i0, template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!breadcrumb\">\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumb.icon\"\n    [label]=\"breadcrumb.label\"\n    [path]=\"breadcrumb.path\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"!editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"editMode = true; contextDashboard.historyDescription = {}\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || editMode\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ isCopyDisabled ? copyDashboardWarningMessage : (copyDashboardLabel | translate) }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    data-cy=\"widgets-dashboard--copy-dashboard\"\n    (click)=\"onCopyDashboard.emit()\"\n    [disabled]=\"isCopyDisabled || editMode\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n   <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || editMode\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!editMode\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !editMode\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [class]=\"widget.classes\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span\n              translate\n            >\n              Edit\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span\n              translate\n            >\n              Remove\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode\"\n        ></c8y-widget-time-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2$2.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: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: ["canDecouple", "displaySettings", "hidden"], outputs: ["dateContextChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: WidgetsDashboardComponent, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], ngImport: i0, template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!breadcrumb\">\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumb.icon\"\n    [label]=\"breadcrumb.label\"\n    [path]=\"breadcrumb.path\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"!editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"enableEditMode()\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || editMode\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ isCopyDisabled ? copyDashboardWarningMessage : (copyDashboardLabel | translate) }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    data-cy=\"widgets-dashboard--copy-dashboard\"\n    (click)=\"onCopyDashboard.emit()\"\n    [disabled]=\"isCopyDisabled || editMode\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n   <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || editMode\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!editMode\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !editMode\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [class]=\"widget.classes\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span\n              translate\n            >\n              Edit\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span\n              translate\n            >\n              Remove\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode\"\n        ></c8y-widget-time-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2$2.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: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: ["canDecouple", "displaySettings", "hidden"], outputs: ["dateContextChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: WidgetsDashboardComponent, decorators: [{
             type: Component,
@@ -27995,7 +28006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
       display: block;
     `,
                         class: 'dashboard c8y-grid-dashboard'
-                    }, providers: [WidgetsDashboardEventService], template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!breadcrumb\">\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumb.icon\"\n    [label]=\"breadcrumb.label\"\n    [path]=\"breadcrumb.path\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"!editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"editMode = true; contextDashboard.historyDescription = {}\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || editMode\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ isCopyDisabled ? copyDashboardWarningMessage : (copyDashboardLabel | translate) }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    data-cy=\"widgets-dashboard--copy-dashboard\"\n    (click)=\"onCopyDashboard.emit()\"\n    [disabled]=\"isCopyDisabled || editMode\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n   <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || editMode\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!editMode\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !editMode\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [class]=\"widget.classes\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span\n              translate\n            >\n              Edit\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span\n              translate\n            >\n              Remove\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode\"\n        ></c8y-widget-time-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n" }]
+                    }, providers: [WidgetsDashboardEventService], template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!breadcrumb\">\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumb.icon\"\n    [label]=\"breadcrumb.label\"\n    [path]=\"breadcrumb.path\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"!editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"enableEditMode()\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || editMode\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ isCopyDisabled ? copyDashboardWarningMessage : (copyDashboardLabel | translate) }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    data-cy=\"widgets-dashboard--copy-dashboard\"\n    (click)=\"onCopyDashboard.emit()\"\n    [disabled]=\"isCopyDisabled || editMode\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n   <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || editMode\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span\n      translate\n    >\n      Delete dashboard\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!editMode\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !editMode\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [class]=\"widget.classes\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span\n              translate\n            >\n              Edit\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span\n              translate\n            >\n              Remove\n            </span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode\"\n        ></c8y-widget-time-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$2.TranslateService }, { type: i1$6.ActivatedRoute }, { type: ModalService }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{
@@ -29435,8 +29446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
 
 class VisibleControlsPipe {
     transform(actionControls, arg) {
-        const visible = (actionControls ?? []).filter(actionControl => !actionControl.showIf || actionControl.showIf(arg));
-        return values(groupBy(visible, 'type'))
+        return defer(() => of(actionControls ?? [])).pipe(mergeMap$1(controls => forkJoin(controls.map(control => toObservable(!control.showIf || control.showIf(arg)).pipe(map$2(visible => ({ control, visible }))))).pipe(map$2(evaluatedControls => evaluatedControls.filter(ec => ec.visible).map(ec => ec.control)))), map$2(visible => values(groupBy(visible, 'type'))
             .map((actionControls) => {
             if (actionControls?.length === 1) {
                 return actionControls[0];
@@ -29447,7 +29457,7 @@ class VisibleControlsPipe {
                     .find(actionControl => !!actionControl.showIf);
             }
         })
-            .sort(this.sortByPriority);
+            .sort(this.sortByPriority)));
     }
     sortByPriority(a, b) {
         return (b?.priority ?? 0) - (a?.priority ?? 0);
@@ -30493,7 +30503,7 @@ class DataGridComponent {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => DataGridComponent)
             }
-        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"label label-info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container *ngFor=\"let headerActionControl of headerActionControls | visibleControls\">\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container *ngFor=\"let bulkActionControl of bulkActionControls | visibleControls\">\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i [class]=\"bulkActionControl.iconClasses\" 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            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | slice: 0 : ((actionControls | visibleControls: row)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible': (actionControls | visibleControls: row)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | slice: ((actionControls | visibleControls: row)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i 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            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i9.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i9.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i9.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i9.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i9.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i9.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i9.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i9.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i9.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i9.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i9.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i9.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i9.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i9.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$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: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i1$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$3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i2$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i19.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3$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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
+        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"label label-info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i 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            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i9.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i9.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i9.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i9.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i9.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i9.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i9.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i9.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i9.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i9.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i9.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i9.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i9.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i9.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$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: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i1$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$3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i2$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i19.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3$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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -30502,7 +30512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                             provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                             useExisting: forwardRef(() => DataGridComponent)
                         }
-                    ], template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"label label-info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container *ngFor=\"let headerActionControl of headerActionControls | visibleControls\">\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container *ngFor=\"let bulkActionControl of bulkActionControls | visibleControls\">\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i [class]=\"bulkActionControl.iconClasses\" 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            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | slice: 0 : ((actionControls | visibleControls: row)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible': (actionControls | visibleControls: row)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | slice: ((actionControls | visibleControls: row)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i 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            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"label label-info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i 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            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -33391,5 +33401,5 @@ function colorValidator(allowedModes) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVALS, INTERVAL_OPTIONS, INTERVAL_TITLES, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginsExportScopes, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RelativeTimePipe, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StandalonePluginInjector, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TimeSpanInMs, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WebSDKVersionFactory, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookVersion, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, wrapperLegendFieldConfig };
+export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVALS, INTERVAL_OPTIONS, INTERVAL_TITLES, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_QUERY_PARAM, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginsExportScopes, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RelativeTimePipe, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StandalonePluginInjector, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TimeSpanInMs, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WebSDKVersionFactory, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookVersion, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, wrapperLegendFieldConfig };
 //# sourceMappingURL=c8y-ngx-components.mjs.map