@c8y/ngx-components 1022.34.0 → 1022.44.3

package/fesm2022/c8y-ngx-components.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, Injectable, Injector, InjectionToken, NgModuleRef, createNgModule, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, createEnvironmentInjector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, ViewContainerRef, ElementRef, ContentChildren, runInInjectionContext, createComponent, ViewChildren, viewChild, effect, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, Type, computed, input, output } from '@angular/core';
+import { Input, Directive, createEnvironmentInjector, InjectionToken, Optional, Inject, Injectable, NgModuleRef, createNgModule, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, Injector, HostListener, Component, HostBinding, Output, forwardRef, DestroyRef, ViewChild, SecurityContext, TemplateRef, provideAppInitializer, Self, SkipSelf, Attribute, ContentChild, ElementRef, ContentChildren, ViewContainerRef, runInInjectionContext, createComponent, ViewChildren, viewChild, effect, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, Type, computed, input, output } from '@angular/core';
 import * as i1$3 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { castArray, flatten, uniq, sortBy, groupBy, camelCase, isEqual, isUndefined, throttle as throttle$1, keys, get, isNaN as isNaN$1, isFinite, each, mapValues, mapKeys, forEach, assign, min, every, first, map as map$1, find, negate, upperFirst, memoize as memoize$1, property, some, entries, omitBy, isDate, pick, flatMap, orderBy, isEmpty, filter as filter$2, snakeCase, matches, escape, escapeRegExp, assignWith, set, cloneDeep, uniqBy, toNumber, isEqualWith, clone, omit, has, transform, identity, flow, findIndex as findIndex$1, isNil, chunk, values, union, without, indexOf, parseInt as parseInt$1, kebabCase, forOwn } from 'lodash-es';
-import { Subject, BehaviorSubject, ReplaySubject, merge, of, defer, combineLatest, race, isObservable, from, NEVER, Observable, firstValueFrom, fromEvent, pipe, throwError, concat, map as map$2, filter as filter$1, tap as tap$1, fromEventPattern, startWith as startWith$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, shareReplay as shareReplay$1, timer, catchError as catchError$1, empty, forkJoin, interval, mergeMap as mergeMap$1 } from 'rxjs';
-import { shareReplay, map, distinctUntilChanged, filter, startWith, switchMap, take, scan, debounceTime, share, takeUntil, tap, catchError, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom, mergeMap, every as every$1, toArray, merge as merge$1, expand, mapTo, skip, reduce, finalize, combineLatestWith } from 'rxjs/operators';
+import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, ReplaySubject, NEVER, Observable, firstValueFrom, fromEvent, pipe, throwError, concat, map as map$2, filter as filter$1, tap as tap$1, fromEventPattern, startWith as startWith$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, shareReplay as shareReplay$1, timer, catchError as catchError$1, empty, forkJoin, interval, mergeMap as mergeMap$1 } from 'rxjs';
+import { map, distinctUntilChanged, filter, startWith, switchMap, shareReplay, take, scan, debounceTime, share, takeUntil, tap, catchError, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom, mergeMap, every as every$1, toArray, merge as merge$1, expand, mapTo, skip, reduce, finalize, combineLatestWith } from 'rxjs/operators';
 import * as i1 from '@c8y/client';
-import { OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BasicAuth, CookieAuth, Realtime, FetchClient, FeatureService, ApplicationAvailability, InventoryService, QueriesUtil, Client, PasswordStrength, AlarmService, TenantService, ApplicationService, UserService, aggregationType, Service, Paging } from '@c8y/client';
+import { OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BasicAuth, CookieAuth, Realtime, FetchClient, BearerAuthFromSessionStorage, FeatureService, ApplicationAvailability, InventoryService, QueriesUtil, Client, PasswordStrength, AlarmService, TenantService, ApplicationService, UserService, aggregationType, Service, Paging } from '@c8y/client';
 import { __decorate, __metadata } from 'tslib';
 import * as i1$4 from '@angular/router';
 import { NavigationEnd, RouterModule as RouterModule$1, NavigationStart, RouterLink, RouterLinkActive, RouterOutlet, ActivationEnd, Router, ActivatedRoute, PRIMARY_OUTLET, ActivationStart, ChildActivationEnd, ROUTES, NavigationCancel, NavigationError } from '@angular/router';
@@ -15,7 +15,6 @@ import * as i4 from '@c8y/ngx-components/api';
 import { DataModule } from '@c8y/ngx-components/api';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
-export * from '@c8y/ngx-components/gettext';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateService as TranslateService$1, TranslateDefaultParser, TranslateDirective, TranslatePipe, TranslateModule, TranslateLoader, TranslateFakeCompiler, TranslateCompiler, TranslateParser, MissingTranslationHandler, TranslateStore, USE_STORE, USE_DEFAULT_LANG, USE_EXTEND, DEFAULT_LANGUAGE } from '@ngx-translate/core';
 import { VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll, ScrollingModule } from '@angular/cdk/scrolling';
@@ -40,7 +39,7 @@ import { CdkStepper, STEP_STATE, CdkStep, CdkStepperModule, STEPPER_GLOBAL_OPTIO
 import * as i1$7 from 'ngx-bootstrap/modal';
 import { ModalModule as ModalModule$1, BsModalRef } from 'ngx-bootstrap/modal';
 import * as i1$8 from '@angular/forms';
-import { FormsModule as FormsModule$1, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxControlValueAccessor, FormControl, NgModel, FormControlName, ReactiveFormsModule, NgForm, ControlContainer, FormArray, NgControl, FormGroup, FormBuilder } from '@angular/forms';
+import { FormsModule as FormsModule$1, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxControlValueAccessor, ReactiveFormsModule, FormControl, NgModel, FormControlName, NgForm, ControlContainer, FormArray, NgControl, FormGroup, FormBuilder } from '@angular/forms';
 import { TOKEN_KEY, TFATOKEN_KEY, mergeRemotes, removeRemotes, getThemePreference, setThemePreference, applyTheme } from '@c8y/bootstrap';
 import * as i1$9 from 'ngx-bootstrap/popover';
 import { PopoverModule, PopoverDirective } from 'ngx-bootstrap/popover';
@@ -212,168 +211,6 @@ var GroupFragment;
     GroupFragment["dynamicGroupQueryString"] = "c8y_DeviceQueryString";
 })(GroupFragment || (GroupFragment = {}));
 
