@c8y/ngx-components 1021.38.1 → 1021.49.1

package/fesm2022/c8y-ngx-components.mjs

@@ -1297,10 +1297,10 @@ class GroupService {
         if (genericMoType === 'asset') {
             return await this.getAssetCustomIcon(mo.type);
         }
-        const typeIcons = this.getDefaultIcon(genericMoType);
         if (fallbackIcon && genericMoType === 'other') {
             return fallbackIcon;
         }
+        const typeIcons = this.getDefaultIcon(genericMoType);
         return open ? typeIcons.iconOpen : typeIcons.icon;
     }
     /**
@@ -4514,6 +4514,10 @@ var PackageType;
      * A custom package e.g. uploaded to the tenant by a user
      */
     PackageType["CUSTOM"] = "CUSTOM";
+    /**
+     * A package that was archived by the user
+     */
+    PackageType["ARCHIVED"] = "ARCHIVED";
 })(PackageType || (PackageType = {}));
 
 class PluginsResolveService {
@@ -5037,6 +5041,9 @@ class PluginsService {
      */
     getPackageType(packageApplication) {
         const label = packageApplication.label || packageApplication.manifest?.label;
+        if (label === PackageType.ARCHIVED) {
+            return PackageType.ARCHIVED;
+        }
         if (!label) {
             return PackageType.CUSTOM;
         }
@@ -5121,7 +5128,8 @@ class PluginsService {
             versioningMatrix: application.manifest.versioningMatrix,
             tags: useLatest ? ['latest'] : version.tags || [],
             license: application.manifest.license,
-            type: this.getPackageType(application)
+            type: this.getPackageType(application),
+            originApp: application
         }));
         return extendedPlugins;
     }
@@ -10859,7 +10867,11 @@ const PRODUCT_EXPERIENCE_CORE_SHARED = {
     QUICK_LINKS: {
         EVENTS: { QUICK_LINK_RIGHT_DRAWER: 'quickLinkRightDrawer' },
         COMPONENTS: { RIGHT_DRAWER_COMPONENT: 'right-drawer' },
-        ACTIONS: {},
+        ACTIONS: {
+            ACTIVATE_SUPPORT_ACCESS: 'activateSupportAccess',
+            DEACTIVATE_SUPPORT_ACCESS: 'deactivateSupportAccess',
+            OPEN_SUPPORT_LINK: 'openSupportLink'
+        },
         RESULTS: {}
     }
 };
