@c8y/ngx-components 1022.10.1 → 1022.13.0

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

@@ -1,5 +1,5 @@
-import * as i4 from '@c8y/ngx-components';
-import { NavigatorNode, gettext, DeviceStatusComponent, GroupFragment, ModalService, AlertService, BreadcrumbService, AppStateService, OptionsService, ViewContext, Permissions, CoreModule, CommonModule, CoreSearchModule, ModalModule, DeviceStatusModule, hookNavigator } from '@c8y/ngx-components';
+import * as i1 from '@c8y/ngx-components';
+import { NavigatorNode, gettext, DeviceStatusComponent, GroupFragment, ModalService, AlertService, BreadcrumbService, AppStateService, OptionsService, ViewContext, Permissions, IconDirective, C8yTranslateDirective, C8yTranslatePipe, SearchInputComponent, GetGroupIconPipe, LoadingComponent, EmptyStateComponent, CoreModule, CommonModule, CoreSearchModule, ModalModule, DeviceStatusModule, hookNavigator } from '@c8y/ngx-components';
 import { debounce, get } from 'lodash-es';
 import { BehaviorSubject, Subject, empty, of } from 'rxjs';
 import * as i0 from '@angular/core';
@@ -9,15 +9,14 @@ import * as i2 from '@c8y/client';
 import { InventoryService, UserService, QueriesUtil } from '@c8y/client';
 import { ApiService } from '@c8y/ngx-components/api';
 import { filter, first, mergeMap, takeUntil, tap, startWith, switchMap, map } from 'rxjs/operators';
