@c8y/ngx-components 1022.35.1 → 1022.44.7

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,11 +15,10 @@ 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';
-import * as i1$a from '@angular/common';
+import * as i2$3 from '@angular/common';
 import { formatDate, registerLocaleData, DOCUMENT, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, NgSwitch, NgSwitchCase, AsyncPipe, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, NgComponentOutlet, NgSwitchDefault, KeyValuePipe, LocationStrategy, NgForOf, UpperCasePipe, NgPlural, NgPluralCase, SlicePipe } from '@angular/common';
 import * as i1$5 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
@@ -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';
@@ -48,7 +47,7 @@ import { compare, coerce } from 'semver';
 import { parsePhoneNumberFromString } from 'libphonenumber-js/max';
 import { QRCodeComponent } from 'angularx-qrcode';
 import * as mimeDB from 'mime-db';
-import * as i2$3 from '@ngx-formly/core';
+import * as i2$4 from '@ngx-formly/core';
 import { FormlyModule, FieldWrapper, FieldArrayType, FieldType, FORMLY_CONFIG, ɵdefineHiddenProp as _defineHiddenProp } from '@ngx-formly/core';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i3 from '@ngx-formly/core/select';
@@ -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'
+        }
     }
 };
 
@@ -4811,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.
  */
@@ -8108,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;
         }
@@ -12414,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))));
@@ -13298,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,
@@ -13314,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: [{
@@ -14450,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);
@@ -16129,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,
@@ -16154,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 }]
@@ -17036,8 +17121,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     type: Optional
                 }] }] });
 
