@c8y/ngx-components 1023.17.3 → 1023.17.8

package/fesm2022/c8y-ngx-components-asset-property-grid.component-QedBlFUH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"c8y-ngx-components-asset-property-grid.component-QedBlFUH.mjs","sources":["../../core/data-grid/configure-custom-column/columns/identifier.cell-renderer.component.ts","../../core/data-grid/configure-custom-column/columns/identifier.data-grid-column.ts","../../core/data-grid/configure-custom-column/columns/tags.cell-renderer.components.ts","../../core/data-grid/configure-custom-column/columns/tags.data-grid-column.ts","../../core/data-grid/configure-custom-column/columns/title.cell-renderer.component.ts","../../core/data-grid/configure-custom-column/columns/title.data-grid-column.ts","../../core/data-grid/configure-custom-column/asset-property-grid.component.ts","../../core/data-grid/configure-custom-column/asset-property-grid.component.html"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CellRendererContext } from '../../column/cell-renderer';\n\n@Component({\n  template: ` {{ context.item.id }} `,\n  selector: 'c8y-identifier-cell-renderer',\n  standalone: true\n})\nexport class IdentifierCellRendererComponent {\n  constructor(public context: CellRendererContext) {}\n}\n","import { getBasicInputArrayFormFieldConfig } from '../../../dynamic-forms';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { BaseColumn } from '../../column/base.column';\nimport { ColumnConfig } from '../../data-grid.model';\nimport { IdentifierCellRendererComponent } from './identifier.cell-renderer.component';\n\nexport class IdentifierGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    this.name = 'key';\n    this.header = gettext('Key');\n    this.cellRendererComponent = IdentifierCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'identifiers',\n        label: gettext('Show items with identifier'),\n        addText: gettext('Add next`identifier`'),\n        placeholder: 'c8y_Position'\n      }),\n      getFilter(_model) {\n        return _model;\n      }\n    };\n\n    this.sortable = false;\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext } from '../../column/cell-renderer';\n\n@Component({\n  template: ` {{ context.item.tags }} `,\n  selector: 'c8y-tags-cell-renderer',\n  standalone: true\n})\nexport class TagsCellRendererComponent {\n  constructor(public context: CellRendererContext) {}\n}\n","import { getBasicInputArrayFormFieldConfig } from '../../../dynamic-forms';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { BaseColumn } from '../../column/base.column';\nimport { ColumnConfig } from '../../data-grid.model';\nimport { TagsCellRendererComponent } from './tags.cell-renderer.components';\n\nexport class TagsGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    this.name = 'tags';\n    this.header = gettext('Tags');\n    this.cellRendererComponent = TagsCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'tags',\n        label: gettext('Show items with tags'),\n        addText: gettext('Add next`tag`'),\n        placeholder: 'tag1'\n      }),\n      getFilter(_model) {\n        return _model;\n      }\n    };\n\n    this.sortable = false;\n  }\n}\n","import { Component } from '@angular/core';\nimport { CellRendererContext } from '../..';\n\n@Component({\n  template: ` {{ context.item.title }} `,\n  selector: 'c8y-title-cell-renderer',\n  standalone: true\n})\nexport class TitleCellRendererComponent {\n  constructor(public context: CellRendererContext) {}\n}\n","import { getBasicInputArrayFormFieldConfig } from '../../../dynamic-forms';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { BaseColumn } from '../../column/base.column';\nimport { ColumnConfig } from '../../data-grid.model';\nimport { TitleCellRendererComponent } from './title.cell-renderer.component';\n\nexport class TitleGridColumn extends BaseColumn {\n  constructor(initialColumnConfig?: ColumnConfig) {\n    super(initialColumnConfig);\n\n    this.name = 'title';\n    this.header = gettext('Title');\n    this.cellRendererComponent = TitleCellRendererComponent;\n\n    this.filterable = true;\n    this.filteringConfig = {\n      fields: getBasicInputArrayFormFieldConfig({\n        key: 'titles',\n        label: gettext('Show items with title'),\n        addText: gettext('Add next`title`'),\n        placeholder: 'location'\n      }),\n      getFilter(_model) {\n        return _model;\n      }\n    };\n\n    this.sortable = false;\n  }\n}\n","import { Component, EventEmitter, Output } from '@angular/core';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { camelCase } from 'lodash-es';\nimport { alertOnError, AlertService } from '../../alert';\nimport {\n  AssetPropertyDefinition,\n  SchemaNode,\n  TreeNode\n} from '../../asset-property/asset-property.model';\nimport { AssetPropertyService } from '../../asset-property/asset-property.service';\nimport { BottomDrawerRef } from '../../bottom-drawer';\nimport { C8yTranslatePipe } from '../../i18n/c8y-translate.pipe';\nimport { DataGridComponent } from '../data-grid.component';\nimport {\n  Column,\n  CustomColumnConfig,\n  DataSourceModifier,\n  DisplayOptions,\n  Pagination,\n  ServerSideDataCallback,\n  ServerSideDataResult\n} from '../data-grid.model';\nimport { IdentifierCellRendererComponent } from './columns/identifier.cell-renderer.component';\nimport { IdentifierGridColumn } from './columns/identifier.data-grid-column';\nimport { TagsCellRendererComponent } from './columns/tags.cell-renderer.components';\nimport { TagsGridColumn } from './columns/tags.data-grid-column';\nimport { TitleCellRendererComponent } from './columns/title.cell-renderer.component';\nimport { TitleGridColumn } from './columns/title.data-grid-column';\n\nconst CHILD_PAGE_SIZE = 5;\nconst ROOT_PAGE_SIZE = 25;\n\n@Component({\n  selector: 'c8y-asset-property-grid',\n  standalone: true,\n  imports: [\n    C8yTranslatePipe,\n    DataGridComponent,\n    IdentifierCellRendererComponent,\n    TitleCellRendererComponent,\n    TagsCellRendererComponent\n  ],\n  templateUrl: './asset-property-grid.component.html'\n})\nexport class AssetPropertyGridComponent {\n  columns: readonly Column[] = [\n    new TitleGridColumn(),\n    new IdentifierGridColumn(),\n    new TagsGridColumn(),\n    {\n      name: 'description',\n      header: gettext('Description'),\n      path: 'description',\n      filterable: false,\n      sortable: false\n    },\n    {\n      name: 'dataType',\n      header: gettext('Data Type'),\n      path: 'type',\n      filterable: false,\n      sortable: false\n    }\n  ];\n\n  pagination: Pagination = { pageSize: ROOT_PAGE_SIZE, currentPage: 1 };\n  childNodePagination: Pagination = { pageSize: CHILD_PAGE_SIZE, currentPage: 1 };\n  serverSideDataCallback: ServerSideDataCallback = this.onDataSourceModifier.bind(this);\n  loadError: string | null = null;\n\n  headerActionControls = [\n    {\n      text: gettext('Close'),\n      callback: () => this.close(),\n      icon: 'clear',\n      type: 'custom'\n    }\n  ];\n\n  displayOptions: DisplayOptions = {\n    bordered: false,\n    striped: true,\n    filter: true,\n    gridHeader: true,\n    hover: true\n  };\n\n  @Output() onAddCustomColumn = new EventEmitter<CustomColumnConfig>();\n\n  constructor(\n    private service: AssetPropertyService,\n    private bottomDrawerRef: BottomDrawerRef<AssetPropertyGridComponent>,\n    private alertService: AlertService\n  ) {}\n\n  async onDataSourceModifier(\n    dataSourceModifier: DataSourceModifier\n  ): Promise<ServerSideDataResult> {\n    const { columns, pagination, parentRow } = dataSourceModifier;\n\n    if (parentRow) {\n      return this.buildChildGridData(parentRow);\n    }\n\n    const {\n      res,\n      data = [],\n      paging\n    } = await alertOnError(this.service.list(this.buildFilter(columns, pagination))).catch(() => {\n      this.loadError = gettext('Unable to load asset properties. Please try again later.');\n      return {\n        res: null,\n        data: [],\n        paging: null,\n        filteredSize: 0,\n        size: 0\n      };\n    });\n\n    const treeNodes = data.map(d => this.toTreeNode(d));\n\n    return {\n      res,\n      data: treeNodes,\n      paging,\n      filteredSize: paging?.totalElements,\n      size: paging?.totalElements\n    };\n  }\n\n  async selectItem(identifiers: string[]) {\n    if (this.bottomDrawerRef) {\n      this.bottomDrawerRef.close();\n    }\n    this.addColumn(identifiers[0]);\n  }\n\n  async addColumn(path: string): Promise<void> {\n    const [parentId, childKey] = path.split('.');\n    try {\n      const def = await this.service.getByIdentifier(parentId);\n      const childSchema = def.jsonSchema?.properties?.[childKey];\n\n      const header = childSchema?.title || childKey || def.jsonSchema?.title;\n\n      this.onAddCustomColumn.emit({\n        name: camelCase(path),\n        header,\n        path,\n        type: 'property',\n        custom: true,\n        visible: true\n      });\n    } catch (err) {\n      this.alertService.addServerFailure(err);\n    }\n  }\n\n  close(): void {\n    this.bottomDrawerRef?.close();\n  }\n\n  private buildChildGridData(parentRow) {\n    const children = parentRow.children ?? [];\n    const currentPage = parentRow.pagination?.currentPage ?? 1;\n\n    const start = (currentPage - 1) * CHILD_PAGE_SIZE;\n    const data = children.slice(start, start + CHILD_PAGE_SIZE);\n    const totalPages = Math.ceil(children.length / CHILD_PAGE_SIZE);\n\n    return {\n      data,\n      filteredSize: children.length,\n      size: children.length,\n      paging: {\n        currentPage,\n        pageSize: CHILD_PAGE_SIZE,\n        totalPages,\n        totalElements: children.length,\n        nextPage: currentPage < totalPages ? currentPage + 1 : null,\n        prevPage: currentPage > 1 ? currentPage - 1 : null\n      },\n      parentRow\n    } as ServerSideDataResult;\n  }\n\n  private buildFilter(columns: Column[], pagination: Pagination) {\n    const predicates = columns\n      .filter(column => column.filterable && column.externalFilterQuery)\n      .reduce((acc, column) => ({ ...acc, ...column.externalFilterQuery }), {});\n\n    return { currentPage: pagination.currentPage, pageSize: pagination.pageSize, ...predicates };\n  }\n\n  private toTreeNode({ identifier, jsonSchema = {}, tags }: AssetPropertyDefinition): TreeNode {\n    const { title, description, type, properties } = jsonSchema;\n\n    return {\n      id: identifier,\n      title: title ?? identifier,\n      description,\n      type,\n      tags,\n      children: this.mapSchema(properties, identifier),\n      hasChildren: !!properties\n    };\n  }\n\n  private mapSchema(props: Record<string, SchemaNode> | undefined, base = ''): TreeNode[] {\n    if (!props) return [];\n\n    return Object.entries(props).map(([key, schema]) => {\n      const id = base ? `${base}.${key}` : key;\n      const children = this.mapSchema(schema.properties, id);\n      return {\n        id,\n        title: schema.title ?? key,\n        description: schema.description,\n        type: schema.type,\n        children,\n        hasChildren: children.length > 0\n      };\n    });\n  }\n}\n","<c8y-data-grid\n  class=\"content-fullpage d-flex d-col border-top border-bottom\"\n  [title]=\"'Asset properties' | translate\"\n  [loadMoreItemsLabel]=\"'Load more asset properties' | translate\"\n  [loadingItemsLabel]=\"'Loading asset properties…' | translate\"\n  [displayOptions]=\"displayOptions\"\n  [headerActionControls]=\"headerActionControls\"\n  [columns]=\"columns\"\n  [treeGrid]=\"true\"\n  [childNodePagination]=\"childNodePagination\"\n  parentNodeLabelProperty=\"title\"\n  [pagination]=\"pagination\"\n  [serverSideDataCallback]=\"serverSideDataCallback\"\n  [selectable]=\"true\"\n  [singleSelection]=\"true\"\n  (itemsSelect)=\"selectItem($event)\"\n></c8y-data-grid>\n"],"names":["i1.CellRendererContext","i1.AssetPropertyService","i2.BottomDrawerRef","i3.AlertService"],"mappings":"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"}

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