@@ -12990,13 +13002,24 @@ class LoginService {
      * @param credentials The credentials to try to login.
      */
     async login(auth = this.getAuthStrategy(), credentials) {
-        this.client.setAuth(auth);
+        // To ensure backward compatibility, we need to verify whether the backend supports TFA
+        // without requiring the use of /tenant with auth: base64. The tfaSupported flag indicates
+        // whether authentication is possible exclusively via OAI-SECURE.
+        // TfaSupported flag should be removed during: MTM-62641
+        const isOAISecureAndTFAIsSupported = (this.tenantUiService.isOauthInternal(this.loginMode) && this.loginMode.tfaSupported) ||
+            false;
+        if (isOAISecureAndTFAIsSupported && (await this.switchLoginMode(credentials))) {
+            auth = this.cookieAuth;
+        }
+        else {
+            this.client.setAuth(auth);
+        }
         const tenantRes = await this.tenant.current({ withParent: true });
         const tenant = tenantRes.data;
         if (credentials) {
             credentials.tenant = tenant.name;
         }
-        if (await this.switchLoginMode(credentials)) {
+        if (!isOAISecureAndTFAIsSupported && (await this.switchLoginMode(credentials))) {
             auth = this.cookieAuth;
         }
         const userRes = await this.user.current();
@@ -13064,7 +13087,7 @@ class LoginService {
                 grant_type: 'PASSWORD',
                 username: credentials.user,
                 password: credentials.password,
-                tfa_code: credentials.tfa
+                ...(credentials.tfa !== undefined && { tfa_code: credentials.tfa })
             });
             return await new FetchClient().fetch(this.getUrlForOauth(credentials), {
                 method: 'POST',
@@ -15559,15 +15582,27 @@ class FilterInputComponent {
         this.onSearch = new EventEmitter();
         this.filterChange$ = new Subject();
         this.filterTerm = '';
+        this.searchLabel = gettext$1('search');
+        this.closeLabel = gettext$1('close');
         this.CARRIAGE_RETURN_KEY = 13;
         this.CARRIAGE_RETURN_CODE = 'Enter';
+        this.CARRIAGE_ESCAPE_CODE = 'Escape';
+        this.AUTO_SEARCH_DEBOUNCE = 500;
     }
     ngOnInit() {
-        this.reset();
         this.filterChange$
-            .pipe(debounce((event) => event.code === this.CARRIAGE_RETURN_CODE || event.keyCode === this.CARRIAGE_RETURN_KEY
-            ? timer(10)
-            : timer(300)), map((e) => e.target.value), distinctUntilChanged())
+            .pipe(debounce((event) => {
+            if (event.code === this.CARRIAGE_RETURN_CODE ||
+                event.keyCode === this.CARRIAGE_RETURN_KEY) {
+                event.preventDefault();
+                return timer(0);
+            }
+            if (event.code === this.CARRIAGE_ESCAPE_CODE) {
+                this.reset();
+                return timer(0);
+            }
+            return timer(this.AUTO_SEARCH_DEBOUNCE);
+        }), map((e) => e.target.value), distinctUntilChanged())
             .subscribe(filterTerm => {
             this.filterTerm = filterTerm;
             this.onSearch.emit(filterTerm);
@@ -15581,15 +15616,17 @@ class FilterInputComponent {
         this.filterChange$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FilterInputComponent, selector: "c8y-filter", inputs: { icon: "icon" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<div class=\"input-group input-group-search\">\n  <input\n    class=\"form-control\"\n    placeholder=\"{{ 'Filter\u2026' | translate }}\"\n    type=\"text\"\n    [value]=\"filterTerm\"\n    (keyup)=\"filterChange$.next($event)\"\n    px-event=\"Filter\u2026\"\n    data-cy=\"filter-input--filter-input\"\n  />\n  <span class=\"input-group-btn\">\n    <button class=\"btn btn-clean\" title=\"{{filterTerm.length === 0 ? ('search' | translate) : ('close' | translate)}}\" px-event=\"Clear filtering\" (click)=\"reset()\">\n      <i [c8yIcon]=\"filterTerm.length === 0 ? 'search' : 'close'\"></i>\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FilterInputComponent, selector: "c8y-filter", inputs: { icon: "icon", filterTerm: "filterTerm" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<div class=\"input-group input-group-search\">\n  <input\n    class=\"form-control\"\n    placeholder=\"{{ 'Filter\u2026' | translate }}\"\n    type=\"text\"\n    [value]=\"filterTerm\"\n    (keydown)=\"filterChange$.next($event)\"\n    px-event=\"Filter\u2026\"\n    data-cy=\"filter-input--filter-input\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ filterTerm.length === 0 ? searchLabel : closeLabel }}\"\n      px-event=\"Clear filtering\"\n      (click)=\"reset()\"\n    >\n      <i [c8yIcon]=\"filterTerm.length === 0 ? 'search' : 'close'\"></i>\n    </button>\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-filter', template: "<div class=\"input-group input-group-search\">\n  <input\n    class=\"form-control\"\n    placeholder=\"{{ 'Filter\u2026' | translate }}\"\n    type=\"text\"\n    [value]=\"filterTerm\"\n    (keyup)=\"filterChange$.next($event)\"\n    px-event=\"Filter\u2026\"\n    data-cy=\"filter-input--filter-input\"\n  />\n  <span class=\"input-group-btn\">\n    <button class=\"btn btn-clean\" title=\"{{filterTerm.length === 0 ? ('search' | translate) : ('close' | translate)}}\" px-event=\"Clear filtering\" (click)=\"reset()\">\n      <i [c8yIcon]=\"filterTerm.length === 0 ? 'search' : 'close'\"></i>\n    </button>\n  </span>\n</div>\n" }]
+            args: [{ selector: 'c8y-filter', template: "<div class=\"input-group input-group-search\">\n  <input\n    class=\"form-control\"\n    placeholder=\"{{ 'Filter\u2026' | translate }}\"\n    type=\"text\"\n    [value]=\"filterTerm\"\n    (keydown)=\"filterChange$.next($event)\"\n    px-event=\"Filter\u2026\"\n    data-cy=\"filter-input--filter-input\"\n  />\n  <span class=\"input-group-btn\">\n    <button\n      class=\"btn btn-clean\"\n      title=\"{{ filterTerm.length === 0 ? searchLabel : closeLabel }}\"\n      px-event=\"Clear filtering\"\n      (click)=\"reset()\"\n    >\n      <i [c8yIcon]=\"filterTerm.length === 0 ? 'search' : 'close'\"></i>\n    </button>\n  </span>\n</div>\n" }]
         }], propDecorators: { icon: [{
                 type: Input
             }], onSearch: [{
                 type: Output
+            }], filterTerm: [{
+                type: Input
             }] } });
 
 class InputGroupListComponent {
@@ -16579,7 +16616,7 @@ class CredentialsComponent {
             if (e.res && e.res.headers && e.res.headers.get(this.PASSWORD_RESET_HEADER_NAME)) {
                 this.handlePasswordReset(e.res);
             }
-            else if (e.res && e.res.status === 401 && /pin/i.test(e.data.message)) {
+            else if (e.res && e.res.status === 401 && /pin.*generated/i.test(e.data.message)) {
                 this.handleSmsChallenge(e.data.message);
             }
             else if (e.res && e.res.status === 401 && /TOTP/i.test(e.data.message)) {
@@ -16921,30 +16958,47 @@ class TabsOutletComponent {
     get isVertical() {
         return this.orientation !== 'horizontal';
     }
-    constructor(router, renderer, header, tabsService) {
+    constructor(router, renderer, header, tabsService, activatedRoute) {
         this.router = router;
         this.renderer = renderer;
         this.header = header;
         this.tabsService = tabsService;
+        this.activatedRoute = activatedRoute;
         this.tabs = [];
         this.orientation = 'vertical';
         this.navigatorOpen = false;
+        this.openFirstTab = true;
         /**
          * Identifies if the current view has a header element.
          */
         this.hasHeader = false;
         this.showLeft = false;
         this.showRight = false;
+        this.extras = {
+            queryParamsHandling: 'preserve',
+            relativeTo: this.activatedRoute
+        };
         this.destroy$ = new Subject();
         this.tabsChanges$ = new BehaviorSubject([]);
     }
     ngOnInit() {
         if (this.outletName && this.tabs.length === 0) {
-            this.tabsService.items$
-                .pipe(map(tabs => tabs.filter(tab => tab.tabsOutlet === this.outletName)), takeUntil(this.destroy$))
-                .subscribe(tabs => {
+            const tabsSubscription$ = this.tabsService.items$.pipe(map(tabs => tabs.filter(tab => tab.tabsOutlet === this.outletName)), takeUntil(this.destroy$));
+            tabsSubscription$.subscribe(tabs => {
                 this.tabs = tabs;
             });
+            tabsSubscription$.pipe(take(1)).subscribe(tabs => {
+                if (this.openFirstTab && tabs.length) {
+                    this.navigateTo(tabs[0].path);
+                }
+            });
+        }
+        else if (this.openFirstTab && this.tabs.length) {
+            const matchingTab = this.tabs.find(tab => this.isActive(tab));
+            // only navigate to first tab if no tab is active
+            if (!matchingTab) {
+                this.navigateTo(this.tabs[0].path);
+            }
         }
     }
     ngOnChanges(changes) {
@@ -16967,7 +17021,13 @@ class TabsOutletComponent {
     }
     isActive(tab) {
         if (tab && tab.path) {
-            return this.router.isActive(tab.path, false);
+            const tree = this.router.createUrlTree(typeof tab.path === 'string' ? [tab.path] : tab.path);
+            return this.router.isActive(tree, {
+                paths: 'subset',
+                queryParams: 'subset',
+                fragment: 'ignored',
+                matrixParams: 'ignored'
+            });
         }
         else {
             return false;
@@ -16975,7 +17035,11 @@ class TabsOutletComponent {
     }
     navigateTo(path) {
         this.header.toggle();
-        this.router.navigate([path]);
+        if (typeof path === 'string') {
+            this.router.navigate([path], this.extras);
+            return;
+        }
+        this.router.navigate(path, this.extras);
     }
     scroll(direction = 'right') {
         const { widthScroll, width, scrollLeft } = this.getDimensions();
@@ -17010,13 +17074,13 @@ class TabsOutletComponent {
         const scrollLeft = el.scrollLeft;
         return { widthScroll, width, scrollLeft };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$3.Router }, { token: i0.Renderer2 }, { token: HeaderService }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen", outletName: "outletName", context: "context", hasHeader: "hasHeader" }, host: { properties: { "class.has-header": "this.hasHeader", "class.navigator-open": "this.isNavigatorOpen", "class.page-tabs": "this.hasTabs", "class.page-tabs-horizontal": "this.isHorizontal", "class.page-tabs-vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            [queryParamsHandling]=\"'preserve'\"\n            #rla=\"routerLinkActive\"\n            [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n            (click)=\"tab.onSelect?.emit()\"\n          >\n            <i\n              [c8yIcon]=\"tab?.icon\"\n              *ngIf=\"!tab.template && tab?.icon\"\n            ></i>\n            <span\n              title=\"{{ tab?.label | translate }}\"\n              *ngIf=\"!tab.template && !tab.component\"\n            >\n              {{ tab?.label | translate }}\n            </span>\n            <span\n              class=\"dashboard-template-marker\"\n              tooltip=\"{{ tab?.tooltipText | translate }}\"\n              placement=\"bottom\"\n              container=\"body\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"300\"\n              *ngIf=\"!tab.template && tab?.badge\"\n            ></span>\n          </a>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n        </div>\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n    *ngIf=\"outletName\"\n    #tabsContainer\n  >\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByPath\">\n      <div\n        [ngClass]=\"{ active: tab.isActive }\"\n        [routerLink]=\"tab.path\"\n        [routerLinkActive]=\"tab.path ? 'active' : ''\"\n        [queryParamsHandling]=\"'preserve'\"\n      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$3.Router }, { token: i0.Renderer2 }, { token: HeaderService }, { token: TabsService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen", outletName: "outletName", context: "context", openFirstTab: "openFirstTab", hasHeader: "hasHeader" }, host: { properties: { "class.has-header": "this.hasHeader", "class.navigator-open": "this.isNavigatorOpen", "class.page-tabs": "this.hasTabs", "class.page-tabs-horizontal": "this.isHorizontal", "class.page-tabs-vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            [queryParamsHandling]=\"'preserve'\"\n            #rla=\"routerLinkActive\"\n            [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n            (click)=\"tab.onSelect?.emit()\"\n          >\n            <i\n              [c8yIcon]=\"tab?.icon\"\n              *ngIf=\"!tab.template && tab?.icon\"\n            ></i>\n            <span\n              title=\"{{ tab?.label | translate }}\"\n              *ngIf=\"!tab.template && !tab.component\"\n            >\n              {{ tab?.label | translate }}\n            </span>\n            <span\n              class=\"dashboard-template-marker\"\n              tooltip=\"{{ tab?.tooltipText | translate }}\"\n              placement=\"bottom\"\n              container=\"body\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"300\"\n              *ngIf=\"!tab.template && tab?.badge\"\n            ></span>\n          </a>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n        </div>\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n    *ngIf=\"outletName\"\n    #tabsContainer\n  >\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByPath\">\n      <div\n        [ngClass]=\"{ active: tab.isActive }\"\n        [routerLink]=\"tab.path\"\n        [routerLinkActive]=\"tab.path ? 'active' : ''\"\n        [queryParamsHandling]=\"'preserve'\"\n      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-tabs-outlet,c8y-ui-tabs', template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            [queryParamsHandling]=\"'preserve'\"\n            #rla=\"routerLinkActive\"\n            [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n            (click)=\"tab.onSelect?.emit()\"\n          >\n            <i\n              [c8yIcon]=\"tab?.icon\"\n              *ngIf=\"!tab.template && tab?.icon\"\n            ></i>\n            <span\n              title=\"{{ tab?.label | translate }}\"\n              *ngIf=\"!tab.template && !tab.component\"\n            >\n              {{ tab?.label | translate }}\n            </span>\n            <span\n              class=\"dashboard-template-marker\"\n              tooltip=\"{{ tab?.tooltipText | translate }}\"\n              placement=\"bottom\"\n              container=\"body\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"300\"\n              *ngIf=\"!tab.template && tab?.badge\"\n            ></span>\n          </a>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n        </div>\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n    *ngIf=\"outletName\"\n    #tabsContainer\n  >\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByPath\">\n      <div\n        [ngClass]=\"{ active: tab.isActive }\"\n        [routerLink]=\"tab.path\"\n        [routerLinkActive]=\"tab.path ? 'active' : ''\"\n        [queryParamsHandling]=\"'preserve'\"\n      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }], propDecorators: { tabs: [{
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }, { type: i1$3.ActivatedRoute }], propDecorators: { tabs: [{
                 type: Input
             }], orientation: [{
                 type: Input
@@ -17026,6 +17090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], context: [{
                 type: Input
+            }], openFirstTab: [{
+                type: Input
             }], hasHeader: [{
                 type: Input
             }, {
@@ -18198,7 +18264,7 @@ class BootstrapComponent {
         this.pluginsResolve.markPluginsAsLoaded();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootstrapComponent, deps: [{ token: TabsService }, { token: AppStateService }, { token: NavigatorService }, { token: ActionBarService }, { token: HeaderService }, { token: OptionsService }, { token: PluginsResolveService }, { token: SetupService }, { token: LoginService }, { token: TranslationLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootstrapComponent, selector: "c8y-bootstrap", ngImport: i0, template: "<c8y-message-banner\n  *ngIf=\"!(showLogin$ | async)\"\n  class=\"c8y-message-banner\"\n></c8y-message-banner>\n<c8y-login *ngIf=\"showLogin$ | async\"></c8y-login>\n\n<div\n  class=\"init-load\"\n  *ngIf=\"showLoadingIndicator$ | async\"\n>\n  <div class=\"spinner-snake\"></div>\n  <div class=\"mainlogo-placeholder mainlogo\"></div>\n</div>\n\n<div\n  [class.head-open]=\"headerService.headerOpen\"\n  *ngIf=\"showMainView$ | async\"\n>\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    #header\n  ></c8y-header-bar>\n  <c8y-drawer-outlet\n    [tabindex]=\"(headerService.navigatorOpen$ | async) ? '0' : '-1'\"\n    role=\"region\"\n    position=\"left\"\n    data-cy=\"bootstrap.template--c8y-drawer-outlet\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  ></c8y-drawer-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    role=\"navigation\"\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  ></c8y-tabs-outlet>\n  <c8y-action-bar\n    role=\"group\"\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [isTabsHorizontal]=\"tabsComponent?.isHorizontal\"\n    [items$]=\"actionBar.items$\"\n  ></c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent?.hidden,\n      'has-header': headerService.hideHeader\n    }\"\n  >\n    <main\n      class=\"container-fluid\"\n      id=\"main-content\"\n      tabindex=\"-1\"\n    >\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </main>\n  </div>\n</div>\n\n<div *ngIf=\"showSetup$ | async\">\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    [simple]=\"true\"\n  ></c8y-header-bar>\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <div\n    class=\"mcontainer\"\n    role=\"main\"\n  >\n    <div class=\"container-fluid\">\n      <c8y-setup></c8y-setup>\n    </div>\n  </div>\n</div>\n\n<c8y-cookie-banner></c8y-cookie-banner>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: ["simple"] }, { kind: "component", type: LoginComponent, selector: "c8y-login", inputs: ["name"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: ActionBarComponent, selector: "c8y-action-bar", inputs: ["navigatorOpen", "hasTabs", "hasHeader", "isTabsHorizontal", "items$"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: SetupComponent, selector: "c8y-setup" }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: CookieBannerComponent, selector: "c8y-cookie-banner" }, { kind: "component", type: MessageBannerComponent, selector: "c8y-message-banner" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootstrapComponent, selector: "c8y-bootstrap", ngImport: i0, template: "<c8y-message-banner\n  *ngIf=\"!(showLogin$ | async)\"\n  class=\"c8y-message-banner\"\n></c8y-message-banner>\n<c8y-login *ngIf=\"showLogin$ | async\"></c8y-login>\n\n<div\n  class=\"init-load\"\n  *ngIf=\"showLoadingIndicator$ | async\"\n>\n  <div class=\"spinner-snake\"></div>\n  <div class=\"mainlogo-placeholder mainlogo\"></div>\n</div>\n\n<div\n  [class.head-open]=\"headerService.headerOpen\"\n  *ngIf=\"showMainView$ | async\"\n>\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    #header\n  ></c8y-header-bar>\n  <c8y-drawer-outlet\n    [tabindex]=\"(headerService.navigatorOpen$ | async) ? '0' : '-1'\"\n    role=\"region\"\n    position=\"left\"\n    data-cy=\"bootstrap.template--c8y-drawer-outlet\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  ></c8y-drawer-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    role=\"navigation\"\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  ></c8y-tabs-outlet>\n  <c8y-action-bar\n    role=\"group\"\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [isTabsHorizontal]=\"tabsComponent?.isHorizontal\"\n    [items$]=\"actionBar.items$\"\n  ></c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent?.hidden,\n      'has-header': headerService.hideHeader\n    }\"\n  >\n    <main\n      class=\"container-fluid\"\n      id=\"main-content\"\n      tabindex=\"-1\"\n    >\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </main>\n  </div>\n</div>\n\n<div *ngIf=\"showSetup$ | async\">\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    [simple]=\"true\"\n  ></c8y-header-bar>\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <div\n    class=\"mcontainer\"\n    role=\"main\"\n  >\n    <div class=\"container-fluid\">\n      <c8y-setup></c8y-setup>\n    </div>\n  </div>\n</div>\n\n<c8y-cookie-banner></c8y-cookie-banner>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: ["simple"] }, { kind: "component", type: LoginComponent, selector: "c8y-login", inputs: ["name"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: ActionBarComponent, selector: "c8y-action-bar", inputs: ["navigatorOpen", "hasTabs", "hasHeader", "isTabsHorizontal", "items$"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: SetupComponent, selector: "c8y-setup" }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: CookieBannerComponent, selector: "c8y-cookie-banner" }, { kind: "component", type: MessageBannerComponent, selector: "c8y-message-banner" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootstrapComponent, decorators: [{
             type: Component,
@@ -18345,6 +18411,15 @@ class NavigatorNodeComponent {
             if (isUndefined(this.node.path)) {
                 return false;
             }
+            // on exact match, for empty routes '' we need a special
+            // handling as there seems to be a bug with angular, as it
+            // does not show the primary oulet in this cases.
+            const currentUrlTree = this.router.parseUrl(this.router.url);
+            if (this.node.routerLinkExact &&
+                !currentUrlTree.root.children['primary'] &&
+                this.node.path === '/') {
+                return true;
+            }
             return this.router.isActive(this.node.path, {
                 paths: this.node.routerLinkExact ? 'exact' : 'subset',
                 queryParams: 'ignored',
@@ -19044,7 +19119,11 @@ class SelectKeyboardService {
             /**
              * Search on key event.
              */
-            keyboardSearch: false
+            keyboardSearch: false,
+            /**
+             * Space key event is used to select.
+             */
+            spaceSelect: false
         };
     }
     /**
@@ -19084,7 +19163,7 @@ class SelectKeyboardService {
             this.KEYCODE_DOWN,
             this.KEYCODE_TAB,
             this.KEYCODE_UP,
-            this.KEYCODE_SPACE
+            ...(this.options.spaceSelect ? [this.KEYCODE_SPACE] : [])
         ].includes(event.code);
     }
     handleKeyboard(event, input, items, dropdown) {
@@ -20578,6 +20657,10 @@ class SelectComponent {
          * If set to true, the user can select multiple items.
          */
         this.multi = false;
+        /**
+         * If enabled, an item can be selected with the space key.
+         */
+        this.canSelectWithSpace = !this.multi;
         /**
          * If set to true, the select is disabled.
          */
@@ -20631,7 +20714,8 @@ class SelectComponent {
         this.destroy$ = new Subject();
         this.selectKeyboardService.options = {
             emptyInput: true,
-            keyboardSearch: true
+            keyboardSearch: true,
+            spaceSelect: this.canSelectWithSpace
         };
     }
     /**
@@ -20651,6 +20735,9 @@ class SelectComponent {
             this.insideClick = this.multi;
         }
     }
+    /**
+     * @ignore
+     */
     ngAfterViewInit() {
         this.selectKeyboardService
             .register$(this.searchControl.nativeElement, this.list, this.dropdown)
@@ -20663,6 +20750,18 @@ class SelectComponent {
             }
         });
     }
+    /**
+     * @ignore
+     */
+    ngOnChanges(changes) {
+        if (changes.canSelectWithSpace) {
+            this.selectKeyboardService.options = {
+                emptyInput: true,
+                keyboardSearch: true,
+                spaceSelect: changes.canSelectWithSpace.currentValue
+            };
+        }
+    }
     /**
      * @ignore
      */
@@ -20676,15 +20775,21 @@ class SelectComponent {
      * @param item The item to select.
      */
     select(item) {
-        this.onSelect.emit(item);
         if (this.multi) {
-            this._selected.indexOf(item) > -1 ? this.deselect(item) : this._selected.push(item);
+            const isSelected = this._selected.indexOf(item) > -1;
+            if (isSelected) {
+                this.deselect(item);
+                return;
+            }
+            this._selected.push(item);
             this.emitChangeEvent();
+            this.onSelect.emit(item);
             return;
         }
         this._selected = [item];
         this._preselectedItem = item;
         this.emitChangeEvent();
+        this.onSelect.emit(item);
     }
     /**
      * Deselects an item.
@@ -20694,8 +20799,8 @@ class SelectComponent {
         const index = this._selected.indexOf(item);
         if (index > -1) {
             this._selected.splice(index, 1);
-            this.onDeselect.emit(item);
             this.emitChangeEvent();
+            this.onDeselect.emit(item);
             this._preselectedItem = null;
         }
     }
@@ -20802,7 +20907,7 @@ class SelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectComponent, deps: [{ token: SelectKeyboardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectComponent, selector: "c8y-select", inputs: { placeholder: "placeholder", items: "items", selected: "selected", container: "container", multi: "multi", disabled: "disabled", autoClose: "autoClose", insideClick: "insideClick", required: "required", canDeselect: "canDeselect", name: "name", icon: "icon" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectComponent, selector: "c8y-select", inputs: { placeholder: "placeholder", items: "items", selected: "selected", container: "container", multi: "multi", canSelectWithSpace: "canSelectWithSpace", disabled: "disabled", autoClose: "autoClose", insideClick: "insideClick", required: "required", canDeselect: "canDeselect", name: "name", icon: "icon" }, outputs: { onSelect: "onSelect", onDeselect: "onDeselect", onIconClick: "onIconClick" }, host: { classAttribute: "c8y-select-v2" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -20814,7 +20919,7 @@ class SelectComponent {
                 multi: true
             },
             SelectKeyboardService
-        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\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 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); select(item)\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\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 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault();\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -20830,7 +20935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             multi: true
                         },
                         SelectKeyboardService
-                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\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 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); select(item)\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
+                    ], template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\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 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault();\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
         }], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { placeholder: [{
                 type: Input
             }], items: [{
@@ -20841,6 +20946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], multi: [{
                 type: Input
+            }], canSelectWithSpace: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], autoClose: [{
@@ -22665,7 +22772,9 @@ class ConditionalTabsOutletComponent {
     ngOnInit() {
         this.tabsService.firstTab$.pipe(takeUntil(this.endSubscriptions$)).subscribe((tab) => {
             if (tab) {
-                this.router.navigateByUrl(tab.path, { replaceUrl: true });
+                this.router.navigate(typeof tab.path === 'string' ? [tab.path] : tab.path, {
+                    replaceUrl: true
+                });
             }
         });
     }
@@ -24511,7 +24620,9 @@ class ContextRouteService {
     redirectToFirstTab() {
         const currentContextId = (this.router.url.match(this.ID_REGEX) || []).shift();
         if (this.needsRedirect()) {
-            this.tabsService.firstTab$.pipe(filter((tab) => !!tab?.path)).subscribe((tab) => {
+            this.tabsService.firstTab$
+                .pipe(filter((tab) => typeof tab?.path === 'string'))
+                .subscribe((tab) => {
                 const tabPathId = (tab.path.match(this.ID_REGEX) || []).shift();
                 if (currentContextId === tabPathId) {
                     this.router.navigateByUrl(tab.path, { replaceUrl: true });
@@ -24664,7 +24775,9 @@ class ScopedContextRouteService {
         else {
             const currentContextId = (this.router.url.match(this.ID_REGEX) || []).shift();
             if (this.needsRedirectLegacy()) {
-                this.tabsService.firstTab$.pipe(filter((tab) => !!tab?.path)).subscribe((tab) => {
+                this.tabsService.firstTab$
+                    .pipe(filter((tab) => typeof tab?.path === 'string'))
+                    .subscribe((tab) => {
                     const tabPathId = (tab.path.match(this.ID_REGEX) || []).shift();
                     if (currentContextId === tabPathId) {
                         this.router.navigateByUrl(`${tab.path}${queryParamsSuffix}`, { replaceUrl: true });
@@ -25249,11 +25362,11 @@ class SupportOutletComponent {
         this.ui.currentUser.next(currentUserResult.data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SupportOutletComponent, deps: [{ token: AppStateService }, { token: OptionsService }, { token: ModalService }, { token: i1$1.TranslateService }, { token: i1.TenantService }, { token: AlertService }, { token: i1.UserService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SupportOutletComponent, selector: "c8y-support-outlet", ngImport: i0, template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    [ngClass]=\"{'separator-top': !isCollapsible}\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SupportOutletComponent, selector: "c8y-support-outlet", ngImport: i0, template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.ACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.DEACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    [ngClass]=\"{ 'separator-top': !isCollapsible }\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.OPEN_SUPPORT_LINK }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SupportOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-support-outlet', template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    [ngClass]=\"{'separator-top': !isCollapsible}\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n" }]
+            args: [{ selector: 'c8y-support-outlet', template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.ACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.DEACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    [ngClass]=\"{ 'separator-top': !isCollapsible }\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.OPEN_SUPPORT_LINK }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n" }]
         }], ctorParameters: () => [{ type: AppStateService }, { type: OptionsService }, { type: ModalService }, { type: i1$1.TranslateService }, { type: i1.TenantService }, { type: AlertService }, { type: i1.UserService }, { type: HeaderService }] });
 
 class SupportOutletModule {
@@ -33608,7 +33721,7 @@ class SelectModalComponent {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => SelectModalComponent)
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"icon\"></i>\n    <h1\n      class=\"h3\"\n      id=\"modal-title\"\n    >\n      {{ title | translate }}\n    </h1>\n  </div>\n  <div class=\"p-16 text-center separator-bottom min-height-fit\">\n    <p class=\"m-b-8\">{{ subTitle | translate }}</p>\n    <div class=\"row\">\n      <div\n        *ngIf=\"showFilter\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <c8y-filter\n          [icon]=\"'search'\"\n          (onSearch)=\"updatePipe($event)\"\n        ></c8y-filter>\n      </div>\n      <div\n        *ngIf=\"additionalFilterTemplate\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"additionalFilterTemplate\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-16 p-r-16\">\n      <div\n        class=\"panel m-t-8 m-b-8\"\n        *ngIf=\"!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)\"\n      >\n        <div class=\"c8y-empty-state text-left\">\n          <h1\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"{{ icon }} \"\n          ></h1>\n          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>\n        </div>\n      </div>\n    </div>\n    <c8y-list-group>\n      <ng-container *ngFor=\"let item of listItems | selectModalFilterPipe : filterTerm\">\n        <c8y-li *ngIf=\"item.options?.length > 0 || !hideEmptyItems\">\n          <c8y-li-icon>\n            <i c8yIcon=\"{{ icon }}\"></i>\n          </c8y-li-icon>\n\n          <c8y-li-body class=\"content-flex-30\">\n            <div class=\"col-9\">\n              <div\n                *ngFor=\"let bodyPart of item.body\"\n                [ngClass]=\"bodyPart.class\"\n              >\n                <c8y-highlight\n                  [title]=\"bodyPart.value\"\n                  [pattern]=\"filterTerm\"\n                  [text]=\"bodyPart.value\"\n                ></c8y-highlight>\n              </div>\n            </div>\n\n            <div\n              class=\"col-3 text-right\"\n              *ngIf=\"item.additionalInformation\"\n            >\n              <div [ngClass]=\"item.additionalInformation.class\">\n                {{ item.additionalInformation.value }}\n              </div>\n            </div>\n          </c8y-li-body>\n\n          <c8y-li-collapse *ngIf=\"item.options?.length > 0\">\n            <c8y-list-group>\n              <c8y-li *ngFor=\"let option of item.options\">\n                <c8y-li-radio\n                  [name]=\"mode === 'single' ? 'single' : item.groupId\"\n                  (onSelect)=\"updateChoice({ item: item, id: option.obj.id })\"\n                  [disabled]=\"option.disabled\"\n                  [selected]=\"option.selected\"\n                ></c8y-li-radio>\n                <c8y-li-body class=\"content-flex-20\">\n                  <div\n                    *ngFor=\"let optionPart of option.body; let i = index\"\n                    [ngClass]=\"optionPart.class\"\n                  >\n                    <c8y-highlight\n                      [pattern]=\"filterTerm\"\n                      [text]=\"optionPart.value\"\n                    ></c8y-highlight>\n                  </div>\n                  <ng-container\n                    *ngIf=\"option.template\"\n                    [ngTemplateOutlet]=\"option.template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, option: option }\"\n                  ></ng-container>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          </c8y-li-collapse>\n        </c8y-li>\n      </ng-container>\n      <div *ngIf=\"areMoreEntries\">\n        <div\n          class=\"alert alert-info m-t-16 m-r-8 m-l-8\"\n          translate\n        >\n          Some entries might not be shown. Try narrowing search criteria.\n        </div>\n      </div>\n    </c8y-list-group>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Cancel-button\"\n      *ngIf=\"labels.cancel\"\n      (click)=\"dismiss()\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.cancel }\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Save-button\"\n      (click)=\"select()\"\n      [disabled]=\"!selected\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.ok }\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: FilterInputComponent, selector: "c8y-filter", inputs: ["icon"], outputs: ["onSearch"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: SelectModalFilterPipe, name: "selectModalFilterPipe" }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"icon\"></i>\n    <h1\n      class=\"h3\"\n      id=\"modal-title\"\n    >\n      {{ title | translate }}\n    </h1>\n  </div>\n  <div class=\"p-16 text-center separator-bottom min-height-fit\">\n    <p class=\"m-b-8\">{{ subTitle | translate }}</p>\n    <div class=\"row\">\n      <div\n        *ngIf=\"showFilter\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <c8y-filter\n          [icon]=\"'search'\"\n          (onSearch)=\"updatePipe($event)\"\n        ></c8y-filter>\n      </div>\n      <div\n        *ngIf=\"additionalFilterTemplate\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"additionalFilterTemplate\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-16 p-r-16\">\n      <div\n        class=\"panel m-t-8 m-b-8\"\n        *ngIf=\"!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)\"\n      >\n        <div class=\"c8y-empty-state text-left\">\n          <h1\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"{{ icon }} \"\n          ></h1>\n          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>\n        </div>\n      </div>\n    </div>\n    <c8y-list-group>\n      <ng-container *ngFor=\"let item of listItems | selectModalFilterPipe : filterTerm\">\n        <c8y-li *ngIf=\"item.options?.length > 0 || !hideEmptyItems\">\n          <c8y-li-icon>\n            <i c8yIcon=\"{{ icon }}\"></i>\n          </c8y-li-icon>\n\n          <c8y-li-body class=\"content-flex-30\">\n            <div class=\"col-9\">\n              <div\n                *ngFor=\"let bodyPart of item.body\"\n                [ngClass]=\"bodyPart.class\"\n              >\n                <c8y-highlight\n                  [title]=\"bodyPart.value\"\n                  [pattern]=\"filterTerm\"\n                  [text]=\"bodyPart.value\"\n                ></c8y-highlight>\n              </div>\n            </div>\n\n            <div\n              class=\"col-3 text-right\"\n              *ngIf=\"item.additionalInformation\"\n            >\n              <div [ngClass]=\"item.additionalInformation.class\">\n                {{ item.additionalInformation.value }}\n              </div>\n            </div>\n          </c8y-li-body>\n\n          <c8y-li-collapse *ngIf=\"item.options?.length > 0\">\n            <c8y-list-group>\n              <c8y-li *ngFor=\"let option of item.options\">\n                <c8y-li-radio\n                  [name]=\"mode === 'single' ? 'single' : item.groupId\"\n                  (onSelect)=\"updateChoice({ item: item, id: option.obj.id })\"\n                  [disabled]=\"option.disabled\"\n                  [selected]=\"option.selected\"\n                ></c8y-li-radio>\n                <c8y-li-body class=\"content-flex-20\">\n                  <div\n                    *ngFor=\"let optionPart of option.body; let i = index\"\n                    [ngClass]=\"optionPart.class\"\n                  >\n                    <c8y-highlight\n                      [pattern]=\"filterTerm\"\n                      [text]=\"optionPart.value\"\n                    ></c8y-highlight>\n                  </div>\n                  <ng-container\n                    *ngIf=\"option.template\"\n                    [ngTemplateOutlet]=\"option.template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, option: option }\"\n                  ></ng-container>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          </c8y-li-collapse>\n        </c8y-li>\n      </ng-container>\n      <div *ngIf=\"areMoreEntries\">\n        <div\n          class=\"alert alert-info m-t-16 m-r-8 m-l-8\"\n          translate\n        >\n          Some entries might not be shown. Try narrowing search criteria.\n        </div>\n      </div>\n    </c8y-list-group>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Cancel-button\"\n      *ngIf=\"labels.cancel\"\n      (click)=\"dismiss()\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.cancel }\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Save-button\"\n      (click)=\"select()\"\n      [disabled]=\"!selected\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.ok }\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCollapseComponent, selector: "c8y-list-item-collapse, c8y-li-collapse", inputs: ["collapseWay"] }, { kind: "component", type: ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: SelectModalFilterPipe, name: "selectModalFilterPipe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectModalComponent, decorators: [{
             type: Component,