@c8y/ngx-components 1018.503.37 → 1018.503.41

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

@@ -11,13 +11,13 @@ import { filter, first, mergeMap, takeUntil, tap } from 'rxjs/operators';
 import * as i5 from '@angular/router';
 import { ActivationEnd } from '@angular/router';
 import * as i2 from '@c8y/ngx-components/api';
+import * as i6 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$1 from '@angular/common';
-import * as i6 from '@angular/forms';
+import * as i6$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 
 var Action;
@@ -118,7 +118,7 @@ class AssetNode extends NavigatorNode {
             this.translateLabel = true;
         }
         else {
-            this.label = this.mo.name || '--';
+            this.label = this.service.label(this.mo);
             this.translateLabel = false;
         }
     }
@@ -448,7 +448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
         }], ctorParameters: function () { return [{ type: i3.GroupService }]; } });
 
 class AssetNodeService {
-    constructor(inventory, apiService, modal, alert, breadcrumbService, user, appState, optionsService, moduleConfig, deviceGroupService, router) {
+    constructor(inventory, apiService, modal, alert, breadcrumbService, user, appState, optionsService, moduleConfig, deviceGroupService, router, translateService) {
         this.inventory = inventory;
         this.apiService = apiService;
         this.modal = modal;
@@ -460,6 +460,7 @@ class AssetNodeService {
         this.moduleConfig = moduleConfig;
         this.deviceGroupService = deviceGroupService;
         this.router = router;
+        this.translateService = translateService;
         this.firstUrl = true;
         this.PAGE_SIZE = 20;
         this.moduleConfig = Object.assign({ rootNodePriority: 2000 }, (moduleConfig || {}));
@@ -518,6 +519,12 @@ class AssetNodeService {
             });
         }
     }
+    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);
     }
@@ -749,7 +756,7 @@ class AssetNodeService {
         return combinedQuery;
     }
 }
-AssetNodeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+AssetNodeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", 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.Router }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 AssetNodeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AssetNodeService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AssetNodeService, decorators: [{
             type: Injectable,
@@ -762,7 +769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                     }, {
                         type: Inject,
                         args: [ASSET_NAVIGATOR_CONFIG]
-                    }] }, { type: DeviceGroupService }, { type: i5.Router }];
+                    }] }, { type: DeviceGroupService }, { type: i5.Router }, { type: i6.TranslateService }];
     } });
 
 class AssetNodeFactory {
@@ -1113,12 +1120,12 @@ class AssetSelectorNodeComponent {
         this.cd.markForCheck();
     }
 }
-AssetSelectorNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component });
+AssetSelectorNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i6.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component });
 AssetSelectorNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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  class=\"c8y-asset-selector__item\"\n  [ngStyle]=\"{\n    'margin-left': level > 1 ? 16 + 'px' : '0'\n  }\"\n  *ngIf=\"view === 'tree'\"\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>\n  <div\n    class=\"c8y-asset-selector__node\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden\"\n    [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n    [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n  >\n    <div\n      class=\"d-flex a-i-center p-t-4 p-b-4 m-r-8\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\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\n          class=\"sr-only\"\n          for=\"nodeLabel\"\n          translate\n        >\n          Node label\n        </span>\n      </label>\n    </div>\n\n    <!-- group button -->\n    <button\n      class=\"c8y-asset-selector__btn text-truncate\"\n      [attr.aria-expanded]=\"!node.open\"\n      *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      (click)=\"click()\"\n    >\n      <i\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Smart group' | translate\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n      ></i>\n      <i\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Group' | translate\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.translateLabel ? (node.label | translate) : node.label }}\n        <!-- use just for search results to display the path -->\n        <p\n          class=\"text-truncate\"\n          *ngIf=\"showPath\"\n        >\n          <small\n            class=\"text-muted\"\n            title=\"{{ breadcrumb }}\"\n          >\n            <em>{{ breadcrumb }}</em>\n          </small>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- not a group button -->\n    <button\n      class=\"flex-grow\"\n      title=\"{{ breadcrumb }}\"\n      type=\"button\"\n      *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\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    >\n      <i\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Smart group' | translate\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n      ></i>\n      <i\n        class=\"c8y-icon m-r-4\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Group' | translate\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.translateLabel ? (node.label | translate) : node.label }}\n        <!-- use just for search results to display the path -->\n        <p\n          class=\"text-truncate text-muted small\"\n          *ngIf=\"showPath\"\n        >\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        class=\"collapse-btn btn\"\n        [title]=\"expandTitle\"\n        [attr.aria-expanded]=\"node.open\"\n        (click)=\"click()\"\n      >\n        <i c8yIcon=\"angle-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"collapse\"\n    *ngIf=\"node.countChildren()\"\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    class=\"miller-column__item bg-inherit\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\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\n          class=\"sr-only\"\n          for=\"nodeLabel2\"\n          translate\n        >\n          Node label\n        </span>\n      </label>\n    </div>\n\n    <button\n      title=\"{{ breadcrumb | translate }}\"\n      type=\"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      (click)=\"millerViewClick(node)\"\n    >\n      <i\n        class=\"c8y-icon m-r-4\"\n        [c8yIcon]=\"node.icon\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p\n          class=\"text-truncate\"\n          title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        >\n          {{ node.translateLabel ? (node.label | translate) : node.label }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small\n          class=\"text-muted text-truncate\"\n          title=\"{{ breadcrumb }}\"\n          *ngIf=\"showPath\"\n        >\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span\n        class=\"p-l-4 m-l-auto\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div\n    role=\"list\"\n    *ngIf=\"node\"\n    [ngClass]=\"{ hidden: node !== rootNode }\"\n  >\n    <c8y-asset-selector-node\n      role=\"listitem\"\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    ></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: "15.2.7", ngImport: i0, type: AssetSelectorNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector-node', template: "<!-- Hierarchy tree -->\n<div\n  class=\"c8y-asset-selector__item\"\n  [ngStyle]=\"{\n    'margin-left': level > 1 ? 16 + 'px' : '0'\n  }\"\n  *ngIf=\"view === 'tree'\"\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>\n  <div\n    class=\"c8y-asset-selector__node\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden\"\n    [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n    [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n  >\n    <div\n      class=\"d-flex a-i-center p-t-4 p-b-4 m-r-8\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\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\n          class=\"sr-only\"\n          for=\"nodeLabel\"\n          translate\n        >\n          Node label\n        </span>\n      </label>\n    </div>\n\n    <!-- group button -->\n    <button\n      class=\"c8y-asset-selector__btn text-truncate\"\n      [attr.aria-expanded]=\"!node.open\"\n      *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      (click)=\"click()\"\n    >\n      <i\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Smart group' | translate\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n      ></i>\n      <i\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Group' | translate\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.translateLabel ? (node.label | translate) : node.label }}\n        <!-- use just for search results to display the path -->\n        <p\n          class=\"text-truncate\"\n          *ngIf=\"showPath\"\n        >\n          <small\n            class=\"text-muted\"\n            title=\"{{ breadcrumb }}\"\n          >\n            <em>{{ breadcrumb }}</em>\n          </small>\n        </p>\n        <!-- up to here -->\n      </span>\n    </button>\n    <!-- not a group button -->\n    <button\n      class=\"flex-grow\"\n      title=\"{{ breadcrumb }}\"\n      type=\"button\"\n      *ngIf=\"!node.isGroup() && !node.hasChildDevices()\"\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    >\n      <i\n        class=\"c8y-icon c8y-icon-duocolor m-r-4 text-16\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Smart group' | translate\"\n        *ngIf=\"node.icon === 'c8y-group-smart'\"\n      ></i>\n      <i\n        class=\"c8y-icon m-r-4\"\n        [c8yIcon]=\"node.icon\"\n        [title]=\"'Group' | translate\"\n        *ngIf=\"node.icon !== 'c8y-group-smart'\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16 ': node.icon != 'plus' }\"\n      ></i>\n      <span title=\"{{ breadcrumb }}\">\n        {{ node.translateLabel ? (node.label | translate) : node.label }}\n        <!-- use just for search results to display the path -->\n        <p\n          class=\"text-truncate text-muted small\"\n          *ngIf=\"showPath\"\n        >\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        class=\"collapse-btn btn\"\n        [title]=\"expandTitle\"\n        [attr.aria-expanded]=\"node.open\"\n        (click)=\"click()\"\n      >\n        <i c8yIcon=\"angle-down\"></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"collapse\"\n    *ngIf=\"node.countChildren()\"\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    class=\"miller-column__item bg-inherit\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\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\n          class=\"sr-only\"\n          for=\"nodeLabel2\"\n          translate\n        >\n          Node label\n        </span>\n      </label>\n    </div>\n\n    <button\n      title=\"{{ breadcrumb | translate }}\"\n      type=\"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      (click)=\"millerViewClick(node)\"\n    >\n      <i\n        class=\"c8y-icon m-r-4\"\n        [c8yIcon]=\"node.icon\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p\n          class=\"text-truncate\"\n          title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        >\n          {{ node.translateLabel ? (node.label | translate) : node.label }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small\n          class=\"text-muted text-truncate\"\n          title=\"{{ breadcrumb }}\"\n          *ngIf=\"showPath\"\n        >\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span\n        class=\"p-l-4 m-l-auto\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div\n    role=\"list\"\n    *ngIf=\"node\"\n    [ngClass]=\"{ hidden: node !== rootNode }\"\n  >\n    <c8y-asset-selector-node\n      role=\"listitem\"\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    ></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: i6.TranslateService }, { type: i0.ChangeDetectorRef }, { type: AssetSelectorService }]; }, propDecorators: { node: [{
                 type: Input
             }], rootNode: [{
                 type: Input
@@ -1626,7 +1633,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  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  [ngClass]=\"{ 'p-l-16 p-absolute p-r-16': config.view === 'miller', 'sticky-top': config.multi }\"\n  *ngIf=\"!selectedDevice && index === 0 && (config.search || config.singleColumn)\"\n>\n  <p\n    class=\"text-medium\"\n    [ngClass]=\"{ 'm-b-4': config.search && root }\"\n  >\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\n    class=\"bg-component p-t-4 d-flex flex-wrap gap-4\"\n    *ngIf=\"config.multi\"\n  >\n    <span\n      class=\"label label-info chip\"\n      *ngFor=\"let selectedItem of selected\"\n    >\n      <button\n        class=\"btn btn-xs btn-clean text-10\"\n        title=\"{{ selectedItem.name }}\"\n        type=\"button\"\n        (click)=\"deselect(selectedItem)\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      {{ selectedItem.name }}\n    </span>\n  </div>\n</div>\n\n<div\n  class=\"p-r-16\"\n  *ngIf=\"selectedDevice\"\n>\n  <div class=\"d-flex p-b-4\">\n    <p\n      class=\"text-medium p-t-8 m-r-8\"\n      *ngIf=\"selectedDevice; else multiAssets\"\n    >\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      title=\"{{ 'Change' | translate }}\"\n      type=\"button\"\n      (click)=\"clearSelectedDevices()\"\n    >\n      {{ 'Change' | translate }}\n    </button>\n  </div>\n  <div class=\"d-flex\">\n    <i\n      class=\"text-success p-l-0 p-r-8\"\n      [c8yIcon]=\"'check-circle'\"\n    ></i>\n    <i\n      class=\"m-r-4 icon-20\"\n      [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n    ></i>\n    <span>{{ selectedDevice.name }}</span>\n  </div>\n</div>\n\n<!-- miller columns header -->\n<div\n  class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n  [ngStyle]=\"{ top: config.search && !config.singleColumn ? '72px' : '0' }\"\n  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders || config.singleColumn) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'm-t-72 p-t-8': config.search, 'm-t-32': !config.search && config.singleColumn }\"\n>\n  <p\n    class=\"text-12 text-muted text-truncate m-b-4\"\n    title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    *ngIf=\"config.singleColumn && index !== 0\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    {{ rootNode.breadcrumb || rootNode.label | translate }}\n  </p>\n  <div\n    class=\"d-flex a-i-center\"\n    *ngIf=\"config.columnHeaders || config.singleColumn\"\n  >\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      title=\"{{ 'Back' | translate }}\"\n      type=\"button\"\n      *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n      (click)=\"back()\"\n    >\n      <i c8yIcon=\"angle-left\"></i>\n    </button>\n    <label\n      class=\"c8y-radio checkbox-inline m-r-8\"\n      *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n    >\n      <input\n        title=\"{{ 'Select group' | translate }}\"\n        type=\"radio\"\n        (change)=\"select(rootNode.mo)\"\n        [checked]=\"isGroupSelected()\"\n      />\n      <span></span>\n    </label>\n\n    <i\n      class=\"icon-20 c8y-icon-duocolor m-r-4\"\n      [c8yIcon]=\"this.rootNode.mo | getGroupIcon : true : this.rootNode.icon | async\"\n      *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\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\n    *ngIf=\"!rootNode.root && config.showFilter\"\n    [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n  >\n    <div class=\"input-group input-group-sm input-group-search\">\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'Filter\u2026' | translate }}\"\n        [(ngModel)]=\"filterText\"\n        (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n      />\n      <span class=\"input-group-btn\">\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\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  class=\"d-block bg-inherit p-relative\"\n  style=\"z-index: 9\"\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  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\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" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.GetGroupIconPipe, name: "getGroupIcon" }] });
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  [ngClass]=\"{ 'p-l-16 p-absolute p-r-16': config.view === 'miller', 'sticky-top': config.multi }\"\n  *ngIf=\"!selectedDevice && index === 0 && (config.search || config.singleColumn)\"\n>\n  <p\n    class=\"text-medium\"\n    [ngClass]=\"{ 'm-b-4': config.search && root }\"\n  >\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\n    class=\"bg-component p-t-4 d-flex flex-wrap gap-4\"\n    *ngIf=\"config.multi\"\n  >\n    <span\n      class=\"label label-info chip\"\n      *ngFor=\"let selectedItem of selected\"\n    >\n      <button\n        class=\"btn btn-xs btn-clean text-10\"\n        title=\"{{ selectedItem.name }}\"\n        type=\"button\"\n        (click)=\"deselect(selectedItem)\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      {{ selectedItem.name }}\n    </span>\n  </div>\n</div>\n\n<div\n  class=\"p-r-16\"\n  *ngIf=\"selectedDevice\"\n>\n  <div class=\"d-flex p-b-4\">\n    <p\n      class=\"text-medium p-t-8 m-r-8\"\n      *ngIf=\"selectedDevice; else multiAssets\"\n    >\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      title=\"{{ 'Change' | translate }}\"\n      type=\"button\"\n      (click)=\"clearSelectedDevices()\"\n    >\n      {{ 'Change' | translate }}\n    </button>\n  </div>\n  <div class=\"d-flex\">\n    <i\n      class=\"text-success p-l-0 p-r-8\"\n      [c8yIcon]=\"'check-circle'\"\n    ></i>\n    <i\n      class=\"m-r-4 icon-20\"\n      [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n    ></i>\n    <span>{{ selectedDevice.name }}</span>\n  </div>\n</div>\n\n<!-- miller columns header -->\n<div\n  class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n  [ngStyle]=\"{ top: config.search && !config.singleColumn ? '72px' : '0' }\"\n  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders || config.singleColumn) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'm-t-72 p-t-8': config.search, 'm-t-32': !config.search && config.singleColumn }\"\n>\n  <p\n    class=\"text-12 text-muted text-truncate m-b-4\"\n    title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    *ngIf=\"config.singleColumn && index !== 0\"\n  >\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    {{ rootNode.breadcrumb || rootNode.label | translate }}\n  </p>\n  <div\n    class=\"d-flex a-i-center\"\n    *ngIf=\"config.columnHeaders || config.singleColumn\"\n  >\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      title=\"{{ 'Back' | translate }}\"\n      type=\"button\"\n      *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n      (click)=\"back()\"\n    >\n      <i c8yIcon=\"angle-left\"></i>\n    </button>\n    <label\n      class=\"c8y-radio checkbox-inline m-r-8\"\n      *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n    >\n      <input\n        title=\"{{ 'Select group' | translate }}\"\n        type=\"radio\"\n        (change)=\"select(rootNode.mo)\"\n        [checked]=\"isGroupSelected()\"\n      />\n      <span></span>\n    </label>\n\n    <i\n      class=\"icon-20 c8y-icon-duocolor m-r-4\"\n      [c8yIcon]=\"this.rootNode.mo | getGroupIcon : true : this.rootNode.icon | async\"\n      *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\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\n    *ngIf=\"!rootNode.root && config.showFilter\"\n    [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n  >\n    <div class=\"input-group input-group-sm input-group-search\">\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'Filter\u2026' | translate }}\"\n        [(ngModel)]=\"filterText\"\n        (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n      />\n      <span class=\"input-group-btn\">\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\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  class=\"d-block bg-inherit p-relative\"\n  style=\"z-index: 9\"\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  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.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" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.GetGroupIconPipe, name: "getGroupIcon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: AssetSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector', providers: [