-class PluginsResolveService {
-    constructor() {
-        this._refresh$ = new Subject();
-        this._allPluginsLoaded$ = new BehaviorSubject(false);
-        this._contextPathsFromWhereRemotesHaveBeenLoaded$ = new BehaviorSubject([]);
-        this._loadedPluginNames$ = new BehaviorSubject([]);
-        this._injectors$ = new ReplaySubject();
-        this._pluginDetails$ = new ReplaySubject();
-        this.injectors$ = this._injectors$;
-        this.refresh$ = this._refresh$.asObservable().pipe(shareReplay(1));
-        this.pluginDetails$ = this._pluginDetails$;
-        this.allPluginsLoaded$ = this._allPluginsLoaded$.asObservable();
-        this.contextPathsFromWhereRemotesHaveBeenLoaded$ =
-            this._contextPathsFromWhereRemotesHaveBeenLoaded$.asObservable();
-        this.loadedPluginNames$ = this._loadedPluginNames$.asObservable();
-    }
-    /**
-     * Will refresh all current registered hooks.
-     */
-    refreshHooks() {
-        this._refresh$.next();
-    }
-    markPluginsAsLoaded() {
-        this._allPluginsLoaded$.next(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsResolveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsResolveService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsResolveService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class StandalonePluginInjector extends Injector {
-    /**
-     * @deprecated Use `constructor` instead.
-     */
-    static create(..._args) {
-        throw Error('Not implemented');
-    }
-    constructor(options) {
-        super();
-        this.options = options;
-        this.injector = Injector.create(options);
-    }
-    get name() {
-        return this.options.name;
-    }
-    get(token, notFoundValue, options) {
-        return this.injector.get(token, notFoundValue, options);
-    }
-}
-/**
- * @deprecated Only meant for internal usage.
- * @internal
- */
-const HOOK_PLUGIN = new InjectionToken('HOOK_PLUGIN');
-/**
- * @deprecated Only meant for internal usage.
- * @internal
- */
-function hookPlugin(plugins) {
-    return hookGeneric(plugins, HOOK_PLUGIN, { multi: false });
-}
-class PluginsLoaderService {
-    constructor(plugins, injector, pluginsResolveService) {
-        this.plugins = plugins;
-        this.injector = injector;
-        this.pluginsResolveService = pluginsResolveService;
-        this.loadModulesDynamically(this.plugins);
-    }
-    /**
-     * Loads modules and handles hooking correctly.
-     * @param remoteNgModules The modules to load.
-     */
-    loadModulesDynamically(remoteModules) {
-        const modulesWithMetadata = this.loadModules(remoteModules || [], this.injector);
-        const injectors = modulesWithMetadata.map(m => m.injector);
-        const refs = modulesWithMetadata
-            .map(m => {
-            if (m.moduleRef && m.remoteNgModule) {
-                return { moduleRef: m.moduleRef, remoteNgModule: m.remoteNgModule };
-            }
-            return null;
-        })
-            .filter(m => !!m);
-        const loadedPluginNames = modulesWithMetadata.map(m => m.name);
-        this.pluginsResolveService._loadedPluginNames$.next(loadedPluginNames);
-        const loadedContextPaths = modulesWithMetadata.map(m => m.fullContextPath);
-        this.pluginsResolveService._contextPathsFromWhereRemotesHaveBeenLoaded$.next(loadedContextPaths);
-        injectors.forEach(injector => this.pluginsResolveService._injectors$.next(injector));
-        refs.forEach(ref => this.pluginsResolveService._pluginDetails$.next(ref));
-        this.pluginsResolveService.refreshHooks();
-        this.pluginsResolveService.markPluginsAsLoaded();
-        return modulesWithMetadata;
-    }
-    /**
-     * Uses the provided remoteModule factories to load and instantiate the modules.
-     * The provided injector is used as a parent to create the module instances.
-     */
-    loadModules(remoteModules, injector) {
-        const loadedResults = [];
-        for (const { factory, name, fullContextPath } of remoteModules) {
-            try {
-                const moduleOrProviders = factory[name];
-                let result;
-                if (Array.isArray(moduleOrProviders)) {
-                    result = this.loadProviders(moduleOrProviders, name, injector);
-                }
-                else {
-                    result = this.loadModule(moduleOrProviders, injector);
-                }
-                const resultWithName = {
-                    ...result,
-                    name,
-                    fullContextPath
-                };
-                loadedResults.push(resultWithName);
-            }
-            catch (ex) {
-                console.error(`Failed to load ${name}`, ex);
-            }
-        }
-        return loadedResults;
-    }
-    loadProviders(providers, name, parentInjector) {
-        const injector = new StandalonePluginInjector({
-            providers: providers,
-            name: `pluginsInjector-${name}`,
-            parent: parentInjector
-        });
-        return { injector };
-    }
-    loadModule(remoteNgModule, parentInjector) {
-        let moduleRef;
-        if (remoteNgModule instanceof NgModuleRef) {
-            // AOT
-            moduleRef = remoteNgModule;
-        }
-        else {
-            // JIT
-            moduleRef = createNgModule(remoteNgModule, parentInjector);
-        }
-        return { moduleRef, remoteNgModule, injector: moduleRef.injector };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsLoaderService, deps: [{ token: HOOK_PLUGIN, optional: true }, { token: i0.EnvironmentInjector }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsLoaderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsLoaderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: Array, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [HOOK_PLUGIN]
-                }] }, { type: i0.EnvironmentInjector }, { type: PluginsResolveService }] });
-
 /**
  * A abstract state which should be included in each state.
  * @abstract
@@ -414,14 +251,14 @@ function getInjectedHooks(token, injectors, type = InjectionType.COMPONENT) {
         if (injector.scopes?.has('root')) {
             return factories;
         }
-        if (injector instanceof StandalonePluginInjector) {
-            // No need to set injector for items retrieved from standalone plugins
-            return factories;
-        }
         factories.forEach((factory) => {
             if (!factory.get && factory.injector !== null) {
                 if (type === InjectionType.ROUTE) {
-                    factory._injector = injector;
+                    const route = factory;
+                    if (!route._injector) {
+                        const envInjector = createEnvironmentInjector(route.providers || [], injector, `Route: ${route.path}`);
+                        factory._injector = envInjector;
+                    }
                 }
                 else {
                     factory.injector = injector;
@@ -868,6 +705,178 @@ function throttle(wait, options) {
     };
 }
 
+class PluginsResolveService {
+    constructor() {
+        this._refresh$ = new Subject();
+        this._allPluginsLoaded$ = new BehaviorSubject(false);
+        this._contextPathsFromWhereRemotesHaveBeenLoaded$ = new BehaviorSubject([]);
+        this._loadedPluginNames$ = new BehaviorSubject([]);
+        this._injectors$ = new ReplaySubject();
+        this._pluginDetails$ = new ReplaySubject();
+        this.injectors$ = this._injectors$;
+        this.refresh$ = this._refresh$.asObservable().pipe(shareReplay(1));
+        this.pluginDetails$ = this._pluginDetails$;
+        this.allPluginsLoaded$ = this._allPluginsLoaded$.asObservable();
+        this.contextPathsFromWhereRemotesHaveBeenLoaded$ =
+            this._contextPathsFromWhereRemotesHaveBeenLoaded$.asObservable();
+        this.loadedPluginNames$ = this._loadedPluginNames$.asObservable();
+    }
+    /**
+     * Will refresh all current registered hooks.
+     */
+    refreshHooks() {
+        this._refresh$.next();
+    }
+    addInjector(injector) {
+        this._injectors$.next(injector);
+    }
+    markPluginsAsLoaded() {
+        this._allPluginsLoaded$.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsResolveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsResolveService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsResolveService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Injection token for providing the context path of a plugin.
+ *
+ * Can e.g. be used to construct URLs to assets within the plugin.
+ */
+const C8Y_PLUGIN_CONTEXT_PATH = new InjectionToken('C8Y_PLUGIN_CONTEXT_PATH');
+/**
+ * Injection token for providing the name of a plugin.
+ *
+ * Can e.g. be used to identify the plugin within the application.
+ */
+const C8Y_PLUGIN_NAME = new InjectionToken('C8Y_PLUGIN_NAME');
+
+/**
+ * @deprecated Only meant for internal usage.
+ * @internal
+ */
+const HOOK_PLUGIN = new InjectionToken('HOOK_PLUGIN');
+/**
+ * @deprecated Only meant for internal usage.
+ * @internal
+ */
+function hookPlugin(plugins) {
+    return hookGeneric(plugins, HOOK_PLUGIN, { multi: false });
+}
+class PluginsLoaderService {
+    constructor(plugins, injector, pluginsResolveService) {
+        this.plugins = plugins;
+        this.injector = injector;
+        this.pluginsResolveService = pluginsResolveService;
+        this.injectorPerContextPath = new Map();
+        this.loadModulesDynamically(this.plugins);
+    }
+    /**
+     * Loads modules and handles hooking correctly.
+     * @param remoteNgModules The modules to load.
+     */
+    loadModulesDynamically(remoteModules) {
+        const modulesWithMetadata = this.loadModules(remoteModules || [], this.injector);
+        const injectors = modulesWithMetadata.map(m => m.injector);
+        const refs = modulesWithMetadata
+            .map(m => {
+            if (m.moduleRef && m.remoteNgModule) {
+                return { moduleRef: m.moduleRef, remoteNgModule: m.remoteNgModule };
+            }
+            return null;
+        })
+            .filter(m => !!m);
+        const loadedPluginNames = modulesWithMetadata.map(m => m.name);
+        this.pluginsResolveService._loadedPluginNames$.next(loadedPluginNames);
+        const loadedContextPaths = modulesWithMetadata.map(m => m.fullContextPath);
+        this.pluginsResolveService._contextPathsFromWhereRemotesHaveBeenLoaded$.next(loadedContextPaths);
+        injectors.forEach(injector => this.pluginsResolveService.addInjector(injector));
+        refs.forEach(ref => this.pluginsResolveService._pluginDetails$.next(ref));
+        this.pluginsResolveService.refreshHooks();
+        this.pluginsResolveService.markPluginsAsLoaded();
+        return modulesWithMetadata;
+    }
+    /**
+     * Uses the provided remoteModule factories to load and instantiate the modules.
+     * The provided injector is used as a parent to create the module instances.
+     */
+    loadModules(remoteModules, injector) {
+        const loadedResults = [];
+        for (const { factory, name, fullContextPath } of remoteModules) {
+            let injectorPerContextPath = this.injectorPerContextPath.get(fullContextPath);
+            if (!injectorPerContextPath) {
+                injectorPerContextPath = createEnvironmentInjector([
+                    {
+                        provide: C8Y_PLUGIN_CONTEXT_PATH,
+                        useValue: fullContextPath
+                    }
+                ], injector, `packageInjector-${fullContextPath}`);
+                this.injectorPerContextPath.set(fullContextPath, injectorPerContextPath);
+            }
+            const pluginSpecificInjector = createEnvironmentInjector([
+                {
+                    provide: C8Y_PLUGIN_NAME,
+                    useValue: name
+                }
+            ], injectorPerContextPath, `pluginInjector-${fullContextPath}-${name}`);
+            try {
+                const moduleOrProviders = factory[name];
+                let result;
+                if (Array.isArray(moduleOrProviders)) {
+                    result = this.loadProviders(moduleOrProviders, name, pluginSpecificInjector);
+                }
+                else {
+                    result = this.loadModule(moduleOrProviders, pluginSpecificInjector);
+                }
+                const resultWithName = {
+                    ...result,
+                    name,
+                    fullContextPath
+                };
+                loadedResults.push(resultWithName);
+            }
+            catch (ex) {
+                console.error(`Failed to load ${name}`, ex);
+            }
+        }
+        return loadedResults;
+    }
+    loadProviders(providers, name, parentInjector) {
+        const injector = createEnvironmentInjector(providers, parentInjector, `pluginsInjector-${name}`);
+        return { injector };
+    }
+    loadModule(remoteNgModule, parentInjector) {
+        let moduleRef;
+        if (remoteNgModule instanceof NgModuleRef) {
+            // AOT
+            moduleRef = remoteNgModule;
+        }
+        else {
+            // JIT
+            moduleRef = createNgModule(remoteNgModule, parentInjector);
+        }
+        return { moduleRef, remoteNgModule, injector: moduleRef.injector };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsLoaderService, deps: [{ token: HOOK_PLUGIN, optional: true }, { token: i0.EnvironmentInjector }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsLoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PluginsLoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: Array, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [HOOK_PLUGIN]
+                }] }, { type: i0.EnvironmentInjector }, { type: PluginsResolveService }] });
+
 const HOOK_CURRENT_USER = new InjectionToken('HOOK_CURRENT_USER');
 const HOOK_CURRENT_APPLICATION = new InjectionToken('HOOK_CURRENT_APPLICATION');
 const HOOK_CURRENT_TENANT = new InjectionToken('HOOK_CURRENT_TENANT');
@@ -1908,9 +1917,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.TranslateParser }, { type: PatternMessagesService }] });
 
-// kept here for backwards compatibility
-// gettext was moved into separate entry point
-
 /* tslint:disable:max-line-length */
 const bulkOperationAuditLogTextPlaceholders = {
     updatesList: {
@@ -3794,6 +3800,68 @@ const MESSAGES_CORE_I18N = {
             seriesParam: '$1',
             validFormat: '$2'
         }
+    },
+    // Tenant Certificate Authority audit records
+    "^Tenant certificate authority\\(CA\\) created on '(.+?)'.*$": {
+        gettext: gettext$1('Tenant certificate authority (CA) created for tenant "{{ tenantId }}"'),
+        placeholders: {
+            tenantId: '$1'
+        }
+    },
+    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n$": {
+        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".'),
+        placeholders: {
+            fingerprint: '$1',
+            subjectName: '$2'
+        }
+    },
+    "^Tenant certificate authority\\(CA\\) was renewed for Tenant: '(.+?)'.*$": {
+        gettext: gettext$1('Tenant certificate authority (CA) was renewed for tenant "{{ tenantId }}"'),
+        placeholders: {
+            tenantId: '$1'
+        }
+    },
+    "^Certificate fingerprint: '(.+?)'\\.\\n\\s*Certificate subject name: '(.+?)'\\.\\n\\s*NotAfter='(.+?)'.*$": {
+        gettext: gettext$1('Certificate fingerprint: "{{ fingerprint }}".\nCertificate subject name: "{{ subjectName }}".\nExpiration date: {{ expirationDate | absoluteDate }}.'),
+        placeholders: {
+            fingerprint: '$1',
+            subjectName: '$2',
+            expirationDate: '$3'
+        }
+    },
+    "^Tenant certificate authority\\(CA\\) renewal for Tenant: '(.+?)' failed.*$": {
+        gettext: gettext$1('Tenant certificate authority (CA) renewal for tenant "{{ tenantId }}" failed'),
+        placeholders: {
+            tenantId: '$1'
+        }
+    },
+    '^The CA certificate has not been refreshed\\.\\s+It may either still have sufficient remaining validity.*$': {
+        gettext: gettext$1('The CA certificate has not been renewed; however, it may still have sufficient validity remaining.')
+    },
+    "^Provisioned certificate stored in user object: '(.+?)'.*$": {
+        gettext: gettext$1('Provisioned certificate stored in user object: "{{ userName }}"'),
+        placeholders: {
+            userName: '$1'
+        }
+    },
+    "^Certificate serial number: '(.+?)'\\.\\n\\s*NotAfter='(.+?)'.*$": {
+        gettext: gettext$1('Certificate serial number: "{{ serialNumber }}".\nExpiration date: {{ expirationDate | absoluteDate }}.'),
+        placeholders: {
+            serialNumber: '$1',
+            expirationDate: '$2'
+        }
+    },
+    "^Provisioned certificates removed from user: '(.+?)'.*$": {
+        gettext: gettext$1('Provisioned certificates removed from user: "{{ userName }}"'),
+        placeholders: {
+            userName: '$1'
+        }
+    },
+    '^Revoked serials: (.+?)$': {
+        gettext: gettext$1('Revoked serials: {{ revokedSerials }}'),
+        placeholders: {
+            revokedSerials: '$1'
+        }
     }
 };
 
