@c8y/ngx-components 1021.7.0 → 1021.13.3

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

@@ -1083,11 +1083,11 @@ class AssetSelectorNodeComponent {
         this.cd.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetSelectorNodeComponent, deps: [{ token: i1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: AssetSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AssetSelectorNodeComponent, 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        [title]=\"expandTitle\"\n        class=\"collapse-btn btn-dot\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n        [attr.aria-expanded]=\"node.open\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\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 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   \n  </div>\n  <div\n    class=\"collapse\"\n    *ngIf=\"node.countChildren()\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n    [attr.role]=\"'group'\"\n  >\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [preselected]=\"preselected || []\"\n      [disabled]=\"disabled\"\n      [multi]=\"multi\"\n      [active]=\"active\"\n      [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n  <div\n    class=\"miller-column__item bg-inherit\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\n  >\n    <div\n      class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\n      <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n        <input\n          id=\"nodeLabel2\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isSelected()\"\n          [disabled]=\"disabled || !node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span\n          class=\"sr-only\"\n          for=\"nodeLabel2\"\n          translate\n        >\n          Node label\n        </span>\n      </label>\n    </div>\n\n    <button\n      title=\"{{ breadcrumb | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{\n        'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-4 m-t-4':\n          node.toString() === 'LoadMoreNode',\n        'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n        'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n      }\"\n      (click)=\"millerViewClick(node)\"\n    >\n      <i\n        class=\"c8y-icon m-r-4\"\n        [c8yIcon]=\"node.icon\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p\n          class=\"text-truncate\"\n          title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        >\n          {{ node.translateLabel ? (node.label | translate) : node.label }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small\n          class=\"text-muted text-truncate\"\n          title=\"{{ breadcrumb }}\"\n          *ngIf=\"showPath\"\n        >\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span\n        class=\"p-l-4 m-l-auto\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div\n    role=\"list\"\n    *ngIf=\"node\"\n    [ngClass]=\"{ hidden: node !== rootNode }\"\n  >\n    <c8y-asset-selector-node\n      role=\"listitem\"\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [rootNode]=\"rootNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [view]=\"view\"\n      [index]=\"index\"\n      [active]=\"active\"\n      [disabled]=\"disabled\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AssetSelectorNodeComponent, 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        [title]=\"expandTitle\"\n        class=\"collapse-btn btn-dot\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n        [attr.aria-expanded]=\"node.open\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\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   \n  </div>\n  <div\n    class=\"collapse\"\n    *ngIf=\"node.countChildren()\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n    [attr.role]=\"'group'\"\n  >\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [preselected]=\"preselected || []\"\n      [disabled]=\"disabled\"\n      [multi]=\"multi\"\n      [active]=\"active\"\n      [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n  <div\n    class=\"miller-column__item bg-inherit\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\n  >\n    <div\n      class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\n      <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n        <input\n          id=\"nodeLabel2\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isSelected()\"\n          [disabled]=\"disabled || !node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span\n          class=\"sr-only\"\n          for=\"nodeLabel2\"\n          translate\n        >\n          Node label\n        </span>\n      </label>\n    </div>\n\n    <button\n      title=\"{{ breadcrumb | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{\n        'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-4 m-t-4':\n          node.toString() === 'LoadMoreNode',\n        'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n        'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n      }\"\n      (click)=\"millerViewClick(node)\"\n    >\n      <i\n        class=\"c8y-icon m-r-4\"\n        [c8yIcon]=\"node.icon\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p\n          class=\"text-truncate\"\n          title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        >\n          {{ node.translateLabel ? (node.label | translate) : node.label }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small\n          class=\"text-muted text-truncate\"\n          title=\"{{ breadcrumb }}\"\n          *ngIf=\"showPath\"\n        >\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span\n        class=\"p-l-4 m-l-auto\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div\n    role=\"list\"\n    *ngIf=\"node\"\n    [ngClass]=\"{ hidden: node !== rootNode }\"\n  >\n    <c8y-asset-selector-node\n      role=\"listitem\"\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [rootNode]=\"rootNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [view]=\"view\"\n      [index]=\"index\"\n      [active]=\"active\"\n      [disabled]=\"disabled\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: AssetSelectorNodeComponent, selector: "c8y-asset-selector-node", inputs: ["node", "rootNode", "preselected", "showPath", "multi", "view", "index", "active", "handleNextMillerViewColumn", "disabled"], outputs: ["isLoadingState", "onSelect", "onDeselect"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetSelectorNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-asset-selector-node', template: "<!-- Hierarchy tree -->\n<div\n  class=\"c8y-asset-selector__item\"\n  [ngStyle]=\"{\n    'margin-left': level > 1 ? 16 + 'px' : '0'\n  }\"\n  *ngIf=\"view === 'tree'\"\n  [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n  [ngClass]=\"{\n    'c8y-asset-selector__item--more': node?.icon === 'plus',\n    'c8y-asset-selector__item--start': level === 0\n  }\"\n>\n  <div\n    class=\"c8y-asset-selector__node\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden\"\n    [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n    [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n  >\n   <!-- expand button -->\n    <div class=\"c8y-asset-selector__node__btn-spacer\">\n      <button\n        [title]=\"expandTitle\"\n        class=\"collapse-btn btn-dot\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n        [attr.aria-expanded]=\"node.open\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\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 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   \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" }]
+            args: [{ selector: 'c8y-asset-selector-node', template: "<!-- Hierarchy tree -->\n<div\n  class=\"c8y-asset-selector__item\"\n  [ngStyle]=\"{\n    'margin-left': level > 1 ? 16 + 'px' : '0'\n  }\"\n  *ngIf=\"view === 'tree'\"\n  [attr.role]=\"view === 'tree' ? 'tree' : 'list'\"\n  [ngClass]=\"{\n    'c8y-asset-selector__item--more': node?.icon === 'plus',\n    'c8y-asset-selector__item--start': level === 0\n  }\"\n>\n  <div\n    class=\"c8y-asset-selector__node\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden\"\n    [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n    [ngClass]=\"{ 'c8y-asset-selector__node--open': node?.open }\"\n  >\n   <!-- expand button -->\n    <div class=\"c8y-asset-selector__node__btn-spacer\">\n      <button\n        [title]=\"expandTitle\"\n        class=\"collapse-btn btn-dot\"\n        (click)=\"click()\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n        [attr.aria-expanded]=\"node.open\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </button>\n    </div>\n    <div class=\"d-flex a-i-center p-t-4 p-b-4 \" *ngIf=\"node.toString() !== 'LoadMoreNode'\">\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   \n  </div>\n  <div\n    class=\"collapse\"\n    *ngIf=\"node.countChildren()\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n    [attr.role]=\"'group'\"\n  >\n    <c8y-asset-selector-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [preselected]=\"preselected || []\"\n      [disabled]=\"disabled\"\n      [multi]=\"multi\"\n      [active]=\"active\"\n      [attr.role]=\"view === 'tree' ? 'treeitem' : 'listitem'\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n\n<!-- Miller columns -->\n<div *ngIf=\"view === 'miller'\">\n  <div\n    class=\"miller-column__item bg-inherit\"\n    title=\"{{ breadcrumb | translate }}\"\n    *ngIf=\"node && !node.root && !node.hidden && node !== rootNode\"\n    [ngClass]=\"{\n      active: isActive(),\n      'miller-column__item--more': node.toString() === 'LoadMoreNode'\n    }\"\n  >\n    <div\n      class=\"m-l-4 m-r-4 miller-column__item__checkbox\"\n      *ngIf=\"node.toString() !== 'LoadMoreNode'\"\n    >\n      <label [ngClass]=\"{ 'c8y-radio': !multi, 'c8y-checkbox': multi }\">\n        <input\n          id=\"nodeLabel2\"\n          [type]=\"multi ? 'checkbox' : 'radio'\"\n          (change)=\"selected(node)\"\n          [checked]=\"isSelected()\"\n          [disabled]=\"disabled || !node.groupsSelectable && node.isGroup()\"\n        />\n        <span></span>\n        <span\n          class=\"sr-only\"\n          for=\"nodeLabel2\"\n          translate\n        >\n          Node label\n        </span>\n      </label>\n    </div>\n\n    <button\n      title=\"{{ breadcrumb | translate }}\"\n      type=\"button\"\n      [ngClass]=\"{\n        'btn btn-default btn-sm d-flex flex-grow j-c-center m-l-16 m-r-16 m-b-4 m-t-4':\n          node.toString() === 'LoadMoreNode',\n        'miller-column__item__btn': node.toString() !== 'LoadMoreNode',\n        'btn-pending': node.loading && node.toString() === 'LoadMoreNode'\n      }\"\n      (click)=\"millerViewClick(node)\"\n    >\n      <i\n        class=\"c8y-icon m-r-4\"\n        [c8yIcon]=\"node.icon\"\n        [ngClass]=\"{ 'c8y-icon-duocolor text-16': node.toString() !== 'LoadMoreNode' }\"\n      ></i>\n      <div class=\"text-left text-truncate\">\n        <p\n          class=\"text-truncate\"\n          title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        >\n          {{ node.translateLabel ? (node.label | translate) : node.label }}\n        </p>\n        <!-- use just for search results to display the path -->\n        <small\n          class=\"text-muted text-truncate\"\n          title=\"{{ breadcrumb }}\"\n          *ngIf=\"showPath\"\n        >\n          <em>{{ breadcrumb }}</em>\n        </small>\n        <!-- up to here -->\n      </div>\n      <span\n        class=\"p-l-4 m-l-auto\"\n        *ngIf=\"node.isGroup() || node.hasChildDevices()\"\n      >\n        <i c8yIcon=\"angle-right\"></i>\n      </span>\n    </button>\n  </div>\n\n  <div\n    role=\"list\"\n    *ngIf=\"node\"\n    [ngClass]=\"{ hidden: node !== rootNode }\"\n  >\n    <c8y-asset-selector-node\n      role=\"listitem\"\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      [rootNode]=\"rootNode\"\n      [preselected]=\"preselected || []\"\n      [multi]=\"multi\"\n      [view]=\"view\"\n      [index]=\"index\"\n      [active]=\"active\"\n      [disabled]=\"disabled\"\n      [handleNextMillerViewColumn]=\"handleNextMillerViewColumn\"\n      (onSelect)=\"onSelect.emit($event)\"\n      (onDeselect)=\"onDeselect.emit($event)\"\n    ></c8y-asset-selector-node>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: AssetSelectorService }], propDecorators: { node: [{
                 type: Input
             }], rootNode: [{