@c8y/ngx-components 1018.0.215 → 1018.0.222

package/fesm2020/c8y-ngx-components-assets-navigator.mjs

@@ -8,12 +8,12 @@ import * as i1 from '@c8y/client';
 import { QueriesUtil } from '@c8y/client';
 import * as i2 from '@c8y/ngx-components/api';
 import { filter, mergeMap, takeUntil, tap } from 'rxjs/operators';
-import * as i5$1 from 'ngx-bootstrap/collapse';
+import * as i5 from '@ngx-translate/core';
+import * as i5$2 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import * as i1$1 from '@ngx-translate/core';
 import { isArray, isNumber, isString, isObject } from 'lodash';
-import * as i5 from '@angular/common';
+import * as i5$1 from '@angular/common';
 import * as i6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 
@@ -127,7 +127,12 @@ class AssetNode extends NavigatorNode {
         }
     }
     setLabel() {
-        this.label = this.config.label || (this.root && gettext('Groups')) || this.mo.name || '--';
+        if (this.config.label || this.root) {
+            this.label = this.config.label || gettext('Groups');
+        }
+        else {
+            this.label = this.service.label(this.mo);
+        }
     }
     click(options = {}) {
         if (this.isDeviceOrProbablyChildDevice && !this.showChildDevices) {
@@ -435,7 +440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
         }], ctorParameters: function () { return [{ type: i3.GroupService }]; } });
 
 class AssetNodeService {
-    constructor(inventory, apiService, modal, alert, breadcrumbService, user, appState, optionsService, moduleConfig, deviceGroupService) {
+    constructor(inventory, apiService, modal, alert, breadcrumbService, user, appState, optionsService, moduleConfig, deviceGroupService, translateService) {
         this.inventory = inventory;
         this.apiService = apiService;
         this.modal = modal;
@@ -446,6 +451,7 @@ class AssetNodeService {
         this.optionsService = optionsService;
         this.moduleConfig = moduleConfig;
         this.deviceGroupService = deviceGroupService;
+        this.translateService = translateService;
         this.firstUrl = true;
         this.PAGE_SIZE = 20;
         this.moduleConfig = {
@@ -454,6 +460,12 @@ class AssetNodeService {
         };
         this.queriesUtil = new QueriesUtil();
     }
+    label(mo) {
+        return (mo.name ||
+            (this.isDevice(mo) &&
+                this.translateService.instant(gettext('Device {{id}}'), { id: mo.id })) ||
+            '--');
+    }
     icon(mo, open) {
         return this.deviceGroupService.icon(mo, open);
     }
@@ -693,7 +705,7 @@ class AssetNodeService {
         return combinedQuery;
     }
 }
-AssetNodeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetNodeService, deps: [{ token: i1.InventoryService }, { token: i2.ApiService }, { token: i3.ModalService }, { token: i3.AlertService }, { token: i3.BreadcrumbService }, { token: i1.UserService }, { token: i3.AppStateService }, { token: i3.OptionsService }, { token: ASSET_NAVIGATOR_CONFIG, optional: true }, { token: DeviceGroupService }], target: i0.ɵɵFactoryTarget.Injectable });
+AssetNodeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetNodeService, deps: [{ token: i1.InventoryService }, { token: i2.ApiService }, { token: i3.ModalService }, { token: i3.AlertService }, { token: i3.BreadcrumbService }, { token: i1.UserService }, { token: i3.AppStateService }, { token: i3.OptionsService }, { token: ASSET_NAVIGATOR_CONFIG, optional: true }, { token: DeviceGroupService }, { token: i5.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 AssetNodeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetNodeService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetNodeService, decorators: [{
             type: Injectable,
@@ -705,7 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 }, {
                     type: Inject,
                     args: [ASSET_NAVIGATOR_CONFIG]
-                }] }, { type: DeviceGroupService }]; } });
+                }] }, { type: DeviceGroupService }, { type: i5.TranslateService }]; } });
 
 class AssetNodeFactory {
     constructor(service, moduleConfig) {
@@ -1049,12 +1061,12 @@ class AssetSelectorNodeComponent {
         this.cd.markForCheck();
     }
 }
-AssetSelectorNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component });
-AssetSelectorNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: { node: "node", rootNode: "rootNode", preselected: "preselected", showPath: "showPath", multi: "multi", view: "view", index: "index", active: "active", selectedItems: "selectedItems", handleNextMillerViewColumn: "handleNextMillerViewColumn" }, outputs: { isLoadingState: "isLoadingState", onSelect: "onSelect", onDeselect: "onDeselect" }, ngImport: i0, template: "<!-- Hierarchy tree -->\n<div\n  *ngIf=\"view === 'tree'\"\n  class=\"c8y-asset-selector__item\"\n  [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n  [ngClass]=\"{\n    'c8y-asset-selector__item--more': node?.icon === 'plus',\n    'c8y-asset-selector__item--start': level === 0\n  }\"\n  [ngStyle]=\"{\n    'margin-left': level > 1 ? 16 + 'px' : '0'\n  }\"\n>\n  <div\n    *ngIf=\"node && !node.root && !node.hidden\"\n    class=\"c8y-asset-selector__node\"\n    [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n    [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n    title=\"{{ breadcrumb | translate }}\"\n  >\n    <div class=\"d-flex a-i-center p-t-4 p-b-4 m-r-8\" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\n      <label [ngClass]=\"{ 'c8y-checkbox': multi, 'c8y-radio': !multi }\">\n        <input\n          id=\"nodeLabel\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isSelected()\"\n          [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span for=\"nodeLabel\" class=\"sr-only\" translate>Node label</span>\n      </label>\n    </div>\n\n    <!-- group button -->\n    <button\n      *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      class=\"c8y-asset-selector__btn text-truncate\"\n      (click)=\"click()\"\n      [attr.aria-expanded]=\"!node.open\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n        [title]=\"'Smart group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [title]=\"'Group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.label | translate }}\n        <!-- use just for search results to display the path -->\n        <p *ngIf=\"showPath\" class=\"text-truncate\">\n          <small class=\"text-muted\" title=\"{{ breadcrumb }}\">\n            <em>{{ breadcrumb }}</em>\n          </small>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- not a group button -->\n    <button\n      *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\n      class=\"flex-grow\"\n      [ngClass]=\"{\n        'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',\n        'c8y-asset-selector__btn text-truncate': node.icon != 'plus'\n      }\"\n      (click)=\"selected(node)\"\n      type=\"button\"\n      title=\"{{ breadcrumb }}\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n        [title]=\"'Smart group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [title]=\"'Group' | translate\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n        class=\"c8y-icon m-r-4\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.label | translate }}\n        <!-- use just for search results to display the path -->\n        <p *ngIf=\"showPath\" class=\"text-truncate text-muted small\">\n          <em>{{ breadcrumb }}</em>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- expand button (only for groups) -->\n    <div *ngIf=\"node.isGroup() || node.hasChildDevices()\">\n      <button\n        [title]=\"expandTitle\"\n        class=\"collapse-btn btn\"\n        (click)=\"click()\"\n        [attr.aria-expanded]=\"node.open\"\n      >\n        <i c8yIcon=\"angle-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    *ngIf=\"node.countChildren()\"\n    class=\"collapse\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n    [attr.role]=\"'group'\"\n  >\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [active]=\"active\"\n      [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n  <div\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    class=\"miller-column__item bg-inherit\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\n    title=\"{{ breadcrumb | translate }}\"\n  >\n    <div\n      class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\n      <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n        <input\n          id=\"nodeLabel2\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isGroupSelected()\"\n          [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span for=\"nodeLabel2\" class=\"sr-only\" translate>Node label</span>\n      </label>\n    </div>\n\n    <button\n      [ngClass]=\"{\n        'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-8':\n          node.toString() === 'LoadMoreNode',\n        'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n        'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n      }\"\n      title=\"{{ breadcrumb | translate }}\"\n      (click)=\"millerViewClick(node)\"\n      type=\"button\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        class=\"c8y-icon m-r-4\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p title=\"{{ node.label | translate }}\" class=\"text-truncate\">\n          {{ node.label | translate }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small *ngIf=\"showPath\" class=\"text-muted text-truncate\" title=\"{{ breadcrumb }}\">\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span *ngIf=\"node.isGroup() || node.hasChildDevices()\" class=\"p-l-4 m-l-auto\">\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div *ngIf=\"node\" [ngClass]=\"{ hidden: node !== rootNode }\" role=\"list\">\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [rootNode]=\"rootNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [view]=\"view\"\n      [index]=\"index\"\n      [selectedItems]=\"selectedItems\"\n      [active]=\"active\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n      role=\"listitem\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "selectedItems", "handleNextMillerViewColumn"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
+AssetSelectorNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i5.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component });
+AssetSelectorNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: { node: "node", rootNode: "rootNode", preselected: "preselected", showPath: "showPath", multi: "multi", view: "view", index: "index", active: "active", selectedItems: "selectedItems", handleNextMillerViewColumn: "handleNextMillerViewColumn" }, outputs: { isLoadingState: "isLoadingState", onSelect: "onSelect", onDeselect: "onDeselect" }, ngImport: i0, template: "<!-- Hierarchy tree -->\n<div\n  *ngIf=\"view === 'tree'\"\n  class=\"c8y-asset-selector__item\"\n  [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n  [ngClass]=\"{\n    'c8y-asset-selector__item--more': node?.icon === 'plus',\n    'c8y-asset-selector__item--start': level === 0\n  }\"\n  [ngStyle]=\"{\n    'margin-left': level > 1 ? 16 + 'px' : '0'\n  }\"\n>\n  <div\n    *ngIf=\"node && !node.root && !node.hidden\"\n    class=\"c8y-asset-selector__node\"\n    [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n    [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n    title=\"{{ breadcrumb | translate }}\"\n  >\n    <div class=\"d-flex a-i-center p-t-4 p-b-4 m-r-8\" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\n      <label [ngClass]=\"{ 'c8y-checkbox': multi, 'c8y-radio': !multi }\">\n        <input\n          id=\"nodeLabel\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isSelected()\"\n          [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span for=\"nodeLabel\" class=\"sr-only\" translate>Node label</span>\n      </label>\n    </div>\n\n    <!-- group button -->\n    <button\n      *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      class=\"c8y-asset-selector__btn text-truncate\"\n      (click)=\"click()\"\n      [attr.aria-expanded]=\"!node.open\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n        [title]=\"'Smart group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [title]=\"'Group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.label | translate }}\n        <!-- use just for search results to display the path -->\n        <p *ngIf=\"showPath\" class=\"text-truncate\">\n          <small class=\"text-muted\" title=\"{{ breadcrumb }}\">\n            <em>{{ breadcrumb }}</em>\n          </small>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- not a group button -->\n    <button\n      *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\n      class=\"flex-grow\"\n      [ngClass]=\"{\n        'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',\n        'c8y-asset-selector__btn text-truncate': node.icon != 'plus'\n      }\"\n      (click)=\"selected(node)\"\n      type=\"button\"\n      title=\"{{ breadcrumb }}\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n        [title]=\"'Smart group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [title]=\"'Group' | translate\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n        class=\"c8y-icon m-r-4\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.label | translate }}\n        <!-- use just for search results to display the path -->\n        <p *ngIf=\"showPath\" class=\"text-truncate text-muted small\">\n          <em>{{ breadcrumb }}</em>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- expand button (only for groups) -->\n    <div *ngIf=\"node.isGroup() || node.hasChildDevices()\">\n      <button\n        [title]=\"expandTitle\"\n        class=\"collapse-btn btn\"\n        (click)=\"click()\"\n        [attr.aria-expanded]=\"node.open\"\n      >\n        <i c8yIcon=\"angle-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    *ngIf=\"node.countChildren()\"\n    class=\"collapse\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n    [attr.role]=\"'group'\"\n  >\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [active]=\"active\"\n      [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n  <div\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    class=\"miller-column__item bg-inherit\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\n    title=\"{{ breadcrumb | translate }}\"\n  >\n    <div\n      class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\n      <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n        <input\n          id=\"nodeLabel2\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isGroupSelected()\"\n          [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span for=\"nodeLabel2\" class=\"sr-only\" translate>Node label</span>\n      </label>\n    </div>\n\n    <button\n      [ngClass]=\"{\n        'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-8':\n          node.toString() === 'LoadMoreNode',\n        'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n        'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n      }\"\n      title=\"{{ breadcrumb | translate }}\"\n      (click)=\"millerViewClick(node)\"\n      type=\"button\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        class=\"c8y-icon m-r-4\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p title=\"{{ node.label | translate }}\" class=\"text-truncate\">\n          {{ node.label | translate }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small *ngIf=\"showPath\" class=\"text-muted text-truncate\" title=\"{{ breadcrumb }}\">\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span *ngIf=\"node.isGroup() || node.hasChildDevices()\" class=\"p-l-4 m-l-auto\">\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div *ngIf=\"node\" [ngClass]=\"{ hidden: node !== rootNode }\" role=\"list\">\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [rootNode]=\"rootNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [view]=\"view\"\n      [index]=\"index\"\n      [selectedItems]=\"selectedItems\"\n      [active]=\"active\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n      role=\"listitem\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$2.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "selectedItems", "handleNextMillerViewColumn"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetSelectorNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector-node', template: "<!-- Hierarchy tree -->\n<div\n  *ngIf=\"view === 'tree'\"\n  class=\"c8y-asset-selector__item\"\n  [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n  [ngClass]=\"{\n    'c8y-asset-selector__item--more': node?.icon === 'plus',\n    'c8y-asset-selector__item--start': level === 0\n  }\"\n  [ngStyle]=\"{\n    'margin-left': level > 1 ? 16 + 'px' : '0'\n  }\"\n>\n  <div\n    *ngIf=\"node && !node.root && !node.hidden\"\n    class=\"c8y-asset-selector__node\"\n    [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n    [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n    title=\"{{ breadcrumb | translate }}\"\n  >\n    <div class=\"d-flex a-i-center p-t-4 p-b-4 m-r-8\" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\n      <label [ngClass]=\"{ 'c8y-checkbox': multi, 'c8y-radio': !multi }\">\n        <input\n          id=\"nodeLabel\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isSelected()\"\n          [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span for=\"nodeLabel\" class=\"sr-only\" translate>Node label</span>\n      </label>\n    </div>\n\n    <!-- group button -->\n    <button\n      *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      class=\"c8y-asset-selector__btn text-truncate\"\n      (click)=\"click()\"\n      [attr.aria-expanded]=\"!node.open\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n        [title]=\"'Smart group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [title]=\"'Group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.label | translate }}\n        <!-- use just for search results to display the path -->\n        <p *ngIf=\"showPath\" class=\"text-truncate\">\n          <small class=\"text-muted\" title=\"{{ breadcrumb }}\">\n            <em>{{ breadcrumb }}</em>\n          </small>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- not a group button -->\n    <button\n      *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\n      class=\"flex-grow\"\n      [ngClass]=\"{\n        'btn btn-default btn-sm m-b-8 d-flex j-c-center': node.icon === 'plus',\n        'c8y-asset-selector__btn text-truncate': node.icon != 'plus'\n      }\"\n      (click)=\"selected(node)\"\n      type=\"button\"\n      title=\"{{ breadcrumb }}\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n        [title]=\"'Smart group' | translate\"\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n      ></i>\n      <i\n        [c8yIcon]=\"node.icon\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [title]=\"'Group' | translate\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n        class=\"c8y-icon m-r-4\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.label | translate }}\n        <!-- use just for search results to display the path -->\n        <p *ngIf=\"showPath\" class=\"text-truncate text-muted small\">\n          <em>{{ breadcrumb }}</em>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- expand button (only for groups) -->\n    <div *ngIf=\"node.isGroup() || node.hasChildDevices()\">\n      <button\n        [title]=\"expandTitle\"\n        class=\"collapse-btn btn\"\n        (click)=\"click()\"\n        [attr.aria-expanded]=\"node.open\"\n      >\n        <i c8yIcon=\"angle-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    *ngIf=\"node.countChildren()\"\n    class=\"collapse\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n    [attr.role]=\"'group'\"\n  >\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [active]=\"active\"\n      [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n  <div\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    class=\"miller-column__item bg-inherit\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\n    title=\"{{ breadcrumb | translate }}\"\n  >\n    <div\n      class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\n      <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n        <input\n          id=\"nodeLabel2\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isGroupSelected()\"\n          [disabled]=\"!node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span for=\"nodeLabel2\" class=\"sr-only\" translate>Node label</span>\n      </label>\n    </div>\n\n    <button\n      [ngClass]=\"{\n        'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-8':\n          node.toString() === 'LoadMoreNode',\n        'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n        'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n      }\"\n      title=\"{{ breadcrumb | translate }}\"\n      (click)=\"millerViewClick(node)\"\n      type=\"button\"\n    >\n      <i\n        [c8yIcon]=\"node.icon\"\n        class=\"c8y-icon m-r-4\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p title=\"{{ node.label | translate }}\" class=\"text-truncate\">\n          {{ node.label | translate }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small *ngIf=\"showPath\" class=\"text-muted text-truncate\" title=\"{{ breadcrumb }}\">\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span *ngIf=\"node.isGroup() || node.hasChildDevices()\" class=\"p-l-4 m-l-auto\">\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div *ngIf=\"node\" [ngClass]=\"{ hidden: node !== rootNode }\" role=\"list\">\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [rootNode]=\"rootNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [view]=\"view\"\n      [index]=\"index\"\n      [selectedItems]=\"selectedItems\"\n      [active]=\"active\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n      role=\"listitem\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: AssetSelectorService }]; }, propDecorators: { node: [{
+        }], ctorParameters: function () { return [{ type: i5.TranslateService }, { type: i0.ChangeDetectorRef }, { type: AssetSelectorService }]; }, propDecorators: { node: [{
                 type: Input
             }], rootNode: [{
                 type: Input
@@ -1540,7 +1552,7 @@ AssetSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => AssetSelectorComponent),
             multi: true
         }
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom\"\n  [ngClass]=\"{ 'p-l-16 p-absolute p-r-16': config.view === 'miller', 'sticky-top': config.multi }\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  *ngIf=\"!selectedDevice && index === 0 && (config.search || config.singleColumn)\"\n>\n  <p class=\"text-medium\" [ngClass]=\"{ 'm-b-4': config.search && root }\">\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n  ></c8y-search-input>\n  <div *ngIf=\"config.multi\" class=\"p-t-4\">\n    <span class=\"label label-info chip\" *ngFor=\"let selectedItem of selected\">\n      <button\n        class=\"btn btn-xs btn-clean text-10 m-r-4\"\n        type=\"button\"\n        title=\"{{ selectedItem.name }}\"\n        (click)=\"deselect(selectedItem)\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      {{ selectedItem.name }}\n    </span>\n  </div>\n</div>\n\n<div *ngIf=\"selectedDevice\" class=\"p-r-16\">\n  <div class=\"d-flex p-b-4\">\n    <p *ngIf=\"selectedDevice; else multiAssets\" class=\"text-medium p-t-8 m-r-8\">\n      {{ 'Selected asset' | translate }}\n    </p>\n    <ng-template #multiAssets>\n      <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n    </ng-template>\n    <button\n      class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n      type=\"button\"\n      title=\"{{ 'Change' | translate }}\"\n      (click)=\"clearSelectedDevices()\"\n    >\n      {{ 'Change' | translate }}\n    </button>\n  </div>\n  <div class=\"d-flex\">\n    <i [c8yIcon]=\"'check-circle'\" class=\"text-success p-l-0 p-r-8\"></i>\n    <i\n      c8yIcon=\"{{ selectedDevice.type === 'c8y_DeviceGroup' ? 'c8y-group' : 'exchange' }}\"\n      class=\"m-r-4 icon-20\"\n    ></i>\n    <span>{{ selectedDevice.name }}</span>\n  </div>\n</div>\n\n<!-- miller columns header -->\n<div\n  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders || config.singleColumn) &&\n    !selectedDevice\n  \"\n  class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n  [ngClass]=\"{ 'm-t-72 p-t-8': config.search, 'm-t-32': !config.search && config.singleColumn }\"\n  [ngStyle]=\"{ top: config.search && !config.singleColumn ? '72px' : '0' }\"\n>\n  <p\n    class=\"text-12 text-muted text-truncate m-b-4\"\n    *ngIf=\"config.singleColumn && index !== 0\"\n    title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n  >\n    <i c8yIcon=\"home\" class=\"m-r-4\"></i>\n    {{ rootNode.breadcrumb || rootNode.label | translate }}\n  </p>\n  <div *ngIf=\"config.columnHeaders || config.singleColumn\" class=\"d-flex a-i-center\">\n    <button\n      class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n      type=\"button\"\n      title=\"{{ 'Back' | translate }}\"\n      *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n      (click)=\"back()\"\n    >\n      <i c8yIcon=\"angle-left\"></i>\n    </button>\n    <label\n      *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n      class=\"c8y-radio checkbox-inline m-r-8\"\n    >\n      <input\n        type=\"radio\"\n        (change)=\"select(rootNode.mo)\"\n        [checked]=\"isGroupSelected()\"\n        title=\"{{ 'Select group' | translate }}\"\n      />\n      <span></span>\n    </label>\n\n    <i\n      *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n      c8yIcon=\"c8y-group-open\"\n      class=\"icon-20 c8y-icon-duocolor m-r-4\"\n    ></i>\n    <p\n      class=\"text-truncate\"\n      title=\"{{ rootNode.label | translate }}\"\n      *ngIf=\"config.columnHeaders\"\n      [ngClass]=\"{\n        'text-label-small': !config.singleColumn,\n        'text-medium': config.singleColumn\n      }\"\n    >\n      {{ rootNode.label | translate }}\n    </p>\n  </div>\n\n  <div *ngIf=\"!rootNode.root && config.showFilter\" [ngClass]=\"{ 'p-t-4': config.columnHeaders }\">\n    <div class=\"input-group input-group-sm input-group-search\">\n      <input\n        [(ngModel)]=\"filterText\"\n        placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n        class=\"form-control\"\n        (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n      />\n      <span class=\"input-group-btn\">\n        <button\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          (click)=\"clearFilters()\"\n          *ngIf=\"filterText.length\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </span>\n    </div>\n  </div>\n</div>\n\n<c8y-asset-selector-node\n  *ngIf=\"rootNode && !selectedDevice\"\n  [node]=\"rootNode\"\n  [rootNode]=\"rootNode\"\n  [preselected]=\"selected\"\n  [multi]=\"config.multi\"\n  [view]=\"config.view\"\n  [index]=\"index\"\n  [selectedItems]=\"selectedItems\"\n  [active]=\"active\"\n  [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n  (isLoadingState)=\"onLoading($event)\"\n  (onSelect)=\"onSelect($event)\"\n  (onDeselect)=\"onDeselect($event)\"\n  class=\"d-block bg-inherit p-relative\"\n  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n  style=\"z-index: 9\"\n></c8y-asset-selector-node>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "selectedItems", "handleNextMillerViewColumn"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom\"\n  [ngClass]=\"{ 'p-l-16 p-absolute p-r-16': config.view === 'miller', 'sticky-top': config.multi }\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  *ngIf=\"!selectedDevice && index === 0 && (config.search || config.singleColumn)\"\n>\n  <p class=\"text-medium\" [ngClass]=\"{ 'm-b-4': config.search && root }\">\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n  ></c8y-search-input>\n  <div *ngIf=\"config.multi\" class=\"p-t-4\">\n    <span class=\"label label-info chip\" *ngFor=\"let selectedItem of selected\">\n      <button\n        class=\"btn btn-xs btn-clean text-10 m-r-4\"\n        type=\"button\"\n        title=\"{{ selectedItem.name }}\"\n        (click)=\"deselect(selectedItem)\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      {{ selectedItem.name }}\n    </span>\n  </div>\n</div>\n\n<div *ngIf=\"selectedDevice\" class=\"p-r-16\">\n  <div class=\"d-flex p-b-4\">\n    <p *ngIf=\"selectedDevice; else multiAssets\" class=\"text-medium p-t-8 m-r-8\">\n      {{ 'Selected asset' | translate }}\n    </p>\n    <ng-template #multiAssets>\n      <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n    </ng-template>\n    <button\n      class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n      type=\"button\"\n      title=\"{{ 'Change' | translate }}\"\n      (click)=\"clearSelectedDevices()\"\n    >\n      {{ 'Change' | translate }}\n    </button>\n  </div>\n  <div class=\"d-flex\">\n    <i [c8yIcon]=\"'check-circle'\" class=\"text-success p-l-0 p-r-8\"></i>\n    <i\n      c8yIcon=\"{{ selectedDevice.type === 'c8y_DeviceGroup' ? 'c8y-group' : 'exchange' }}\"\n      class=\"m-r-4 icon-20\"\n    ></i>\n    <span>{{ selectedDevice.name }}</span>\n  </div>\n</div>\n\n<!-- miller columns header -->\n<div\n  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders || config.singleColumn) &&\n    !selectedDevice\n  \"\n  class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n  [ngClass]=\"{ 'm-t-72 p-t-8': config.search, 'm-t-32': !config.search && config.singleColumn }\"\n  [ngStyle]=\"{ top: config.search && !config.singleColumn ? '72px' : '0' }\"\n>\n  <p\n    class=\"text-12 text-muted text-truncate m-b-4\"\n    *ngIf=\"config.singleColumn && index !== 0\"\n    title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n  >\n    <i c8yIcon=\"home\" class=\"m-r-4\"></i>\n    {{ rootNode.breadcrumb || rootNode.label | translate }}\n  </p>\n  <div *ngIf=\"config.columnHeaders || config.singleColumn\" class=\"d-flex a-i-center\">\n    <button\n      class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n      type=\"button\"\n      title=\"{{ 'Back' | translate }}\"\n      *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n      (click)=\"back()\"\n    >\n      <i c8yIcon=\"angle-left\"></i>\n    </button>\n    <label\n      *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n      class=\"c8y-radio checkbox-inline m-r-8\"\n    >\n      <input\n        type=\"radio\"\n        (change)=\"select(rootNode.mo)\"\n        [checked]=\"isGroupSelected()\"\n        title=\"{{ 'Select group' | translate }}\"\n      />\n      <span></span>\n    </label>\n\n    <i\n      *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n      c8yIcon=\"c8y-group-open\"\n      class=\"icon-20 c8y-icon-duocolor m-r-4\"\n    ></i>\n    <p\n      class=\"text-truncate\"\n      title=\"{{ rootNode.label | translate }}\"\n      *ngIf=\"config.columnHeaders\"\n      [ngClass]=\"{\n        'text-label-small': !config.singleColumn,\n        'text-medium': config.singleColumn\n      }\"\n    >\n      {{ rootNode.label | translate }}\n    </p>\n  </div>\n\n  <div *ngIf=\"!rootNode.root && config.showFilter\" [ngClass]=\"{ 'p-t-4': config.columnHeaders }\">\n    <div class=\"input-group input-group-sm input-group-search\">\n      <input\n        [(ngModel)]=\"filterText\"\n        placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n        class=\"form-control\"\n        (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n      />\n      <span class=\"input-group-btn\">\n        <button\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          (click)=\"clearFilters()\"\n          *ngIf=\"filterText.length\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </span>\n    </div>\n  </div>\n</div>\n\n<c8y-asset-selector-node\n  *ngIf=\"rootNode && !selectedDevice\"\n  [node]=\"rootNode\"\n  [rootNode]=\"rootNode\"\n  [preselected]=\"selected\"\n  [multi]=\"config.multi\"\n  [view]=\"config.view\"\n  [index]=\"index\"\n  [selectedItems]=\"selectedItems\"\n  [active]=\"active\"\n  [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n  (isLoadingState)=\"onLoading($event)\"\n  (onSelect)=\"onSelect($event)\"\n  (onDeselect)=\"onDeselect($event)\"\n  class=\"d-block bg-inherit p-relative\"\n  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n  style=\"z-index: 9\"\n></c8y-asset-selector-node>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "selectedItems", "handleNextMillerViewColumn"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AssetSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector', providers: [
@@ -1713,7 +1725,7 @@ MillerViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useExisting: forwardRef(() => MillerViewComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "millerViewWrapper", first: true, predicate: ["millerViewWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #millerViewWrapper\n  class=\"miller-view-wrapper\"\n  [ngClass]=\"{ 'single-column': config.singleColumn }\"\n>\n  <div *ngFor=\"let column of columns; index as i\" class=\"miller-column bg-inherit\">\n    <c8y-asset-selector\n      [config]=\"config\"\n      [index]=\"i\"\n      [active]=\"columns[i + 1]\"\n      [rootNode]=\"column\"\n      [selectedItems]=\"selected || []\"\n      [selectedDevice]=\"selectedDevice\"\n      (onSelected)=\"onSelectionChange($event)\"\n      (onClearSelected)=\"onClearSelected.emit()\"\n      (onRowSelected)=\"addNewColumn($event)\"\n      (onLoad)=\"onLoad($event)\"\n      [container]=\"container\"\n      class=\"bg-inherit\"\n    >\n    </c8y-asset-selector>\n\n    <div class=\"p-relative p-b-64\" *ngIf=\"isLoading && columnIndex === i && !selectedDevice\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!column.children.length && !isLoading\" class=\"p-l-8 p-r-8\">\n      <c8y-ui-empty-state\n        *ngIf=\"!filterText; else noSearchResults\"\n        [icon]=\"'folder-open'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'The selected asset has no children.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <ng-template #noSearchResults>\n        <c8y-ui-empty-state\n          [icon]=\"'folder-open'\"\n          [title]=\"'No results to display for the current filter.' | translate\"\n          [subtitle]=\"'There are no assets matching the filter.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading" }, { kind: "component", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
+    ], viewQueries: [{ propertyName: "millerViewWrapper", first: true, predicate: ["millerViewWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #millerViewWrapper\n  class=\"miller-view-wrapper\"\n  [ngClass]=\"{ 'single-column': config.singleColumn }\"\n>\n  <div *ngFor=\"let column of columns; index as i\" class=\"miller-column bg-inherit\">\n    <c8y-asset-selector\n      [config]=\"config\"\n      [index]=\"i\"\n      [active]=\"columns[i + 1]\"\n      [rootNode]=\"column\"\n      [selectedItems]=\"selected || []\"\n      [selectedDevice]=\"selectedDevice\"\n      (onSelected)=\"onSelectionChange($event)\"\n      (onClearSelected)=\"onClearSelected.emit()\"\n      (onRowSelected)=\"addNewColumn($event)\"\n      (onLoad)=\"onLoad($event)\"\n      [container]=\"container\"\n      class=\"bg-inherit\"\n    >\n    </c8y-asset-selector>\n\n    <div class=\"p-relative p-b-64\" *ngIf=\"isLoading && columnIndex === i && !selectedDevice\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!column.children.length && !isLoading\" class=\"p-l-8 p-r-8\">\n      <c8y-ui-empty-state\n        *ngIf=\"!filterText; else noSearchResults\"\n        [icon]=\"'folder-open'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'The selected asset has no children.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n      <ng-template #noSearchResults>\n        <c8y-ui-empty-state\n          [icon]=\"'folder-open'\"\n          [title]=\"'No results to display for the current filter.' | translate\"\n          [subtitle]=\"'There are no assets matching the filter.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading" }, { kind: "component", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: MillerViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector-miller', providers: [