@@ -4611,6 +4679,8 @@ class DatePipe extends DatePipe$1 {
         if (!currentLocale && this.appStateService) {
             currentLocale = this.appStateService.state.lang;
         }
+        // Apply locale mapping to ensure consistent Angular locale usage
+        currentLocale = getAngularLocalesLanguageString(currentLocale);
         if (format === 'short' && this.dateFormatService && currentLocale) {
             // Angular doesn't provide a predefined format with leading zeros (e.g., "01.01.2025")
             // The 'shortDate' format would display as "1/1/25" (without leading zeros and with 2-digit year)
@@ -4809,6 +4879,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+// kept here for backwards compatibility
+// gettext was moved into separate entry point
+/**
+ * @deprecated Use `import { gettext } from '@c8y/ngx-components/gettext';` instead.
+ */
+function gettext(str) {
+    console.error("`gettext` was moved into separate entry point. Use `import { gettext } from '@c8y/ngx-components/gettext';` instead.");
+    return gettext$1(str);
+}
+
 /**
  * A service to provide unmodified, cached translations for angular.
  */
@@ -8106,7 +8186,8 @@ class UserPreferencesService {
     async getCurrentUserStorage() {
         const currentUser = await firstValueFrom(this.currentUser);
         const hasRoleToEditCurrentUser = this.user.hasRole(currentUser, Permissions.ROLE_USER_MANAGEMENT_OWN_ADMIN);
-        const isExternalUser = currentUser.customProperties?.userOrigin === 'OAUTH2';
+        const customProperties = currentUser.customProperties;
+        const isExternalUser = customProperties?.userOrigin === 'OAUTH2';
         if (!hasRoleToEditCurrentUser || isExternalUser) {
             return null;
         }
@@ -12412,7 +12493,7 @@ class TabsService extends ExtensionPointForPlugins {
     prepareTabs(tabs) {
         return this.sortTabs(tabs
             .map(tab => {
-            tab.template = tab.template instanceof ViewContainerRef ? tab.template : undefined;
+            tab.template = tab.template instanceof TemplateRef ? tab.template : undefined;
             return tab;
         })
             .filter((tab, index, self) => tab.component || !tab.path || index === self.findIndex(t => isEqual(t.path, tab.path))));
@@ -13296,7 +13377,7 @@ class TabsOutletComponent {
         return { widthScroll, width, scrollLeft };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$4.Router }, { token: i0.Renderer2 }, { token: HeaderService }, { token: TabsService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TabsOutletComponent, isStandalone: true, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TabsOutletComponent, isStandalone: true, 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        @let tabLabel = tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate);\n        <a\n          class=\"pointer\"\n          title=\"{{ tabLabel }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i\n            [c8yIcon]=\"tab?.icon\"\n            *ngIf=\"tab?.icon && tab?.label\"\n          ></i>\n          <span *ngIf=\"tab?.label\">{{ tabLabel }}</span>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TabsOutletComponent, decorators: [{
             type: Component,
@@ -13312,7 +13393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         NgComponentOutlet,
                         C8yComponentOutlet,
                         C8yTranslatePipe
-                    ], 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" }]
+                    ], 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        @let tabLabel = tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate);\n        <a\n          class=\"pointer\"\n          title=\"{{ tabLabel }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i\n            [c8yIcon]=\"tab?.icon\"\n            *ngIf=\"tab?.icon && tab?.label\"\n          ></i>\n          <span *ngIf=\"tab?.label\">{{ tabLabel }}</span>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\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$4.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }, { type: i1$4.ActivatedRoute }], propDecorators: { tabs: [{
                 type: Input
             }], orientation: [{
@@ -14448,7 +14529,13 @@ class SimplifiedAuthService {
         this.cleanSessionStorage();
         this.realtime.disconnect();
         this.ui.currentUser.next(null);
-        return Promise.all([this.basicAuth.logout(), this.cookieAuth.logout()]);
+        return Promise.all([
+            this.basicAuth.logout(),
+            this.cookieAuth.logout(),
+            this.client.authIsInstanceOf(BearerAuthFromSessionStorage)
+                ? this.client.performLogoutOnCurrentAuthStrategy()
+                : BearerAuthFromSessionStorage.removeEntriesFromSessionStorage()
+        ]);
     }
     cleanLocalStorage() {
         localStorage.removeItem(TOKEN_KEY);
@@ -16127,7 +16214,7 @@ class TypeaheadComponent {
                 multi: true
             },
             SelectKeyboardService
-        ], queries: [{ propertyName: "list", predicate: ListItemComponent }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "searchControlModel", first: true, predicate: ["searchControlModel"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], 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]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div\n    class=\"input-group input-group-dropdown input-group-lg input-group-search\"\n    role=\"button\"\n  >\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"typeahead--dropdown-menu\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], queries: [{ propertyName: "list", predicate: ListItemComponent }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "searchControlModel", first: true, predicate: ["searchControlModel"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], 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]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div\n    class=\"input-group input-group-dropdown \"\n    role=\"button\"\n  >\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"typeahead--dropdown-menu\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TypeaheadComponent, decorators: [{
             type: Component,
@@ -16152,7 +16239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         IconDirective,
                         ListGroupComponent,
                         C8yTranslatePipe
-                    ], 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]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div\n    class=\"input-group input-group-dropdown input-group-lg input-group-search\"\n    role=\"button\"\n  >\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"typeahead--dropdown-menu\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></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]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div\n    class=\"input-group input-group-dropdown \"\n    role=\"button\"\n  >\n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      [ngClass]=\"{\n        'p-r-80':\n          !hideNew &&\n          (selected\n            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n            : false),\n        'p-r-40': hideNew || getDisplayProperty()?.length === 0\n      }\"\n      [required]=\"required\"\n      [ngModel]=\"selected ? getDisplayProperty() : ''\"\n      [placeholder]=\"placeholder | translate\"\n      (blur)=\"doBlur()\"\n      [name]=\"name\"\n      [maxlength]=\"maxlength\"\n      [disabled]=\"disabled\"\n    />\n    <span\n      class=\"label label-info p-absolute\"\n      style=\"top: 10px; right: 40px; z-index: 10\"\n      *ngIf=\"\n        !hideNew &&\n        (selected\n          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries\n          : false)\n      \"\n    >\n      {{ 'New' | translate }}\n    </span>\n\n    <span class=\"input-group-btn\">\n      <button\n        class=\"btn btn-dot\"\n        [title]=\"title\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"typeahead-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"typeahead--dropdown-menu\"\n    *dropdownMenu\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n" }]
         }], ctorParameters: () => [{ type: SelectKeyboardService }], propDecorators: { searchControl: [{
                 type: ViewChild,
                 args: ['searchControl', { static: false }]
@@ -17701,6 +17788,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [{ type: PreviewService }] });
 
+const PRODUCT_EXPERIENCE_FEEDBACK_FORM = {
+    EVENTS: {
+        FORM_SUBMIT: 'feedback-form-submit'
+    }
+};
+
+class FeedbackFormComponent {
+    constructor(fb, gainsightService) {
+        this.fb = fb;
+        this.gainsightService = gainsightService;
+        this.feedbackMessageTpl = gettext('We want to hear from you. Share your feedback on the <strong>{{featurePreviewName}}</strong> feature preview to help us improve Cumulocity.');
+        this.stars = [1, 2, 3, 4, 5];
+        this.hoveredRating = 0;
+        this.ratingLockOnHover = false;
+        this.submitted = {};
+        this.feedbackForm = this.initForm();
+    }
+    ngOnChanges(changes) {
+        if (changes['featureKey'] && !changes['featureKey'].firstChange) {
+            this.feedbackForm.reset();
+            this.submitted[this.featureKey] = false;
+            this.ratingLockOnHover = false;
+            this.hoveredRating = 0;
+        }
+    }
+    setRating(star) {
+        this.feedbackForm.patchValue({ rating: star });
+        this.ratingLockOnHover = true;
+    }
+    onMouseDown(star) {
+        if (this.hoveredRating > 0) {
+            this.hoveredRating = star; // needed in case ratingLockOnHover is true
+            this.setRating(star);
+        }
+    }
+    onMouseEnter(star) {
+        if (!this.ratingLockOnHover) {
+            this.hoveredRating = star;
+        }
+    }
+    onMouseLeave() {
+        if (!this.ratingLockOnHover) {
+            this.hoveredRating = 0;
+        }
+    }
+    onSubmit() {
+        if (this.feedbackForm.valid) {
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_FEEDBACK_FORM.EVENTS.FORM_SUBMIT, {
+                component: this.featureKey,
+                ...this.feedbackForm.value
+            });
+            this.feedbackForm.reset();
+            this.submitted[this.featureKey] = true;
+            this.ratingLockOnHover = false;
+            this.hoveredRating = 0;
+        }
+    }
+    initForm() {
+        return this.fb.group({
+            feedback: ['', [Validators.maxLength(900)]],
+            rating: [null, [Validators.required]],
+            contactViaEmail: [false]
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackFormComponent, deps: [{ token: i1$8.FormBuilder }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FeedbackFormComponent, isStandalone: true, selector: "c8y-feedback-form", inputs: { featureKey: "featureKey", featurePreviewName: "featurePreviewName" }, usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"card card-highlight b-r-16 m-t-40\"\n  [formGroup]=\"feedbackForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"card-header p-48 p-b-24\">\n    <h3 translate>We value your feedback.</h3>\n  </div>\n  <div class=\"card-block p-48 p-t-0\">\n    <div class=\"d-flex-md row\">\n      <div class=\"col-md-4\">\n        <p\n          class=\"m-b-8\"\n          [innerHTML]=\"feedbackMessageTpl | translate: { featurePreviewName: featurePreviewName }\"\n        ></p>\n        <p\n          class=\"m-b-24\"\n          translate\n        >\n          Your insights and suggestions directly influence the future of the platform.\n        </p>\n      </div>\n      <div\n        class=\"col-md-7\"\n        style=\"min-height: 256px\"\n      >\n        @if (!submitted[featureKey]) {\n          <div class=\"form-group\">\n            <label class=\"text-medium\">\n              {{ 'How would you rate your experience with this feature?' | translate }}\n            </label>\n            <div\n              class=\"d-flex a-i-center gap-4\"\n              (mouseleave)=\"onMouseLeave()\"\n            >\n              @for (star of stars; track star) {\n                <button\n                  class=\"btn-clean btn-lg\"\n                  [attr.aria-label]=\"\n                    'Your rating: {{ starCount }} star(s)' | translate: { starCount: star }\n                  \"\n                  type=\"button\"\n                  (mousedown)=\"onMouseDown(star)\"\n                  (mouseenter)=\"onMouseEnter(star)\"\n                >\n                  @if (star <= (hoveredRating || feedbackForm.get('rating')?.value || 0)) {\n                    <i class=\"dlt-c8y-icon-star stroked-icon status minor\"></i>\n                  } @else {\n                    <i class=\"dlt-c8y-icon-star-outline status\"></i>\n                  }\n                </button>\n              }\n            </div>\n          </div>\n\n          <div class=\"form-group\">\n            <label\n              class=\"text-medium\"\n              for=\"feedback\"\n              translate\n            >\n              Share your feedback, suggestions, or any issues you\u2019ve encountered.\n            </label>\n            <textarea\n              class=\"form-control no-resize inner-scroll\"\n              style=\"max-height: 100px !important\"\n              [attr.aria-label]=\"'Enter your feedback here' | translate\"\n              id=\"feedback\"\n              c8y-textarea-autoresize\n              formControlName=\"feedback\"\n              maxlength=\"900\"\n            ></textarea>\n          </div>\n\n          <label class=\"c8y-switch\">\n            <input\n              id=\"contactViaEmail\"\n              type=\"checkbox\"\n              formControlName=\"contactViaEmail\"\n            />\n            <span></span>\n            <span>\n              {{ 'I\u2019m open to being contacted for follow-up about my feedback' | translate }}\n            </span>\n          </label>\n\n          <button\n            class=\"btn btn-primary m-t-24\"\n            type=\"submit\"\n            [disabled]=\"feedbackForm.invalid\"\n            translate\n          >\n            Submit feedback\n          </button>\n        } @else {\n          <c8y-operation-result\n            class=\"d-block\"\n            style=\"margin-top: -40px\"\n            type=\"success\"\n            [size]=\"90\"\n            text=\"{{ 'Thank you for your feedback.' | translate }}\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        }\n      </div>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "ngmodule", type: C8yTranslateModule }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "component", type: OperationResultComponent, selector: "c8y-operation-result", inputs: ["text", "vertical", "size", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeedbackFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-feedback-form', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        TextareaAutoresizeDirective,
+                        C8yTranslateModule,
+                        OperationResultComponent
+                    ], template: "<form\n  class=\"card card-highlight b-r-16 m-t-40\"\n  [formGroup]=\"feedbackForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"card-header p-48 p-b-24\">\n    <h3 translate>We value your feedback.</h3>\n  </div>\n  <div class=\"card-block p-48 p-t-0\">\n    <div class=\"d-flex-md row\">\n      <div class=\"col-md-4\">\n        <p\n          class=\"m-b-8\"\n          [innerHTML]=\"feedbackMessageTpl | translate: { featurePreviewName: featurePreviewName }\"\n        ></p>\n        <p\n          class=\"m-b-24\"\n          translate\n        >\n          Your insights and suggestions directly influence the future of the platform.\n        </p>\n      </div>\n      <div\n        class=\"col-md-7\"\n        style=\"min-height: 256px\"\n      >\n        @if (!submitted[featureKey]) {\n          <div class=\"form-group\">\n            <label class=\"text-medium\">\n              {{ 'How would you rate your experience with this feature?' | translate }}\n            </label>\n            <div\n              class=\"d-flex a-i-center gap-4\"\n              (mouseleave)=\"onMouseLeave()\"\n            >\n              @for (star of stars; track star) {\n                <button\n                  class=\"btn-clean btn-lg\"\n                  [attr.aria-label]=\"\n                    'Your rating: {{ starCount }} star(s)' | translate: { starCount: star }\n                  \"\n                  type=\"button\"\n                  (mousedown)=\"onMouseDown(star)\"\n                  (mouseenter)=\"onMouseEnter(star)\"\n                >\n                  @if (star <= (hoveredRating || feedbackForm.get('rating')?.value || 0)) {\n                    <i class=\"dlt-c8y-icon-star stroked-icon status minor\"></i>\n                  } @else {\n                    <i class=\"dlt-c8y-icon-star-outline status\"></i>\n                  }\n                </button>\n              }\n            </div>\n          </div>\n\n          <div class=\"form-group\">\n            <label\n              class=\"text-medium\"\n              for=\"feedback\"\n              translate\n            >\n              Share your feedback, suggestions, or any issues you\u2019ve encountered.\n            </label>\n            <textarea\n              class=\"form-control no-resize inner-scroll\"\n              style=\"max-height: 100px !important\"\n              [attr.aria-label]=\"'Enter your feedback here' | translate\"\n              id=\"feedback\"\n              c8y-textarea-autoresize\n              formControlName=\"feedback\"\n              maxlength=\"900\"\n            ></textarea>\n          </div>\n\n          <label class=\"c8y-switch\">\n            <input\n              id=\"contactViaEmail\"\n              type=\"checkbox\"\n              formControlName=\"contactViaEmail\"\n            />\n            <span></span>\n            <span>\n              {{ 'I\u2019m open to being contacted for follow-up about my feedback' | translate }}\n            </span>\n          </label>\n\n          <button\n            class=\"btn btn-primary m-t-24\"\n            type=\"submit\"\n            [disabled]=\"feedbackForm.invalid\"\n            translate\n          >\n            Submit feedback\n          </button>\n        } @else {\n          <c8y-operation-result\n            class=\"d-block\"\n            style=\"margin-top: -40px\"\n            type=\"success\"\n            [size]=\"90\"\n            text=\"{{ 'Thank you for your feedback.' | translate }}\"\n            [vertical]=\"true\"\n          ></c8y-operation-result>\n        }\n      </div>\n    </div>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$8.FormBuilder }, { type: GainsightService }], propDecorators: { featureKey: [{
+                type: Input
+            }], featurePreviewName: [{
+                type: Input
+            }] } });
+
 class PreviewFeatureComponent {
     constructor() {
         this.description$ = new BehaviorSubject('');
@@ -17756,11 +17924,19 @@ class PreviewFeatureComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PreviewFeatureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PreviewFeatureComponent, isStandalone: true, selector: "c8y-preview-feature", host: { classAttribute: "d-contents" }, providers: [MarkdownToHtmlPipe], ngImport: i0, template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow min-width-0\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            <span class=\"text-truncate\">\n              {{ feature.label }}\n            </span>\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll markdown-content\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: ListGroupModule }, { kind: "pipe", type: FeatureStatePipe, name: "featureState" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PreviewFeatureComponent, isStandalone: true, selector: "c8y-preview-feature", host: { classAttribute: "d-contents" }, providers: [MarkdownToHtmlPipe], ngImport: i0, template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow min-width-0\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            <span class=\"text-truncate\">\n              {{ feature.label }}\n            </span>\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll markdown-content\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n        @if (selectedFeature.key) {\n          <c8y-feedback-form\n            [featureKey]=\"selectedFeature.key\"\n            [featurePreviewName]=\"selectedFeature.label\"\n          ></c8y-feedback-form>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n  @if (selectedFeature.key) {\n    <c8y-feedback-form\n      [featureKey]=\"selectedFeature.key\"\n      [featurePreviewName]=\"selectedFeature.label\"\n    ></c8y-feedback-form>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$a.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: ListGroupModule }, { kind: "pipe", type: FeatureStatePipe, name: "featureState" }, { kind: "component", type: FeedbackFormComponent, selector: "c8y-feedback-form", inputs: ["featureKey", "featurePreviewName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PreviewFeatureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-preview-feature', host: { class: 'd-contents' }, standalone: true, imports: [NgForOf, NgIf, AsyncPipe, CommonModule, ListGroupModule, FeatureStatePipe], providers: [MarkdownToHtmlPipe], template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow min-width-0\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            <span class=\"text-truncate\">\n              {{ feature.label }}\n            </span>\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll markdown-content\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-preview-feature', host: { class: 'd-contents' }, standalone: true, imports: [
+                        NgForOf,
+                        NgIf,
+                        AsyncPipe,
+                        CommonModule,
+                        ListGroupModule,
+                        FeatureStatePipe,
+                        FeedbackFormComponent
+                    ], providers: [MarkdownToHtmlPipe], template: "<div class=\"card-block separator-bottom bg-component text-center flex-no-shrink p-24\">\n  <div class=\"d-flex fit-w a-i-center j-c-center\">\n    <i\n      class=\"icon-24 m-r-8\"\n      [c8yIcon]=\"'science'\"\n    ></i>\n    <h3\n      class=\"m-0\"\n      translate\n    >\n      Preview features\n    </h3>\n  </div>\n  <p class=\"text-16 m-t-8\">\n    {{\n      'Select any feature to view additional details and documentation. Toggle features on or off using the switches.'\n        | translate\n    }}\n  </p>\n\n  <p>\n    {{\n      'These beta capabilities may change or be removed before final release. We value your feedback. The descriptions for the features below are available only in English.'\n        | translate\n    }}\n  </p>\n</div>\n\n<div class=\"card-block p-0\">\n  <div class=\"d-flex fit-h\">\n    <div class=\"col-md-4 col-lg-3 p-l-0 p-r-0 sticky-top m-t-0 inner-scroll bg-level-1\">\n      <div class=\"nav-tabs nav-tabs-vertical nav-tabs-vertical--wide p-t-0\">\n        <div\n          [class.active]=\"feature === selectedFeature\"\n          class=\"d-flex fit-w a-i-center\"\n          *ngFor=\"let feature of features$ | async\"\n        >\n          <button\n            class=\"d-flex gap-4 text-truncate flex-grow min-width-0\"\n            title=\"{{ feature.label }}\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n            (click)=\"updateSelectedFeature(feature)\"\n          >\n            <i\n              class=\"m-l-0\"\n              [c8yIcon]=\"'science'\"\n            ></i>\n            <span class=\"text-truncate\">\n              {{ feature.label }}\n            </span>\n          </button>\n          <div\n            class=\"a-s-stretch d-flex a-i-center separator-bottom p-r-16\"\n            [ngClass]=\"{\n              'bg-component': feature === selectedFeature,\n              'bg-level-1': feature !== selectedFeature\n            }\"\n          >\n            <label\n              class=\"c8y-switch c8y-switch--inline m-l-auto\"\n              title=\"{{ 'Enable or disable' | translate }}\"\n            >\n              <input\n                [attr.aria-label]=\"feature.label\"\n                type=\"checkbox\"\n                [checked]=\"feature.key | featureState | async\"\n                (change)=\"$event.stopPropagation(); onToggle(feature, $event)\"\n              />\n              <span class=\"slider round\"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"col-md-8 col-lg-9 p-24 inner-scroll markdown-content\"\n      *ngIf=\"selectedFeature\"\n    >\n      <span class=\"tag tag--primary h4\">\n        {{ 'Feature preview' | translate }} \u2014 {{ selectedFeature.label }}\n      </span>\n      <div *ngIf=\"isComponent(description$.value); else stringDescription\">\n        <ng-container *ngComponentOutlet=\"description$.value\"></ng-container>\n        @if (selectedFeature.key) {\n          <c8y-feedback-form\n            [featureKey]=\"selectedFeature.key\"\n            [featurePreviewName]=\"selectedFeature.label\"\n          ></c8y-feedback-form>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"text-center card-footer p-24 separator\">\n  <button\n    class=\"btn btn-default\"\n    title=\"{{ 'Close' | translate }}\"\n    type=\"button\"\n    (click)=\"close()\"\n  >\n    {{ 'Close' | translate }}\n  </button>\n</div>\n\n<ng-template #stringDescription>\n  <p [innerHTML]=\"description$.value\"></p>\n  @if (selectedFeature.key) {\n    <c8y-feedback-form\n      [featureKey]=\"selectedFeature.key\"\n      [featurePreviewName]=\"selectedFeature.label\"\n    ></c8y-feedback-form>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class PreviewFeatureQueryParamDrawerFactory {
@@ -18276,7 +18452,7 @@ class SearchInputComponent {
         this.isLoading = term.length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1$4.Router }, { token: i1.InventoryService }, { token: InventorySearchService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SearchInputComponent, isStandalone: true, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", customPlaceholder: "customPlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick", onOpenToggle: "onOpenToggle" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n  *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n  dropdown\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    [title]=\"'Search' | translate\"\n    type=\"button\"\n    dropdownToggle\n    data-cy=\"search-input--search-btn\"\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"search\"\n    ></i>\n  </button>\n\n  <div\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n    id=\"searchDropdown\"\n    *dropdownMenu\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div\n  class=\"search-header-inline\"\n  *ngIf=\"mode === 'select'\"\n>\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form\n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' || mode === 'wildcardsearch' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [title]=\"(term ? RESET_TEXT : SEARCH_TEXT) | translate\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"false\"\n    >\n      <div *ngIf=\"enableCustomTemplatePlaceholder\">\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0 && mode === 'search'\"\n        [selectable]=\"false\"\n      >\n        <div class=\"d-flex\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Starts with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Contains' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Ends with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recent search views\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recently registered devices\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *c8yFor=\"\n          let result of term.length === 0 && !groupsOnly\n            ? recentlyRegisteredResults$\n            : { data: [] };\n          loadMore: 'none'\n        \"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Search results\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        [title]=\"result.name\"\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        (click)=\"open($event, result, result.name)\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-ui-empty-state\n          [icon]=\"'search'\"\n          [title]=\"'No match found.' | translate\"\n          data-cy=\"search-input--empty-state\"\n          [ngClass]=\"{ 'p-4': mode === 'search' || mode === 'wildcardsearch' }\"\n          [horizontal]=\"true\"\n          *ngIf=\"noMatch\"\n        >\n          <small\n            translate\n            *ngIf=\"mode === 'search'\"\n          >\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small\n            translate\n            *ngIf=\"mode === 'select' || mode === 'wildcardsearch'\"\n          >\n            Try to rephrase your search word.\n          </small>\n        </c8y-ui-empty-state>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\">\n        <c8y-loading></c8y-loading>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i\n            class=\"text-info m-r-4\"\n            c8yIcon=\"info-circle\"\n          ></i>\n          <p\n            class=\"m-r-8\"\n            translate\n          >\n            Need more filter possibilities?\n          </p>\n          <button\n            class=\"m-l-16 btn btn-default btn-sm\"\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            type=\"button\"\n            (mousedown)=\"onOpenAssetTable()\"\n            data-cy=\"search-input--asset-table-btn\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SearchInputComponent, isStandalone: true, selector: "c8y-search-input", inputs: { mode: "mode", enableCustomTemplatePlaceholder: "enableCustomTemplatePlaceholder", customPlaceholder: "customPlaceholder", externalTerm: "externalTerm", customDataQuery: "customDataQuery", container: "container", groupsOnly: "groupsOnly" }, outputs: { filter: "filter", search: "search", reset: "reset", onClick: "onClick", onOpenToggle: "onOpenToggle" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: TypeaheadComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["searchDropdown"], descendants: true }], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n  *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n  dropdown\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    [title]=\"'Search' | translate\"\n    type=\"button\"\n    dropdownToggle\n    data-cy=\"search-input--search-btn\"\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"search\"\n    ></i>\n  </button>\n\n  <div\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n    id=\"searchDropdown\"\n    *dropdownMenu\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div\n  class=\"search-header-inline\"\n  *ngIf=\"mode === 'select'\"\n>\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form\n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' || mode === 'wildcardsearch' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [title]=\"(term ? RESET_TEXT : SEARCH_TEXT) | translate\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"false\"\n      [ngClass]=\"{ 'input-group-search input-group-lg': mode !== 'select' }\"\n    >\n      <div *ngIf=\"enableCustomTemplatePlaceholder\">\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0 && mode === 'search'\"\n        [selectable]=\"false\"\n      >\n        <div class=\"d-flex\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Starts with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Contains' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Ends with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recent search views\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recently registered devices\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *c8yFor=\"\n          let result of term.length === 0 && !groupsOnly\n            ? recentlyRegisteredResults$\n            : { data: [] };\n          loadMore: 'none'\n        \"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Search results\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        [title]=\"result.name\"\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        (click)=\"open($event, result, result.name)\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-ui-empty-state\n          [icon]=\"'search'\"\n          [title]=\"'No match found.' | translate\"\n          data-cy=\"search-input--empty-state\"\n          [ngClass]=\"{ 'p-4': mode === 'search' || mode === 'wildcardsearch' }\"\n          [horizontal]=\"true\"\n          *ngIf=\"noMatch\"\n        >\n          <small\n            translate\n            *ngIf=\"mode === 'search'\"\n          >\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small\n            translate\n            *ngIf=\"mode === 'select' || mode === 'wildcardsearch'\"\n          >\n            Try to rephrase your search word.\n          </small>\n        </c8y-ui-empty-state>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\">\n        <c8y-loading></c8y-loading>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i\n            class=\"text-info m-r-4\"\n            c8yIcon=\"info-circle\"\n          ></i>\n          <p\n            class=\"m-r-8\"\n            translate\n          >\n            Need more filter possibilities?\n          </p>\n          <button\n            class=\"m-l-16 btn btn-default btn-sm\"\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            type=\"button\"\n            (mousedown)=\"onOpenAssetTable()\"\n            data-cy=\"search-input--asset-table-btn\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
@@ -18301,7 +18477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         AsyncPipe,
                         ShouldShowMoPipe,
                         GetGroupIconPipe
-                    ], template: "<div\n  class=\"dropdown\"\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n  *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n  dropdown\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    [title]=\"'Search' | translate\"\n    type=\"button\"\n    dropdownToggle\n    data-cy=\"search-input--search-btn\"\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"search\"\n    ></i>\n  </button>\n\n  <div\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n    id=\"searchDropdown\"\n    *dropdownMenu\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div\n  class=\"search-header-inline\"\n  *ngIf=\"mode === 'select'\"\n>\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form\n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' || mode === 'wildcardsearch' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [title]=\"(term ? RESET_TEXT : SEARCH_TEXT) | translate\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"false\"\n    >\n      <div *ngIf=\"enableCustomTemplatePlaceholder\">\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0 && mode === 'search'\"\n        [selectable]=\"false\"\n      >\n        <div class=\"d-flex\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Starts with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Contains' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Ends with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recent search views\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recently registered devices\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *c8yFor=\"\n          let result of term.length === 0 && !groupsOnly\n            ? recentlyRegisteredResults$\n            : { data: [] };\n          loadMore: 'none'\n        \"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Search results\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        [title]=\"result.name\"\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        (click)=\"open($event, result, result.name)\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-ui-empty-state\n          [icon]=\"'search'\"\n          [title]=\"'No match found.' | translate\"\n          data-cy=\"search-input--empty-state\"\n          [ngClass]=\"{ 'p-4': mode === 'search' || mode === 'wildcardsearch' }\"\n          [horizontal]=\"true\"\n          *ngIf=\"noMatch\"\n        >\n          <small\n            translate\n            *ngIf=\"mode === 'search'\"\n          >\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small\n            translate\n            *ngIf=\"mode === 'select' || mode === 'wildcardsearch'\"\n          >\n            Try to rephrase your search word.\n          </small>\n        </c8y-ui-empty-state>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\">\n        <c8y-loading></c8y-loading>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i\n            class=\"text-info m-r-4\"\n            c8yIcon=\"info-circle\"\n          ></i>\n          <p\n            class=\"m-r-8\"\n            translate\n          >\n            Need more filter possibilities?\n          </p>\n          <button\n            class=\"m-l-16 btn btn-default btn-sm\"\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            type=\"button\"\n            (mousedown)=\"onOpenAssetTable()\"\n            data-cy=\"search-input--asset-table-btn\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n" }]
+                    ], template: "<div\n  class=\"dropdown\"\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n  *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n  dropdown\n>\n  <button\n    class=\"main-header-button dropdown-toggle c8y-dropdown\"\n    [title]=\"'Search' | translate\"\n    type=\"button\"\n    dropdownToggle\n    data-cy=\"search-input--search-btn\"\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"search\"\n    ></i>\n  </button>\n\n  <div\n    class=\"search-header-menu dropdown-menu dropdown-menu-right\"\n    id=\"searchDropdown\"\n    *dropdownMenu\n  >\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n</div>\n\n<div\n  class=\"search-header-inline\"\n  *ngIf=\"mode === 'select'\"\n>\n  <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n</div>\n<ng-template #form>\n  <form\n    [ngClass]=\"{ 'c8y-search-form': mode === 'search' || mode === 'wildcardsearch' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      [title]=\"(term ? RESET_TEXT : SEARCH_TEXT) | translate\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"false\"\n      [ngClass]=\"{ 'input-group-search input-group-lg': mode !== 'select' }\"\n    >\n      <div *ngIf=\"enableCustomTemplatePlaceholder\">\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0 && mode === 'search'\"\n        [selectable]=\"false\"\n      >\n        <div class=\"d-flex\">\n          <p class=\"m-r-4 text-muted\">\n            <em translate>Searching by exact match. Click for other search options:</em>\n          </p>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Starts with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-starts-with\"\n              (click)=\"onFilter(term + '*')\"\n            >\n              {{ 'Starts with' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Contains' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-contains\"\n              (click)=\"onFilter('*' + term + '*')\"\n            >\n              {{ 'Contains' | translate }}\n            </button>\n            <button\n              class=\"btn btn-default\"\n              title=\"{{ 'Ends with' | translate }}\"\n              type=\"button\"\n              data-cy=\"search-input--search-ends-with\"\n              (click)=\"onFilter('*' + term)\"\n            >\n              {{ 'Ends with' | translate }}\n            </button>\n          </div>\n        </div>\n      </c8y-li>\n\n      <!-- Recent search -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recent search views\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Recently registered devices\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        *c8yFor=\"\n          let result of term.length === 0 && !groupsOnly\n            ? recentlyRegisteredResults$\n            : { data: [] };\n          loadMore: 'none'\n        \"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Search results -->\n      <c8y-li\n        class=\"m-l-32 m-r-32\"\n        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend\">\n          <span\n            class=\"text-bold text-muted\"\n            translate\n          >\n            Search results\n          </span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-32 m-r-32\"\n        [title]=\"result.name\"\n        *c8yFor=\"\n          let result of results$;\n          loadMore: 'auto';\n          notFound: notFoundTemplate;\n          loadingTemplate: loading;\n          loadNextLabel: 'Find more\u2026'\n        \"\n        (click)=\"open($event, result, result.name)\"\n        data-cy=\"search-input--search-results\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- No search results found entry -->\n      <ng-template #notFoundTemplate>\n        <c8y-ui-empty-state\n          [icon]=\"'search'\"\n          [title]=\"'No match found.' | translate\"\n          data-cy=\"search-input--empty-state\"\n          [ngClass]=\"{ 'p-4': mode === 'search' || mode === 'wildcardsearch' }\"\n          [horizontal]=\"true\"\n          *ngIf=\"noMatch\"\n        >\n          <small\n            translate\n            *ngIf=\"mode === 'search'\"\n          >\n            Try to filter or open the asset grid to show all devices and groups.\n          </small>\n          <small\n            translate\n            *ngIf=\"mode === 'select' || mode === 'wildcardsearch'\"\n          >\n            Try to rephrase your search word.\n          </small>\n        </c8y-ui-empty-state>\n      </ng-template>\n\n      <!-- loading bar first entries -->\n      <c8y-li *ngIf=\"isLoading\">\n        <c8y-loading></c8y-loading>\n      </c8y-li>\n\n      <!-- loading bar for loading more entries (inventory roles) -->\n      <ng-template #loading>\n        <c8y-li>\n          <c8y-loading></c8y-loading>\n        </c8y-li>\n      </ng-template>\n\n      <!-- more filter possibilities -->\n      <c8y-li\n        class=\"m-t-24 bg-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom\"\n        [selectable]=\"false\"\n        *ngIf=\"mode === 'search' || mode === 'wildcardsearch'\"\n      >\n        <div class=\"d-flex a-i-center\">\n          <i\n            class=\"text-info m-r-4\"\n            c8yIcon=\"info-circle\"\n          ></i>\n          <p\n            class=\"m-r-8\"\n            translate\n          >\n            Need more filter possibilities?\n          </p>\n          <button\n            class=\"m-l-16 btn btn-default btn-sm\"\n            title=\"{{ 'Go to the asset data table' | translate }}\"\n            type=\"button\"\n            (mousedown)=\"onOpenAssetTable()\"\n            data-cy=\"search-input--asset-table-btn\"\n          >\n            {{ 'Go to the asset data table' | translate }}\n          </button>\n        </div>\n      </c8y-li>\n    </c8y-typeahead>\n  </form>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1.InventoryService }, { type: InventorySearchService }, { type: i0.ChangeDetectorRef }], propDecorators: { mode: [{
                 type: Input
             }], enableCustomTemplatePlaceholder: [{
@@ -20445,6 +20621,312 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+/**
+ * Service to show a modal.
+ */
+class ModalService {
+    constructor(modalService, gainsightService) {
+        this.modalService = modalService;
+        this.gainsightService = gainsightService;
+    }
+    /**
+     * Shows a quick confirm message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
+     * @param confirmOptions Selection options to display as checkbox list.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels: modalLabels, status, confirmOptions },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick acknowledge message modal.
+     * @param title The title of that modal.
+     * @param body The text body to display.
+     * @param status The status.
+     * @param acknowledgeLabel The label to use.
+     * @param productExperienceEvent Additional data to attach to custom product experience events.
+     */
+    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
+        const labels = { ok: acknowledgeLabel, cancel: null };
+        const modalRef = this.modalService.show(ConfirmModalComponent, {
+            initialState: { title, body, labels, status },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title',
+            ignoreBackdropClick: true
+        });
+        if (productExperienceEvent) {
+            productExperienceEvent.data = { ...productExperienceEvent.data, title };
+        }
+        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
+        return await modalRef.content.result;
+    }
+    /**
+     * Shows a quick logout confirmation modal.
+     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
+     * @param status The status.
+     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
+     */
+    async confirmLogout(body, status = Status.WARNING, labels = {}) {
+        const modalLabels = {
+            ok: labels.ok || gettext$1('Confirm and log out'),
+            cancel: labels.cancel || gettext$1('Cancel')
+        };
+        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
+        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
+    }
+    triggerEvent(result, labels, productExperienceEvent) {
+        const data = { ...productExperienceEvent.data, url: window.location.href };
+        result
+            .then(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.ok
+            });
+        })
+            .catch(() => {
+            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
+                ...data,
+                result: labels.cancel
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
+
+class ThemeSwitcherService {
+    constructor(options) {
+        this.options = options;
+        this.darkThemeClass = `c8y-dark-theme`;
+        this.themeOptions = [
+            {
+                label: gettext$1('Light'),
+                value: 'light',
+                icon: 'sun'
+            },
+            {
+                label: gettext$1('Dark'),
+                value: 'dark',
+                icon: 'moon'
+            },
+            {
+                label: gettext$1('System'),
+                value: 'system',
+                icon: 'imac-settings'
+            }
+        ];
+        this._userSelectedThemePreference$ = new BehaviorSubject(this.getCurrentThemePreference());
+        this._temporaryThemePreference$ = new BehaviorSubject('none');
+        this.userSelectedThemePreference$ = this._userSelectedThemePreference$.asObservable();
+        const userSelectedTheme$ = this.userSelectedThemePreference$.pipe(switchMap(preference => {
+            if (preference === 'system') {
+                return this.getUsersSystemPreferenceForTheme$();
+            }
+            return of(preference);
+        }));
+        this.disableThemeSelection$ = this._temporaryThemePreference$.pipe(map(preference => preference !== 'none'));
+        this.currentlyAppliedTheme$ = this._temporaryThemePreference$.pipe(switchMap(temporaryPreference => {
+            if (temporaryPreference !== 'none') {
+                return of(temporaryPreference);
+            }
+            return userSelectedTheme$;
+        }));
+        this.darkThemeAvailable$ = this.options.get$('darkThemeAvailable').pipe(map(value => !!value));
+    }
+    getCurrentThemePreference() {
+        const value = getThemePreference();
+        if (value === 'system' || value === 'dark') {
+            return value;
+        }
+        return 'light';
+    }
+    getUsersSystemPreferenceForTheme$() {
+        return fromEvent(window.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith(window.matchMedia('(prefers-color-scheme: dark)')), map((e) => (e.matches ? 'dark' : 'light')));
+    }
+    changeUserPreference(preference) {
+        setThemePreference(preference);
+        this._userSelectedThemePreference$.next(preference);
+        this.applyTheme(preference);
+    }
+    temporaryChangeTheme(preference) {
+        this._temporaryThemePreference$.next(preference);
+        this.applyTheme(preference);
+    }
+    resetTemporaryTheme() {
+        this._temporaryThemePreference$.next('none');
+        this.applyTheme(this.getCurrentThemePreference());
+    }
+    applyTheme(preference) {
+        applyTheme(preference);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeSwitcherService, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeSwitcherService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeSwitcherService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: OptionsService }] });
+
+class UiSettingsComponent {
+    constructor(translate, state, ui, userPreferences, c8yModalService, headerService, themeSwitcher) {
+        this.translate = translate;
+        this.state = state;
+        this.ui = ui;
+        this.userPreferences = userPreferences;
+        this.c8yModalService = c8yModalService;
+        this.headerService = headerService;
+        this.themeSwitcher = themeSwitcher;
+        this.destroyed$ = new Subject();
+        this.currentLang = this.ui.state.lang;
+        this.ui.state$
+            .pipe(filter(({ lang }) => lang !== this.currentLang), takeUntil(this.destroyed$), first$1())
+            .subscribe(({ lang }) => (this.currentLang = lang));
+        this.open$ = this.headerService.rightDrawerOpen$;
+    }
+    ngOnInit() {
+        this.languages = this.state.state.langs.map(l => ({
+            lang: l,
+            nativeLanguage: this.translate.getNativeLanguage(l)
+        }));
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    async onLanguageChange(changedLang) {
+        if (!changedLang) {
+            return;
+        }
+        await this.translate.switchToLanguage(changedLang);
+        if (await this.persistLanguage(changedLang)) {
+            location.reload();
+        }
+    }
+    async persistLanguage(lang) {
+        let shouldReload = true;
+        try {
+            await this.c8yModalService.confirm(gettext$1('Reload recommended'), gettext$1('To change the language in the entire application, we recommend you to reload the page. If you have any unsaved changes, you can reload later. How would you like to proceed?'), Status.WARNING, {
+                ok: gettext$1('Reload now'),
+                cancel: gettext$1('Reload later')
+            });
+        }
+        catch (ex) {
+            shouldReload = false;
+        }
+        finally {
+            this.translate.saveInLocalStorage(lang);
+            await this.userPreferences.set('language', lang);
+            this.currentLang = lang;
+        }
+        return shouldReload;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsComponent, deps: [{ token: TranslateService }, { token: AppStateService }, { token: AppStateService }, { token: UserPreferencesService }, { token: ModalService }, { token: HeaderService }, { token: ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: UiSettingsComponent, isStandalone: true, selector: "c8y-ui-settings", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-ui-settings', standalone: true, imports: [
+                        IconDirective,
+                        NgIf,
+                        C8yTranslateDirective,
+                        NgFor,
+                        FormsModule$1,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: TranslateService }, { type: AppStateService }, { type: AppStateService }, { type: UserPreferencesService }, { type: ModalService }, { type: HeaderService }, { type: ThemeSwitcherService }] });
+
+class UiSettingsModule {
+    static providers() {
+        return [
+            hookDrawer({
+                component: UiSettingsComponent,
+                position: 'right',
+                priority: 90,
+                id: 'uiSettings'
+            })
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent], exports: [UiSettingsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule$1, UiSettingsComponent],
+                    exports: [UiSettingsComponent]
+                }]
+        }] });
+
+class UserMenuItemComponent {
+    constructor(userService, headerService) {
+        this.userService = userService;
+        this.headerService = headerService;
+        this.priority = 0;
+        this.click = new EventEmitter();
+        this.open$ = this.headerService.rightDrawerOpen$;
+    }
+    ngAfterViewInit() {
+        this.viewInitTimeout = setTimeout(() => this.userService.add(this));
+    }
+    ngOnDestroy() {
+        clearTimeout(this.viewInitTimeout);
+        this.userService.remove(this);
+    }
+    onClick() {
+        this.click.emit(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserMenuItemComponent, deps: [{ token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: UserMenuItemComponent, isStandalone: true, selector: "c8y-user-menu-item", inputs: { icon: "icon", label: "label", link: "link", target: "target", priority: "priority", dataCy: "dataCy" }, outputs: { click: "click" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-user-menu-item', standalone: true, imports: [NgIf, C8yTranslatePipe, AsyncPipe], template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: UserMenuService }, { type: HeaderService }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], priority: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { static: false }]
+            }], click: [{
+                type: Output
+            }] } });
+
 class PasswordConfirmModalComponent {
     constructor(user, ui, client, alert) {
         this.user = user;
@@ -21447,319 +21929,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: 'c8y-user-edit-modal', standalone: true, imports: [ModalComponent, UserEditComponent, C8yTranslatePipe, AsyncPipe], template: "<c8y-modal\n  [title]=\"'Edit user' | translate\"\n  [customFooter]=\"true\"\n  (onDismiss)=\"onDismiss()\"\n>\n  <c8y-user-edit\n    [user]=\"ui.currentUser | async\"\n    [loading]=\"loading\"\n    [isUsageTrackingEnabled]=\"currentUsageTrackingState\"\n    [isUserEngagementPreferenceEnabled]=\"currentUserEngagementPreferenceInitialState\"\n    [showProductExperienceOptions]=\"showProductExperienceOptions\"\n    [focusOnNewPassword]=\"passwordChange\"\n    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n" }]
         }], ctorParameters: () => [{ type: i1$7.BsModalRef }, { type: i1.UserService }, { type: AppStateService }, { type: i1.BasicAuth }, { type: i1.FetchClient }, { type: AlertService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: PasswordService }, { type: UserEngagementsService }] });
 
