@c8y/ngx-components 1024.18.1 → 1024.18.9

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

@@ -18,6 +18,7 @@ import { isArray, isNumber, isString, isObject } from 'lodash';
 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';
+import * as i4$1 from '@angular/cdk/a11y';
 
 var AssetsNavigatorAction;
 (function (AssetsNavigatorAction) {
@@ -1381,6 +1382,14 @@ class UnassignedDevicesNode extends GroupNode {
  * Displays a hierarchical tree selector for assets.
  */
 class AssetSelectorComponent extends AssetSelectorBase {
+    /**
+     * True when this column sits behind another one in a single column miller view, which scrolls it
+     * out of sight. Such a column is marked `inert` so that it leaves the tab order and the
+     * accessibility tree, instead of collecting invisible tab stops.
+     */
+    get isScrolledOutOfView() {
+        return this.config.view === 'miller' && this.config.singleColumn && !!this.active;
+    }
     /**
      * @ignore only DI
      */
@@ -1699,7 +1708,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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: "21.2.19", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 +1720,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__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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (\n  !selectedDevice &&\n  index === 0 &&\n  (config.search || config.multi || config.label?.length || config.showSelected)\n) {\n  <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  >\n    @if (config.label?.length) {\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      >\n        {{ config.label | translate }}\n      </p>\n    }\n    @if (config.search && root) {\n      <c8y-search-input\n        class=\"input-group-sm\"\n        [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\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    }\n    @if (config.showSelected) {\n      <div\n        class=\"bg-inherit d-flex gap-4 fit-w\"\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          @if (!selected.length) {\n            <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n          }\n          @for (selectedItem of selected; track selectedItem) {\n            <span class=\"tag tag--info chip flex-no-shrink\">\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.name }}\"\n                type=\"button\"\n                [disabled]=\"disabled\"\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          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (selectedDevice) {\n  <div class=\"p-r-16\">\n    <div class=\"d-flex p-b-4\">\n      @if (selectedDevice) {\n        <p class=\"text-medium p-t-8 m-r-8\">\n          {{ 'Selected asset' | translate }}\n        </p>\n      } @else {\n        <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n      }\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\n<!-- miller columns header -->\n@if (\n  config.view === 'miller' &&\n  ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n  !selectedDevice\n) {\n  <div\n    class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n    [attr.inert]=\"isScrolledOutOfView ? '' : null\"\n    [ngClass]=\"{ 'p-t-8': config.search }\"\n  >\n    @if (config.singleColumn && index !== 0) {\n      <div class=\"d-flex\">\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    }\n    @if (config.columnHeaders || config.singleColumn) {\n      <div class=\"d-flex a-i-center\">\n        @if (config.singleColumn && !rootNode.root && index !== 0) {\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            (click)=\"$event.stopPropagation(); back()\"\n          >\n            <i c8yIcon=\"angle-left\"></i>\n          </button>\n        }\n        @if (!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())) {\n          <label class=\"c8y-radio checkbox-inline m-r-8\">\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\n        @if (config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))) {\n          <i\n            class=\"icon-20 c8y-icon-duocolor m-r-4\"\n            [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n          ></i>\n        }\n        @if (config.columnHeaders) {\n          <p\n            class=\"text-truncate\"\n            title=\"{{ rootNode.label | translate }}\"\n            [ngClass]=\"{\n              'text-label-small': !config.singleColumn,\n              'text-medium': config.singleColumn\n            }\"\n          >\n            {{ rootNode.label | translate }}\n          </p>\n        }\n      </div>\n    }\n\n    @if (!rootNode.root && config.showFilter) {\n      <div [ngClass]=\"{ 'p-t-4': config.columnHeaders }\">\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            @if (filterText.length) {\n              <button\n                class=\"btn btn-dot p-l-4\"\n                title=\" {{ 'Clear filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n            }\n          </span>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (rootNode && !selectedDevice) {\n  <c8y-asset-selector-node\n    class=\"d-block bg-inherit p-relative\"\n    style=\"z-index: 9\"\n    [attr.inert]=\"isScrolledOutOfView ? '' : null\"\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}\n", dependencies: [{ 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: 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AssetSelectorComponent, decorators: [{
             type: Component,
@@ -1728,18 +1737,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         },
                         AssetSelectorService
                     ], imports: [
-                        NgIf,
                         NgStyle,
                         NgClass,
                         SearchInputComponent,
-                        NgFor,
                         IconDirective,
                         FormsModule,
                         AssetSelectorNodeComponent,
                         C8yTranslatePipe,
                         AsyncPipe,
                         GetGroupIconPipe
-                    ], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "@if (\n  !selectedDevice &&\n  index === 0 &&\n  (config.search || config.multi || config.label?.length || config.showSelected)\n) {\n  <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  >\n    @if (config.label?.length) {\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      >\n        {{ config.label | translate }}\n      </p>\n    }\n    @if (config.search && root) {\n      <c8y-search-input\n        class=\"input-group-sm\"\n        [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\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    }\n    @if (config.showSelected) {\n      <div\n        class=\"bg-inherit d-flex gap-4 fit-w\"\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          @if (!selected.length) {\n            <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n          }\n          @for (selectedItem of selected; track selectedItem) {\n            <span class=\"tag tag--info chip flex-no-shrink\">\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ selectedItem.name }}\"\n                type=\"button\"\n                [disabled]=\"disabled\"\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          }\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (selectedDevice) {\n  <div class=\"p-r-16\">\n    <div class=\"d-flex p-b-4\">\n      @if (selectedDevice) {\n        <p class=\"text-medium p-t-8 m-r-8\">\n          {{ 'Selected asset' | translate }}\n        </p>\n      } @else {\n        <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n      }\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\n<!-- miller columns header -->\n@if (\n  config.view === 'miller' &&\n  ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n  !selectedDevice\n) {\n  <div\n    class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n    [attr.inert]=\"isScrolledOutOfView ? '' : null\"\n    [ngClass]=\"{ 'p-t-8': config.search }\"\n  >\n    @if (config.singleColumn && index !== 0) {\n      <div class=\"d-flex\">\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    }\n    @if (config.columnHeaders || config.singleColumn) {\n      <div class=\"d-flex a-i-center\">\n        @if (config.singleColumn && !rootNode.root && index !== 0) {\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            (click)=\"$event.stopPropagation(); back()\"\n          >\n            <i c8yIcon=\"angle-left\"></i>\n          </button>\n        }\n        @if (!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())) {\n          <label class=\"c8y-radio checkbox-inline m-r-8\">\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\n        @if (config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))) {\n          <i\n            class=\"icon-20 c8y-icon-duocolor m-r-4\"\n            [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n          ></i>\n        }\n        @if (config.columnHeaders) {\n          <p\n            class=\"text-truncate\"\n            title=\"{{ rootNode.label | translate }}\"\n            [ngClass]=\"{\n              'text-label-small': !config.singleColumn,\n              'text-medium': config.singleColumn\n            }\"\n          >\n            {{ rootNode.label | translate }}\n          </p>\n        }\n      </div>\n    }\n\n    @if (!rootNode.root && config.showFilter) {\n      <div [ngClass]=\"{ 'p-t-4': config.columnHeaders }\">\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            @if (filterText.length) {\n              <button\n                class=\"btn btn-dot p-l-4\"\n                title=\" {{ 'Clear filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n            }\n          </span>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (rootNode && !selectedDevice) {\n  <c8y-asset-selector-node\n    class=\"d-block bg-inherit p-relative\"\n    style=\"z-index: 9\"\n    [attr.inert]=\"isScrolledOutOfView ? '' : null\"\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}\n" }]
         }], ctorParameters: () => [{ type: GroupNodeService }, { type: i2.InventoryService }, { type: AssetSelectorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], active: [{
@@ -1776,12 +1783,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }] } });
 
 class MillerViewComponent extends AssetSelectorBase {
-    constructor(groupNodeService, inventory, assetSelectorService, cd) {
+    constructor(groupNodeService, inventory, assetSelectorService, cd, interactivityChecker) {
         super(groupNodeService, inventory, assetSelectorService);
         this.groupNodeService = groupNodeService;
         this.inventory = inventory;
         this.assetSelectorService = assetSelectorService;
         this.cd = cd;
+        this.interactivityChecker = interactivityChecker;
         /**
          * Config object containing all options for the asset selector.
          */
@@ -1820,6 +1828,14 @@ class MillerViewComponent extends AssetSelectorBase {
          * Cached padding top value to avoid recalculating on every change detection cycle.
          */
         this._cachedPaddingTop = null;
+        /**
+         * Set while the view waits for the column that just became visible to be focusable.
+         */
+        this.shouldFocusVisibleColumn = false;
+        /**
+         * Guards the deferred focus callbacks, which outlive the component when it is closed mid-animation.
+         */
+        this.destroyed = false;
     }
     /**
      * @ignore
@@ -1843,6 +1859,12 @@ class MillerViewComponent extends AssetSelectorBase {
         }
         this.columns.push(this.rootNode);
     }
+    /**
+     * @ignore
+     */
+    ngOnDestroy() {
+        this.destroyed = true;
+    }
     /**
      * @ignore
      */
@@ -1872,6 +1894,9 @@ class MillerViewComponent extends AssetSelectorBase {
      * Create a new column with the selected node as root.
      */
     addNewColumn(node) {
+        /* read before the columns change: applying `inert` to the column left behind blurs whatever was
+           focused in it, so afterwards the active element is always the body */
+        const focusWasInView = this.millerViewWrapper.nativeElement.contains(document.activeElement);
         const level = node.index;
         this.selectedDevice = node.selectedDevices || undefined;
         if (node.root) {
@@ -1898,6 +1923,12 @@ class MillerViewComponent extends AssetSelectorBase {
                 window.requestAnimationFrame(() => (col.millerViewWrapper.nativeElement.scrollLeft = 55000));
             }, 700);
         }
+        /* assigned rather than only set: a request left over from an earlier column change can no longer
+           be satisfied, and would otherwise move focus on the next unrelated load */
+        this.shouldFocusVisibleColumn = focusWasInView;
+        if (this.shouldFocusVisibleColumn) {
+            window.requestAnimationFrame(() => this.focusVisibleColumn());
+        }
     }
     /**
      * Change the loading state of the asset selector.
@@ -1908,6 +1939,10 @@ class MillerViewComponent extends AssetSelectorBase {
         this.columnIndex = event.index;
         this.selectedDevice = event.selectedDevice;
         this.cd.detectChanges();
+        if (this.shouldFocusVisibleColumn && !event.loading) {
+            // a column added for a group starts out empty, so its rows only exist once they are loaded
+            window.requestAnimationFrame(() => this.focusVisibleColumn());
+        }
     }
     /**
      * Add the selected node to the selected array.
@@ -1923,6 +1958,35 @@ class MillerViewComponent extends AssetSelectorBase {
         }
         this.deselect(event.change.item);
     }
+    /**
+     * Focuses the column that just opened, so that a keyboard user moves forward with it instead of
+     * tabbing through the rest of the column they came from. Lands on the back button when a single
+     * column renders one, otherwise on the first tab stop of the column, which is its filter or first
+     * row.
+     */
+    focusVisibleColumn() {
+        if (!this.shouldFocusVisibleColumn || this.destroyed) {
+            return;
+        }
+        const columns = Array.from(this.millerViewWrapper.nativeElement.querySelectorAll('.miller-column'));
+        const candidates = Array.from(columns[columns.length - 1]?.querySelectorAll('a[href], button, input, select, textarea, [tabindex]') || []);
+        const target = candidates.find(
+        // the selection header stays visible for all columns, so skip it and land in the column itself
+        candidate => !candidate.closest('.miller-column__selection') &&
+            /* both checks are needed: isTabbable() only reads tabIndex, and a disabled radio reports
+               tabIndex 0 in Chrome, so on its own it would hand focus to an element that cannot take it */
+            this.interactivityChecker.isFocusable(candidate) &&
+            this.interactivityChecker.isTabbable(candidate));
+        if (!target) {
+            // nothing to focus yet, the column is still loading its rows; onLoad tries again
+            return;
+        }
+        this.shouldFocusVisibleColumn = false;
+        /* the wrapper is mid smooth-scroll towards the new column, and focusing an element scrolls it
+           into view, which cancels that animation and leaves the column stranded until the Safari
+           workaround in addNewColumn re-issues the scroll 700ms later */
+        target.focus({ preventScroll: true });
+    }
     /**
      * Calculates and caches the padding top value based on configuration options.
      *
@@ -1969,14 +2033,14 @@ class MillerViewComponent extends AssetSelectorBase {
             this._cachedPaddingTop = PADDING.NONE;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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: "21.2.19", 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: "21.2.19", ngImport: i0, type: MillerViewComponent, deps: [{ token: GroupNodeService }, { token: i2.InventoryService }, { token: AssetSelectorService }, { token: i0.ChangeDetectorRef }, { token: i4$1.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 }], 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", "progressLabel", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+        ], 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  <!-- track the node itself: a column replaced in place must get a fresh c8y-asset-selector, because\n       the selector loads its tree in ngOnInit and its ngOnChanges does not react to rootNode -->\n  @for (column of columns; track column; let i = $index) {\n    <div class=\"miller-column bg-inherit\">\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      @if (isLoading && columnIndex === i && !selectedDevice) {\n        <div class=\"p-relative p-b-64\">\n          <c8y-loading></c8y-loading>\n        </div>\n      }\n\n      @if (!column.children.length && !isLoading) {\n        <div class=\"p-l-8 p-r-8\">\n          @if (!filterText) {\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              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          } @else {\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          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MillerViewComponent, decorators: [{
             type: Component,
@@ -1989,14 +2053,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     ], imports: [
                         NgStyle,
                         NgClass,
-                        NgFor,
                         AssetSelectorComponent,
-                        NgIf,
                         LoadingComponent,
                         EmptyStateComponent,
                         C8yTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
-        }], ctorParameters: () => [{ type: GroupNodeService }, { type: i2.InventoryService }, { type: AssetSelectorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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  <!-- track the node itself: a column replaced in place must get a fresh c8y-asset-selector, because\n       the selector loads its tree in ngOnInit and its ngOnChanges does not react to rootNode -->\n  @for (column of columns; track column; let i = $index) {\n    <div class=\"miller-column bg-inherit\">\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      @if (isLoading && columnIndex === i && !selectedDevice) {\n        <div class=\"p-relative p-b-64\">\n          <c8y-loading></c8y-loading>\n        </div>\n      }\n\n      @if (!column.children.length && !isLoading) {\n        <div class=\"p-l-8 p-r-8\">\n          @if (!filterText) {\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              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          } @else {\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          }\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: GroupNodeService }, { type: i2.InventoryService }, { type: AssetSelectorService }, { type: i0.ChangeDetectorRef }, { type: i4$1.InteractivityChecker }], propDecorators: { config: [{
                 type: Input
             }], asset: [{
                 type: Input