-import * as i1 from '@ngx-translate/core';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
-import * as i5$1 from 'ngx-bootstrap/collapse';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { CollapseDirective, CollapseModule } from 'ngx-bootstrap/collapse';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { isArray, isNumber, isString, isObject } from 'lodash';
-import * as i5 from '@angular/common';
-import * as i6 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
+import { NgIf, NgStyle, NgClass, NgFor, AsyncPipe } from '@angular/common';
+import * as i4 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 
 var AssetsNavigatorAction;
 (function (AssetsNavigatorAction) {
@@ -415,7 +414,7 @@ class DeviceGroupService {
     isDevice(mo) {
         return this.migratedDeviceGroupService.isDevice(mo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceGroupService, deps: [{ token: i4.GroupService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceGroupService, deps: [{ token: i1.GroupService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceGroupService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceGroupService, decorators: [{
@@ -423,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i4.GroupService }] });
+        }], ctorParameters: () => [{ type: i1.GroupService }] });
 
 class AssetNodeService {
     constructor() {
@@ -1111,13 +1110,22 @@ class AssetSelectorNodeComponent {
         this.onSelect.emit(selectedMo);
         this.cd.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AssetSelectorNodeComponent, isStandalone: false, selector: "c8y-asset-selector-node", inputs: { node: "node", rootNode: "rootNode", preselected: "preselected", showPath: "showPath", multi: "multi", view: "view", index: "index", active: "active", handleNextMillerViewColumn: "handleNextMillerViewColumn", disabled: "disabled" }, 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    <!-- expand button -->\n    <div class=\"c8y-asset-selector__node__btn-spacer\">\n      <button\n        class=\"collapse-btn btn-dot\"\n        [title]=\"expandTitle | translate\"\n        [attr.aria-expanded]=\"node.open\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div\n      class=\"d-flex a-i-center p-t-4 p-b-4\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode' && isNodeSelectable\"\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]=\"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 m-r-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  </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      [disabled]=\"disabled\"\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]=\"isSelected()\"\n          [disabled]=\"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-4 m-t-4':\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      [active]=\"active\"\n      [disabled]=\"disabled\"\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: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.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", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AssetSelectorNodeComponent, isStandalone: true, selector: "c8y-asset-selector-node", inputs: { node: "node", rootNode: "rootNode", preselected: "preselected", showPath: "showPath", multi: "multi", view: "view", index: "index", active: "active", handleNextMillerViewColumn: "handleNextMillerViewColumn", disabled: "disabled" }, 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    <!-- expand button -->\n    <div class=\"c8y-asset-selector__node__btn-spacer\">\n      <button\n        class=\"collapse-btn btn-dot\"\n        [title]=\"expandTitle | translate\"\n        [attr.aria-expanded]=\"node.open\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div\n      class=\"d-flex a-i-center p-t-4 p-b-4\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode' && isNodeSelectable\"\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]=\"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 m-r-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  </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      [disabled]=\"disabled\"\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]=\"isSelected()\"\n          [disabled]=\"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-4 m-t-4':\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      [active]=\"active\"\n      [disabled]=\"disabled\"\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: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-asset-selector-node', standalone: false, 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    <!-- expand button -->\n    <div class=\"c8y-asset-selector__node__btn-spacer\">\n      <button\n        class=\"collapse-btn btn-dot\"\n        [title]=\"expandTitle | translate\"\n        [attr.aria-expanded]=\"node.open\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div\n      class=\"d-flex a-i-center p-t-4 p-b-4\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode' && isNodeSelectable\"\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]=\"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 m-r-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  </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      [disabled]=\"disabled\"\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]=\"isSelected()\"\n          [disabled]=\"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-4 m-t-4':\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      [active]=\"active\"\n      [disabled]=\"disabled\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: AssetSelectorService }], propDecorators: { node: [{
+            args: [{ selector: 'c8y-asset-selector-node', imports: [
+                        NgIf,
+                        NgStyle,
+                        NgClass,
+                        IconDirective,
+                        C8yTranslateDirective,
+                        CollapseDirective,
+                        NgFor,
+                        C8yTranslatePipe
+                    ], 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    <!-- expand button -->\n    <div class=\"c8y-asset-selector__node__btn-spacer\">\n      <button\n        class=\"collapse-btn btn-dot\"\n        [title]=\"expandTitle | translate\"\n        [attr.aria-expanded]=\"node.open\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div\n      class=\"d-flex a-i-center p-t-4 p-b-4\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode' && isNodeSelectable\"\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]=\"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 m-r-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  </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      [disabled]=\"disabled\"\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]=\"isSelected()\"\n          [disabled]=\"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-4 m-t-4':\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      [active]=\"active\"\n      [disabled]=\"disabled\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: AssetSelectorService }], propDecorators: { node: [{
                 type: Input
             }], rootNode: [{
                 type: Input
@@ -1497,6 +1505,9 @@ class AssetSelectorComponent extends AssetSelectorBase {
         this.filterText = '';
         this.applyFilter('');
     }
+    /**
+     * Clears the currently selected device.
+     */
     clearSelectedDevices() {
         this.selectedDevice = undefined;
         this.applyFilter('');
@@ -1508,6 +1519,14 @@ class AssetSelectorComponent extends AssetSelectorBase {
         }
         return false;
     }
+    /**
+     * @param nameFilter The name filter to apply.
+     * @param moId The managed object ID to filter by.
+     * @param showUnassignedDevices If true, it will show unassigned devices.
+     * @return The filter query to apply.
+     * @description
+     * This method builds a filter query based on the provided name filter and managed object ID.
+     */
     groupNameFilter(nameFilter, moId, showUnassignedDevices) {
         if (nameFilter) {
             const filterByName = showUnassignedDevices
@@ -1655,7 +1674,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorComponent, deps: [{ token: GroupNodeService }, { token: i2.InventoryService }, { token: AssetSelectorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AssetSelectorComponent, isStandalone: false, selector: "c8y-asset-selector", inputs: { config: "config", active: "active", index: "index", asset: "asset", selectedDevice: "selectedDevice", selected: "selected", rootNode: "rootNode", selectedItems: "selectedItems", container: "container", isNodeSelectable: "isNodeSelectable", disabled: "disabled" }, outputs: { onSelected: "onSelected", onClearSelected: "onClearSelected", onRowSelected: "onRowSelected", onLoad: "onLoad" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AssetSelectorComponent, isStandalone: true, selector: "c8y-asset-selector", inputs: { config: "config", active: "active", index: "index", asset: "asset", selectedDevice: "selectedDevice", selected: "selected", rootNode: "rootNode", selectedItems: "selectedItems", container: "container", isNodeSelectable: "isNodeSelectable", disabled: "disabled" }, outputs: { onSelected: "onSelected", onClearSelected: "onClearSelected", onRowSelected: "onRowSelected", onLoad: "onLoad" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1667,7 +1686,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
                 multi: true
             },
             AssetSelectorService
-        ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n    [ngClass]=\"{\n      'm-l-auto': !config.singleColumn && config.label.length,\n      'fit-w': config.singleColumn || !config.label.length\n    }\"\n  ></c8y-search-input>\n  <div\n    class=\"bg-inherit d-flex gap-4 fit-w\"\n    *ngIf=\"config.showSelected\"\n    [ngClass]=\"{ 'm-t-4': config.search }\"\n  >\n    <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n    <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n      <ng-container *ngIf=\"!selected.length\">\n        <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n      </ng-container>\n      <span\n        class=\"tag tag--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          [disabled]=\"disabled\"\n          type=\"button\"\n          (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n      </span>\n    </div>\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)=\"$event.stopPropagation(); 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  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n  <div class=\"d-flex\" *ngIf=\"config.singleColumn && index !== 0\">\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    <p\n      class=\"text-12 text-muted text-truncate text-rtl m-b-4\"\n      title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    >\n      {{ rootNode.breadcrumb || rootNode.label | translate }}\n    </p>\n  </div>\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)=\"$event.stopPropagation(); 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 this column\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  [active]=\"active\"\n  [disabled]=\"disabled\"\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: i4.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: i4.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", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.GetGroupIconPipe, name: "getGroupIcon" }] }); }
+        ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n    [ngClass]=\"{\n      'm-l-auto': !config.singleColumn && config.label.length,\n      'fit-w': config.singleColumn || !config.label.length\n    }\"\n  ></c8y-search-input>\n  <div\n    class=\"bg-inherit d-flex gap-4 fit-w\"\n    *ngIf=\"config.showSelected\"\n    [ngClass]=\"{ 'm-t-4': config.search }\"\n  >\n    <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n    <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n      <ng-container *ngIf=\"!selected.length\">\n        <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n      </ng-container>\n      <span\n        class=\"tag tag--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          [disabled]=\"disabled\"\n          type=\"button\"\n          (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n      </span>\n    </div>\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)=\"$event.stopPropagation(); 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  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n  <div class=\"d-flex\" *ngIf=\"config.singleColumn && index !== 0\">\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    <p\n      class=\"text-12 text-muted text-truncate text-rtl m-b-4\"\n      title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    >\n      {{ rootNode.breadcrumb || rootNode.label | translate }}\n    </p>\n  </div>\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)=\"$event.stopPropagation(); 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 this column\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  [active]=\"active\"\n  [disabled]=\"disabled\"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorComponent, decorators: [{
             type: Component,
@@ -1683,7 +1702,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             multi: true
                         },
                         AssetSelectorService
-                    ], standalone: false, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n    [ngClass]=\"{\n      'm-l-auto': !config.singleColumn && config.label.length,\n      'fit-w': config.singleColumn || !config.label.length\n    }\"\n  ></c8y-search-input>\n  <div\n    class=\"bg-inherit d-flex gap-4 fit-w\"\n    *ngIf=\"config.showSelected\"\n    [ngClass]=\"{ 'm-t-4': config.search }\"\n  >\n    <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n    <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n      <ng-container *ngIf=\"!selected.length\">\n        <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n      </ng-container>\n      <span\n        class=\"tag tag--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          [disabled]=\"disabled\"\n          type=\"button\"\n          (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n      </span>\n    </div>\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)=\"$event.stopPropagation(); 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  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n  <div class=\"d-flex\" *ngIf=\"config.singleColumn && index !== 0\">\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    <p\n      class=\"text-12 text-muted text-truncate text-rtl m-b-4\"\n      title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    >\n      {{ rootNode.breadcrumb || rootNode.label | translate }}\n    </p>\n  </div>\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)=\"$event.stopPropagation(); 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 this column\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  [active]=\"active\"\n  [disabled]=\"disabled\"\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" }]
+                    ], imports: [
+                        NgIf,
+                        NgStyle,
+                        NgClass,
+                        SearchInputComponent,
+                        NgFor,
+                        IconDirective,
+                        FormsModule,
+                        AssetSelectorNodeComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        GetGroupIconPipe
+                    ], template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n    [ngClass]=\"{\n      'm-l-auto': !config.singleColumn && config.label.length,\n      'fit-w': config.singleColumn || !config.label.length\n    }\"\n  ></c8y-search-input>\n  <div\n    class=\"bg-inherit d-flex gap-4 fit-w\"\n    *ngIf=\"config.showSelected\"\n    [ngClass]=\"{ 'm-t-4': config.search }\"\n  >\n    <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n    <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n      <ng-container *ngIf=\"!selected.length\">\n        <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n      </ng-container>\n      <span\n        class=\"tag tag--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          [disabled]=\"disabled\"\n          type=\"button\"\n          (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n      </span>\n    </div>\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)=\"$event.stopPropagation(); 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  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n  <div class=\"d-flex\" *ngIf=\"config.singleColumn && index !== 0\">\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    <p\n      class=\"text-12 text-muted text-truncate text-rtl m-b-4\"\n      title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    >\n      {{ rootNode.breadcrumb || rootNode.label | translate }}\n    </p>\n  </div>\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)=\"$event.stopPropagation(); 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 this column\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  [active]=\"active\"\n  [disabled]=\"disabled\"\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" }]
         }], ctorParameters: () => [{ type: GroupNodeService }, { type: i2.InventoryService }, { type: AssetSelectorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], active: [{
@@ -1864,13 +1895,13 @@ class MillerViewComponent extends AssetSelectorBase {
         this.deselect(event.change.item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MillerViewComponent, deps: [{ token: GroupNodeService }, { token: i2.InventoryService }, { token: AssetSelectorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MillerViewComponent, isStandalone: false, selector: "c8y-asset-selector-miller", inputs: { config: "config", asset: "asset", selectedDevice: "selectedDevice", rootNode: "rootNode", container: "container" }, outputs: { onSelected: "onSelected", onClearSelected: "onClearSelected" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MillerViewComponent, isStandalone: true, selector: "c8y-asset-selector-miller", inputs: { config: "config", asset: "asset", selectedDevice: "selectedDevice", rootNode: "rootNode", container: "container" }, outputs: { onSelected: "onSelected", onClearSelected: "onClearSelected" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MillerViewComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "millerViewWrapper", first: true, predicate: ["millerViewWrapper"], descendants: true }, { propertyName: "assetSelectors", predicate: AssetSelectorComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"miller-view-wrapper {{ config.label }}\"\n  [ngStyle]=\"{\n    'padding-top': selectedDevice ? '0px' : (assetSelectorHeaderHeight$ | async)\n  }\"\n  #millerViewWrapper\n  [ngClass]=\"{\n    'single-column': config.singleColumn,\n  }\"\n>\n  <div\n    class=\"miller-column bg-inherit\"\n    *ngFor=\"let column of columns; index as i\"\n  >\n    <c8y-asset-selector\n      class=\"bg-inherit\"\n      #assetSelector\n      [config]=\"config\"\n      [index]=\"i\"\n      [active]=\"columns[i + 1]\"\n      [rootNode]=\"column\"\n      [selected]=\"selected || []\"\n      [selectedDevice]=\"selectedDevice\"\n      (onSelected)=\"onSelectionChange($event)\"\n      (onClearSelected)=\"onClearSelected.emit()\"\n      (onRowSelected)=\"addNewColumn($event)\"\n      (onLoad)=\"onLoad($event)\"\n      [container]=\"container\"\n    ></c8y-asset-selector>\n    <div\n      class=\"p-relative p-b-64\"\n      *ngIf=\"isLoading && columnIndex === i && !selectedDevice\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div\n      class=\"p-l-8 p-r-8\"\n      *ngIf=\"!column.children.length && !isLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'folder-open'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'The selected asset has no children.' | translate\"\n        *ngIf=\"!filterText; else noSearchResults\"\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: i4.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: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container", "isNodeSelectable", "disabled"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+        ], viewQueries: [{ propertyName: "millerViewWrapper", first: true, predicate: ["millerViewWrapper"], descendants: true }, { propertyName: "assetSelectors", predicate: AssetSelectorComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"miller-view-wrapper {{ config.label }}\"\n  [ngStyle]=\"{\n    'padding-top': selectedDevice ? '0px' : (assetSelectorHeaderHeight$ | async)\n  }\"\n  #millerViewWrapper\n  [ngClass]=\"{\n    'single-column': config.singleColumn,\n  }\"\n>\n  <div\n    class=\"miller-column bg-inherit\"\n    *ngFor=\"let column of columns; index as i\"\n  >\n    <c8y-asset-selector\n      class=\"bg-inherit\"\n      #assetSelector\n      [config]=\"config\"\n      [index]=\"i\"\n      [active]=\"columns[i + 1]\"\n      [rootNode]=\"column\"\n      [selected]=\"selected || []\"\n      [selectedDevice]=\"selectedDevice\"\n      (onSelected)=\"onSelectionChange($event)\"\n      (onClearSelected)=\"onClearSelected.emit()\"\n      (onRowSelected)=\"addNewColumn($event)\"\n      (onLoad)=\"onLoad($event)\"\n      [container]=\"container\"\n    ></c8y-asset-selector>\n    <div\n      class=\"p-relative p-b-64\"\n      *ngIf=\"isLoading && columnIndex === i && !selectedDevice\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div\n      class=\"p-l-8 p-r-8\"\n      *ngIf=\"!column.children.length && !isLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'folder-open'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'The selected asset has no children.' | translate\"\n        *ngIf=\"!filterText; else noSearchResults\"\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container", "isNodeSelectable", "disabled"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MillerViewComponent, decorators: [{
             type: Component,
@@ -1880,7 +1911,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => MillerViewComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div\n  class=\"miller-view-wrapper {{ config.label }}\"\n  [ngStyle]=\"{\n    'padding-top': selectedDevice ? '0px' : (assetSelectorHeaderHeight$ | async)\n  }\"\n  #millerViewWrapper\n  [ngClass]=\"{\n    'single-column': config.singleColumn,\n  }\"\n>\n  <div\n    class=\"miller-column bg-inherit\"\n    *ngFor=\"let column of columns; index as i\"\n  >\n    <c8y-asset-selector\n      class=\"bg-inherit\"\n      #assetSelector\n      [config]=\"config\"\n      [index]=\"i\"\n      [active]=\"columns[i + 1]\"\n      [rootNode]=\"column\"\n      [selected]=\"selected || []\"\n      [selectedDevice]=\"selectedDevice\"\n      (onSelected)=\"onSelectionChange($event)\"\n      (onClearSelected)=\"onClearSelected.emit()\"\n      (onRowSelected)=\"addNewColumn($event)\"\n      (onLoad)=\"onLoad($event)\"\n      [container]=\"container\"\n    ></c8y-asset-selector>\n    <div\n      class=\"p-relative p-b-64\"\n      *ngIf=\"isLoading && columnIndex === i && !selectedDevice\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div\n      class=\"p-l-8 p-r-8\"\n      *ngIf=\"!column.children.length && !isLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'folder-open'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'The selected asset has no children.' | translate\"\n        *ngIf=\"!filterText; else noSearchResults\"\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" }]
+                    ], imports: [
+                        NgStyle,
+                        NgClass,
+                        NgFor,
+                        AssetSelectorComponent,
+                        NgIf,
+                        LoadingComponent,
+                        EmptyStateComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<div\n  class=\"miller-view-wrapper {{ config.label }}\"\n  [ngStyle]=\"{\n    'padding-top': selectedDevice ? '0px' : (assetSelectorHeaderHeight$ | async)\n  }\"\n  #millerViewWrapper\n  [ngClass]=\"{\n    'single-column': config.singleColumn,\n  }\"\n>\n  <div\n    class=\"miller-column bg-inherit\"\n    *ngFor=\"let column of columns; index as i\"\n  >\n    <c8y-asset-selector\n      class=\"bg-inherit\"\n      #assetSelector\n      [config]=\"config\"\n      [index]=\"i\"\n      [active]=\"columns[i + 1]\"\n      [rootNode]=\"column\"\n      [selected]=\"selected || []\"\n      [selectedDevice]=\"selectedDevice\"\n      (onSelected)=\"onSelectionChange($event)\"\n      (onClearSelected)=\"onClearSelected.emit()\"\n      (onRowSelected)=\"addNewColumn($event)\"\n      (onLoad)=\"onLoad($event)\"\n      [container]=\"container\"\n    ></c8y-asset-selector>\n    <div\n      class=\"p-relative p-b-64\"\n      *ngIf=\"isLoading && columnIndex === i && !selectedDevice\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div\n      class=\"p-l-8 p-r-8\"\n      *ngIf=\"!column.children.length && !isLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'folder-open'\"\n        [title]=\"'No results to display.' | translate\"\n        [subtitle]=\"'The selected asset has no children.' | translate\"\n        *ngIf=\"!filterText; else noSearchResults\"\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" }]
         }], ctorParameters: () => [{ type: GroupNodeService }, { type: i2.InventoryService }, { type: AssetSelectorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], asset: [{
@@ -1905,18 +1946,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class AssetSelectorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorModule, declarations: [AssetSelectorNodeComponent, AssetSelectorComponent, MillerViewComponent], imports: [CoreModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorModule, imports: [CoreModule,
             CommonModule,
             CollapseModule,
             BsDropdownModule,
             CoreSearchModule,
-            FormsModule], exports: [AssetSelectorNodeComponent, AssetSelectorComponent, MillerViewComponent] }); }
+            FormsModule,
+            AssetSelectorNodeComponent,
+            AssetSelectorComponent,
+            MillerViewComponent], exports: [AssetSelectorNodeComponent, AssetSelectorComponent, MillerViewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorModule, providers: [GroupNodeService, AssetSelectorService], imports: [CoreModule,
             CommonModule,
             CollapseModule,
             BsDropdownModule,
             CoreSearchModule,
-            FormsModule] }); }
+            FormsModule,
+            AssetSelectorComponent,
+            MillerViewComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AssetSelectorModule, decorators: [{
             type: NgModule,
@@ -1927,11 +1973,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CollapseModule,
                         BsDropdownModule,
                         CoreSearchModule,
-                        FormsModule
+                        FormsModule,
+                        AssetSelectorNodeComponent,
+                        AssetSelectorComponent,
+                        MillerViewComponent
                     ],
                     exports: [AssetSelectorNodeComponent, AssetSelectorComponent, MillerViewComponent],
-                    providers: [GroupNodeService, AssetSelectorService],
-                    declarations: [AssetSelectorNodeComponent, AssetSelectorComponent, MillerViewComponent]
+                    providers: [GroupNodeService, AssetSelectorService]
                 }]
         }] });