@c8y/ngx-components 1017.0.180 → 1017.0.182

package/fesm2020/c8y-ngx-components.mjs

@@ -5019,7 +5019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
 /**
  * AssetTypesService is being used to manage a cache of all existing asset types.
  * This service is injected in the AssetOverviewNavigationFactory class, which will trigger
- * the initialization of the cache as the contstructor is called.
+ * the initialization of the cache as the constructor is called.
  */
 class AssetTypesService {
     constructor(inventory, apiService, appStateService) {
@@ -5031,9 +5031,10 @@ class AssetTypesService {
                 __and: [{ __has: 'c8y_IsAssetType' }, { name: 'group' }]
             }
         };
-        this.assetTypesCache = {};
         this.DEFAULT_GROUP_ICON = 'c8y-group';
         this.DEFAULT_GROUP_ICON_OPEN = 'c8y-group-open';
+        this.assetTypesCache = {};
+        this.isCacheSet = false;
         this.appStateService.currentUser
             .pipe(map(user => user?.id), distinctUntilChanged(), switchMap(userId => {
             if (userId) {
@@ -5049,7 +5050,7 @@ class AssetTypesService {
     }
     /**
      * Queries available asset types and adds every asset type to the local cache.
-     * @returns void.
+     * @returns IManagedObject table of asset types.
      */
     async initAssetTypesCache() {
         const { data } = await this.inventory.list({
@@ -5058,7 +5059,8 @@ class AssetTypesService {
             pageSize: 2000
         });
         data.forEach(assetType => this.addAssetType(assetType));
-        return;
+        this.isCacheSet = true;
+        return data;
     }
     /**
      * Returns an asset type from the cache based on the unique name property.
@@ -5089,42 +5091,21 @@ class AssetTypesService {
      * Defaults to false.
      * @returns Returns an icon for a given asset type.
      */
-    getIcon(type, open = false) {
+    async getIcon(type, open = false) {
+        if (!this.isCacheSet) {
+            try {
+                await this.initAssetTypesCache();
+            }
+            catch (error) {
+                // do nothing
+            }
+        }
         const assetType = this.getAssetTypeByName(type);
-        const icon = assetType?.c8y_IsAssetType?.icon?.name || this.getDefaultGroupIcon(open);
-        return icon;
+        return assetType?.c8y_IsAssetType?.icon?.name || this.getDefaultGroupIcon(open);
     }
     getDefaultGroupIcon(open = false) {
         return open ? this.DEFAULT_GROUP_ICON_OPEN : this.DEFAULT_GROUP_ICON;
     }
-    /**
-     * Checks if the default asset type 'group' already exists and if it doesn't it will be created.
-     * @returns void.
-     */
-    async createAssetTypeGroupIfNotExists() {
-        const managedObjects = (await this.inventory.listQuery(this.ASSET_TYPE_GROUP_QUERY)).data;
-        if (managedObjects.length > 0) {
-            return;
-        }
-        // if default group asset type doesn't exit create it
-        await this.createDefaultAssetTypeGroup();
-    }
-    /**
-     * create the default asset type group in the Inventory.
-     */
-    async createDefaultAssetTypeGroup() {
-        await this.inventory.create({
-            label: 'Group',
-            name: 'group',
-            description: 'Default group asset type',
-            c8y_IsAssetType: {
-                icon: 'folder',
-                propertyIds: [],
-                allowedAssetTypeIds: [],
-                isNoneChildAssetsAllowed: 'false'
-            }
-        });
-    }
     /**
      * Add an asset type to the local cache.
      * @param assetType Asset type which should be added to the cache.
@@ -5294,10 +5275,10 @@ class GroupService {
      * @param open Determines whether the method should return an alternative icon showing the open state.
      * @returns Returns an icon.
      */
-    getIcon(mo, open = false) {
+    async getIcon(mo, open = false) {
         const genericMoType = this.determineMoType(mo);
         if (genericMoType === 'asset') {
-            return this.getAssetCustomIcon(mo.type, open);
+            return await this.getAssetCustomIcon(mo.type, open);
         }
         const typeIcons = this.getDefaultIcon(genericMoType);
         return (open && typeIcons.iconOpen) || typeIcons.icon;
@@ -5392,8 +5373,8 @@ GroupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version
 __decorate([
     memoize(property('id')),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Boolean]),
-    __metadata("design:returntype", String)
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", Promise)
 ], GroupService.prototype, "getIcon", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: GroupService, decorators: [{
             type: Injectable,
@@ -5406,7 +5387,7 @@ class GetGroupIconPipe {
     constructor(groupService) {
         this.groupService = groupService;
     }
-    transform(mo) {
+    async transform(mo) {
         return this.groupService.getIcon(mo);
     }
 }
@@ -17765,10 +17746,10 @@ class SearchInputComponent {
     }
 }
 SearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1.Router }, { token: i1$2.InventoryService }, { token: InventorySearchService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SearchInputComponent, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  dropdown\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  *ngIf=\"mode === 'search'\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    dropdownToggle\n    type=\"button\"\n    [title]=\"'Search' | translate\"\n    data-cy=\"search-input--search-btn\"\n  >\n    <i c8yIcon=\"search\" class=\"icon-2x\"></i>\n  </button>\n\n  <div\n    id=\"searchDropdown\"\n    *dropdownMenu\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div class=\"search-header-inline\" *ngIf=\"mode === 'select'\">\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\" novalidate #searchForm=\"ngForm\">\n    <c8y-typeahead\n      [(ngModel)]=\"selected\"\n      placeholder=\"{{ 'Search for groups or assets\u2026' | translate }}\"\n      (keydown)=\"keyDown($event)\"\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      name=\"selected\"\n      title=\"Search\"\n    >\n      <div\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n        class=\"c8y-list__item p-l-24 p-r-24 p-b-8 separator-bottom sticky-top p-t-4\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-16 p-r-16\">\n        <div class=\"d-flex\" *ngIf=\"mode === 'search'\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              type=\"button\"\n              class=\"btn btn-default\"\n              title=\"{{ 'Starts with' | translate }}\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-default\"\n              title=\"{{ 'Contains' | translate }}\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-default\"\n              title=\"{{ 'Ends with' | translate }}\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n        class=\"p-l-24 p-r-24\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i [c8yIcon]=\"result | getGroupIcon\" class=\"c8y-icon-duocolor\"></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        *ngIf=\"term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\"\n        class=\"p-l-24 p-r-24\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of (term.length === 0 && !groupsOnly) ? recentlyRegisteredResults$ : { data: [] };\n          loadMore: 'none';\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i [c8yIcon]=\"result | getGroupIcon\" class=\"c8y-icon-duocolor\"></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-24 p-r-24\" [selectable]=\"false\">\n        <div class=\"legend form-block\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n        [title]=\"result.name\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i [c8yIcon]=\"result | getGroupIcon\" class=\"c8y-icon-duocolor\"></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-li *ngIf=\"noMatch\" class=\"p-16 c8y-empty-state\" data-cy=\"search-input--empty-state\" [selectable]=\"false\">\n          <c8y-li-icon [icon]=\"'search'\"></c8y-li-icon>\n          <p><strong translate>No match found.</strong></p>\n          <small translate *ngIf=\"mode === 'search'\">\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small translate *ngIf=\"mode === 'select'\">Try to rephrase your search word.</small>\n        </c8y-li>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\" class=\"p-t-32 p-b-0\" style=\"position: relative\">\n        <div class=\"spinner\" style=\"right: 0\">\n          <div class=\"rect1\"></div>\n          <div class=\"rect2\"></div>\n          <div class=\"rect3\"></div>\n          <div class=\"rect4\"></div>\n          <div class=\"rect5\"></div>\n        </div>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li class=\"text-center p-t-32 p-b-0\" style=\"position: relative\">\n          <div class=\"spinner\" style=\"right: 0\">\n            <div class=\"rect1\"></div>\n            <div class=\"rect2\"></div>\n            <div class=\"rect3\"></div>\n            <div class=\"rect4\"></div>\n            <div class=\"rect5\"></div>\n          </div>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i c8yIcon=\"info-circle\" class=\"text-info m-r-4\"></i>\n          <p translate class=\"m-r-8\">Need more filter possibilities?</p>\n          <button\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            data-cy=\"search-input--asset-table-btn\"\n            type=\"button\"\n            class=\"m-l-16 btn btn-default btn-sm\"\n            (mousedown)=\"onOpenAssetTable()\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status", inputs: ["mo"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] });
+SearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: SearchInputComponent, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  dropdown\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  *ngIf=\"mode === 'search'\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    [title]=\"'Search' | translate\"\n    type=\"button\"\n    dropdownToggle\n    data-cy=\"search-input--search-btn\"\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"search\"\n    ></i>\n  </button>\n\n  <div\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n    id=\"searchDropdown\"\n    *dropdownMenu\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div \n  class=\"search-header-inline\" \n  *ngIf=\"mode === 'select'\"\n>\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form \n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\" \n    novalidate \n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      [(ngModel)]=\"selected\"\n      placeholder=\"{{ 'Search for groups or assets\u2026' | translate }}\"\n      (keydown)=\"keyDown($event)\"\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      name=\"selected\"\n      title=\"Search\"\n    >\n      <div\n        class=\"c8y-list__item p-l-24 p-r-24 p-b-8 separator-bottom sticky-top p-t-4\"\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-16 p-r-16\">\n        <div class=\"d-flex\" *ngIf=\"mode === 'search'\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Starts with' | translate }}\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Contains' | translate }}\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Ends with' | translate }}\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        class=\"p-l-24 p-r-24\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i \n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n              >\n            </i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        *ngIf=\"term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\"\n        class=\"p-l-24 p-r-24\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of (term.length === 0 && !groupsOnly) ? recentlyRegisteredResults$ : { data: [] };\n          loadMore: 'none';\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i \n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\" \n              >\n            </i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-24 p-r-24\" [selectable]=\"false\">\n        <div class=\"legend form-block\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n        [title]=\"result.name\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i \n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n              >\n            </i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-li *ngIf=\"noMatch\" class=\"p-16 c8y-empty-state\" data-cy=\"search-input--empty-state\" [selectable]=\"false\">\n          <c8y-li-icon [icon]=\"'search'\"></c8y-li-icon>\n          <p><strong translate>No match found.</strong></p>\n          <small translate *ngIf=\"mode === 'search'\">\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small translate *ngIf=\"mode === 'select'\">Try to rephrase your search word.</small>\n        </c8y-li>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\" class=\"p-t-32 p-b-0\" style=\"position: relative\">\n        <div class=\"spinner\" style=\"right: 0\">\n          <div class=\"rect1\"></div>\n          <div class=\"rect2\"></div>\n          <div class=\"rect3\"></div>\n          <div class=\"rect4\"></div>\n          <div class=\"rect5\"></div>\n        </div>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li class=\"text-center p-t-32 p-b-0\" style=\"position: relative\">\n          <div class=\"spinner\" style=\"right: 0\">\n            <div class=\"rect1\"></div>\n            <div class=\"rect2\"></div>\n            <div class=\"rect3\"></div>\n            <div class=\"rect4\"></div>\n            <div class=\"rect5\"></div>\n          </div>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i c8yIcon=\"info-circle\" class=\"text-info m-r-4\"></i>\n          <p translate class=\"m-r-8\">Need more filter possibilities?</p>\n          <button\n            class=\"m-l-16 btn btn-default btn-sm\"\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            data-cy=\"search-input--asset-table-btn\"\n            type=\"button\"\n            (mousedown)=\"onOpenAssetTable()\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$7.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$7.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "emptyActions", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status", inputs: ["mo"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-search-input', template: "<div\n  class=\"dropdown\"\n  dropdown\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  *ngIf=\"mode === 'search'\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    dropdownToggle\n    type=\"button\"\n    [title]=\"'Search' | translate\"\n    data-cy=\"search-input--search-btn\"\n  >\n    <i c8yIcon=\"search\" class=\"icon-2x\"></i>\n  </button>\n\n  <div\n    id=\"searchDropdown\"\n    *dropdownMenu\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div class=\"search-header-inline\" *ngIf=\"mode === 'select'\">\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\" novalidate #searchForm=\"ngForm\">\n    <c8y-typeahead\n      [(ngModel)]=\"selected\"\n      placeholder=\"{{ 'Search for groups or assets\u2026' | translate }}\"\n      (keydown)=\"keyDown($event)\"\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      name=\"selected\"\n      title=\"Search\"\n    >\n      <div\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n        class=\"c8y-list__item p-l-24 p-r-24 p-b-8 separator-bottom sticky-top p-t-4\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-16 p-r-16\">\n        <div class=\"d-flex\" *ngIf=\"mode === 'search'\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              type=\"button\"\n              class=\"btn btn-default\"\n              title=\"{{ 'Starts with' | translate }}\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-default\"\n              title=\"{{ 'Contains' | translate }}\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-default\"\n              title=\"{{ 'Ends with' | translate }}\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n        class=\"p-l-24 p-r-24\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i [c8yIcon]=\"result | getGroupIcon\" class=\"c8y-icon-duocolor\"></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        *ngIf=\"term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\"\n        class=\"p-l-24 p-r-24\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of (term.length === 0 && !groupsOnly) ? recentlyRegisteredResults$ : { data: [] };\n          loadMore: 'none';\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i [c8yIcon]=\"result | getGroupIcon\" class=\"c8y-icon-duocolor\"></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-24 p-r-24\" [selectable]=\"false\">\n        <div class=\"legend form-block\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n        [title]=\"result.name\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i [c8yIcon]=\"result | getGroupIcon\" class=\"c8y-icon-duocolor\"></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-li *ngIf=\"noMatch\" class=\"p-16 c8y-empty-state\" data-cy=\"search-input--empty-state\" [selectable]=\"false\">\n          <c8y-li-icon [icon]=\"'search'\"></c8y-li-icon>\n          <p><strong translate>No match found.</strong></p>\n          <small translate *ngIf=\"mode === 'search'\">\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small translate *ngIf=\"mode === 'select'\">Try to rephrase your search word.</small>\n        </c8y-li>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\" class=\"p-t-32 p-b-0\" style=\"position: relative\">\n        <div class=\"spinner\" style=\"right: 0\">\n          <div class=\"rect1\"></div>\n          <div class=\"rect2\"></div>\n          <div class=\"rect3\"></div>\n          <div class=\"rect4\"></div>\n          <div class=\"rect5\"></div>\n        </div>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li class=\"text-center p-t-32 p-b-0\" style=\"position: relative\">\n          <div class=\"spinner\" style=\"right: 0\">\n            <div class=\"rect1\"></div>\n            <div class=\"rect2\"></div>\n            <div class=\"rect3\"></div>\n            <div class=\"rect4\"></div>\n            <div class=\"rect5\"></div>\n          </div>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i c8yIcon=\"info-circle\" class=\"text-info m-r-4\"></i>\n          <p translate class=\"m-r-8\">Need more filter possibilities?</p>\n          <button\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            data-cy=\"search-input--asset-table-btn\"\n            type=\"button\"\n            class=\"m-l-16 btn btn-default btn-sm\"\n            (mousedown)=\"onOpenAssetTable()\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-search-input', template: "<div\n  class=\"dropdown\"\n  dropdown\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  *ngIf=\"mode === 'search'\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    [title]=\"'Search' | translate\"\n    type=\"button\"\n    dropdownToggle\n    data-cy=\"search-input--search-btn\"\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"search\"\n    ></i>\n  </button>\n\n  <div\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n    id=\"searchDropdown\"\n    *dropdownMenu\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div \n  class=\"search-header-inline\" \n  *ngIf=\"mode === 'select'\"\n>\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form \n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' }\" \n    novalidate \n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      [(ngModel)]=\"selected\"\n      placeholder=\"{{ 'Search for groups or assets\u2026' | translate }}\"\n      (keydown)=\"keyDown($event)\"\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      name=\"selected\"\n      title=\"Search\"\n    >\n      <div\n        class=\"c8y-list__item p-l-24 p-r-24 p-b-8 separator-bottom sticky-top p-t-4\"\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-16 p-r-16\">\n        <div class=\"d-flex\" *ngIf=\"mode === 'search'\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Starts with' | translate }}\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Contains' | translate }}\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              type=\"button\"\n              title=\"{{ 'Ends with' | translate }}\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        class=\"p-l-24 p-r-24\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i \n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n              >\n            </i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        *ngIf=\"term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\"\n        class=\"p-l-24 p-r-24\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of (term.length === 0 && !groupsOnly) ? recentlyRegisteredResults$ : { data: [] };\n          loadMore: 'none';\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i \n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\" \n              >\n            </i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li *ngIf=\"term.length !== 0\" class=\"p-l-24 p-r-24\" [selectable]=\"false\">\n        <div class=\"legend form-block\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        (click)=\"open($event, result, result.name)\"\n        [title]=\"result.name\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i \n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n              >\n            </i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-li *ngIf=\"noMatch\" class=\"p-16 c8y-empty-state\" data-cy=\"search-input--empty-state\" [selectable]=\"false\">\n          <c8y-li-icon [icon]=\"'search'\"></c8y-li-icon>\n          <p><strong translate>No match found.</strong></p>\n          <small translate *ngIf=\"mode === 'search'\">\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small translate *ngIf=\"mode === 'select'\">Try to rephrase your search word.</small>\n        </c8y-li>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\" class=\"p-t-32 p-b-0\" style=\"position: relative\">\n        <div class=\"spinner\" style=\"right: 0\">\n          <div class=\"rect1\"></div>\n          <div class=\"rect2\"></div>\n          <div class=\"rect3\"></div>\n          <div class=\"rect4\"></div>\n          <div class=\"rect5\"></div>\n        </div>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li class=\"text-center p-t-32 p-b-0\" style=\"position: relative\">\n          <div class=\"spinner\" style=\"right: 0\">\n            <div class=\"rect1\"></div>\n            <div class=\"rect2\"></div>\n            <div class=\"rect3\"></div>\n            <div class=\"rect4\"></div>\n            <div class=\"rect5\"></div>\n          </div>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i c8yIcon=\"info-circle\" class=\"text-info m-r-4\"></i>\n          <p translate class=\"m-r-8\">Need more filter possibilities?</p>\n          <button\n            class=\"m-l-16 btn btn-default btn-sm\"\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            data-cy=\"search-input--asset-table-btn\"\n            type=\"button\"\n            (mousedown)=\"onOpenAssetTable()\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$2.InventoryService }, { type: InventorySearchService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
                 type: Input
             }], enableCustomTemplatePlaceholder: [{