@@ -417,10 +417,10 @@ class DeviceGroupService {
     isDevice(mo) {
         return this.migratedDeviceGroupService.isDevice(mo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceGroupService, deps: [{ token: i1.GroupService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceGroupService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceGroupService, deps: [{ token: i1.GroupService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceGroupService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DeviceGroupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DeviceGroupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -762,10 +762,10 @@ class AssetNodeService {
         }
         return combinedQuery;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNodeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetNodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetNodeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNodeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetNodeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -788,10 +788,10 @@ class AssetNodeFactory {
         }
         return rootNode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNodeFactory, deps: [{ token: AssetNodeService }, { token: ASSET_NAVIGATOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNodeFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetNodeFactory, deps: [{ token: AssetNodeService }, { token: ASSET_NAVIGATOR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetNodeFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetNodeFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetNodeFactory, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: AssetNodeService }, { type: undefined, decorators: [{
                     type: Optional
@@ -892,10 +892,10 @@ class GroupNodeService extends AssetNodeService {
     createChildNode(config) {
         return this.createGroupNode(config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GroupNodeService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GroupNodeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupNodeService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupNodeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GroupNodeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GroupNodeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -970,10 +970,10 @@ class AssetSelectorService extends AssetNodeService {
         }
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetSelectorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetSelectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetSelectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1133,10 +1133,10 @@ class AssetSelectorNodeComponent {
         this.onSelect.emit(selectedMo);
         this.cd.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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: "20.3.15", ngImport: i0, type: AssetSelectorNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector-node', imports: [
                         NgIf,
@@ -1696,8 +1696,8 @@ class AssetSelectorComponent extends AssetSelectorBase {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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,
@@ -1711,7 +1711,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
             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__show-selected': config.showSelected\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    class=\"input-group-sm\"\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 flex-no-shrink\"\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 text-truncate\"\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-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-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", "onOpenToggle"] }, { 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: "20.3.15", ngImport: i0, type: AssetSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector', providers: [
                         {
@@ -1967,8 +1967,8 @@ class MillerViewComponent extends AssetSelectorBase {
             this._cachedPaddingTop = PADDING.NONE;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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),
@@ -1976,7 +1976,7 @@ class MillerViewComponent extends AssetSelectorBase {
             }
         ], viewQueries: [{ propertyName: "millerViewWrapper", first: true, predicate: ["millerViewWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"miller-view-wrapper {{ config.label }}\"\n  [ngStyle]=\"{\n    'padding-top': 'calc('+ getPaddingTop() +' * var(--c8y-unit-base))',\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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MillerViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MillerViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-asset-selector-miller', providers: [
                         {
@@ -2014,8 +2014,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class AssetSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AssetSelectorModule, imports: [CoreModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorModule, imports: [CoreModule,
             CommonModule,
             CollapseModule,
             BsDropdownModule,
@@ -2024,7 +2024,7 @@ class AssetSelectorModule {
             AssetSelectorNodeComponent,
             AssetSelectorComponent,
             MillerViewComponent], exports: [AssetSelectorNodeComponent, AssetSelectorComponent, MillerViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetSelectorModule, providers: [GroupNodeService, AssetSelectorService], imports: [CoreModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorModule, providers: [GroupNodeService, AssetSelectorService], imports: [CoreModule,
             CommonModule,
             CollapseModule,
             BsDropdownModule,
@@ -2033,7 +2033,7 @@ class AssetSelectorModule {
             AssetSelectorComponent,
             MillerViewComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2064,11 +2064,11 @@ class AssetsNavigatorModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetsNavigatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AssetsNavigatorModule, imports: [ModalModule, AssetSelectorModule, DeviceStatusModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetsNavigatorModule, providers: [ModalService, hookNavigator(AssetNodeFactory)], imports: [ModalModule, AssetSelectorModule, DeviceStatusModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetsNavigatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AssetsNavigatorModule, imports: [ModalModule, AssetSelectorModule, DeviceStatusModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetsNavigatorModule, providers: [ModalService, hookNavigator(AssetNodeFactory)], imports: [ModalModule, AssetSelectorModule, DeviceStatusModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AssetsNavigatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AssetsNavigatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],