+/**
+ * Bottom drawer component that slides up from the bottom of the viewport.
+ * Typically managed by BottomDrawerService.
+ */
 class BottomDrawerComponent {
-    constructor() {
+    constructor(drawerRef) {
+        this.drawerRef = drawerRef;
         /**
          * When enabled, clicking outside the drawer will not close it.
          */
@@ -17048,20 +17138,40 @@ class BottomDrawerComponent {
     get drawerOpen$() {
         return this.drawerOpenObs$;
     }
+    /**
+     * Handles Escape key press to close the drawer.
+     */
+    onEscapeKey(event) {
+        event.preventDefault();
+        if (this.drawerRef) {
+            this.drawerRef.close();
+        }
+        else {
+            this.hide();
+        }
+    }
+    /**
+     * Hides the drawer with animation.
+     */
     hide() {
         this.disableClickOutside = false;
         this.drawerOpenSubject$.next(false);
         this.drawerOpenSubject$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BottomDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BottomDrawerComponent, isStandalone: true, selector: "c8y-bottom-drawer", viewQueries: [{ propertyName: "drawerHost", first: true, predicate: ["drawerHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$a.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BottomDrawerComponent, deps: [{ token: BottomDrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BottomDrawerComponent, isStandalone: true, selector: "c8y-bottom-drawer", host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "drawerHost", first: true, predicate: ["drawerHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [cdkTrapFocus]=\"drawerOpen$ | async\"\n    role=\"dialog\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BottomDrawerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'c8y-bottom-drawer', imports: [CommonModule$1], template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { drawerHost: [{
+            args: [{ standalone: true, selector: 'c8y-bottom-drawer', imports: [CommonModule$1, CdkTrapFocus], template: "<div [ngClass]=\"{ drawerOpen: drawerOpen$ | async }\">\n  <div\n    class=\"bottom-drawer\"\n    [cdkTrapFocus]=\"drawerOpen$ | async\"\n    role=\"dialog\" \n    aria-modal=\"true\" \n    aria-labelledby=\"drawerTitle\"\n    [ngClass]=\"{ 'has-backdrop': disableClickOutside }\"\n  >\n    <div class=\"d-flex d-col no-align-items fit-h\">\n      <ng-template #drawerHost></ng-template>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: BottomDrawerRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { drawerHost: [{
                 type: ViewChild,
                 args: ['drawerHost', { read: ViewContainerRef }]
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
 const DRAWER_ANIMATION_TIME = 400;
@@ -17136,7 +17246,15 @@ class BottomDrawerRef {
 }
 
 /**
- * Allows to open a component in a bottom drawer.
+ * Service for opening components in a bottom drawer.
+ *
+ * @example
+ * ```typescript
+ * const drawer = this.drawerService.openDrawer(MyComponent, {
+ *   initialState: { data: 'some data' },
+ *   disableClickOutside: true
+ * });
+ * ```
  */
 class BottomDrawerService {
     constructor(applicationRef, router) {
@@ -17144,11 +17262,11 @@ class BottomDrawerService {
         this.router = router;
     }
     /**
-     * Opens the provided component in a bottom drawer.
+     * Opens a component in a bottom drawer.
      *
-     * @param component The component type to render in a bottom drawer.
-     * @param options (optional) Additional options to configure bottom drawer.
-     * @returns A reference to the bottom drawer.
+     * @param component - The component type to render
+     * @param options - Configuration options (initialState, disableClickOutside, closeOnNavigation, host)
+     * @returns A reference to the bottom drawer instance
      */
     openDrawer(component, options) {
         return new BottomDrawerRef(component, this.applicationRef, this.router, options);
@@ -17703,6 +17821,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('');
@@ -17758,11 +17957,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: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.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 {
@@ -18278,7 +18485,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,
@@ -18303,7 +18510,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: [{
@@ -20447,6 +20654,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;
@@ -21449,319 +21962,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;
@@ -23612,7 +23812,7 @@ class DropAreaComponent {
         resolve(reader.result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FilesService }, { token: i1$1.TranslateService }, { token: BytesPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DropAreaComponent, isStandalone: true, selector: "c8y-drop-area", inputs: { formControl: "formControl", title: "title", message: "message", icon: "icon", loadingMessage: "loadingMessage", forceHideList: "forceHideList", alwaysShow: "alwaysShow", clickToOpen: "clickToOpen", loading: "loading", progress: "progress", maxAllowedFiles: "maxAllowedFiles", files: "files", maxFileSizeInMegaBytes: "maxFileSizeInMegaBytes", accept: "accept" }, outputs: { dropped: "dropped" }, host: { listeners: { "keyup": "onkeyup($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, static: true }, { propertyName: "zone", first: true, predicate: ["zone"], descendants: true }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<div\n  class=\"drop-zone\"\n  [style.pointerEvents]=\"loading ? 'none' : 'auto'\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"!shouldShowFilesList()\"\n  [ngClass]=\"{ 'has-errors': errors, disabled: formControl?.disabled || disabled }\"\n  #zone\n  (dragleave)=\"stopDragging()\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onOver()\"\n  (click)=\"showPicker($event)\"\n>\n  <div\n    class=\"file-placeholder\"\n    data-cy=\"c8y-file-placeholder--drop-zone\"\n    [ngClass]=\"{ 'drag-over': isOver }\"\n  >\n    <div\n      class=\"d-flex d-col p-4 flex-center\"\n      *ngIf=\"loading\"\n    >\n      <div\n        class=\"progress progress-striped active m-0\"\n        style=\"min-width: 50%\"\n        *ngIf=\"progress !== -1\"\n      >\n        <div\n          class=\"progress-bar\"\n          [style.width]=\"progress + '%'\"\n          [attr.aria-label]=\"progress + '%'\"\n          aria-valuenow=\"0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          role=\"progressbar\"\n        ></div>\n      </div>\n      <div\n        class=\"spinner-snake\"\n        *ngIf=\"progress === -1\"\n      ></div>\n      <p\n        class=\"m-t-auto m-b-auto m-r-8\"\n        *ngIf=\"!hasDropAreaSmallClass\"\n      >\n        {{ loadingMessage | translate }}\n      </p>\n    </div>\n    <div\n      class=\"hint-placeholder pointer\"\n      *ngIf=\"!loading\"\n      data-cy=\"drop-zone--hint-placeholder\"\n    >\n      <i class=\"dlt-c8y-icon-{{ icon }}\"></i>\n      <p\n        class=\"text-truncate\"\n        title=\"{{ message | translate }}\"\n        *ngIf=\"!errors\"\n      >\n        <b>{{ message | translate }}</b>\n        <br />\n        <span\n          *ngIf=\"alwaysShow && clickToOpen\"\n          translate\n        ></span>\n      </p>\n      <div\n        class=\"has-errors\"\n        *ngIf=\"errors\"\n      >\n        <p class=\"form-control-feedback-message\">\n          {{ errorMessage | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"drop-zone\"\n  [style.display]=\"isOver || alwaysShow || loading ? 'block' : 'none'\"\n  tabindex=\"0\"\n  *ngIf=\"shouldShowFilesList()\"\n>\n  <div\n    class=\"p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center\"\n    *ngIf=\"loading\"\n  >\n    <div\n      class=\"progress progress-striped active m-0\"\n      style=\"min-width: 80%\"\n      *ngIf=\"progress !== -1\"\n    >\n      <div\n        class=\"progress-bar\"\n        [style.width]=\"progress + '%'\"\n        [attr.aria-label]=\"progress + '%'\"\n        aria-valuenow=\"0\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        role=\"progressbar\"\n      ></div>\n    </div>\n    <div *ngIf=\"progress === -1\">\n      <c8y-loading></c8y-loading>\n    </div>\n    <p\n      class=\"m-b-8\"\n      *ngIf=\"!hasDropAreaSmallClass\"\n    >\n      <strong>\n        {{ loadingMessage | translate }}\n      </strong>\n    </p>\n  </div>\n  <div\n    class=\"file-placeholder p-4\"\n    *ngIf=\"!loading\"\n  >\n    <div class=\"d-flex p-4 a-i-center\">\n      <i\n        class=\"icon-20 m-r-8\"\n        c8yIcon=\"file-o\"\n      ></i>\n      <span\n        class=\"text-truncate\"\n        title=\"{{ filesNameString }}\"\n      >\n        {{ filesNameString }}\n      </span>\n      <button\n        class=\"btn btn-dot btn-dot--danger showOnHover m-l-auto\"\n        title=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        type=\"button\"\n      >\n        <i\n          c8yIcon=\"minus-circle\"\n          (click)=\"onDelete()\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</div>\n<label\n  class=\"sr-only\"\n  for=\"file\"\n>\n  {{ 'Select file' | translate }}\n</label>\n<input\n  class=\"hidden\"\n  id=\"file\"\n  type=\"file\"\n  #picker\n  *ngIf=\"clickToOpen\"\n  (change)=\"onPick($event)\"\n  (click)=\"picker.focus()\"\n  (blur)=\"onTouched()\"\n  [accept]=\"acceptedExts\"\n  [multiple]=\"maxAllowedFiles > 1\"\n  [disabled]=\"formControl?.disabled || disabled\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
@@ -24529,7 +24729,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,
@@ -24544,9 +24744,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: [{
@@ -24595,6 +24795,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.
  */
@@ -26476,7 +26697,7 @@ class ArrayTypeComponent extends FieldArrayType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ArrayTypeComponent, isStandalone: true, selector: "c8y-array-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <div id=\"{{ id + '-fieldset' }}\" class=\"legend form-block\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </div>\n\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n\n  <div *ngFor=\"let ifield of field.fieldGroup; let i = index\" class=\"input-group-array\">\n    <formly-field [field]=\"ifield | c8yArrayTypeInjectTemplate: customTemplate\"></formly-field>\n    <ng-container\n      *ngIf=\"ifield.type === 'formly-group' || ifield.type === 'array'\"\n      [ngTemplateOutlet]=\"customTemplate\"\n    ></ng-container>\n    <ng-template #customTemplate>\n      <div class=\"input-group-btn delete-row\">\n        <button\n          class=\"btn btn-dot btn-dot--danger flex-item-right\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          [delay]=\"500\"\n          placement=\"right\"\n          [disabled]=\"to.disabled || (field.fieldGroup.length === 1 && to.required)\"\n          (click)=\"remove(i)\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"p-t-8\">\n    <button\n      class=\"btn btn-sm btn-default\"\n      type=\"button\"\n      title=\"{{\n        (field.templateOptions?.addText | translate) || 'Add \\{\\{ label \\}\\}'\n          | translate: fieldArrayProps\n      }}\"\n      [disabled]=\"to.disabled\"\n      (click)=\"add()\"\n      [attr.data-cy]=\"field.templateOptions?.addTextDataCy || 'add-array-item'\"\n    >\n      <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n      <span\n        *ngIf=\"!field.templateOptions?.addText\"\n        ngNonBindable\n        translate\n        [translateParams]=\"fieldArrayProps\"\n      >\n        Add {{ label }}\n      </span>\n      <span *ngIf=\"field.templateOptions?.addText\">\n        {{ field.templateOptions?.addText | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: C8yArrayTypeInjectTemplatePipe, name: "c8yArrayTypeInjectTemplate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ArrayTypeComponent, isStandalone: true, selector: "c8y-array-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <div id=\"{{ id + '-fieldset' }}\" class=\"legend form-block\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </div>\n\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n\n  <div *ngFor=\"let ifield of field.fieldGroup; let i = index\" class=\"input-group-array\">\n    <formly-field [field]=\"ifield | c8yArrayTypeInjectTemplate: customTemplate\"></formly-field>\n    <ng-container\n      *ngIf=\"ifield.type === 'formly-group' || ifield.type === 'array'\"\n      [ngTemplateOutlet]=\"customTemplate\"\n    ></ng-container>\n    <ng-template #customTemplate>\n      <div class=\"input-group-btn delete-row\">\n        <button\n          class=\"btn btn-dot btn-dot--danger flex-item-right\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          [delay]=\"500\"\n          placement=\"right\"\n          [disabled]=\"to.disabled || (field.fieldGroup.length === 1 && to.required)\"\n          (click)=\"remove(i)\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"p-t-8\">\n    <button\n      class=\"btn btn-sm btn-default\"\n      type=\"button\"\n      title=\"{{\n        (field.templateOptions?.addText | translate) || 'Add \\{\\{ label \\}\\}'\n          | translate: fieldArrayProps\n      }}\"\n      [disabled]=\"to.disabled\"\n      (click)=\"add()\"\n      [attr.data-cy]=\"field.templateOptions?.addTextDataCy || 'add-array-item'\"\n    >\n      <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n      <span\n        *ngIf=\"!field.templateOptions?.addText\"\n        ngNonBindable\n        translate\n        [translateParams]=\"fieldArrayProps\"\n      >\n        Add {{ label }}\n      </span>\n      <span *ngIf=\"field.templateOptions?.addText\">\n        {{ field.templateOptions?.addText | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: C8yArrayTypeInjectTemplatePipe, name: "c8yArrayTypeInjectTemplate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArrayTypeComponent, decorators: [{
             type: Component,
@@ -26528,7 +26749,7 @@ class FieldCheckbox extends FieldType {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldCheckbox, isStandalone: true, selector: "c8y-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <label\n    [class.c8y-checkbox]=\"!to.switchMode\"\n    [class.c8y-switch]=\"to.switchMode\"\n    [class.has-error]=\"showError\"\n  >\n    <input\n      [class.is-invalid]=\"showError\"\n      [class.form-check-input]=\"to.formCheck.indexOf('custom') === -1\"\n      [class.position-static]=\"to.formCheck === 'nolabel'\"\n      [class.custom-control-input]=\"to.formCheck.indexOf('custom') === 0\"\n      type=\"checkbox\"\n      [indeterminate]=\"to.indeterminate && formControl.value == null\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [attr.data-cy]=\"'c8y-field-checkbox--' + (field.templateOptions?.optionDataCy || to.label)\"\n    />\n    <span></span>\n    <i\n      *ngIf=\"to.icon\"\n      c8yIcon=\"{{to.icon}}\"\n      class=\"icon-flex icon-20 m-r-4\"\n    ></i>\n    <span\n      class=\"text-truncate\"\n      title=\"{{ to.label | humanize }}\"\n    >\n      {{ to.label | humanize }}\n    </span>\n    <span *ngIf=\"to.required && to.hideRequiredMarker !== true\">\n      <em\n        class=\"m-l-4\"\n        translate\n      >\n        (required)\n      </em>\n    </span>\n  </label>\n  <button\n    class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"to.description\"\n    placement=\"right\"\n    triggers=\"focus\"\n    type=\"button\"\n    *ngIf=\"!!to.description\"\n  ></button>\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldCheckbox, isStandalone: true, selector: "c8y-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <label\n    [class.c8y-checkbox]=\"!to.switchMode\"\n    [class.c8y-switch]=\"to.switchMode\"\n    [class.has-error]=\"showError\"\n  >\n    <input\n      [class.is-invalid]=\"showError\"\n      [class.form-check-input]=\"to.formCheck.indexOf('custom') === -1\"\n      [class.position-static]=\"to.formCheck === 'nolabel'\"\n      [class.custom-control-input]=\"to.formCheck.indexOf('custom') === 0\"\n      type=\"checkbox\"\n      [indeterminate]=\"to.indeterminate && formControl.value == null\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [attr.data-cy]=\"'c8y-field-checkbox--' + (field.templateOptions?.optionDataCy || to.label)\"\n    />\n    <span></span>\n    <i\n      *ngIf=\"to.icon\"\n      c8yIcon=\"{{to.icon}}\"\n      class=\"icon-flex icon-20 m-r-4\"\n    ></i>\n    <span\n      class=\"text-truncate\"\n      title=\"{{ to.label | humanize }}\"\n    >\n      {{ to.label | humanize }}\n    </span>\n    <span *ngIf=\"to.required && to.hideRequiredMarker !== true\">\n      <em\n        class=\"m-l-4\"\n        translate\n      >\n        (required)\n      </em>\n    </span>\n  </label>\n  <button\n    class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n    [attr.aria-label]=\"'Help' | translate\"\n    [popover]=\"to.description\"\n    placement=\"right\"\n    triggers=\"focus\"\n    type=\"button\"\n    *ngIf=\"!!to.description\"\n  ></button>\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldCheckbox, decorators: [{
             type: Component,
@@ -26580,7 +26801,7 @@ class FieldDate extends FieldType {
         this.dateInputFormat = this.dateFormatService.getDateFormat();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldDate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldDate, isStandalone: true, selector: "c8y-field-date", usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <label id=\"{{ id + '-fieldset' }}\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </label>\n  <div class=\"form-group datepicker\">\n    <input\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      class=\"form-control\"\n      placeholder=\"Date\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: dateInputFormat }\"\n      [placeholder]=\"'Select a date\u2026' | translate\"\n      placement=\"top\"\n      bsDatepicker\n      [required]=\"to.required\"\n    />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { 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: "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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldDate, isStandalone: true, selector: "c8y-field-date", usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <label id=\"{{ id + '-fieldset' }}\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </label>\n  <div class=\"form-group datepicker\">\n    <input\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      class=\"form-control\"\n      placeholder=\"Date\"\n      [bsConfig]=\"{ customTodayClass: 'today', dateInputFormat: dateInputFormat }\"\n      [placeholder]=\"'Select a date\u2026' | translate\"\n      placement=\"top\"\n      bsDatepicker\n      [required]=\"to.required\"\n    />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { 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: "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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldDate, decorators: [{
             type: Component,
@@ -26673,7 +26894,7 @@ class WrapperFormField extends FieldWrapper {
         this.smallFormGroup = this.props?.smallFormGroup || false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WrapperFormField, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WrapperFormField, isStandalone: true, selector: "c8y-wrapper-form-field", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"form-group\"\n  [class.has-error]=\"showError\"\n  [class.form-group-sm]=\"smallFormGroup\"\n>\n  <label\n    class=\"text-pre-wrap\"\n    *ngIf=\"to.label && to.hideLabel !== true\"\n    [attr.for]=\"id\"\n  >\n    {{ to.humanizeLabel === false ? to.label : (to.label | humanize) }}\n    <i\n      class=\"text-info\"\n      c8yIcon=\"info-circle\"\n      title=\"{{ to.tooltip | translate }}\"\n      *ngIf=\"to.tooltip\"\n    ></i>\n    <ng-template #description><div [innerHTML]=\"to.description | translate\"></div></ng-template>\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"description\"\n      placement=\"right\"\n      type=\"button\"\n      [outsideClick]=\"true\"\n      *ngIf=\"to.description && showDescriptionAsPopup\"\n    ></button>\n  </label>\n  <div class=\"d-flex\">\n    <div class=\"flex-grow\">\n      <ng-template #fieldComponent></ng-template>\n    </div>\n    <ng-container *ngIf=\"to.customTemplateRef\">\n      <ng-container *ngTemplateOutlet=\"to.customTemplateRef\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"c8y-messages\"\n    *ngIf=\"showError\"\n  >\n    <formly-validation-message\n      class=\"form-control-feedback-message\"\n      [field]=\"field\"\n    ></formly-validation-message>\n  </div>\n\n  <div\n    class=\"help-block has-info text-muted\"\n    *ngIf=\"!showError && to.description && !showDescriptionAsPopup\"\n    [innerHTML]=\"to.description | translate\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WrapperFormField, isStandalone: true, selector: "c8y-wrapper-form-field", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"form-group\"\n  [class.has-error]=\"showError\"\n  [class.form-group-sm]=\"smallFormGroup\"\n>\n  <label\n    class=\"text-pre-wrap\"\n    *ngIf=\"to.label && to.hideLabel !== true\"\n    [attr.for]=\"id\"\n  >\n    {{ to.humanizeLabel === false ? to.label : (to.label | humanize) }}\n    <i\n      class=\"text-info\"\n      c8yIcon=\"info-circle\"\n      title=\"{{ to.tooltip | translate }}\"\n      *ngIf=\"to.tooltip\"\n    ></i>\n    <ng-template #description><div [innerHTML]=\"to.description | translate\"></div></ng-template>\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"description\"\n      placement=\"right\"\n      type=\"button\"\n      [outsideClick]=\"true\"\n      *ngIf=\"to.description && showDescriptionAsPopup\"\n    ></button>\n  </label>\n  <div class=\"d-flex\">\n    <div class=\"flex-grow\">\n      <ng-template #fieldComponent></ng-template>\n    </div>\n    <ng-container *ngIf=\"to.customTemplateRef\">\n      <ng-container *ngTemplateOutlet=\"to.customTemplateRef\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"c8y-messages\"\n    *ngIf=\"showError\"\n  >\n    <formly-validation-message\n      class=\"form-control-feedback-message\"\n      [field]=\"field\"\n    ></formly-validation-message>\n  </div>\n\n  <div\n    class=\"help-block has-info text-muted\"\n    *ngIf=\"!showError && to.description && !showDescriptionAsPopup\"\n    [innerHTML]=\"to.description | translate\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WrapperFormField, decorators: [{
             type: Component,
@@ -26722,7 +26943,7 @@ class FieldInput extends FieldType {
         return this.to.type || 'text';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldInput, isStandalone: true, selector: "c8y-field-input", usesInheritance: true, ngImport: i0, template: "<input\n  *ngIf=\"type !== 'number'; else numberTmp\"\n  [type]=\"type\"\n  [formControl]=\"formControl\"\n  class=\"form-control\"\n  [formlyAttributes]=\"field\"\n  [required]=\"to.required\"\n  [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n  [class.is-invalid]=\"showError\"\n/>\n<ng-template #numberTmp>\n  <input\n    type=\"number\"\n    [formControl]=\"formControl\"\n    class=\"form-control\"\n    [formlyAttributes]=\"field\"\n    [required]=\"to.required\"\n    [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n    [class.is-invalid]=\"showError\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldInput, isStandalone: true, selector: "c8y-field-input", usesInheritance: true, ngImport: i0, template: "<input\n  *ngIf=\"type !== 'number'; else numberTmp\"\n  [type]=\"type\"\n  [formControl]=\"formControl\"\n  class=\"form-control\"\n  [formlyAttributes]=\"field\"\n  [required]=\"to.required\"\n  [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n  [class.is-invalid]=\"showError\"\n/>\n<ng-template #numberTmp>\n  <input\n    type=\"number\"\n    [formControl]=\"formControl\"\n    class=\"form-control\"\n    [formlyAttributes]=\"field\"\n    [required]=\"to.required\"\n    [attr.autocomplete]=\"to.autocomplete ? to.autocomplete : null\"\n    [class.is-invalid]=\"showError\"\n  />\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
@@ -26746,7 +26967,7 @@ const objectTypeConfig = () => importProvidersFrom(FormlyModule.forChild({
 }));
 class ObjectTypeComponent extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ObjectTypeComponent, isStandalone: true, selector: "c8y-object-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <p *ngIf=\"to.label\" class=\"text-medium\" id=\"{{ id + '-fieldset' }}\">\n    {{ to.label | humanize }}\n  </p>\n  <p *ngIf=\"to.description\" class=\"m-b-8 small\">\n    {{ to.description }}\n  </p>\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n  <formly-field *ngFor=\"let f of field.fieldGroup\" [field]=\"f\"></formly-field>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ObjectTypeComponent, isStandalone: true, selector: "c8y-object-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <p *ngIf=\"to.label\" class=\"text-medium\" id=\"{{ id + '-fieldset' }}\">\n    {{ to.label | humanize }}\n  </p>\n  <p *ngIf=\"to.description\" class=\"m-b-8 small\">\n    {{ to.description }}\n  </p>\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n  <formly-field *ngFor=\"let f of field.fieldGroup\" [field]=\"f\"></formly-field>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i2$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObjectTypeComponent, decorators: [{
             type: Component,
@@ -26773,7 +26994,7 @@ class FieldRadio extends FieldType {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldRadio, isStandalone: true, selector: "c8y-field-radio", usesInheritance: true, ngImport: i0, template: "<label\n  *ngFor=\"let option of to.options | formlySelectOptions: field | async; let i = index\"\n  [title]=\"option.label\"\n  class=\"c8y-radio\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"id + '_' + i\"\n    [name]=\"field.name || id\"\n    [attr.value]=\"option.value\"\n    [value]=\"option.value\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [attr.disabled]=\"option.disabled || formControl.disabled ? true : null\"\n  />\n  <span></span>\n  <span>{{ field.props.humanizeLabel === false ? option.label : (option.label | humanize) }}</span>\n</label>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "pipe", type: i3.FormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FieldRadio, isStandalone: true, selector: "c8y-field-radio", usesInheritance: true, ngImport: i0, template: "<label\n  *ngFor=\"let option of to.options | formlySelectOptions: field | async; let i = index\"\n  [title]=\"option.label\"\n  class=\"c8y-radio\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"id + '_' + i\"\n    [name]=\"field.name || id\"\n    [attr.value]=\"option.value\"\n    [value]=\"option.value\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [attr.disabled]=\"option.disabled || formControl.disabled ? true : null\"\n  />\n  <span></span>\n  <span>{{ field.props.humanizeLabel === false ? option.label : (option.label | humanize) }}</span>\n</label>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "ngmodule", type: FormlySelectModule }, { kind: "pipe", type: i3.FormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldRadio, decorators: [{
             type: Component,
@@ -26816,7 +27037,7 @@ class SelectTypeComponent extends FieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectTypeComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelectTypeComponent, isStandalone: true, selector: "c8y-select-type", usesInheritance: true, ngImport: i0, template: "<div class=\"c8y-select-wrapper\">\n  <select\n    class=\"form-control\"\n    [class.is-invalid]=\"showError\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [required]=\"properties.required\"\n  >\n    <option\n      [disabled]=\"properties.required || (!properties.acceptUndefined ?? true)\"\n      [ngValue]=\"undefined\"\n      selected\n    >\n      {{ placeholder$ | async | translate }}\n    </option>\n    <ng-container *ngFor=\"let opt of options$ | async\">\n      <option\n        [ngValue]=\"opt[valueProp]\"\n        [disabled]=\"opt.disabled || false\"\n      >\n        {{ opt[labelProp] | translate }}\n      </option>\n    </ng-container>\n  </select>\n</div>\n", dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelectTypeComponent, isStandalone: true, selector: "c8y-select-type", usesInheritance: true, ngImport: i0, template: "<div class=\"c8y-select-wrapper\">\n  <select\n    class=\"form-control\"\n    [class.is-invalid]=\"showError\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [required]=\"properties.required\"\n  >\n    <option\n      [disabled]=\"properties.required || (!properties.acceptUndefined ?? true)\"\n      [ngValue]=\"undefined\"\n      selected\n    >\n      {{ placeholder$ | async | translate }}\n    </option>\n    <ng-container *ngFor=\"let opt of options$ | async\">\n      <option\n        [ngValue]=\"opt[valueProp]\"\n        [disabled]=\"opt.disabled || false\"\n      >\n        {{ opt[labelProp] | translate }}\n      </option>\n    </ng-container>\n  </select>\n</div>\n", dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectTypeComponent, decorators: [{
             type: Component,
@@ -26862,7 +27083,7 @@ class FieldTextArea extends FieldType {
       [formlyAttributes]="field"
       [placeholder]="props.placeholder"
     ></textarea>
-  `, isInline: true, dependencies: [{ 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FieldTextArea, decorators: [{
             type: Component,
@@ -26941,7 +27162,7 @@ class TypeaheadTypeComponent extends FieldType {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TypeaheadTypeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TypeaheadTypeComponent, isStandalone: true, selector: "c8y-typeahead-type", usesInheritance: true, ngImport: i0, template: "<c8y-typeahead\n  [required]=\"to?.required || false\"\n  [placeholder]=\"placeholder$ | async\"\n  [displayProperty]=\"to?.displayProperty\"\n  [selected]=\"selected\"\n  [allowFreeEntries]=\"to?.allowFreeEntries || false\"\n  [container]=\"to?.container || ''\"\n  [disabled]=\"to?.disabled\"\n  (onSearch)=\"setPipe($event)\"\n  [formControl]=\"formControl\"\n  [class.is-invalid]=\"showError\"\n  [formlyAttributes]=\"field\">\n    <c8y-li *c8yFor=\"let opt of to?.c8yForOptions; loadMore: to?.loadMore || 'auto'; pipe: filterPipe; notFound: notFoundTemplate; loadingTemplate: loading;\"\n          (click)=\"selectOption(opt); setPipe('')\"\n          class=\"p-l-8 p-r-8 c8y-list__item--link\"\n          [attr.role]=\"'menuitem'\">\n    <c8y-highlight [text]=\"opt[labelProp]\" [pattern]=\"pattern\"></c8y-highlight>\n  </c8y-li>\n  <ng-template #notFoundTemplate>\n    <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0 && !match\">\n      <p><strong translate>No match found.</strong></p>\n    </c8y-li>\n  </ng-template>\n  <ng-template #loading>\n    <c8y-li class=\"text-center p-t-8 p-relative\">\n      <c8y-loading></c8y-loading>\n    </c8y-li>\n  </ng-template>\n</c8y-typeahead>\n", dependencies: [{ 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: "ngmodule", type: FormsModule$1 }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { 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: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TypeaheadTypeComponent, isStandalone: true, selector: "c8y-typeahead-type", usesInheritance: true, ngImport: i0, template: "<c8y-typeahead\n  [required]=\"to?.required || false\"\n  [placeholder]=\"placeholder$ | async\"\n  [displayProperty]=\"to?.displayProperty\"\n  [selected]=\"selected\"\n  [allowFreeEntries]=\"to?.allowFreeEntries || false\"\n  [container]=\"to?.container || ''\"\n  [disabled]=\"to?.disabled\"\n  (onSearch)=\"setPipe($event)\"\n  [formControl]=\"formControl\"\n  [class.is-invalid]=\"showError\"\n  [formlyAttributes]=\"field\">\n    <c8y-li *c8yFor=\"let opt of to?.c8yForOptions; loadMore: to?.loadMore || 'auto'; pipe: filterPipe; notFound: notFoundTemplate; loadingTemplate: loading;\"\n          (click)=\"selectOption(opt); setPipe('')\"\n          class=\"p-l-8 p-r-8 c8y-list__item--link\"\n          [attr.role]=\"'menuitem'\">\n    <c8y-highlight [text]=\"opt[labelProp]\" [pattern]=\"pattern\"></c8y-highlight>\n  </c8y-li>\n  <ng-template #notFoundTemplate>\n    <c8y-li class=\"bg-level-2 p-8\" *ngIf=\"pattern.length > 0 && !match\">\n      <p><strong translate>No match found.</strong></p>\n    </c8y-li>\n  </ng-template>\n  <ng-template #loading>\n    <c8y-li class=\"text-center p-t-8 p-relative\">\n      <c8y-loading></c8y-loading>\n    </c8y-li>\n  </ng-template>\n</c8y-typeahead>\n", dependencies: [{ 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: "ngmodule", type: FormsModule$1 }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { 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: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TypeaheadTypeComponent, decorators: [{
             type: Component,
@@ -30849,6 +31070,9 @@ class WidgetsDashboardComponent {
         this.settings = { ...this.settings, ...settings };
         this.isLoading$.next(!!this.settings.isLoading);
     }
+    get isDeviceTypeDashboard() {
+        return !!this.contextDashboard?.deviceType;
+    }
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
@@ -31044,6 +31268,10 @@ class WidgetsDashboardComponent {
         if (!widgets) {
             return widgets;
         }
+        if (this.isDeviceTypeDashboard) {
+            const keysToOverride = ['device', '__target'];
+            widgets.forEach(widget => (widget.config = this.replaceKeysWithContext(widget.config, keysToOverride)));
+        }
         const tuple = widgets.map(widget => ({
             componentId: widget.componentId || widget.name,
             config: widget.config
@@ -31059,6 +31287,36 @@ class WidgetsDashboardComponent {
         });
         return widgets;
     }
+    /**
+     * Recursively traverses an object/array and replaces specified keys with 'this.context'
+     * @param obj - The object or array to process
+     * @param keys - Array of keys to replace
+     * @returns The modified object with replaced values
+     */
+    replaceKeysWithContext(obj, keys) {
+        if (obj === null || obj === undefined) {
+            return obj;
+        }
+        // Handle primitive types (string, number, boolean)
+        if (typeof obj !== 'object') {
+            return obj;
+        }
+        // Handle arrays as replaceKeysWithContext is used recursively and config properties may be arrays (e.g. datapoints)
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.replaceKeysWithContext(item, keys));
+        }
+        // Handle objects
+        const result = {};
+        for (const [key, value] of Object.entries(obj)) {
+            if (keys.includes(key)) {
+                result[key] = this.context;
+            }
+            else {
+                result[key] = this.replaceKeysWithContext(value, keys);
+            }
+        }
+        return result;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$4.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }, { token: i1$4.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: WidgetsDashboardComponent, isStandalone: true, selector: "c8y-widgets-dashboard", inputs: { widgets: "widgets", context: "context", contextDashboard: "contextDashboard", _settings: ["settings", "_settings"], isCopyDisabled: "isCopyDisabled", breadcrumb: "breadcrumb", editModeButtons: "editModeButtons" }, outputs: { onAddWidget: "onAddWidget", onEditWidget: "onEditWidget", onDeleteWidget: "onDeleteWidget", onChangeDashboard: "onChangeDashboard", onResize: "onResize", onEditDashboard: "onEditDashboard", onCopyDashboard: "onCopyDashboard", onDeleteDashboard: "onDeleteDashboard", onChangeStart: "onChangeStart", onChangeEnd: "onChangeEnd", onSaveDashboard: "onSaveDashboard", onCancelDashboard: "onCancelDashboard", revertChange: "revertChange" }, host: { styleAttribute: "\n      display: block;\n    ", classAttribute: "dashboard c8y-grid-dashboard" }, providers: [WidgetsDashboardEventService], usesOnChanges: true, ngImport: i0, template: "<c8y-title *ngIf=\"!!settings.title\">\n  {{ settings.title | translate }}\n</c8y-title>\n\n<c8y-breadcrumb *ngIf=\"!!breadcrumb\">\n  <c8y-breadcrumb-item\n    [icon]=\"breadcrumb.icon\"\n    [label]=\"breadcrumb.label\"\n    [path]=\"breadcrumb.path\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"enableEditMode()\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{\n        (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel)\n          | translate\n      }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      data-cy=\"widgets-dashboard--copy-dashboard\"\n      (click)=\"onCopyDashboard.emit()\"\n      [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n    <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\n  </div>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode$ | async\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span translate>Edit</span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            (widget.config.widgetInstanceGlobalTimeContext ||\n              widget.config.widgetInstanceGlobalAutoRefreshContext)\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode$ | async\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: ["canDecouple", "displaySettings", "hidden"], outputs: ["dateContextChange"] }, { kind: "component", type: WidgetAutoRefreshContextComponent, selector: "c8y-widget-auto-refresh-context", inputs: ["editMode$"] }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
@@ -31615,7 +31873,7 @@ class BaseFilteringFormRendererComponent {
         this.context.resetFilter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BaseFilteringFormRendererComponent, deps: [{ token: FilteringFormRendererContext }, { token: C8yJSONSchema }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BaseFilteringFormRendererComponent, isStandalone: true, selector: "c8y-base-filtering-form-renderer", host: { listeners: { "keyup.enter": "onEnterKeyUp($event)", "keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<formly-form\n  [form]=\"form\"\n  [fields]=\"fields\"\n  [model]=\"model\"\n></formly-form>\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    title=\"{{ 'Reset' | translate }}\"\n    (click)=\"resetFilter()\"\n    translate\n  >\n    Reset\n  </button>\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    title=\"{{ 'Apply' | translate }}\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"form.pristine || form.invalid\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BaseFilteringFormRendererComponent, isStandalone: true, selector: "c8y-base-filtering-form-renderer", host: { listeners: { "keyup.enter": "onEnterKeyUp($event)", "keydown.escape": "onEscapeKeyDown($event)" } }, ngImport: i0, template: "<formly-form\n  [form]=\"form\"\n  [fields]=\"fields\"\n  [model]=\"model\"\n></formly-form>\n<div class=\"data-grid__dropdown__footer d-flex separator-top\">\n  <button\n    class=\"btn btn-default btn-sm m-r-8 flex-grow\"\n    title=\"{{ 'Reset' | translate }}\"\n    (click)=\"resetFilter()\"\n    translate\n  >\n    Reset\n  </button>\n  <button\n    class=\"btn btn-primary btn-sm flex-grow\"\n    title=\"{{ 'Apply' | translate }}\"\n    (click)=\"applyFilter()\"\n    [disabled]=\"form.pristine || form.invalid\"\n    translate\n  >\n    Apply\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BaseFilteringFormRendererComponent, decorators: [{
             type: Component,
@@ -34573,13 +34831,13 @@ class ListDisplaySwitchComponent {
     getListKey() {
         return this.listKey || this.location.path();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListDisplaySwitchComponent, deps: [{ token: i1$a.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListDisplaySwitchComponent, deps: [{ token: i2$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ListDisplaySwitchComponent, isStandalone: true, selector: "c8y-list-display-switch", inputs: { listKey: "listKey", listLength: "listLength", filterPipe: "filterPipe" }, outputs: { onListClassChange: "onListClassChange" }, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <label class=\"m-r-8 m-b-0\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n", dependencies: [{ 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListDisplaySwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-list-display-switch', standalone: true, imports: [FormsModule$1, NgFor, C8yTranslatePipe], template: "<div class=\"d-flex a-i-center\">\n  <label class=\"m-r-8 m-b-0\" id=\"listLabel\">\n    {{ 'Display as' | translate }}\n  </label>\n  <div class=\"c8y-select-wrapper\">\n    <select\n      aria-labelledby=\"listLabel\"\n      name=\"listLabel\"\n      class=\"form-control\"\n      [ngModel]=\"selectedOption\"\n      (ngModelChange)=\"onOptionSelect($event)\"\n      [attr.aria-label]=\"'Display mode' | translate\"\n    >\n      <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n        {{ option.label | translate }}\n      </option>\n    </select>\n    <span></span>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$a.Location }], propDecorators: { listKey: [{
+        }], ctorParameters: () => [{ type: i2$3.Location }], propDecorators: { listKey: [{
                 type: Input
             }], listLength: [{
                 type: Input,
@@ -36292,7 +36550,7 @@ class ProviderConfigurationComponent {
         return mapValues(configuration, value => (value === '<<Encrypted>>' ? undefined : value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProviderConfigurationComponent, deps: [{ token: Permissions }, { token: i1$4.ActivatedRoute }, { token: ModalService }, { token: AlertService }, { token: ProviderDefinitionsService }, { token: ProviderConfigurationService }, { token: C8yJSONSchema }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ProviderConfigurationComponent, isStandalone: true, selector: "c8y-sms-gateway", providers: [ProviderConfigurationService, ProviderDefinitionsService], ngImport: i0, template: "<c8y-title>\n  {{ (layout$ | async)?.pageTitle | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [label]=\"'Settings' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle !='Connectivity'\"\n    [label]=\"'SMS provider' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [label]=\"'Connectivity' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [icon]=\"'cog'\"\n    [label]=\"'SIM provider settings' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"row\">\n  <div class=\"col-md-8 col-xs-12\">\n    <form class=\"card card--fullpage\" (ngSubmit)=\"saveProviderConfiguration()\">\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">\n          {{ (layout$ | async)?.cardTitle | translate }}\n        </div>\n      </div>\n      <div class=\"inner-scroll\">\n        <div class=\"card-block\">\n          <p *ngIf=\"!!(layout$ | async)?.description\" class=\"m-b-8\">\n            {{ (layout$ | async)?.description | translate }}\n          </p>\n          <c8y-form-group>\n            <label for=\"providerName\">{{ (layout$ | async)?.providerName | translate }}</label>\n            <c8y-typeahead\n              [disabled]=\"!permissions.hasAllRoles((layout$ | async)?.saveRoles || [])\"\n              [ngModel]=\"selectedProvider$ | async\"\n              [displayProperty]=\"'displayName'\"\n              name=\"providerName\"\n              placeholder=\"{{ (layout$ | async)?.providerNamePlaceholder | translate }}\"\n              (onSearch)=\"providerInput$.next($event)\"\n              [allowFreeEntries]=\"false\"\n              [required]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                *ngFor=\"let provider of providers$ | async\"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"changeProvider$.next(provider); providerInput$.next('')\"\n                [active]=\"(selectedProvider$ | async) === provider\"\n                [attr.role]=\"'menuitem'\"\n              >\n                <c8y-highlight\n                  [text]=\"provider.displayName || '--'\"\n                  [pattern]=\"providerInput$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <c8y-messages>\n              <c8y-message\n                name=\"notExisting\"\n                [text]=\"(layout$ | async)?.providerNameNoMatchesHint | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n          <formly-form\n            *ngIf=\"selectedProvider$ | async\"\n            [form]=\"form\"\n            [fields]=\"fields\"\n            [model]=\"model\"\n            [options]=\"options\"\n          ></formly-form>\n        </div>\n      </div>\n      <div class=\"card-footer separator\" *c8yIfAllowed=\"allRoles$ | async; allowAny\">\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.deleteRoles\"\n          class=\"btn btn-default\"\n          type=\"button\"\n          (click)=\"deleteProviderConfiguration()\"\n          [disabled]=\"\n            !(configuration$ | async)?.provider && !(configuration$ | async)?.providerName\n          \"\n          title=\"{{ (layout$ | async)?.deleteBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.deleteBtnLabel | translate }}\n        </button>\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.saveRoles\"\n          class=\"btn btn-primary\"\n          type=\"submit\"\n          [disabled]=\"form.invalid || form.pristine\"\n          title=\"{{ (layout$ | async)?.saveBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.saveBtnLabel | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { 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: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ProviderConfigurationComponent, isStandalone: true, selector: "c8y-sms-gateway", providers: [ProviderConfigurationService, ProviderDefinitionsService], ngImport: i0, template: "<c8y-title>\n  {{ (layout$ | async)?.pageTitle | translate }}\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [label]=\"'Settings' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle !='Connectivity'\"\n    [label]=\"'SMS provider' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [label]=\"'Connectivity' | translate\"\n    [icon]=\"'cog'\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item *ngIf=\"(layout$ | async)?.pageTitle =='Connectivity'\"\n    [icon]=\"'cog'\"\n    [label]=\"'SIM provider settings' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div class=\"row\">\n  <div class=\"col-md-8 col-xs-12\">\n    <form class=\"card card--fullpage\" (ngSubmit)=\"saveProviderConfiguration()\">\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">\n          {{ (layout$ | async)?.cardTitle | translate }}\n        </div>\n      </div>\n      <div class=\"inner-scroll\">\n        <div class=\"card-block\">\n          <p *ngIf=\"!!(layout$ | async)?.description\" class=\"m-b-8\">\n            {{ (layout$ | async)?.description | translate }}\n          </p>\n          <c8y-form-group>\n            <label for=\"providerName\">{{ (layout$ | async)?.providerName | translate }}</label>\n            <c8y-typeahead\n              [disabled]=\"!permissions.hasAllRoles((layout$ | async)?.saveRoles || [])\"\n              [ngModel]=\"selectedProvider$ | async\"\n              [displayProperty]=\"'displayName'\"\n              name=\"providerName\"\n              placeholder=\"{{ (layout$ | async)?.providerNamePlaceholder | translate }}\"\n              (onSearch)=\"providerInput$.next($event)\"\n              [allowFreeEntries]=\"false\"\n              [required]=\"true\"\n              [container]=\"'body'\"\n            >\n              <c8y-li\n                *ngFor=\"let provider of providers$ | async\"\n                class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                (click)=\"changeProvider$.next(provider); providerInput$.next('')\"\n                [active]=\"(selectedProvider$ | async) === provider\"\n                [attr.role]=\"'menuitem'\"\n              >\n                <c8y-highlight\n                  [text]=\"provider.displayName || '--'\"\n                  [pattern]=\"providerInput$ | async\"\n                ></c8y-highlight>\n              </c8y-li>\n            </c8y-typeahead>\n            <c8y-messages>\n              <c8y-message\n                name=\"notExisting\"\n                [text]=\"(layout$ | async)?.providerNameNoMatchesHint | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n          <formly-form\n            *ngIf=\"selectedProvider$ | async\"\n            [form]=\"form\"\n            [fields]=\"fields\"\n            [model]=\"model\"\n            [options]=\"options\"\n          ></formly-form>\n        </div>\n      </div>\n      <div class=\"card-footer separator\" *c8yIfAllowed=\"allRoles$ | async; allowAny\">\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.deleteRoles\"\n          class=\"btn btn-default\"\n          type=\"button\"\n          (click)=\"deleteProviderConfiguration()\"\n          [disabled]=\"\n            !(configuration$ | async)?.provider && !(configuration$ | async)?.providerName\n          \"\n          title=\"{{ (layout$ | async)?.deleteBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.deleteBtnLabel | translate }}\n        </button>\n        <button\n          *c8yIfAllowed=\"(layout$ | async)?.saveRoles\"\n          class=\"btn btn-primary\"\n          type=\"submit\"\n          [disabled]=\"form.invalid || form.pristine\"\n          title=\"{{ (layout$ | async)?.saveBtnLabel | translate }}\"\n        >\n          {{ (layout$ | async)?.saveBtnLabel | translate }}\n        </button>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { 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: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { 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: ProviderConfigurationComponent, decorators: [{
             type: Component,
@@ -37334,5 +37592,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