-/**
- * Service to show a modal.
- */
-class ModalService {
-    constructor(modalService, gainsightService) {
-        this.modalService = modalService;
-        this.gainsightService = gainsightService;
-    }
-    /**
-     * Shows a quick confirm message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm', cancel: 'Cancel'}
-     * @param confirmOptions Selection options to display as checkbox list.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async confirm(title, body, status = Status.INFO, labels = {}, confirmOptions = {}, productExperienceEvent = { eventName: 'confirmModal' }) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm'),
-            cancel: labels.cancel || gettext$1('Cancel')
-        };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels: modalLabels, status, confirmOptions },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, modalLabels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick acknowledge message modal.
-     * @param title The title of that modal.
-     * @param body The text body to display.
-     * @param status The status.
-     * @param acknowledgeLabel The label to use.
-     * @param productExperienceEvent Additional data to attach to custom product experience events.
-     */
-    async acknowledge(title, body, status = Status.INFO, acknowledgeLabel = gettext$1('Confirm'), productExperienceEvent = { eventName: 'confirmModal' }) {
-        const labels = { ok: acknowledgeLabel, cancel: null };
-        const modalRef = this.modalService.show(ConfirmModalComponent, {
-            initialState: { title, body, labels, status },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            ignoreBackdropClick: true
-        });
-        if (productExperienceEvent) {
-            productExperienceEvent.data = { ...productExperienceEvent.data, title };
-        }
-        this.triggerEvent(modalRef.content.result, labels, productExperienceEvent);
-        return await modalRef.content.result;
-    }
-    /**
-     * Shows a quick logout confirmation modal.
-     * @param body The text body to display. Default: 'You will be logged out to apply your changes. Do you want to proceed?'
-     * @param status The status.
-     * @param labels The labels to use. Default: { ok: 'Confirm and log out', cancel: 'Cancel' }
-     */
-    async confirmLogout(body, status = Status.WARNING, labels = {}) {
-        const modalLabels = {
-            ok: labels.ok || gettext$1('Confirm and log out'),
-            cancel: labels.cancel || gettext$1('Cancel')
-        };
-        const modalBody = body || gettext$1('You must log out to apply your changes. Do you want to proceed?');
-        return await this.confirm(gettext$1('Logout required'), modalBody, status, modalLabels);
-    }
-    async changeCurrentUserPassword() {
-        this.modalService.show(UserEditModalComponent, {
-            initialState: { passwordChange: true },
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title'
-        });
-    }
-    triggerEvent(result, labels, productExperienceEvent) {
-        const data = { ...productExperienceEvent.data, url: window.location.href };
-        result
-            .then(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.ok
-            });
-        })
-            .catch(() => {
-            this.gainsightService.triggerEvent(productExperienceEvent.eventName, {
-                ...data,
-                result: labels.cancel
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, deps: [{ token: i1$7.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$7.BsModalService }, { type: GainsightService }] });
-
-class ThemeSwitcherService {
-    constructor(options) {
-        this.options = options;
-        this.darkThemeClass = `c8y-dark-theme`;
-        this.themeOptions = [
-            {
-                label: gettext$1('Light'),
-                value: 'light',
-                icon: 'sun'
-            },
-            {
-                label: gettext$1('Dark'),
-                value: 'dark',
-                icon: 'moon'
-            },
-            {
-                label: gettext$1('System'),
-                value: 'system',
-                icon: 'imac-settings'
-            }
-        ];
-        this._userSelectedThemePreference$ = new BehaviorSubject(this.getCurrentThemePreference());
-        this._temporaryThemePreference$ = new BehaviorSubject('none');
-        this.userSelectedThemePreference$ = this._userSelectedThemePreference$.asObservable();
-        const userSelectedTheme$ = this.userSelectedThemePreference$.pipe(switchMap(preference => {
-            if (preference === 'system') {
-                return this.getUsersSystemPreferenceForTheme$();
-            }
-            return of(preference);
-        }));
-        this.disableThemeSelection$ = this._temporaryThemePreference$.pipe(map(preference => preference !== 'none'));
-        this.currentlyAppliedTheme$ = this._temporaryThemePreference$.pipe(switchMap(temporaryPreference => {
-            if (temporaryPreference !== 'none') {
-                return of(temporaryPreference);
-            }
-            return userSelectedTheme$;
-        }));
-        this.darkThemeAvailable$ = this.options.get$('darkThemeAvailable').pipe(map(value => !!value));
-    }
-    getCurrentThemePreference() {
-        const value = getThemePreference();
-        if (value === 'system' || value === 'dark') {
-            return value;
-        }
-        return 'light';
-    }
-    getUsersSystemPreferenceForTheme$() {
-        return fromEvent(window.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith(window.matchMedia('(prefers-color-scheme: dark)')), map((e) => (e.matches ? 'dark' : 'light')));
-    }
-    changeUserPreference(preference) {
-        setThemePreference(preference);
-        this._userSelectedThemePreference$.next(preference);
-        this.applyTheme(preference);
-    }
-    temporaryChangeTheme(preference) {
-        this._temporaryThemePreference$.next(preference);
-        this.applyTheme(preference);
-    }
-    resetTemporaryTheme() {
-        this._temporaryThemePreference$.next('none');
-        this.applyTheme(this.getCurrentThemePreference());
-    }
-    applyTheme(preference) {
-        applyTheme(preference);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeSwitcherService, deps: [{ token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeSwitcherService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeSwitcherService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: OptionsService }] });
-
-class UiSettingsComponent {
-    constructor(translate, state, ui, userPreferences, c8yModalService, headerService, themeSwitcher) {
-        this.translate = translate;
-        this.state = state;
-        this.ui = ui;
-        this.userPreferences = userPreferences;
-        this.c8yModalService = c8yModalService;
-        this.headerService = headerService;
-        this.themeSwitcher = themeSwitcher;
-        this.destroyed$ = new Subject();
-        this.currentLang = this.ui.state.lang;
-        this.ui.state$
-            .pipe(filter(({ lang }) => lang !== this.currentLang), takeUntil(this.destroyed$), first$1())
-            .subscribe(({ lang }) => (this.currentLang = lang));
-        this.open$ = this.headerService.rightDrawerOpen$;
-    }
-    ngOnInit() {
-        this.languages = this.state.state.langs.map(l => ({
-            lang: l,
-            nativeLanguage: this.translate.getNativeLanguage(l)
-        }));
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
-    }
-    async onLanguageChange(changedLang) {
-        if (!changedLang) {
-            return;
-        }
-        await this.translate.switchToLanguage(changedLang);
-        if (await this.persistLanguage(changedLang)) {
-            location.reload();
-        }
-    }
-    async persistLanguage(lang) {
-        let shouldReload = true;
-        try {
-            await this.c8yModalService.confirm(gettext$1('Reload recommended'), gettext$1('To change the language in the entire application, we recommend you to reload the page. If you have any unsaved changes, you can reload later. How would you like to proceed?'), Status.WARNING, {
-                ok: gettext$1('Reload now'),
-                cancel: gettext$1('Reload later')
-            });
-        }
-        catch (ex) {
-            shouldReload = false;
-        }
-        finally {
-            this.translate.saveInLocalStorage(lang);
-            await this.userPreferences.set('language', lang);
-            this.currentLang = lang;
-        }
-        return shouldReload;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsComponent, deps: [{ token: TranslateService }, { token: AppStateService }, { token: AppStateService }, { token: UserPreferencesService }, { token: ModalService }, { token: HeaderService }, { token: ThemeSwitcherService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: UiSettingsComponent, isStandalone: true, selector: "c8y-ui-settings", ngImport: i0, template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-ui-settings', standalone: true, imports: [
-                        IconDirective,
-                        NgIf,
-                        C8yTranslateDirective,
-                        NgFor,
-                        FormsModule$1,
-                        C8yTranslatePipe,
-                        AsyncPipe
-                    ], template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"eyedropper\"></i>\n    <span class=\"text-bold\">{{ 'UI settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"p-l-16 p-r-16 p-b-16\"\n    *ngIf=\"themeSwitcher.darkThemeAvailable$ | async\"\n  >\n    <p translate>Theme</p>\n    <div\n      class=\"c8y-switch-multistate\"\n      *ngIf=\"themeSwitcher.userSelectedThemePreference$ | async as themePreference\"\n    >\n      <ng-container *ngFor=\"let themeOption of themeSwitcher.themeOptions; index as i\">\n        <input\n          [attr.aria-label]=\"themeOption.label\"\n          tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n          name=\"theme-switcher\"\n          type=\"radio\"\n          [id]=\"'theme-option-' + i\"\n          [disabled]=\"themeSwitcher.disableThemeSelection$ | async\"\n          [checked]=\"themePreference === themeOption.value\"\n          (click)=\"themeSwitcher.changeUserPreference(themeOption.value)\"\n        />\n        <label\n          title=\"{{ themeOption.label | translate }}\"\n          [for]=\"'theme-option-' + i\"\n        >\n          <i [c8yIcon]=\"themeOption.icon\"></i>\n        </label>\n      </ng-container>\n      <div class=\"c8y-switch-multistate__handle\"></div>\n    </div>\n  </div>\n\n  <div class=\"form-group p-l-16 p-r-16\">\n    <label\n      for=\"userLang\"\n      translate\n    >\n      Language\n    </label>\n    <div class=\"c8y-select-wrapper\">\n      <select\n        id=\"userLang\"\n        tabindex=\"{{ (open$ | async) ? '0' : '-1' }}\"\n        #selectLang\n        [ngModel]=\"currentLang\"\n        (change)=\"onLanguageChange(selectLang.value)\"\n      >\n        <option\n          *ngFor=\"let language of languages\"\n          [value]=\"language.lang\"\n        >\n          {{ language.nativeLanguage }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: TranslateService }, { type: AppStateService }, { type: AppStateService }, { type: UserPreferencesService }, { type: ModalService }, { type: HeaderService }, { type: ThemeSwitcherService }] });
-
-class UiSettingsModule {
-    static providers() {
-        return [
-            hookDrawer({
-                component: UiSettingsComponent,
-                position: 'right',
-                priority: 90,
-                id: 'uiSettings'
-            })
-        ];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent], exports: [UiSettingsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, imports: [CommonModule, FormsModule$1, UiSettingsComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UiSettingsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule$1, UiSettingsComponent],
-                    exports: [UiSettingsComponent]
-                }]
-        }] });
-
-class UserMenuItemComponent {
-    constructor(userService, headerService) {
-        this.userService = userService;
-        this.headerService = headerService;
-        this.priority = 0;
-        this.click = new EventEmitter();
-        this.open$ = this.headerService.rightDrawerOpen$;
-    }
-    ngAfterViewInit() {
-        this.viewInitTimeout = setTimeout(() => this.userService.add(this));
-    }
-    ngOnDestroy() {
-        clearTimeout(this.viewInitTimeout);
-        this.userService.remove(this);
-    }
-    onClick() {
-        this.click.emit(this);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserMenuItemComponent, deps: [{ token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: UserMenuItemComponent, isStandalone: true, selector: "c8y-user-menu-item", inputs: { icon: "icon", label: "label", link: "link", target: "target", priority: "priority", dataCy: "dataCy" }, outputs: { click: "click" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserMenuItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-user-menu-item', standalone: true, imports: [NgIf, C8yTranslatePipe, AsyncPipe], template: "<ng-template #template>\n  <li>\n    <a\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n      *ngIf=\"link\"\n      [attr.href]=\"link\"\n      [attr.target]=\"target\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </a>\n    <button\n      class=\"c8y-right-drawer__link\"\n      [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n      type=\"button\"\n      *ngIf=\"!link\"\n      (click)=\"onClick()\"\n      [attr.data-cy]=\"dataCy\"\n    >\n      {{ label | translate }}\n      <ng-content></ng-content>\n    </button>\n  </li>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: UserMenuService }, { type: HeaderService }], propDecorators: { icon: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], link: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], priority: [{
-                type: Input
-            }], dataCy: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: ['template', { static: false }]
-            }], click: [{
-                type: Output
-            }] } });
-
 class UserMenuOutletComponent {
     constructor(ui, bsModalService, authService, userMenu, headerService) {
         this.ui = ui;
@@ -24527,7 +24696,7 @@ class DatePickerComponent {
         this.dateTo = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: true, selector: "c8y-date-picker", inputs: { placeholder: "placeholder", dateInputFormat: "dateInputFormat" }, outputs: { onDateSelected: "onDateSelected" }, ngImport: i0, template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  placement=\"bottom left\"\n  [cdkTrapFocus]=\"datefilter.isOpen\"\n  >\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <em *ngIf=\"!dateFrom && !dateTo\" class=\"text-muted\">\n        {{ placeholder }}\n      </em>\n    </span>\n  </button>\n\n  <form [formGroup]=\"fgDatePicker\"\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\">\n    <div class=\"dropdown-form p-b-0\">\n      <c8y-form-group class=\"form-group-sm\">\n        <label for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</label>\n        <div class=\"form-group datepicker d-block m-b-0\">\n          <input\n            id=\"dateFrom\"\n            formControlName=\"dateFrom\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date from' | translate }}\"\n            bsDatepicker\n            [maxDate]=\"dateTo\"\n            (bsValueChange)=\"dateFrom = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n      <c8y-form-group class=\"form-group form-group-sm \">\n        <label for=\"dateTo\" translate>Date to</label>\n        <div class=\"form-group datepicker m-l-0 d-block m-b-0 \">\n          <input\n            name=\"dateTo\"\n            id=\"dateTo\"\n            formControlName=\"dateTo\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date to' | translate }}\"\n            bsDatepicker\n            [minDate]=\"dateFrom\"\n            (bsValueChange)=\"dateTo = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"p-16 d-flex separator-top gap-8\">\n      <button\n        title=\"{{ 'Clear selection' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-default btn-sm flex-grow\"\n        (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Clear`selection`' | translate }}\n      </button>\n      <button\n        [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n        title=\"{{ 'Apply selection' | translate }}\"\n        type=\"submit\"\n        class=\"btn btn-primary btn-sm flex-grow\"\n        (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Apply`selection`' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i2.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i2.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "pipe", type: DatePipe$1, name: "date" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: true, selector: "c8y-date-picker", inputs: { placeholder: "placeholder", dateInputFormat: "dateInputFormat" }, outputs: { onDateSelected: "onDateSelected" }, ngImport: i0, template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  placement=\"bottom left\"\n  [cdkTrapFocus]=\"datefilter.isOpen\"\n  >\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | c8yDate }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | c8yDate }}\n      </span>\n      <em *ngIf=\"!dateFrom && !dateTo\" class=\"text-muted\">\n        {{ placeholder }}\n      </em>\n    </span>\n  </button>\n\n  <form [formGroup]=\"fgDatePicker\"\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\">\n    <div class=\"dropdown-form p-b-0\">\n      <c8y-form-group class=\"form-group-sm\">\n        <label for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</label>\n        <div class=\"form-group datepicker d-block m-b-0\">\n          <input\n            id=\"dateFrom\"\n            formControlName=\"dateFrom\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date from' | translate }}\"\n            bsDatepicker\n            [maxDate]=\"dateTo\"\n            (bsValueChange)=\"dateFrom = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n      <c8y-form-group class=\"form-group form-group-sm \">\n        <label for=\"dateTo\" translate>Date to</label>\n        <div class=\"form-group datepicker m-l-0 d-block m-b-0 \">\n          <input\n            name=\"dateTo\"\n            id=\"dateTo\"\n            formControlName=\"dateTo\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date to' | translate }}\"\n            bsDatepicker\n            [minDate]=\"dateFrom\"\n            (bsValueChange)=\"dateTo = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"p-16 d-flex separator-top gap-8\">\n      <button\n        title=\"{{ 'Clear selection' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-default btn-sm flex-grow\"\n        (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Clear`selection`' | translate }}\n      </button>\n      <button\n        [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n        title=\"{{ 'Apply selection' | translate }}\"\n        type=\"submit\"\n        class=\"btn btn-primary btn-sm flex-grow\"\n        (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Apply`selection`' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i2.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i2.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -24542,9 +24711,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         C8yTranslateDirective,
                         RequiredInputPlaceholderDirective,
                         BsDatepickerModule,
-                        DatePipe$1,
+                        DatePipe,
                         C8yTranslatePipe
-                    ], template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  placement=\"bottom left\"\n  [cdkTrapFocus]=\"datefilter.isOpen\"\n  >\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <em *ngIf=\"!dateFrom && !dateTo\" class=\"text-muted\">\n        {{ placeholder }}\n      </em>\n    </span>\n  </button>\n\n  <form [formGroup]=\"fgDatePicker\"\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\">\n    <div class=\"dropdown-form p-b-0\">\n      <c8y-form-group class=\"form-group-sm\">\n        <label for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</label>\n        <div class=\"form-group datepicker d-block m-b-0\">\n          <input\n            id=\"dateFrom\"\n            formControlName=\"dateFrom\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date from' | translate }}\"\n            bsDatepicker\n            [maxDate]=\"dateTo\"\n            (bsValueChange)=\"dateFrom = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n      <c8y-form-group class=\"form-group form-group-sm \">\n        <label for=\"dateTo\" translate>Date to</label>\n        <div class=\"form-group datepicker m-l-0 d-block m-b-0 \">\n          <input\n            name=\"dateTo\"\n            id=\"dateTo\"\n            formControlName=\"dateTo\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date to' | translate }}\"\n            bsDatepicker\n            [minDate]=\"dateFrom\"\n            (bsValueChange)=\"dateTo = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"p-16 d-flex separator-top gap-8\">\n      <button\n        title=\"{{ 'Clear selection' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-default btn-sm flex-grow\"\n        (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Clear`selection`' | translate }}\n      </button>\n      <button\n        [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n        title=\"{{ 'Apply selection' | translate }}\"\n        type=\"submit\"\n        class=\"btn btn-primary btn-sm flex-grow\"\n        (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Apply`selection`' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
+                    ], template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  placement=\"bottom left\"\n  [cdkTrapFocus]=\"datefilter.isOpen\"\n  >\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | c8yDate }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | c8yDate }}\n      </span>\n      <em *ngIf=\"!dateFrom && !dateTo\" class=\"text-muted\">\n        {{ placeholder }}\n      </em>\n    </span>\n  </button>\n\n  <form [formGroup]=\"fgDatePicker\"\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\">\n    <div class=\"dropdown-form p-b-0\">\n      <c8y-form-group class=\"form-group-sm\">\n        <label for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</label>\n        <div class=\"form-group datepicker d-block m-b-0\">\n          <input\n            id=\"dateFrom\"\n            formControlName=\"dateFrom\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date from' | translate }}\"\n            bsDatepicker\n            [maxDate]=\"dateTo\"\n            (bsValueChange)=\"dateFrom = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n      <c8y-form-group class=\"form-group form-group-sm \">\n        <label for=\"dateTo\" translate>Date to</label>\n        <div class=\"form-group datepicker m-l-0 d-block m-b-0 \">\n          <input\n            name=\"dateTo\"\n            id=\"dateTo\"\n            formControlName=\"dateTo\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date to' | translate }}\"\n            bsDatepicker\n            [minDate]=\"dateFrom\"\n            (bsValueChange)=\"dateTo = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true, dateInputFormat: dateInputFormat }\"\n          />\n        </div>\n      </c8y-form-group>\n    </div>\n    <div class=\"p-16 d-flex separator-top gap-8\">\n      <button\n        title=\"{{ 'Clear selection' | translate }}\"\n        type=\"button\"\n        class=\"btn btn-default btn-sm flex-grow\"\n        (click)=\"clearFilter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Clear`selection`' | translate }}\n      </button>\n      <button\n        [disabled]=\"!fgDatePicker.get('dateFrom').value && !fgDatePicker.get('dateTo').value\"\n        title=\"{{ 'Apply selection' | translate }}\"\n        type=\"submit\"\n        class=\"btn btn-primary btn-sm flex-grow\"\n        (click)=\"filter(); datefilter.isOpen = !datefilter.isOpen\"\n      >\n        {{ 'Apply`selection`' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
         }], propDecorators: { onDateSelected: [{
                 type: Output
             }], placeholder: [{
@@ -24593,6 +24762,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+class ChangeCurrentUserPasswordService {
+    constructor(modalService) {
+        this.modalService = modalService;
+    }
+    async changeCurrentUserPassword() {
+        this.modalService.show(UserEditModalComponent, {
+            initialState: { passwordChange: true },
+            ariaDescribedby: 'modal-body',
+            ariaLabelledBy: 'modal-title'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChangeCurrentUserPasswordService, deps: [{ token: i1$7.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChangeCurrentUserPasswordService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChangeCurrentUserPasswordService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$7.BsModalService }] });
+
 /**
  * The context routes that are supported by the application.
  */
@@ -37332,5 +37522,5 @@ function colorValidator(allowedModes) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, StandalonePluginInjector, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateParserCustom, TranslateService, TranslationLoaderService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
+export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppHrefPipe, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetPropertyService, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8Y_PLUGIN_CONTEXT_PATH, C8Y_PLUGIN_NAME, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangeCurrentUserPasswordService, ChangeIconComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DateFormatService, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FeatureCacheService, FeedbackFormComponent, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_CURRENT_APPLICATION, HOOK_CURRENT_TENANT, HOOK_CURRENT_USER, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_PLUGIN, HOOK_PREVIEW, HOOK_QUERY_PARAM, HOOK_QUERY_PARAM_BOTTOM_DRAWER, HOOK_QUERY_PARAM_MODAL, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_ROUTER_STATE_PROP, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PREVIEW_FEATURE_PROVIDERS, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthService, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsLoaderService, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, PreviewFeatureButtonComponent, PreviewFeatureShowNotification, PreviewService, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QUERY_PARAM_HANDLER_PROVIDERS, QueryParamBottomDrawerFactory, QueryParamBottomDrawerStateService, QueryParamHandlerService, QueryParamModalFactory, QueryParamModalStateService, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RelativeTimePipe, RequiredInputPlaceholderDirective, ResizableGridComponent, ResolverServerError, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SHOW_PREVIEW_FEATURES, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SimplifiedAuthService, SkipLinkDirective, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StringFilterMapper, StringifyObjectPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpChallengeComponent, TotpSetupComponent, TranslateParserCustom, TranslateService, TranslationLoaderService, TreeNodeCellRendererComponent, TreeNodeColumn, TreeNodeHeaderCellRendererComponent, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WIDGET_CONFIGURATION_GRID_SIZE, WIDGET_TYPE_VALUES, WILDCARD_SEARCH_FEATURE_KEY, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, gettext, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookCurrentApplication, hookCurrentTenant, hookCurrentUser, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookPlugin, hookPreview, hookQueryParam, hookQueryParamBottomDrawer, hookQueryParamModal, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, provideBootstrapMetadata, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, validateInternationalPhoneNumber, viewContextRoutes, wrapperLegendFieldConfig };
 //# sourceMappingURL=c8y-ngx-components.mjs.map