@c8y/ngx-components 1022.26.1 → 1022.28.2

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

@@ -1686,7 +1686,7 @@ class AssetSelectorComponent extends AssetSelectorBase {
                 multi: true
             },
             AssetSelectorService
-        ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n    [ngClass]=\"{\n      'm-l-auto': !config.singleColumn && config.label.length,\n      'fit-w': config.singleColumn || !config.label.length\n    }\"\n  ></c8y-search-input>\n  <div\n    class=\"bg-inherit d-flex gap-4 fit-w\"\n    *ngIf=\"config.showSelected\"\n    [ngClass]=\"{ 'm-t-4': config.search }\"\n  >\n    <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n    <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n      <ng-container *ngIf=\"!selected.length\">\n        <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n      </ng-container>\n      <span\n        class=\"tag tag--info chip\"\n        *ngFor=\"let selectedItem of selected\"\n      >\n        <button\n          class=\"btn btn-xs btn-clean text-10\"\n          title=\"{{ selectedItem.name }}\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"p-r-16\"\n  *ngIf=\"selectedDevice\"\n>\n  <div class=\"d-flex p-b-4\">\n    <p\n      class=\"text-medium p-t-8 m-r-8\"\n      *ngIf=\"selectedDevice; else multiAssets\"\n    >\n      {{ 'Selected asset' | translate }}\n    </p>\n    <ng-template #multiAssets>\n      <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n    </ng-template>\n    <button\n      class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n      title=\"{{ 'Change' | translate }}\"\n      type=\"button\"\n      (click)=\"$event.stopPropagation(); clearSelectedDevices()\"\n    >\n      {{ 'Change' | translate }}\n    </button>\n  </div>\n  <div class=\"d-flex\">\n    <i\n      class=\"text-success p-l-0 p-r-8\"\n      [c8yIcon]=\"'check-circle'\"\n    ></i>\n    <i\n      class=\"m-r-4 icon-20\"\n      [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n    ></i>\n    <span>{{ selectedDevice.name }}</span>\n  </div>\n</div>\n\n<!-- miller columns header -->\n<div\n  class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n  <div class=\"d-flex\" *ngIf=\"config.singleColumn && index !== 0\">\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    <p\n      class=\"text-12 text-muted text-truncate text-rtl m-b-4\"\n      title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    >\n      {{ rootNode.breadcrumb || rootNode.label | translate }}\n    </p>\n  </div>\n  <div\n    class=\"d-flex a-i-center\"\n    *ngIf=\"config.columnHeaders || config.singleColumn\"\n  >\n    <button\n      class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n      title=\"{{ 'Back' | translate }}\"\n      type=\"button\"\n      *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n      (click)=\"$event.stopPropagation(); back()\"\n    >\n      <i c8yIcon=\"angle-left\"></i>\n    </button>\n    <label\n      class=\"c8y-radio checkbox-inline m-r-8\"\n      *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n    >\n      <input\n        title=\"{{ 'Select group' | translate }}\"\n        type=\"radio\"\n        (change)=\"select(rootNode.mo)\"\n        [checked]=\"isGroupSelected()\"\n      />\n      <span></span>\n    </label>\n\n    <i\n      class=\"icon-20 c8y-icon-duocolor m-r-4\"\n      [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n      *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n    ></i>\n    <p\n      class=\"text-truncate\"\n      title=\"{{ rootNode.label | translate }}\"\n      *ngIf=\"config.columnHeaders\"\n      [ngClass]=\"{\n        'text-label-small': !config.singleColumn,\n        'text-medium': config.singleColumn\n      }\"\n    >\n      {{ rootNode.label | translate }}\n    </p>\n  </div>\n\n  <div\n    *ngIf=\"!rootNode.root && config.showFilter\"\n    [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n  >\n    <div class=\"input-group input-group-sm input-group-search\">\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n        [(ngModel)]=\"filterText\"\n        (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n      />\n      <span class=\"input-group-btn\">\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\n          (click)=\"clearFilters()\"\n          *ngIf=\"filterText.length\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </span>\n    </div>\n  </div>\n</div>\n\n<c8y-asset-selector-node\n  class=\"d-block bg-inherit p-relative\"\n  style=\"z-index: 9\"\n  *ngIf=\"rootNode && !selectedDevice\"\n  [node]=\"rootNode\"\n  [rootNode]=\"rootNode\"\n  [preselected]=\"selected\"\n  [multi]=\"config.multi\"\n  [view]=\"config.view\"\n  [index]=\"index\"\n  [active]=\"active\"\n  [disabled]=\"disabled\"\n  [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n  (isLoadingState)=\"onLoading($event)\"\n  (onSelect)=\"onSelect($event)\"\n  (onDeselect)=\"onDeselect($event)\"\n  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
+        ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    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\"\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-r-8 p-l-4\"\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\n          (click)=\"clearFilters()\"\n          *ngIf=\"filterText.length\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </span>\n    </div>\n  </div>\n</div>\n\n<c8y-asset-selector-node\n  class=\"d-block bg-inherit p-relative\"\n  style=\"z-index: 9\"\n  *ngIf=\"rootNode && !selectedDevice\"\n  [node]=\"rootNode\"\n  [rootNode]=\"rootNode\"\n  [preselected]=\"selected\"\n  [multi]=\"config.multi\"\n  [view]=\"config.view\"\n  [index]=\"index\"\n  [active]=\"active\"\n  [disabled]=\"disabled\"\n  [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n  (isLoadingState)=\"onLoading($event)\"\n  (onSelect)=\"onSelect($event)\"\n  (onDeselect)=\"onDeselect($event)\"\n  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SearchInputComponent, selector: "c8y-search-input", inputs: ["mode", "enableCustomTemplatePlaceholder", "customPlaceholder", "externalTerm", "customDataQuery", "container", "groupsOnly"], outputs: ["filter", "search", "reset", "onClick", "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: "19.2.14", ngImport: i0, type: AssetSelectorComponent, decorators: [{
             type: Component,
@@ -1714,7 +1714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         C8yTranslatePipe,
                         AsyncPipe,
                         GetGroupIconPipe
-                    ], template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    [groupsOnly]=\"config.groupsOnly\"\n    [ngClass]=\"{\n      'm-l-auto': !config.singleColumn && config.label.length,\n      'fit-w': config.singleColumn || !config.label.length\n    }\"\n  ></c8y-search-input>\n  <div\n    class=\"bg-inherit d-flex gap-4 fit-w\"\n    *ngIf=\"config.showSelected\"\n    [ngClass]=\"{ 'm-t-4': config.search }\"\n  >\n    <span class=\"text-label-small m-r-4 a-s-center l-h-1\">{{ 'Selected' | translate }}</span>\n    <div class=\"flex-grow inner-scroll d-flex gap-4 a-i-center\">\n      <ng-container *ngIf=\"!selected.length\">\n        <em class=\"text-12 text-muted d-flex a-i-center fit-h-20\">{{ 'None' | translate }}</em>\n      </ng-container>\n      <span\n        class=\"tag tag--info chip\"\n        *ngFor=\"let selectedItem of selected\"\n      >\n        <button\n          class=\"btn btn-xs btn-clean text-10\"\n          title=\"{{ selectedItem.name }}\"\n          [disabled]=\"disabled\"\n          type=\"button\"\n          (click)=\"config.multi ? deselect(selectedItem) : deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        {{ selectedItem.name || (ASSET_CONST | translate: { assetId: selectedItem.id }) }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"p-r-16\"\n  *ngIf=\"selectedDevice\"\n>\n  <div class=\"d-flex p-b-4\">\n    <p\n      class=\"text-medium p-t-8 m-r-8\"\n      *ngIf=\"selectedDevice; else multiAssets\"\n    >\n      {{ 'Selected asset' | translate }}\n    </p>\n    <ng-template #multiAssets>\n      <p class=\"text-medium m-r-8\">{{ 'Selected assets' | translate }}</p>\n    </ng-template>\n    <button\n      class=\"btn btn-default btn-xs a-s-center m-t-4 m-l-auto\"\n      title=\"{{ 'Change' | translate }}\"\n      type=\"button\"\n      (click)=\"$event.stopPropagation(); clearSelectedDevices()\"\n    >\n      {{ 'Change' | translate }}\n    </button>\n  </div>\n  <div class=\"d-flex\">\n    <i\n      class=\"text-success p-l-0 p-r-8\"\n      [c8yIcon]=\"'check-circle'\"\n    ></i>\n    <i\n      class=\"m-r-4 icon-20\"\n      [c8yIcon]=\"selectedDevice | getGroupIcon | async\"\n    ></i>\n    <span>{{ selectedDevice.name }}</span>\n  </div>\n</div>\n\n<!-- miller columns header -->\n<div\n  class=\"miller-column__header sticky-top bg-inherit separator-bottom\"\n  *ngIf=\"\n    config.view === 'miller' &&\n    ((config.showFilter && !rootNode.root) || config.columnHeaders) &&\n    !selectedDevice\n  \"\n  [ngClass]=\"{ 'p-t-8': config.search }\"\n>\n  <div class=\"d-flex\" *ngIf=\"config.singleColumn && index !== 0\">\n    <i\n      class=\"m-r-4\"\n      c8yIcon=\"home\"\n    ></i>\n    <p\n      class=\"text-12 text-muted text-truncate text-rtl m-b-4\"\n      title=\"{{ rootNode.breadcrumb || rootNode.label | translate }}\"\n    >\n      {{ rootNode.breadcrumb || rootNode.label | translate }}\n    </p>\n  </div>\n  <div\n    class=\"d-flex a-i-center\"\n    *ngIf=\"config.columnHeaders || config.singleColumn\"\n  >\n    <button\n      class=\"btn btn-default btn-xs m-r-8 p-t-0 p-b-0 p-l-4 p-r-4 l-h-1\"\n      title=\"{{ 'Back' | translate }}\"\n      type=\"button\"\n      *ngIf=\"config.singleColumn && !rootNode.root && index !== 0\"\n      (click)=\"$event.stopPropagation(); back()\"\n    >\n      <i c8yIcon=\"angle-left\"></i>\n    </button>\n    <label\n      class=\"c8y-radio checkbox-inline m-r-8\"\n      *ngIf=\"!rootNode.root && index === 0 && (config.groupsSelectable || !rootNode.isGroup())\"\n    >\n      <input\n        title=\"{{ 'Select group' | translate }}\"\n        type=\"radio\"\n        (change)=\"select(rootNode.mo)\"\n        [checked]=\"isGroupSelected()\"\n      />\n      <span></span>\n    </label>\n\n    <i\n      class=\"icon-20 c8y-icon-duocolor m-r-4\"\n      [c8yIcon]=\"this.rootNode.mo | getGroupIcon: true : this.rootNode.icon | async\"\n      *ngIf=\"config.columnHeaders && (config.singleColumn || (!rootNode.root && index === 0))\"\n    ></i>\n    <p\n      class=\"text-truncate\"\n      title=\"{{ rootNode.label | translate }}\"\n      *ngIf=\"config.columnHeaders\"\n      [ngClass]=\"{\n        'text-label-small': !config.singleColumn,\n        'text-medium': config.singleColumn\n      }\"\n    >\n      {{ rootNode.label | translate }}\n    </p>\n  </div>\n\n  <div\n    *ngIf=\"!rootNode.root && config.showFilter\"\n    [ngClass]=\"{ 'p-t-4': config.columnHeaders }\"\n  >\n    <div class=\"input-group input-group-sm input-group-search\">\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'Filter this column\u2026' | translate }}\"\n        [(ngModel)]=\"filterText\"\n        (keyup.enter)=\"applyFilter('*' + filterText + '*')\"\n      />\n      <span class=\"input-group-btn\">\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\n          (click)=\"clearFilters()\"\n          *ngIf=\"filterText.length\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </span>\n    </div>\n  </div>\n</div>\n\n<c8y-asset-selector-node\n  class=\"d-block bg-inherit p-relative\"\n  style=\"z-index: 9\"\n  *ngIf=\"rootNode && !selectedDevice\"\n  [node]=\"rootNode\"\n  [rootNode]=\"rootNode\"\n  [preselected]=\"selected\"\n  [multi]=\"config.multi\"\n  [view]=\"config.view\"\n  [index]=\"index\"\n  [active]=\"active\"\n  [disabled]=\"disabled\"\n  [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n  (isLoadingState)=\"onLoading($event)\"\n  (onSelect)=\"onSelect($event)\"\n  (onDeselect)=\"onDeselect($event)\"\n  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n" }]
+                    ], template: "<div\n  class=\"bg-inherit p-t-8 p-b-8 separator-bottom p-r-16 p-l-16 sticky-top\"\n  [ngStyle]=\"{ 'z-index': config.singleColumn && config.search ? '30' : '20' }\"\n  #header\n  [ngClass]=\"{\n    'p-absolute miller-column__selection d-flex flex-wrap a-i-center': config.view === 'miller',\n    'miller-column__search': config.search,\n    'miller-column__multi': config.multi\n  }\"\n  *ngIf=\"\n    !selectedDevice &&\n    index === 0 &&\n    (config.search || config.multi || config.label?.length || config.showSelected)\n  \"\n>\n  <p\n    class=\"text-medium flex-no-shrink a-s-center\"\n    [ngClass]=\"{\n      'm-b-4': config.search && root && config.singleColumn,\n      'm-r-8': !config.singleColumn && !config.search,\n      'fit-w': config.singleColumn\n    }\"\n    *ngIf=\"config.label?.length\"\n  >\n    {{ config.label | translate }}\n  </p>\n  <c8y-search-input\n    [ngStyle]=\"{ 'min-width': !config.singleColumn && config.label.length ? '50%' : 'inherit' }\"\n    *ngIf=\"config.search && root\"\n    (onClick)=\"onSearchResultClick($event)\"\n    (reset)=\"onSearchResultReset($event)\"\n    [mode]=\"'select'\"\n    [container]=\"container\"\n    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\"\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-r-8 p-l-4\"\n          title=\"{{ 'Apply filter' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilter('*' + filterText + '*')\"\n        >\n          <i c8yIcon=\"filter\"></i>\n        </button>\n        <button\n          class=\"btn btn-dot p-r-8 p-l-4\"\n          title=\" {{ 'Clear filters' | translate }}\"\n          type=\"button\"\n          (click)=\"clearFilters()\"\n          *ngIf=\"filterText.length\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n      </span>\n    </div>\n  </div>\n</div>\n\n<c8y-asset-selector-node\n  class=\"d-block bg-inherit p-relative\"\n  style=\"z-index: 9\"\n  *ngIf=\"rootNode && !selectedDevice\"\n  [node]=\"rootNode\"\n  [rootNode]=\"rootNode\"\n  [preselected]=\"selected\"\n  [multi]=\"config.multi\"\n  [view]=\"config.view\"\n  [index]=\"index\"\n  [active]=\"active\"\n  [disabled]=\"disabled\"\n  [handleNextMillerViewColumn]=\"handleNextMillerViewColumn.bind(this)\"\n  (isLoadingState)=\"onLoading($event)\"\n  (onSelect)=\"onSelect($event)\"\n  (onDeselect)=\"onDeselect($event)\"\n  [ngClass]=\"{ 'collapse show': !rootNode.root && !rootNode.hidden && config.view !== 'miller' }\"\n></c8y-asset-selector-node>\n" }]
         }], ctorParameters: () => [{ type: GroupNodeService }, { type: i2.InventoryService }, { type: AssetSelectorService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], active: [{