@c8y/ngx-components 1021.6.0 → 1021.11.1

package/fesm2022/c8y-ngx-components.mjs

@@ -7,13 +7,13 @@ import { 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, reduce, union, cloneDeep, uniqBy, orderBy, flatMap, isEmpty, filter as filter$1, snakeCase, matches, isString, clone, toNumber, isEqualWith, escape as escape$1, escapeRegExp, assignWith, set, omit, pick, has, transform, identity, flow, isNil, chunk, values, without, indexOf, parseInt as parseInt$1, kebabCase, forOwn } from 'lodash-es';
 import { merge, of, defer, combineLatest, race, isObservable, from, Subject, BehaviorSubject, NEVER, Observable, firstValueFrom, fromEvent, pipe, throwError, concat, EMPTY, timer, fromEventPattern, startWith as startWith$1, switchMap as switchMap$1, map as map$2, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, empty, forkJoin, ReplaySubject, interval, shareReplay as shareReplay$1, mergeMap as mergeMap$1 } from 'rxjs';
 import { map, distinctUntilChanged, filter, startWith, switchMap, take, shareReplay, scan, debounceTime, share, tap, catchError, takeUntil, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom, mergeMap, every as every$1, toArray, merge as merge$1, expand, finalize, reduce as reduce$1, combineLatestWith, mapTo } from 'rxjs/operators';
-import * as i1$1 from '@c8y/client';
+import * as i1 from '@c8y/client';
 import { ApplicationAvailability, OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BearerAuthFromSessionStorage, FetchClient, Client, PasswordStrength, QueriesUtil, InventoryService, UserService, ApplicationService, TenantService, aggregationType, Service } from '@c8y/client';
 import { __decorate, __metadata } from 'tslib';
-import * as i1$5 from '@angular/router';
+import * as i1$4 from '@angular/router';
 import { NavigationEnd, RouterModule as RouterModule$1, ActivationEnd, NavigationStart, PRIMARY_OUTLET, ActivatedRoute, ROUTES } from '@angular/router';
-import * as i1 from '@c8y/ngx-components/api';
-import { DataModule, InventoryService as InventoryService$1 } from '@c8y/ngx-components/api';
+import * as i4 from '@c8y/ngx-components/api';
+import { DataModule } from '@c8y/ngx-components/api';
 import { satisfies, compare, coerce } from 'semver';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2$1 from '@angular/cdk/scrolling';
@@ -23,9 +23,9 @@ import { formatDate, registerLocaleData, DOCUMENT, DatePipe as DatePipe$1, DATE_
 import * as i2$3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { setTheme } from 'ngx-bootstrap/utils';
-import * as i1$3 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import * as i1$2 from '@ngx-translate/core';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateDefaultParser, TranslateDirective, TranslatePipe, TranslateModule, TranslateLoader, TranslateCompiler, TranslateFakeCompiler, TranslateParser, MissingTranslationHandler, TranslateStore, TranslateService as TranslateService$1, USE_STORE, USE_DEFAULT_LANG, USE_EXTEND, DEFAULT_LANGUAGE } from '@ngx-translate/core';
 import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
 export * from '@c8y/ngx-components/gettext';
@@ -33,14 +33,14 @@ import * as i3 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
 import { defineLocale, enGbLocale, zhCnLocale, ptBrLocale, plLocale, nlLocale, koLocale, jaLocale, frLocale, esLocale, deLocale } from 'ngx-bootstrap/chronos';
 import saveAs$1, { saveAs } from 'file-saver';
-import * as i1$4 from '@angular/platform-browser';
+import * as i1$3 from '@angular/platform-browser';
 import { BlobReader, ZipReader, BlobWriter, ZipWriter } from '@zip.js/zip.js';
-import * as i1$9 from 'ngx-bootstrap/collapse';
+import * as i1$8 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i1$6 from 'ngx-bootstrap/modal';
+import * as i1$5 from 'ngx-bootstrap/modal';
 import { ModalModule as ModalModule$1, BsModalRef } from 'ngx-bootstrap/modal';
 import { sortBy as sortBy$1, isEmpty as isEmpty$1, findIndex, assign as assign$1, flatten as flatten$1, get as get$1, set as set$1, pick as pick$1 } from 'lodash';
-import * as i1$7 from '@angular/forms';
+import * as i1$6 from '@angular/forms';
 import { NgModel, FormControlName, Validators, NG_VALIDATORS, ControlContainer, NgForm, NG_VALUE_ACCESSOR, FormControl, FormsModule as FormsModule$1, ReactiveFormsModule, CheckboxControlValueAccessor, FormArray, NgControl, FormGroup } from '@angular/forms';
 import { parsePhoneNumberFromString } from 'libphonenumber-js/max';
 import * as i5 from 'angularx-qrcode';
@@ -49,14 +49,14 @@ import * as i2$4 from 'ngx-bootstrap/popover';
 import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
 import * as i2$5 from '@angular/cdk/stepper';
 import { CdkStepper, STEP_STATE, CdkStepperModule, CdkStep, STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import * as i1$8 from '@angular/cdk/bidi';
+import * as i1$7 from '@angular/cdk/bidi';
 import { getThemePreference, setThemePreference, applyTheme } from '@c8y/bootstrap';
 import * as mimeDB from 'mime-db';
 import * as i6 from '@ngx-formly/core';
 import { FormlyModule, FieldArrayType, FieldType, FieldWrapper, FORMLY_CONFIG, ɵdefineHiddenProp as _defineHiddenProp } from '@ngx-formly/core';
 import * as i5$1 from '@ngx-formly/core/select';
 import { FormlySelectModule } from '@ngx-formly/core/select';
-import * as i4 from 'ngx-bootstrap/timepicker';
+import * as i4$1 from 'ngx-bootstrap/timepicker';
 import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
@@ -916,7 +916,7 @@ class AppStateService extends StateService {
             console.log('%c ' + errorContent, 'font-weight: bold; font-size: 30px; color: red;');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppStateService, deps: [{ token: i1$1.ApplicationService }, { token: i1.ApiService }, { token: OptionsService }, { token: i1$1.FetchClient }, { token: i1$1.TenantLoginOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppStateService, deps: [{ token: i1.ApplicationService }, { token: i4.ApiService }, { token: OptionsService }, { token: i1.FetchClient }, { token: i1.TenantLoginOptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppStateService, providedIn: 'root' }); }
 }
 __decorate([
@@ -928,7 +928,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.ApplicationService }, { type: i1.ApiService }, { type: OptionsService }, { type: i1$1.FetchClient }, { type: i1$1.TenantLoginOptionsService }], propDecorators: { refreshLoginOptions: [] } });
+        }], ctorParameters: () => [{ type: i1.ApplicationService }, { type: i4.ApiService }, { type: OptionsService }, { type: i1.FetchClient }, { type: i1.TenantLoginOptionsService }], propDecorators: { refreshLoginOptions: [] } });
 
 /**
  * A wrapper class for handling realtime notifications in RxJS fashion.
@@ -1108,13 +1108,13 @@ class RealtimeSubjectService {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RealtimeSubjectService, deps: [{ token: i1$1.Realtime }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RealtimeSubjectService, deps: [{ token: i1.Realtime }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RealtimeSubjectService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RealtimeSubjectService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.Realtime }] });
+        }], ctorParameters: () => [{ type: i1.Realtime }] });
 
 class ManagedObjectRealtimeService extends RealtimeService {
     constructor(realtimeSubject) {
@@ -1234,13 +1234,13 @@ class AssetTypesRealtimeService {
         });
         return data.length > 0 ? data[0].id : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesRealtimeService, deps: [{ token: i1$1.InventoryService }, { token: AppStateService }, { token: RealtimeSubjectService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesRealtimeService, deps: [{ token: i1.InventoryService }, { token: AppStateService }, { token: RealtimeSubjectService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesRealtimeService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesRealtimeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }, { type: AppStateService }, { type: RealtimeSubjectService }] });
+        }], ctorParameters: () => [{ type: i1.InventoryService }, { type: AppStateService }, { type: RealtimeSubjectService }] });
 
 const MO_TYPES = [
     'asset',
@@ -1715,12 +1715,12 @@ class MissingTranslationCustomHandler {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MissingTranslationCustomHandler, deps: [{ token: i1$2.TranslateParser }, { token: PatternMessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MissingTranslationCustomHandler, deps: [{ token: i1$1.TranslateParser }, { token: PatternMessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MissingTranslationCustomHandler }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MissingTranslationCustomHandler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.TranslateParser }, { type: PatternMessagesService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateParser }, { type: PatternMessagesService }] });
 
 // kept here for backwards compatibility
 // gettext was moved into separate entry point
@@ -3633,12 +3633,12 @@ class TranslateCustomLoader {
     getDictionaryWithTrimmedKeys(dictionary) {
         return mapKeys(dictionary, (value, key) => trimTranslationKey(key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateCustomLoader, deps: [{ token: i1$3.HttpClient }, { token: OptionsService }, { token: CachedLocaleDictionaryService }, { token: LOCALE_PATH }, { token: LANGUAGES }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateCustomLoader, deps: [{ token: i1$2.HttpClient }, { token: OptionsService }, { token: CachedLocaleDictionaryService }, { token: LOCALE_PATH }, { token: LANGUAGES }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateCustomLoader }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateCustomLoader, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.HttpClient }, { type: OptionsService }, { type: CachedLocaleDictionaryService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: OptionsService }, { type: CachedLocaleDictionaryService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_PATH]
                 }] }, { type: undefined, decorators: [{
@@ -3784,7 +3784,7 @@ class C8yTranslateDirective extends TranslateDirective {
     updateHtmlContent() {
         this._elementRef.nativeElement.innerHTML = this.lastTranslation;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yTranslateDirective, deps: [{ token: i1$2.TranslateService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yTranslateDirective, deps: [{ token: i1$1.TranslateService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: C8yTranslateDirective, isStandalone: true, selector: "[translate],[ngx-translate]", usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yTranslateDirective, decorators: [{
@@ -3793,7 +3793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     selector: '[translate],[ngx-translate]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
 
 /**
  * Provides copy of original pipe for C8yTranslateModule
@@ -3803,7 +3803,7 @@ class C8yTranslatePipe extends TranslatePipe {
     constructor(translate, _ref) {
         super(translate, _ref);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yTranslatePipe, deps: [{ token: i1$2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yTranslatePipe, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: C8yTranslatePipe, isStandalone: true, name: "translate", pure: false }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yTranslatePipe, decorators: [{
@@ -3813,7 +3813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     pure: false, // required to update the value when the promise is resolved
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }] });
 
 const roleNamesToLabels = {
     admins: gettext$1('Admin User`role`'),
@@ -4226,7 +4226,7 @@ class TranslateService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateService, deps: [{ token: i1$2.TranslateService }, { token: AppStateService }, { token: OptionsService }, { token: DOCUMENT }, { token: i3.BsLocaleService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateService, deps: [{ token: i1$1.TranslateService }, { token: AppStateService }, { token: OptionsService }, { token: DOCUMENT }, { token: i3.BsLocaleService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TranslateService, decorators: [{
@@ -4234,7 +4234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: AppStateService }, { type: OptionsService }, { type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: AppStateService }, { type: OptionsService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i3.BsLocaleService, decorators: [{
@@ -4346,7 +4346,7 @@ class DatePipe extends DatePipe$1 {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePipe, deps: [{ token: LOCALE_ID }, { token: i1$2.TranslateService }, { token: DATE_PIPE_DEFAULT_TIMEZONE, optional: true }, { token: DATE_PIPE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePipe, deps: [{ token: LOCALE_ID }, { token: i1$1.TranslateService }, { token: DATE_PIPE_DEFAULT_TIMEZONE, optional: true }, { token: DATE_PIPE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DatePipe, isStandalone: true, name: "c8yDate" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePipe, decorators: [{
@@ -4355,7 +4355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
-                }] }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                }] }, { type: i1$1.TranslateService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_PIPE_DEFAULT_TIMEZONE]
                 }, {
@@ -5870,13 +5870,13 @@ class FilesService {
     isGenericType(type) {
         return Object.values(GENERIC_FILE_TYPE).includes(type);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilesService, deps: [{ token: i1$1.SystemOptionsService }, { token: i1$1.InventoryBinaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilesService, deps: [{ token: i1.SystemOptionsService }, { token: i1.InventoryBinaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilesService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.SystemOptionsService }, { type: i1$1.InventoryBinaryService }] });
+        }], ctorParameters: () => [{ type: i1.SystemOptionsService }, { type: i1.InventoryBinaryService }] });
 
 /**
  * Returns a generic file icon name matching the extension of the given File object.
@@ -6021,13 +6021,13 @@ class HumanizeAppNamePipe {
             .map(word => word.charAt(0).toUpperCase() + word.slice(1))
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HumanizeAppNamePipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HumanizeAppNamePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: HumanizeAppNamePipe, isStandalone: true, name: "humanizeAppName" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HumanizeAppNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'humanizeAppName', standalone: true }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 /*
  * Humanize any string
@@ -6346,7 +6346,7 @@ class Permissions {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Permissions, deps: [{ token: AppStateService }, { token: i1$1.InventoryService }, { token: i1$1.UserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Permissions, deps: [{ token: AppStateService }, { token: i1.InventoryService }, { token: i1.UserService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Permissions, providedIn: 'root' }); }
 }
 __decorate([
@@ -6364,7 +6364,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Permissions, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: i1$1.InventoryService }, { type: i1$1.UserService }], propDecorators: { checkIfOwner: [], checkWithRequest: [] } });
+        }], ctorParameters: () => [{ type: AppStateService }, { type: i1.InventoryService }, { type: i1.UserService }], propDecorators: { checkIfOwner: [], checkWithRequest: [] } });
 
 /**
  * A structural directive that conditionally includes a template only if the user has
@@ -6536,7 +6536,7 @@ class MarkdownToHtmlPipe {
             }))
             : of('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MarkdownToHtmlPipe, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MarkdownToHtmlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: MarkdownToHtmlPipe, isStandalone: true, name: "markdownToHtml" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MarkdownToHtmlPipe, decorators: [{
@@ -6545,7 +6545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     name: 'markdownToHtml',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }] });
 
 class MoNameCacheService {
     constructor(inventoryService) {
@@ -6563,13 +6563,13 @@ class MoNameCacheService {
             this.getMoName.cache.delete(id);
         }, this.cacheLifeSpan);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MoNameCacheService, deps: [{ token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MoNameCacheService, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MoNameCacheService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MoNameCacheService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }] });
+        }], ctorParameters: () => [{ type: i1.InventoryService }] });
 
 class MoNamePipe {
     constructor(moNamePipeService) {
@@ -7257,13 +7257,13 @@ class UserPreferencesService {
             ? this.storage.inventory
             : this.storage.local;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserPreferencesService, deps: [{ token: i1$1.UserService }, { token: i1$1.InventoryService }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserPreferencesService, deps: [{ token: i1.UserService }, { token: i1.InventoryService }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserPreferencesService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserPreferencesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.UserService }, { type: i1$1.InventoryService }, { type: AppStateService }] });
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: i1.InventoryService }, { type: AppStateService }] });
 
 function initializeServices(translateService, state, userPreferences) {
     const initialize = () => {
@@ -7574,13 +7574,13 @@ class GlobalConfigService {
         const fragmentType = this.fragmentTypeMapping[objectType];
         return this.getGlobalConfig(fragmentType).then(result => result && result[fragmentType] !== undefined ? !!result[fragmentType] : true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GlobalConfigService, deps: [{ token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GlobalConfigService, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GlobalConfigService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GlobalConfigService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }] });
+        }], ctorParameters: () => [{ type: i1.InventoryService }] });
 
 const NULL_VALUE_PLACEHOLDER = '--';
 class RelativeTimePipe {
@@ -7824,7 +7824,7 @@ class RelativeTimePipe {
             ? this.translateService.instant(gettext$1('in {{ count }} years'), params)
             : this.translateService.instant(gettext$1('{{ count }} years ago'), params);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RelativeTimePipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RelativeTimePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: RelativeTimePipe, isStandalone: true, name: "relativeTime" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RelativeTimePipe, decorators: [{
@@ -7833,7 +7833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     name: 'relativeTime',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 function retryWithDelay(delayTime, count = 1) {
     return input => input.pipe(retryWhen(errors => errors.pipe(scan((acc, error) => ({ count: acc.count + 1, error }), {
@@ -8168,7 +8168,7 @@ class PluginsResolveService {
         }
         return { name: exposedModule, factory };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginsResolveService, deps: [{ token: i1$2.TranslateService }, { token: i1$1.FetchClient }, { token: AppStateService }, { token: i0.EnvironmentInjector }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginsResolveService, deps: [{ token: i1$1.TranslateService }, { token: i1.FetchClient }, { token: AppStateService }, { token: i0.EnvironmentInjector }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginsResolveService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PluginsResolveService, decorators: [{
@@ -8176,7 +8176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i1$1.FetchClient }, { type: AppStateService }, { type: i0.EnvironmentInjector }, { type: OptionsService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i1.FetchClient }, { type: AppStateService }, { type: i0.EnvironmentInjector }, { type: OptionsService }] });
 
 class PluginsService {
     static convertInstalledRemotesToIds(remotes) {
@@ -8901,13 +8901,13 @@ class TenantUiService {
     isManagement(currentTenant) {
         return currentTenant.name === this.MANAGEMENT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TenantUiService, deps: [{ token: i1$1.UserService }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TenantUiService, deps: [{ token: i1.UserService }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TenantUiService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TenantUiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.UserService }, { type: AppStateService }] });
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AppStateService }] });
 
 class ZipService {
     getEntries(zipFile) {
@@ -9513,7 +9513,7 @@ class GainsightService {
         enTranslation = enTranslation.replace(regex, '');
         return enTranslation;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GainsightService, deps: [{ token: AppStateService }, { token: OptionsService }, { token: CookieBannerService }, { token: UserPreferencesService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GainsightService, deps: [{ token: AppStateService }, { token: OptionsService }, { token: CookieBannerService }, { token: UserPreferencesService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GainsightService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: GainsightService, decorators: [{
@@ -9521,7 +9521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: OptionsService }, { type: CookieBannerService }, { type: UserPreferencesService }, { type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: AppStateService }, { type: OptionsService }, { type: CookieBannerService }, { type: UserPreferencesService }, { type: i1$1.TranslateService }] });
 
 /**
  * Use this token for components that can provide product experience events.
@@ -9767,7 +9767,7 @@ class AppHrefPipe {
         href += `index.html?${searchParams.toString()}`;
         return href;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppHrefPipe, deps: [{ token: i1$1.ApplicationService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppHrefPipe, deps: [{ token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AppHrefPipe, name: "appHref" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppHrefPipe, decorators: [{
@@ -9775,7 +9775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     name: 'appHref'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.ApplicationService }] });
+        }], ctorParameters: () => [{ type: i1.ApplicationService }] });
 
 class IsActiveAppPipe {
     constructor(ui) {
@@ -10178,7 +10178,7 @@ class ActionBarService extends ExtensionPointForPlugins {
         });
         return itemWithHighestPriority;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarService, decorators: [{
@@ -10186,7 +10186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 /**
  * A <c8y-action-bar-item> can be added with content projection.
@@ -10422,7 +10422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  */
 class ActionBarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ActionBarModule, declarations: [ActionBarComponent, ActionBarItemComponent], imports: [BsDropdownModule, CommonModule, CollapseModule, i1$5.RouterModule], exports: [ActionBarComponent, ActionBarItemComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ActionBarModule, declarations: [ActionBarComponent, ActionBarItemComponent], imports: [BsDropdownModule, CommonModule, CollapseModule, i1$4.RouterModule], exports: [ActionBarComponent, ActionBarItemComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarModule, imports: [BsDropdownModule, CommonModule, CollapseModule, RouterModule$1.forChild([])] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarModule, decorators: [{
@@ -10505,7 +10505,7 @@ class ActionService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionService, decorators: [{
@@ -10513,7 +10513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 /**
  * This component is used as the outlet to show the action list.
@@ -10626,7 +10626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  */
 class ActionModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ActionModule, declarations: [ActionOutletComponent, ActionComponent], imports: [CommonModule, BsDropdownModule, i1$5.RouterModule], exports: [ActionOutletComponent, ActionComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ActionModule, declarations: [ActionOutletComponent, ActionComponent], imports: [CommonModule, BsDropdownModule, i1$4.RouterModule], exports: [ActionOutletComponent, ActionComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionModule, imports: [CommonModule, BsDropdownModule, RouterModule$1.forChild([])] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionModule, decorators: [{
@@ -11181,13 +11181,13 @@ class DrawerService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(allEntriesAreEqual), map((drawerItems) => removeDuplicatesIds(drawerItems)), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DrawerService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DrawerService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DrawerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DrawerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 /**
  * A service which defines header functions.
@@ -11855,7 +11855,7 @@ class NavigatorService extends ExtensionPointForPlugins {
             return rootNode.children;
         }), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorService, decorators: [{
@@ -11863,7 +11863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 /**
  * Default steppers used in the platform. Use this too hook into
@@ -11979,7 +11979,7 @@ class StepperService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StepperService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: i1$2.TranslateService }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StepperService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: i1$1.TranslateService }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StepperService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: StepperService, decorators: [{
@@ -11987,7 +11987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: i1$2.TranslateService }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: i1$1.TranslateService }, { type: PluginsResolveService }] });
 
 /**
  * The state determines the current status of the wizard:
@@ -12186,7 +12186,7 @@ class TabsService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(), map(tabs => this.prepareTabs(tabs)), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: i1$2.TranslateService }, { token: OptionsService }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: i1$1.TranslateService }, { token: OptionsService }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsService, decorators: [{
@@ -12194,7 +12194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: i1$2.TranslateService }, { type: OptionsService }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: i1$1.TranslateService }, { type: OptionsService }, { type: PluginsResolveService }] });
 
 class ConfirmModalComponent {
     set labels(labels) {
@@ -12240,13 +12240,13 @@ class ConfirmModalComponent {
         const doc = new DOMParser().parseFromString(str, 'text/html');
         return Array.from(doc.body.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1$6.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1$5.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: { title: "title", body: "body", confirmOptions: "confirmOptions", status: "status", labels: "labels" }, ngImport: i0, template: "<div\n  class=\"c8y-prompt alert\"\n  [ngClass]=\"[classAlert]\"\n  data-cy=\"prompt-alert\"\n>\n  <h3\n    class=\"m-b-16 d-flex a-i-center\"\n    *ngIf=\"title\"\n  >\n    <i\n      class=\"dlt-c8y-icon\"\n      [ngClass]=\"[classIcon]\"\n    ></i>\n    <span id=\"modal-title\">{{ title | translate }}</span>\n  </h3>\n  <div id=\"modal-body\">\n    <p\n      class=\"text-break-word m-b-16\"\n      *ngIf=\"!isHtml(body)\"\n    >\n      {{ body | translate }}\n    </p>\n    <div\n      class=\"text-break-word m-b-16\"\n      *ngIf=\"isHtml(body)\"\n      [innerHTML]=\"body | translate\"\n    ></div>\n    <div\n      class=\"c8y-checkbox plain m-b-8\"\n      *ngFor=\"let co of confirmOptions | showIfFilter | async | keyvalue\"\n    >\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"co.value.text | translate\"\n      >\n        <input\n          type=\"checkbox\"\n          [checked]=\"co.value.checked\"\n          (change)=\"co.value.checked = !co.value.checked\"\n          [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n        />\n        <span></span>\n        <span class=\"text-muted\">{{ co.value.text | translate }}</span>\n      </label>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"alert-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      *ngIf=\"labels.cancel !== null\"\n      (click)=\"dismiss()\"\n      data-cy=\"c8y-confirm-modal--cancel\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary m-t-xs-8\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      (click)=\"close()\"\n      data-cy=\"c8y-confirm-modal--ok\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: ShowIfFilterPipe, name: "showIfFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfirmModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-confirm-modal', template: "<div\n  class=\"c8y-prompt alert\"\n  [ngClass]=\"[classAlert]\"\n  data-cy=\"prompt-alert\"\n>\n  <h3\n    class=\"m-b-16 d-flex a-i-center\"\n    *ngIf=\"title\"\n  >\n    <i\n      class=\"dlt-c8y-icon\"\n      [ngClass]=\"[classIcon]\"\n    ></i>\n    <span id=\"modal-title\">{{ title | translate }}</span>\n  </h3>\n  <div id=\"modal-body\">\n    <p\n      class=\"text-break-word m-b-16\"\n      *ngIf=\"!isHtml(body)\"\n    >\n      {{ body | translate }}\n    </p>\n    <div\n      class=\"text-break-word m-b-16\"\n      *ngIf=\"isHtml(body)\"\n      [innerHTML]=\"body | translate\"\n    ></div>\n    <div\n      class=\"c8y-checkbox plain m-b-8\"\n      *ngFor=\"let co of confirmOptions | showIfFilter | async | keyvalue\"\n    >\n      <label\n        class=\"c8y-checkbox\"\n        [title]=\"co.value.text | translate\"\n      >\n        <input\n          type=\"checkbox\"\n          [checked]=\"co.value.checked\"\n          (change)=\"co.value.checked = !co.value.checked\"\n          [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n        />\n        <span></span>\n        <span class=\"text-muted\">{{ co.value.text | translate }}</span>\n      </label>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div class=\"alert-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      *ngIf=\"labels.cancel !== null\"\n      (click)=\"dismiss()\"\n      data-cy=\"c8y-confirm-modal--cancel\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary m-t-xs-8\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      (click)=\"close()\"\n      data-cy=\"c8y-confirm-modal--ok\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$6.BsModalRef }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i1$5.BsModalRef }], propDecorators: { title: [{
                 type: Input
             }], body: [{
                 type: Input
@@ -12344,7 +12344,7 @@ class ModalService {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, deps: [{ token: i1$6.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, deps: [{ token: i1$5.BsModalService }, { token: GainsightService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, decorators: [{
@@ -12352,7 +12352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$6.BsModalService }, { type: GainsightService }] });
+        }], ctorParameters: () => [{ type: i1$5.BsModalService }, { type: GainsightService }] });
 
 /**
  * Service to manage the login.
@@ -12939,12 +12939,12 @@ class LoginService {
         }
         return response;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LoginService, deps: [{ token: i0.Injector }, { token: i1$1.FetchClient }, { token: i1$1.BasicAuth }, { token: i1$1.CookieAuth }, { token: AppStateService }, { token: i1$1.UserService }, { token: i1$1.TenantService }, { token: i1$1.Realtime }, { token: AlertService }, { token: i1.ApiService }, { token: TenantUiService }, { token: i1$1.TenantLoginOptionsService }, { token: i1$2.TranslateService }, { token: ModalService }, { token: i2.LocationStrategy, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LoginService, deps: [{ token: i0.Injector }, { token: i1.FetchClient }, { token: i1.BasicAuth }, { token: i1.CookieAuth }, { token: AppStateService }, { token: i1.UserService }, { token: i1.TenantService }, { token: i1.Realtime }, { token: AlertService }, { token: i4.ApiService }, { token: TenantUiService }, { token: i1.TenantLoginOptionsService }, { token: i1$1.TranslateService }, { token: ModalService }, { token: i2.LocationStrategy, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LoginService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LoginService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.FetchClient }, { type: i1$1.BasicAuth }, { type: i1$1.CookieAuth }, { type: AppStateService }, { type: i1$1.UserService }, { type: i1$1.TenantService }, { type: i1$1.Realtime }, { type: AlertService }, { type: i1.ApiService }, { type: TenantUiService }, { type: i1$1.TenantLoginOptionsService }, { type: i1$2.TranslateService }, { type: ModalService }, { type: i2.LocationStrategy, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.FetchClient }, { type: i1.BasicAuth }, { type: i1.CookieAuth }, { type: AppStateService }, { type: i1.UserService }, { type: i1.TenantService }, { type: i1.Realtime }, { type: AlertService }, { type: i4.ApiService }, { type: TenantUiService }, { type: i1.TenantLoginOptionsService }, { type: i1$1.TranslateService }, { type: ModalService }, { type: i2.LocationStrategy, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -13022,7 +13022,7 @@ class BreadcrumbService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(), map(breadcrumbs => this.sortByPreferredPath(breadcrumbs)), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbService, decorators: [{
@@ -13030,12 +13030,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 const legalNoticesItem = {
     icon: 'gavel',
     label: gettext$1('Legal notices'),
-    url: 'https://documentation.softwareag.com/legal/',
+    url: 'https://cumulocity.com/docs/legal-notices/',
     type: 'doc'
 };
 const documentationItems = [
@@ -13218,7 +13218,7 @@ class DocsService extends ExtensionPointWithoutStateForPlugins {
         const minorNumber = parseInt(majorMinorStr, 10) - majorNumber * 100 + (takeNextMinor ? 1 : 0);
         return `${majorNumber}.${minorNumber}.0`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DocsService, deps: [{ token: OptionsService }, { token: AppStateService }, { token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DocsService, deps: [{ token: OptionsService }, { token: AppStateService }, { token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DocsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DocsService, decorators: [{
@@ -13226,7 +13226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: OptionsService }, { type: AppStateService }, { type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: OptionsService }, { type: AppStateService }, { type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 /**
  * A hook to use for Multi Provider extension.
@@ -13305,7 +13305,7 @@ class SearchService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(shareReplay(1), distinctUntilChanged());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchService, decorators: [{
@@ -13313,7 +13313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 class UserMenuService extends StateService {
     constructor() {
@@ -13390,7 +13390,7 @@ class BreadcrumbOutletComponent {
         return path?.replace(/^#\/?/, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "<div\n  class=\"breadcrumbs-container\"\n  [ngClass]=\"{\n    multiple: breadcrumbs.length > 1,\n    open: showAll\n  }\"\n  *ngIf=\"breadcrumbs && breadcrumbs.length > 0\"\n>\n  <button\n    class=\"btn-show-all-breadcrumbs pull-left\"\n    type=\"button\"\n    title=\"{{ 'Expand/collapse all breadcrumbs' | translate }}\"\n    *ngIf=\"breadcrumbs.length > 1\"\n    (click)=\"showAll = !showAll\"\n  >\n    <i\n      *ngIf=\"!showAll\"\n      [c8yIcon]=\"'caret-right'\"\n      tooltip=\"{{ 'Show all breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n    <i\n      *ngIf=\"showAll\"\n      [c8yIcon]=\"'caret-down'\"\n      tooltip=\"{{ 'Expand breadcrumbs' | translate }}\"\n      container=\"body\"\n      placement=\"top\"\n    ></i>\n  </button>\n\n  <ul class=\"breadcrumbs text-muted\" *ngFor=\"let breadcrumb of breadcrumbs; let first = first\">\n    <ng-container *ngIf=\"first || showAll\">\n      <li class=\"text-muted\" *ngFor=\"let item of breadcrumb.items; let firstItem = first\">\n        <span *ngIf=\"!firstItem\">></span>\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: breadcrumb.injector\"\n        ></ng-container>\n        <ng-container *ngIf=\"item.label && item.path\">\n          <a\n            [routerLink]=\"normalizePath(item.path)\"\n            class=\"word-break\"\n            title=\"{{ item.label | translate }}\"\n          >\n            <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n            <span>{{ item.label | translate }}</span>\n          </a>\n        </ng-container>\n        <ng-container *ngIf=\"item.label && !item.path\">\n          <i [c8yIcon]=\"item.icon\" *ngIf=\"firstItem\" class=\"m-r-4\"></i>\n          <span title=\"{{ item.label | translate }}\">{{ item.label | translate }}</span>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbOutletComponent, decorators: [{
             type: Component,
@@ -13482,13 +13482,13 @@ class HeaderBarComponent {
     closeDrawer() {
         this.headerService.closeRightDrawer();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HeaderBarComponent, deps: [{ token: HeaderService }, { token: ActionService }, { token: BreadcrumbService }, { token: SearchService }, { token: AppStateService }, { token: UserMenuService }, { token: DocsService }, { token: i1.ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HeaderBarComponent, deps: [{ token: HeaderService }, { token: ActionService }, { token: BreadcrumbService }, { token: SearchService }, { token: AppStateService }, { token: UserMenuService }, { token: DocsService }, { token: i4.ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: { simple: "simple" }, ngImport: i0, template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n\n    <button\n      class=\"main-header-button drawer-toggle\"\n      [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n      tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n      placement=\"left\"\n      [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n      [attr.aria-controls]=\"'right-drawer'\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleDrawer()\"\n      [attr.data-cy]=\"'right-drawer-toggle-button'\"\n    >\n      <span\n        class=\"user-dot\"\n        title=\"{{ appState.currentUser | async | shortenUserName }}\"\n        *ngIf=\"appState.currentUser | async\"\n        data-cy=\"header-bar--user-dot\"\n      >\n        {{ appState.currentUser | async | userNameInitials }}\n      </span>\n      <span class=\"close-dot\">&times;</span>\n    </button>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n", dependencies: [{ kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "component", type: AppSwitcherComponent, selector: "c8y-app-switcher" }, { kind: "component", type: SearchOutletComponent, selector: "c8y-search-outlet", inputs: ["search"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: ["items"] }, { kind: "component", type: BreadcrumbOutletComponent, selector: "c8y-breadcrumb-outlet", inputs: ["breadcrumbs"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: TitleOutletComponent, selector: "c8y-title-outlet" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-header-bar', template: "<div\n  class=\"app-main-header\"\n  [ngClass]=\"{\n    open: (headerService.navigatorOpen$ | async) && !simple,\n    drawerOpen: headerService.rightDrawerOpen$ | async\n  }\"\n>\n  <div\n    class=\"header-bar\"\n    role=\"banner\"\n  >\n    <button\n      class=\"navigator-toggle main-header-button\"\n      title=\"{{ 'Toggle navigation bar' | translate }}\"\n      [attr.aria-expanded]=\"headerService.navigatorOpen$ | async\"\n      [attr.aria-controls]=\"'navigator'\"\n      type=\"button\"\n      data-cy=\"header-bar--main-header-button\"\n      (click)=\"headerService.toggleNavigator()\"\n      *ngIf=\"(headerService.canToggleNavigator$ | async) && !simple\"\n    >\n      <i\n        [c8yIcon]=\"'outdent'\"\n        *ngIf=\"!(headerService.navigatorOpen$ | async)\"\n      ></i>\n      <i\n        [c8yIcon]=\"'dedent-right'\"\n        *ngIf=\"headerService.navigatorOpen$ | async\"\n      ></i>\n    </button>\n    <div class=\"app-view\">\n      <c8y-app-icon\n        [name]=\"(appState$ | async).app.name\"\n        [contextPath]=\"(appState$ | async).app.contextPath\"\n        [app]=\"(app$ | async) || (appState$ | async).app\"\n      ></c8y-app-icon>\n\n      <span class=\"page-header\">\n        <c8y-title-outlet></c8y-title-outlet>\n        <c8y-breadcrumb-outlet\n          class=\"app-breadcrumbs\"\n          *ngIf=\"!simple\"\n          [breadcrumbs]=\"breadcrumbService.items$ | async\"\n        ></c8y-breadcrumb-outlet>\n      </span>\n    </div>\n    <c8y-search-outlet\n      class=\"main-header-item\"\n      title=\"{{ 'Search' | translate }}\"\n      *ngIf=\"!simple\"\n      [search]=\"searchService.items$ | async\"\n    ></c8y-search-outlet>\n    <c8y-action-outlet\n      *ngIf=\"!simple\"\n      [items]=\"actionService.items$ | async\"\n    ></c8y-action-outlet>\n    <c8y-app-switcher\n      class=\"main-header-item\"\n      title=\"{{ 'Application switcher' | translate }}\"\n      *ngIf=\"appState.currentUser.value\"\n    ></c8y-app-switcher>\n\n    <button\n      class=\"main-header-button drawer-toggle\"\n      [attr.aria-label]=\"appState.currentUser | async | shortenUserName\"\n      tooltip=\"{{ appState.currentUser | async | shortenUserName }}\"\n      placement=\"left\"\n      [attr.aria-expanded]=\"headerService.rightDrawerOpen$ | async\"\n      [attr.aria-controls]=\"'right-drawer'\"\n      type=\"button\"\n      [delay]=\"500\"\n      (click)=\"toggleDrawer()\"\n      [attr.data-cy]=\"'right-drawer-toggle-button'\"\n    >\n      <span\n        class=\"user-dot\"\n        title=\"{{ appState.currentUser | async | shortenUserName }}\"\n        *ngIf=\"appState.currentUser | async\"\n        data-cy=\"header-bar--user-dot\"\n      >\n        {{ appState.currentUser | async | userNameInitials }}\n      </span>\n      <span class=\"close-dot\">&times;</span>\n    </button>\n  </div>\n  <div class=\"head-toggler\">\n    <button\n      title=\"{{ 'Toggle' | translate }}\"\n      type=\"button\"\n      (click)=\"headerService.toggle()\"\n    >\n      <i [c8yIcon]=\"'angle-right'\"></i>\n    </button>\n  </div>\n  <c8y-drawer-outlet\n    id=\"right-drawer\"\n    [tabindex]=\"(headerService.rightDrawerOpen$ | async) ? '0' : '-1'\"\n    [attr.aria-hidden]=\"!(headerService.rightDrawerOpen$ | async)\"\n    position=\"right\"\n    [open]=\"headerService.rightDrawerOpen$ | async\"\n  ></c8y-drawer-outlet>\n  <div\n    class=\"loading-bar\"\n    [ngClass]=\"loadingClass$ | async\"\n  ></div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: HeaderService }, { type: ActionService }, { type: BreadcrumbService }, { type: SearchService }, { type: AppStateService }, { type: UserMenuService }, { type: DocsService }, { type: i1.ApiService }], propDecorators: { simple: [{
+        }], ctorParameters: () => [{ type: HeaderService }, { type: ActionService }, { type: BreadcrumbService }, { type: SearchService }, { type: AppStateService }, { type: UserMenuService }, { type: DocsService }, { type: i4.ApiService }], propDecorators: { simple: [{
                 type: Input
             }] } });
 
@@ -13648,6 +13648,7 @@ class ValidationPattern {
         httpUrl: gettext$1('Must be a valid HTTP(S) URL.'),
         colonedHexNumber: gettext$1('Must be a valid hexadecimal number. Must contain only the following characters: 0-9, a-f, A-F, :.'),
         noDots: gettext$1('Dots not allowed.'),
+        integer: gettext$1('Invalid type, expected integer.'),
         simpleJsonPath: gettext$1('Must be a valid JSON path'),
         [DatapointLibraryValidationErrors.SHOULD_CONTAIN_NUMBER]: gettext$1('This field must contain a number.'),
         [DatapointLibraryValidationErrors.SHOULD_BE_DEFINED]: gettext$1('Value must be defined.'),
@@ -13698,6 +13699,9 @@ class ValidationPattern {
         },
         colonedHexNumber: {
             pattern: /^[0-9a-fA-F:]+$/
+        },
+        integer: {
+            pattern: /^-?\d+$/
         }
     }; }
     static get(key) {
@@ -13753,13 +13757,13 @@ class MessagesComponent {
         }
         return this.translateService.instant(message, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MessagesComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MessagesComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: MessagesComponent, isStandalone: true, selector: "c8y-messages", inputs: { show: "show", defaults: "defaults", helpMessage: "helpMessage" }, queries: [{ propertyName: "customMessages", predicate: MessageDirective }], usesOnChanges: true, ngImport: i0, template: "<small class=\"form-control-feedback-message\">\n  <div\n    class=\"d-block\"\n    *ngFor=\"let msg of messages\"\n  >\n    {{ msg | translate }}\n  </div>\n  <div\n    class=\"help-block\"\n    *ngIf=\"!messages.length && helpMessage\"\n  >\n    {{ helpMessage | translate }}\n  </div>\n  <ng-content></ng-content>\n</small>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MessagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-messages', standalone: true, imports: [NgIf, NgFor, C8yTranslatePipe], template: "<small class=\"form-control-feedback-message\">\n  <div\n    class=\"d-block\"\n    *ngFor=\"let msg of messages\"\n  >\n    {{ msg | translate }}\n  </div>\n  <div\n    class=\"help-block\"\n    *ngIf=\"!messages.length && helpMessage\"\n  >\n    {{ helpMessage | translate }}\n  </div>\n  <ng-content></ng-content>\n</small>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { show: [{
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { show: [{
                 type: Input
             }], defaults: [{
                 type: Input
@@ -13938,7 +13942,7 @@ class RequiredInputPlaceholderDirective {
         this.renderer.setAttribute(this.el.nativeElement, 'placeholder', placeholder);
         this.placeholder = placeholder;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RequiredInputPlaceholderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.TranslateService }, { token: i1$7.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RequiredInputPlaceholderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.TranslateService }, { token: i1$6.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RequiredInputPlaceholderDirective, decorators: [{
@@ -13946,7 +13950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     selector: 'input[required], input[formControlName]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.TranslateService }, { type: i1$7.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.TranslateService }, { type: i1$6.NgControl, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -14041,13 +14045,13 @@ class SmsChallengeComponent {
             this.alert.addServerFailure(e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SmsChallengeComponent, deps: [{ token: LoginService }, { token: i1$1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: { credentials: "credentials" }, outputs: { onCancel: "onCancel" }, ngImport: i0, template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyTFACode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group>\n    <label translate>Verification code</label>\n    <input\n      [(ngModel)]=\"model.smsToken\"\n      #sms_token=\"ngModel\"\n      type=\"text\"\n      name=\"sms_token\"\n      autofocus\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} 624327\"\n      required\n    />\n    <p *ngIf=\"!twoFactorForm.form.valid || isLoading\" class=\"help-block\" translate>\n      Insert the code received via SMS.\n    </p>\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Verify' | translate }}\"\n    [disabled]=\"!twoFactorForm.form.valid || isLoading\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Verify' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Send new code' | translate }}\"\n      [ngClass]=\"{ disabled: isLoading }\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"resendTFASms()\"\n    >\n      {{ 'Send new code' | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ 'Log in' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Log in' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SmsChallengeComponent, deps: [{ token: LoginService }, { token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SmsChallengeComponent, selector: "c8y-sms-challenge", inputs: { credentials: "credentials" }, outputs: { onCancel: "onCancel" }, ngImport: i0, template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyTFACode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group>\n    <label translate>Verification code</label>\n    <input\n      [(ngModel)]=\"model.smsToken\"\n      #sms_token=\"ngModel\"\n      type=\"text\"\n      name=\"sms_token\"\n      autofocus\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} 624327\"\n      required\n    />\n    <p *ngIf=\"!twoFactorForm.form.valid || isLoading\" class=\"help-block\" translate>\n      Insert the code received via SMS.\n    </p>\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Verify' | translate }}\"\n    [disabled]=\"!twoFactorForm.form.valid || isLoading\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Verify' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Send new code' | translate }}\"\n      [ngClass]=\"{ disabled: isLoading }\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"resendTFASms()\"\n    >\n      {{ 'Send new code' | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ 'Log in' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Log in' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SmsChallengeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-sms-challenge', template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyTFACode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group>\n    <label translate>Verification code</label>\n    <input\n      [(ngModel)]=\"model.smsToken\"\n      #sms_token=\"ngModel\"\n      type=\"text\"\n      name=\"sms_token\"\n      autofocus\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} 624327\"\n      required\n    />\n    <p *ngIf=\"!twoFactorForm.form.valid || isLoading\" class=\"help-block\" translate>\n      Insert the code received via SMS.\n    </p>\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Verify' | translate }}\"\n    [disabled]=\"!twoFactorForm.form.valid || isLoading\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Verify' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <button\n      type=\"button\"\n      title=\"{{ 'Send new code' | translate }}\"\n      [ngClass]=\"{ disabled: isLoading }\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"resendTFASms()\"\n    >\n      {{ 'Send new code' | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ 'Log in' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Log in' | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: LoginService }, { type: i1$1.UserService }, { type: AlertService }], propDecorators: { credentials: [{
+        }], ctorParameters: () => [{ type: LoginService }, { type: i1.UserService }, { type: AlertService }], propDecorators: { credentials: [{
                 type: Input
             }], onCancel: [{
                 type: Output
@@ -14130,13 +14134,13 @@ class ProvidePhoneNumberComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProvidePhoneNumberComponent, deps: [{ token: LoginService }, { token: AlertService }, { token: i1$1.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ProvidePhoneNumberComponent, selector: "c8y-provide-phone-number", inputs: { credentials: "credentials" }, outputs: { onCancel: "onCancel", onChangeView: "onChangeView" }, ngImport: i0, template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"save()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group [ngClass]=\"requestInProgress || twoFactorForm.invalid ? 'p-b-8' : ''\">\n    <label translate>Provide your phone number</label>\n\n    <input\n      class=\"form-control\"\n      [(ngModel)]=\"phoneNumber\"\n      #contactPhone=\"ngModel\"\n      type=\"text\"\n      name=\"phone\"\n      autocomplete=\"off\"\n      placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n      c8yPhoneValidation\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Save and continue' | translate }}\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    [disabled]=\"requestInProgress || twoFactorForm.invalid\"\n  >\n    {{ 'Save and continue' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <a\n      title=\"{{ 'Login' | translate }}\"\n      class=\"small pointer m-l-auto\"\n      href=\"#\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Login' | translate }}\n    </a>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProvidePhoneNumberComponent, deps: [{ token: LoginService }, { token: AlertService }, { token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ProvidePhoneNumberComponent, selector: "c8y-provide-phone-number", inputs: { credentials: "credentials" }, outputs: { onCancel: "onCancel", onChangeView: "onChangeView" }, ngImport: i0, template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"save()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group [ngClass]=\"requestInProgress || twoFactorForm.invalid ? 'p-b-8' : ''\">\n    <label translate>Provide your phone number</label>\n\n    <input\n      class=\"form-control\"\n      [(ngModel)]=\"phoneNumber\"\n      #contactPhone=\"ngModel\"\n      type=\"text\"\n      name=\"phone\"\n      autocomplete=\"off\"\n      placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n      c8yPhoneValidation\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Save and continue' | translate }}\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    [disabled]=\"requestInProgress || twoFactorForm.invalid\"\n  >\n    {{ 'Save and continue' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <a\n      title=\"{{ 'Login' | translate }}\"\n      class=\"small pointer m-l-auto\"\n      href=\"#\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Login' | translate }}\n    </a>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProvidePhoneNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-provide-phone-number', template: "<form #twoFactorForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"save()\" novalidate>\n  <div class=\"legend form-block center\" translate>Two-factor authentication</div>\n\n  <c8y-form-group [ngClass]=\"requestInProgress || twoFactorForm.invalid ? 'p-b-8' : ''\">\n    <label translate>Provide your phone number</label>\n\n    <input\n      class=\"form-control\"\n      [(ngModel)]=\"phoneNumber\"\n      #contactPhone=\"ngModel\"\n      type=\"text\"\n      name=\"phone\"\n      autocomplete=\"off\"\n      placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n      c8yPhoneValidation\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Save and continue' | translate }}\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    [disabled]=\"requestInProgress || twoFactorForm.invalid\"\n  >\n    {{ 'Save and continue' | translate }}\n  </button>\n\n  <div class=\"d-flex m-t-8\">\n    <a\n      title=\"{{ 'Login' | translate }}\"\n      class=\"small pointer m-l-auto\"\n      href=\"#\"\n      (click)=\"onCancel.emit()\"\n    >\n      {{ 'Login' | translate }}\n    </a>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: LoginService }, { type: AlertService }, { type: i1$1.UserService }], propDecorators: { credentials: [{
+        }], ctorParameters: () => [{ type: LoginService }, { type: AlertService }, { type: i1.UserService }], propDecorators: { credentials: [{
                 type: Input
             }], onCancel: [{
                 type: Output
@@ -14172,13 +14176,13 @@ class RecoverPasswordComponent {
             this.isLoading = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RecoverPasswordComponent, deps: [{ token: i1$1.UserService }, { token: LoginService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: RecoverPasswordComponent, selector: "c8y-recover-password", outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<form #resetForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"resetPassword()\" novalidate>\n  <div class=\"legend form-block center\" translate>Forgot password?</div>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Reset password' | translate }}\"\n    [disabled]=\"!resetForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Reset password' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      type=\"submit\"\n      title=\"{{ 'Login' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.Credentials })\"\n    >\n      {{ 'Login' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RecoverPasswordComponent, deps: [{ token: i1.UserService }, { token: LoginService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: RecoverPasswordComponent, selector: "c8y-recover-password", outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<form #resetForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"resetPassword()\" novalidate>\n  <div class=\"legend form-block center\" translate>Forgot password?</div>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Reset password' | translate }}\"\n    [disabled]=\"!resetForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Reset password' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      type=\"submit\"\n      title=\"{{ 'Login' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.Credentials })\"\n    >\n      {{ 'Login' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RecoverPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-recover-password', template: "<form #resetForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"resetPassword()\" novalidate>\n  <div class=\"legend form-block center\" translate>Forgot password?</div>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Reset password' | translate }}\"\n    [disabled]=\"!resetForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Reset password' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      type=\"submit\"\n      title=\"{{ 'Login' | translate }}\"\n      class=\"btn btn-link btn-sm\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.Credentials })\"\n    >\n      {{ 'Login' | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.UserService }, { type: LoginService }], propDecorators: { onChangeView: [{
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: LoginService }], propDecorators: { onChangeView: [{
                 type: Output
             }] } });
 
@@ -14313,13 +14317,13 @@ class ModalComponent {
             this._close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalComponent, deps: [{ token: i1$6.BsModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalComponent, deps: [{ token: i1$5.BsModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ModalComponent, selector: "c8y-modal", inputs: { disabled: "disabled", close: "close", dismiss: "dismiss", title: "title", body: "body", customFooter: "customFooter", headerClasses: "headerClasses", labels: "labels" }, outputs: { onDismiss: "onDismiss", onClose: "onClose" }, host: { listeners: { "document:keydown.enter": "onEnterKeyDown($event)" } }, ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header {{ headerClasses }}\" [ngClass]=\"{ separator: title }\">\n    <ng-content select=\"[c8y-modal-title]\"></ng-content>\n    <div [hidden]=\"!title\" id=\"modal-title\" class=\"modal-title\">\n      {{ title | translate }}\n    </div>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div [ngClass]=\"{ 'modal-body': !customFooter, 'd-contents': customFooter }\">\n      <p *ngIf=\"title\" class=\"text-center text-break-word\">\n        {{ body }}\n      </p>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[c8y-modal-footer-custom]\"></ng-content>\n  <div class=\"modal-footer\" *ngIf=\"!customFooter\">\n    <ng-content select=\"[c8y-modal-footer]\"></ng-content>\n    <button\n      type=\"button\"\n      title=\"{{ labels.cancel | translate }}\"\n      *ngIf=\"labels.cancel\"\n      class=\"btn btn-default\"\n      (click)=\"_dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ labels.ok | translate }}\"\n      *ngIf=\"labels.ok\"\n      class=\"btn btn-primary\"\n      (click)=\"_close()\"\n      [disabled]=\"disabled\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-modal', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header {{ headerClasses }}\" [ngClass]=\"{ separator: title }\">\n    <ng-content select=\"[c8y-modal-title]\"></ng-content>\n    <div [hidden]=\"!title\" id=\"modal-title\" class=\"modal-title\">\n      {{ title | translate }}\n    </div>\n  </div>\n  <div class=\"modal-inner-scroll\" id=\"modal-body\">\n    <div [ngClass]=\"{ 'modal-body': !customFooter, 'd-contents': customFooter }\">\n      <p *ngIf=\"title\" class=\"text-center text-break-word\">\n        {{ body }}\n      </p>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[c8y-modal-footer-custom]\"></ng-content>\n  <div class=\"modal-footer\" *ngIf=\"!customFooter\">\n    <ng-content select=\"[c8y-modal-footer]\"></ng-content>\n    <button\n      type=\"button\"\n      title=\"{{ labels.cancel | translate }}\"\n      *ngIf=\"labels.cancel\"\n      class=\"btn btn-default\"\n      (click)=\"_dismiss()\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      type=\"button\"\n      title=\"{{ labels.ok | translate }}\"\n      *ngIf=\"labels.ok\"\n      class=\"btn btn-primary\"\n      (click)=\"_close()\"\n      [disabled]=\"disabled\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$6.BsModalRef, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.BsModalRef, decorators: [{
                     type: Optional
                 }] }], propDecorators: { onDismiss: [{
                 type: Output
@@ -14398,13 +14402,13 @@ class PasswordConfirmModalComponent {
         this.passwordConfirmedEmitter.emit(true);
         this.modal._dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordConfirmModalComponent, deps: [{ token: i1$1.UserService }, { token: AppStateService }, { token: i1$1.FetchClient }, { token: AlertService }, { token: LoginService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PasswordConfirmModalComponent, selector: "c8y-password-confirm-modal", outputs: { passwordConfirmedEmitter: "passwordConfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\r\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\r\n    <div class=\"d-block p-24 p-b-0\">\r\n      <c8y-form-group [hasWarning]=\"true\">\r\n        <label translate for=\"currentPassword\">Enter your password</label>\r\n        <input\r\n          id=\"currentPassword\"\r\n          [(ngModel)]=\"password\"\r\n          type=\"password\"\r\n          name=\"password\"\r\n          class=\"form-control\"\r\n          placeholder=\"{{ 'Enter your password' | translate }}\"\r\n          required\r\n        />\r\n        <c8y-messages>\r\n          <c8y-message translate>\r\n            Enter the password of the user that you are currently logged in with.\r\n          </c8y-message>\r\n        </c8y-messages>\r\n      </c8y-form-group>\r\n    </div>\r\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\r\n      <button\r\n        title=\"{{ 'Cancel' | translate }}\"\r\n        class=\"btn btn-default\"\r\n        type=\"button\"\r\n        (click)=\"cancel()\"\r\n      >\r\n        {{ 'Cancel' | translate }}\r\n      </button>\r\n      <button\r\n        title=\"{{ 'Confirm' | translate }}\"\r\n        class=\"btn btn-primary\"\r\n        type=\"submit\"\r\n        [disabled]=\"!confirmForm.form.valid || loading\"\r\n      >\r\n        {{ 'Confirm' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</c8y-modal>\r\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.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: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordConfirmModalComponent, deps: [{ token: i1.UserService }, { token: AppStateService }, { token: i1.FetchClient }, { token: AlertService }, { token: LoginService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PasswordConfirmModalComponent, selector: "c8y-password-confirm-modal", outputs: { passwordConfirmedEmitter: "passwordConfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\r\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\r\n    <div class=\"d-block p-24 p-b-0\">\r\n      <c8y-form-group [hasWarning]=\"true\">\r\n        <label translate for=\"currentPassword\">Enter your password</label>\r\n        <input\r\n          id=\"currentPassword\"\r\n          [(ngModel)]=\"password\"\r\n          type=\"password\"\r\n          name=\"password\"\r\n          class=\"form-control\"\r\n          placeholder=\"{{ 'Enter your password' | translate }}\"\r\n          required\r\n        />\r\n        <c8y-messages>\r\n          <c8y-message translate>\r\n            Enter the password of the user that you are currently logged in with.\r\n          </c8y-message>\r\n        </c8y-messages>\r\n      </c8y-form-group>\r\n    </div>\r\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\r\n      <button\r\n        title=\"{{ 'Cancel' | translate }}\"\r\n        class=\"btn btn-default\"\r\n        type=\"button\"\r\n        (click)=\"cancel()\"\r\n      >\r\n        {{ 'Cancel' | translate }}\r\n      </button>\r\n      <button\r\n        title=\"{{ 'Confirm' | translate }}\"\r\n        class=\"btn btn-primary\"\r\n        type=\"submit\"\r\n        [disabled]=\"!confirmForm.form.valid || loading\"\r\n      >\r\n        {{ 'Confirm' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</c8y-modal>\r\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.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: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordConfirmModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-password-confirm-modal', template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\r\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\r\n    <div class=\"d-block p-24 p-b-0\">\r\n      <c8y-form-group [hasWarning]=\"true\">\r\n        <label translate for=\"currentPassword\">Enter your password</label>\r\n        <input\r\n          id=\"currentPassword\"\r\n          [(ngModel)]=\"password\"\r\n          type=\"password\"\r\n          name=\"password\"\r\n          class=\"form-control\"\r\n          placeholder=\"{{ 'Enter your password' | translate }}\"\r\n          required\r\n        />\r\n        <c8y-messages>\r\n          <c8y-message translate>\r\n            Enter the password of the user that you are currently logged in with.\r\n          </c8y-message>\r\n        </c8y-messages>\r\n      </c8y-form-group>\r\n    </div>\r\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\r\n      <button\r\n        title=\"{{ 'Cancel' | translate }}\"\r\n        class=\"btn btn-default\"\r\n        type=\"button\"\r\n        (click)=\"cancel()\"\r\n      >\r\n        {{ 'Cancel' | translate }}\r\n      </button>\r\n      <button\r\n        title=\"{{ 'Confirm' | translate }}\"\r\n        class=\"btn btn-primary\"\r\n        type=\"submit\"\r\n        [disabled]=\"!confirmForm.form.valid || loading\"\r\n      >\r\n        {{ 'Confirm' | translate }}\r\n      </button>\r\n    </div>\r\n  </form>\r\n</c8y-modal>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$1.UserService }, { type: AppStateService }, { type: i1$1.FetchClient }, { type: AlertService }, { type: LoginService }], propDecorators: { passwordConfirmedEmitter: [{
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AppStateService }, { type: i1.FetchClient }, { type: AlertService }, { type: LoginService }], propDecorators: { passwordConfirmedEmitter: [{
                 type: Output
             }], modal: [{
                 type: ViewChild,
@@ -14424,13 +14428,13 @@ class CurrentPasswordModalComponent {
         this.currentPasswordEmitter.emit(null);
         this.modal.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CurrentPasswordModalComponent, deps: [{ token: i1$6.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CurrentPasswordModalComponent, selector: "c8y-current-password-modal", outputs: { currentPasswordEmitter: "currentPasswordEmitter" }, ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\n    <div class=\"d-block p-24\">\n      <c8y-form-group [hasWarning]=\"true\">\n        <label translate for=\"currentPassword\">Enter your password</label>\n        <input\n          id=\"currentPassword\"\n          [(ngModel)]=\"password\"\n          type=\"password\"\n          name=\"password\"\n          class=\"form-control\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message translate>\n            The password of the user that you are currently logged in with.\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n      <button\n        title=\"{{ 'Cancel' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        (click)=\"cancel()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        title=\"{{ 'Confirm' | translate }}\"\n        class=\"btn btn-primary\"\n        [attr.data-cy]=\"'confirm-current-password-confirm-button'\"\n        type=\"submit\"\n        [disabled]=\"!confirmForm.form.valid\"\n      >\n        {{ 'Confirm' | translate }}\n      </button>\n    </div>\n  </form>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.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: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CurrentPasswordModalComponent, deps: [{ token: i1$5.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CurrentPasswordModalComponent, selector: "c8y-current-password-modal", outputs: { currentPasswordEmitter: "currentPasswordEmitter" }, ngImport: i0, template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\n    <div class=\"d-block p-24\">\n      <c8y-form-group [hasWarning]=\"true\">\n        <label translate for=\"currentPassword\">Enter your password</label>\n        <input\n          id=\"currentPassword\"\n          [(ngModel)]=\"password\"\n          type=\"password\"\n          name=\"password\"\n          class=\"form-control\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message translate>\n            The password of the user that you are currently logged in with.\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n      <button\n        title=\"{{ 'Cancel' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        (click)=\"cancel()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        title=\"{{ 'Confirm' | translate }}\"\n        class=\"btn btn-primary\"\n        [attr.data-cy]=\"'confirm-current-password-confirm-button'\"\n        type=\"submit\"\n        [disabled]=\"!confirmForm.form.valid\"\n      >\n        {{ 'Confirm' | translate }}\n      </button>\n    </div>\n  </form>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.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: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CurrentPasswordModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-current-password-modal', template: "<c8y-modal [customFooter]=\"true\" [title]=\"'Confirm your current password' | translate\" #modal>\n  <form #confirmForm=\"ngForm\" (ngSubmit)=\"confirmForm.form.valid && passwordConfirm()\">\n    <div class=\"d-block p-24\">\n      <c8y-form-group [hasWarning]=\"true\">\n        <label translate for=\"currentPassword\">Enter your password</label>\n        <input\n          id=\"currentPassword\"\n          [(ngModel)]=\"password\"\n          type=\"password\"\n          name=\"password\"\n          class=\"form-control\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message translate>\n            The password of the user that you are currently logged in with.\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n      <button\n        title=\"{{ 'Cancel' | translate }}\"\n        class=\"btn btn-default\"\n        type=\"button\"\n        (click)=\"cancel()\"\n      >\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        title=\"{{ 'Confirm' | translate }}\"\n        class=\"btn btn-primary\"\n        [attr.data-cy]=\"'confirm-current-password-confirm-button'\"\n        type=\"submit\"\n        [disabled]=\"!confirmForm.form.valid\"\n      >\n        {{ 'Confirm' | translate }}\n      </button>\n    </div>\n  </form>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1$6.BsModalRef }], propDecorators: { currentPasswordEmitter: [{
+        }], ctorParameters: () => [{ type: i1$5.BsModalRef }], propDecorators: { currentPasswordEmitter: [{
                 type: Output
             }] } });
 
@@ -14511,12 +14515,12 @@ class PasswordService {
     getDefaultPasswordMinLength() {
         return this.DEFAULT_PASSWORD_MIN_LENGTH;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordService, deps: [{ token: i1$6.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordService, deps: [{ token: i1$5.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$6.BsModalService }] });
+        }], ctorParameters: () => [{ type: i1$5.BsModalService }] });
 
 class PasswordCheckListComponent {
     set password(password) {
@@ -14692,13 +14696,13 @@ class TotpSetupComponent {
             this.alert.addServerFailure(ex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpSetupComponent, deps: [{ token: i1$1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpSetupComponent, deps: [{ token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TotpSetupComponent, selector: "c8y-totp-setup", ngImport: i0, template: "<div class=\"text-center\">\n  <p\n    class=\"m-24 m-t-16 m-b-0\"\n    translate\n  >\n    Scan this QR code with your smartphone using the authenticator application.\n  </p>\n\n  <div class=\"d-flex j-c-center\">\n    <qrcode\n      [width]=\"180\"\n      *ngIf=\"totpSecret\"\n      [qrdata]=\"qrData\"\n      [errorCorrectionLevel]=\"'M'\"\n      [elementType]=\"'svg'\"\n    ></qrcode>\n  </div>\n  <p class=\"text-center text-muted\">\n    {{ secret }}\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpSetupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-totp-setup', template: "<div class=\"text-center\">\n  <p\n    class=\"m-24 m-t-16 m-b-0\"\n    translate\n  >\n    Scan this QR code with your smartphone using the authenticator application.\n  </p>\n\n  <div class=\"d-flex j-c-center\">\n    <qrcode\n      [width]=\"180\"\n      *ngIf=\"totpSecret\"\n      [qrdata]=\"qrData\"\n      [errorCorrectionLevel]=\"'M'\"\n      [elementType]=\"'svg'\"\n    ></qrcode>\n  </div>\n  <p class=\"text-center text-muted\">\n    {{ secret }}\n  </p>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.UserService }, { type: AlertService }] });
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AlertService }] });
 
 class TotpChallengeComponent {
     constructor(loginService, users, alert) {
@@ -14742,13 +14746,13 @@ class TotpChallengeComponent {
     cancel() {
         this.totpUnconfirmedEmitter.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpChallengeComponent, deps: [{ token: LoginService }, { token: i1$1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: { verify: "verify", loading: "loading", hasError: "hasError", isModal: "isModal" }, outputs: { onSuccess: "onSuccess", totpUnconfirmedEmitter: "totpUnconfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-b-0\" [ngClass]=\"isModal ? 'p-24' : 'p-t-24'\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"{ 'p-b-24': hasError }\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div [ngClass]=\"isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'\">\n    <button\n      class=\"btn btn-default\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verify' | translate }}\"\n      *ngIf=\"!loading\"\n      [disabled]=\"!totpForm.form.valid\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      class=\"btn btn-primary btn-pending\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      *ngIf=\"loading\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpChallengeComponent, deps: [{ token: LoginService }, { token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: { verify: "verify", loading: "loading", hasError: "hasError", isModal: "isModal" }, outputs: { onSuccess: "onSuccess", totpUnconfirmedEmitter: "totpUnconfirmedEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-b-0\" [ngClass]=\"isModal ? 'p-24' : 'p-t-24'\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"{ 'p-b-24': hasError }\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div [ngClass]=\"isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'\">\n    <button\n      class=\"btn btn-default\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verify' | translate }}\"\n      *ngIf=\"!loading\"\n      [disabled]=\"!totpForm.form.valid\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      class=\"btn btn-primary btn-pending\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      *ngIf=\"loading\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpChallengeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-totp-challenge', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<form #totpForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"verifyCode()\" novalidate>\n  <div class=\"d-block p-b-0\" [ngClass]=\"isModal ? 'p-24' : 'p-t-24'\">\n    <c8y-form-group\n      [hasError]=\"hasError\"\n      [novalidation]=\"true\"\n      [ngClass]=\"{ 'p-b-24': hasError }\"\n    >\n      <label translate for=\"totpToken\">Verification code</label>\n\n      <input\n        id=\"totpToken\"\n        [(ngModel)]=\"model.token\"\n        name=\"totpToken\"\n        type=\"text\"\n        autofocus\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        autocomplete=\"off\"\n        class=\"form-control\"\n        placeholder=\"{{ 'e.g.' | translate }} 624327\"\n        required\n      />\n\n      <p id=\"helpinput\" *ngIf=\"!hasError\" class=\"help-block\" translate>\n        In case of key loss, please contact your platform administrator.\n      </p>\n    </c8y-form-group>\n  </div>\n  <div [ngClass]=\"isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'\">\n    <button\n      class=\"btn btn-default\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verify' | translate }}\"\n      *ngIf=\"!loading\"\n      [disabled]=\"!totpForm.form.valid\"\n    >\n      {{ 'Verify' | translate }}\n    </button>\n\n    <button\n      class=\"btn btn-primary btn-pending\"\n      [ngClass]=\"{ 'btn-lg': !isModal }\"\n      type=\"submit\"\n      title=\"{{ 'Verifying\u2026' | translate }}\"\n      *ngIf=\"loading\"\n    >\n      {{ 'Verifying\u2026' | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: LoginService }, { type: i1$1.UserService }, { type: AlertService }], propDecorators: { verify: [{
+        }], ctorParameters: () => [{ type: LoginService }, { type: i1.UserService }, { type: AlertService }], propDecorators: { verify: [{
                 type: Input
             }], onSuccess: [{
                 type: Output
@@ -15000,7 +15004,7 @@ class NewPasswordComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NewPasswordComponent, deps: [{ token: LoginService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: NewPasswordComponent, selector: "c8y-new-password", outputs: { password: "password" }, viewQueries: [{ propertyName: "_newPasswordModel", first: true, predicate: ["newPassword"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"toggleChangePassword()\"\n  >\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div\n  class=\"row content-flex-50\"\n  *ngIf=\"changePassword\"\n>\n  <div class=\"col-6\">\n    <c8y-form-group>\n      <label\n        for=\"newPassword\"\n        translate\n      >\n        Password\n      </label>\n      <c8y-password-input\n        name=\"newPassword\"\n        required\n        [id]=\"'newPassword'\"\n        #newPassword=\"ngModel\"\n        [(ngModel)]=\"model.newPassword\"\n        (change)=\"newPasswordChanged()\"\n        (input)=\"newPasswordConfirm.control.updateValueAndValidity()\"\n        c8yDefaultValidation=\"password\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label\n        for=\"newConfirmPassword\"\n        translate\n      >\n        Confirm password\n      </label>\n      <c8y-password-input\n        name=\"newPasswordConfirm\"\n        required\n        [id]=\"'newConfirmPassword'\"\n        #newPasswordConfirm=\"ngModel\"\n        [(ngModel)]=\"model.newPasswordConfirm\"\n        passwordConfirm=\"newPassword\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-6\">\n    <c8y-password-check-list\n      [password]=\"model.newPassword\"\n      [strengthEnforced]=\"passwordEnforced\"\n      (onRequirementsFulfilled)=\"updateValidity($event)\"\n    ></c8y-password-check-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PasswordConfirm, selector: "[passwordConfirm]" }, { kind: "component", type: PasswordCheckListComponent, selector: "c8y-password-check-list", inputs: ["strengthEnforced", "password"], outputs: ["onRequirementsFulfilled"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: NewPasswordComponent, selector: "c8y-new-password", outputs: { password: "password" }, viewQueries: [{ propertyName: "_newPasswordModel", first: true, predicate: ["newPassword"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    (click)=\"toggleChangePassword()\"\n  >\n    <ng-container *ngIf=\"!changePassword\">\n      {{ 'Change password' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"changePassword\">\n      {{ 'Cancel password change' | translate }}\n    </ng-container>\n  </button>\n</div>\n\n<div\n  class=\"row content-flex-50\"\n  *ngIf=\"changePassword\"\n>\n  <div class=\"col-6\">\n    <c8y-form-group>\n      <label\n        for=\"newPassword\"\n        translate\n      >\n        Password\n      </label>\n      <c8y-password-input\n        name=\"newPassword\"\n        required\n        [id]=\"'newPassword'\"\n        #newPassword=\"ngModel\"\n        [(ngModel)]=\"model.newPassword\"\n        (change)=\"newPasswordChanged()\"\n        (input)=\"newPasswordConfirm.control.updateValueAndValidity()\"\n        c8yDefaultValidation=\"password\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label\n        for=\"newConfirmPassword\"\n        translate\n      >\n        Confirm password\n      </label>\n      <c8y-password-input\n        name=\"newPasswordConfirm\"\n        required\n        [id]=\"'newConfirmPassword'\"\n        #newPasswordConfirm=\"ngModel\"\n        [(ngModel)]=\"model.newPasswordConfirm\"\n        passwordConfirm=\"newPassword\"\n        [autocomplete]=\"'new-password'\"\n      ></c8y-password-input>\n    </c8y-form-group>\n  </div>\n  <div class=\"col-6\">\n    <c8y-password-check-list\n      [password]=\"model.newPassword\"\n      [strengthEnforced]=\"passwordEnforced\"\n      (onRequirementsFulfilled)=\"updateValidity($event)\"\n    ></c8y-password-check-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PasswordConfirm, selector: "[passwordConfirm]" }, { kind: "component", type: PasswordCheckListComponent, selector: "c8y-password-check-list", inputs: ["strengthEnforced", "password"], outputs: ["onRequirementsFulfilled"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NewPasswordComponent, decorators: [{
             type: Component,
@@ -15098,7 +15102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  */
 class ModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ModalModule, declarations: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent], imports: [i1$6.ModalModule, CommonModule, i2$4.PopoverModule], exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ModalModule, declarations: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent], imports: [i1$5.ModalModule, CommonModule, i2$4.PopoverModule], exports: [ConfirmModalComponent, ModalComponent, PopoverConfirmComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalModule, providers: [ModalService], imports: [ModalModule$1.forRoot(), CommonModule, PopoverModule.forRoot()] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalModule, decorators: [{
@@ -15325,7 +15329,7 @@ class IpRangeInputListComponent {
         this.ipRangeList.splice(index, 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IpRangeInputListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: IpRangeInputListComponent, selector: "c8y-ip-range-input-list", inputs: { data: "data" }, ngImport: i0, template: "<c8y-form-group class=\"m-t-8 m-b-8\">\n  <ul c8yInputGroupListContainer class=\"list-unstyled\">\n    <li class=\"m-b-8\" *ngFor=\"let item of data; let i = index\">\n      <c8y-input-group-list [index]=\"i\" (onAdd)=\"add()\" (onRemove)=\"remove($event)\">\n        <input\n          type=\"text\"\n          name=\"ipAddress\"\n          class=\"form-control m-r-4\"\n          placeholder=\"{{ 'IP range start, e.g.' | translate }} 192.168.0.1\"\n          style=\"flex-grow: 2\"\n          [(ngModel)]=\"item.ip\"\n          [required]=\"true\"\n          #ipAddress\n        />\n        <input\n          type=\"number\"\n          name=\"cidr\"\n          [min]=\"0\"\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} 20\"\n          [(ngModel)]=\"item.cidr\"\n          [required]=\"true\"\n          #cidr\n        />\n      </c8y-input-group-list>\n    </li>\n  </ul>\n</c8y-form-group>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$7.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$7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "component", type: InputGroupListComponent, selector: "c8y-input-group-list", inputs: ["plus", "minus", "index"], outputs: ["onRemove", "onAdd"] }, { kind: "directive", type: InputGroupListContainerDirective, selector: "[c8yInputGroupListContainer]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: IpRangeInputListComponent, selector: "c8y-ip-range-input-list", inputs: { data: "data" }, ngImport: i0, template: "<c8y-form-group class=\"m-t-8 m-b-8\">\n  <ul c8yInputGroupListContainer class=\"list-unstyled\">\n    <li class=\"m-b-8\" *ngFor=\"let item of data; let i = index\">\n      <c8y-input-group-list [index]=\"i\" (onAdd)=\"add()\" (onRemove)=\"remove($event)\">\n        <input\n          type=\"text\"\n          name=\"ipAddress\"\n          class=\"form-control m-r-4\"\n          placeholder=\"{{ 'IP range start, e.g.' | translate }} 192.168.0.1\"\n          style=\"flex-grow: 2\"\n          [(ngModel)]=\"item.ip\"\n          [required]=\"true\"\n          #ipAddress\n        />\n        <input\n          type=\"number\"\n          name=\"cidr\"\n          [min]=\"0\"\n          class=\"form-control\"\n          placeholder=\"{{ 'e.g.' | translate }} 20\"\n          [(ngModel)]=\"item.cidr\"\n          [required]=\"true\"\n          #cidr\n        />\n      </c8y-input-group-list>\n    </li>\n  </ul>\n</c8y-form-group>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.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$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MinValidationDirective, selector: "[min]", inputs: ["min"] }, { kind: "component", type: InputGroupListComponent, selector: "c8y-input-group-list", inputs: ["plus", "minus", "index"], outputs: ["onRemove", "onAdd"] }, { kind: "directive", type: InputGroupListContainerDirective, selector: "[c8yInputGroupListContainer]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IpRangeInputListComponent, decorators: [{
             type: Component,
@@ -15372,7 +15376,7 @@ class JsonValidationPrettifierDirective {
     clearValidationMessage() {
         this.invalidJSON.emit(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: JsonValidationPrettifierDirective, deps: [{ token: i1$7.NgControl }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: JsonValidationPrettifierDirective, deps: [{ token: i1$6.NgControl }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: JsonValidationPrettifierDirective, selector: "textarea[prettyValidJson]", outputs: { invalidJSON: "invalidJSON" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: JsonValidationPrettifierDirective, decorators: [{
@@ -15380,7 +15384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     selector: 'textarea[prettyValidJson]'
                 }]
-        }], ctorParameters: () => [{ type: i1$7.NgControl }], propDecorators: { invalidJSON: [{
+        }], ctorParameters: () => [{ type: i1$6.NgControl }], propDecorators: { invalidJSON: [{
                 type: Output
             }] } });
 
@@ -16132,13 +16136,13 @@ class ChangePasswordComponent {
             this.isLoading = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: LoginService }, { token: i1$1.UserService }, { token: OptionsService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ChangePasswordComponent, selector: "c8y-change-password", inputs: { credentials: "credentials" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<form class=\"loginForm\" (ngSubmit)=\"changePassword()\" #changePasswordForm=\"ngForm\" novalidate>\n  <div class=\"legend form-block center\" translate>Change password</div>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n      [readonly]=\"emailReadOnly\"\n    />\n  </c8y-form-group>\n\n  <div class=\"row content-flex-50\">\n    <div class=\"col-6\">\n      <c8y-form-group>\n        <label translate>New password</label>\n        <input\n          [(ngModel)]=\"model.newPassword\"\n          #newPassword=\"ngModel\"\n          type=\"password\"\n          name=\"newPassword\"\n          class=\"form-control\"\n          placeholder=\"{{ 'New password' | translate }}\"\n          [pattern]=\"passwordPattern\"\n          autocomplete=\"new-password\"\n          [passwordStrengthEnforced]=\"passwordStrengthEnforced\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"pattern\"\n            [text]=\"loginService.ERROR_MESSAGES.pattern_newPassword\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label translate>Confirm password</label>\n        <input\n          [(ngModel)]=\"model.newPasswordConfirm\"\n          #newPasswordConfirm=\"ngModel\"\n          type=\"password\"\n          name=\"newPasswordConfirm\"\n          class=\"form-control\"\n          placeholder=\"{{ 'Confirm password' | translate }}\"\n          passwordConfirm=\"newPassword\"\n          autocomplete=\"new-password\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"passwordConfirm\"\n            [text]=\"loginService.ERROR_MESSAGES.passwordConfirm\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-6\">\n      <c8y-password-check-list\n        [password]=\"model.newPassword\"\n        [strengthEnforced]=\"passwordStrengthEnforced\"\n      ></c8y-password-check-list>\n    </div>\n  </div>\n\n  <button\n    title=\"{{ 'Set password' | translate }}\"\n    [disabled]=\"!changePasswordForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Set password' | translate }}\n  </button>\n</form>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$7.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordCheckListComponent, selector: "c8y-password-check-list", inputs: ["strengthEnforced", "password"], outputs: ["onRequirementsFulfilled"] }, { kind: "directive", type: PasswordConfirm, selector: "[passwordConfirm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: PasswordStrengthValidatorDirective, selector: "[passwordStrengthEnforced]", inputs: ["passwordStrengthEnforced"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: LoginService }, { token: i1.UserService }, { token: OptionsService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ChangePasswordComponent, selector: "c8y-change-password", inputs: { credentials: "credentials" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<form class=\"loginForm\" (ngSubmit)=\"changePassword()\" #changePasswordForm=\"ngForm\" novalidate>\n  <div class=\"legend form-block center\" translate>Change password</div>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n      [readonly]=\"emailReadOnly\"\n    />\n  </c8y-form-group>\n\n  <div class=\"row content-flex-50\">\n    <div class=\"col-6\">\n      <c8y-form-group>\n        <label translate>New password</label>\n        <input\n          [(ngModel)]=\"model.newPassword\"\n          #newPassword=\"ngModel\"\n          type=\"password\"\n          name=\"newPassword\"\n          class=\"form-control\"\n          placeholder=\"{{ 'New password' | translate }}\"\n          [pattern]=\"passwordPattern\"\n          autocomplete=\"new-password\"\n          [passwordStrengthEnforced]=\"passwordStrengthEnforced\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"pattern\"\n            [text]=\"loginService.ERROR_MESSAGES.pattern_newPassword\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label translate>Confirm password</label>\n        <input\n          [(ngModel)]=\"model.newPasswordConfirm\"\n          #newPasswordConfirm=\"ngModel\"\n          type=\"password\"\n          name=\"newPasswordConfirm\"\n          class=\"form-control\"\n          placeholder=\"{{ 'Confirm password' | translate }}\"\n          passwordConfirm=\"newPassword\"\n          autocomplete=\"new-password\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"passwordConfirm\"\n            [text]=\"loginService.ERROR_MESSAGES.passwordConfirm\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-6\">\n      <c8y-password-check-list\n        [password]=\"model.newPassword\"\n        [strengthEnforced]=\"passwordStrengthEnforced\"\n      ></c8y-password-check-list>\n    </div>\n  </div>\n\n  <button\n    title=\"{{ 'Set password' | translate }}\"\n    [disabled]=\"!changePasswordForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Set password' | translate }}\n  </button>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$6.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordCheckListComponent, selector: "c8y-password-check-list", inputs: ["strengthEnforced", "password"], outputs: ["onRequirementsFulfilled"] }, { kind: "directive", type: PasswordConfirm, selector: "[passwordConfirm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: PasswordStrengthValidatorDirective, selector: "[passwordStrengthEnforced]", inputs: ["passwordStrengthEnforced"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-change-password', template: "<form class=\"loginForm\" (ngSubmit)=\"changePassword()\" #changePasswordForm=\"ngForm\" novalidate>\n  <div class=\"legend form-block center\" translate>Change password</div>\n\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\" *ngIf=\"loginService.showTenant()\">\n    <label translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenantId\"\n      #tenantId=\"ngModel\"\n      type=\"text\"\n      name=\"tenantId\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Tenant ID' | translate }}\"\n      required\n    />\n  </c8y-form-group>\n\n  <c8y-form-group>\n    <label translate>Email address</label>\n    <input\n      [(ngModel)]=\"model.email\"\n      #email=\"ngModel\"\n      type=\"text\"\n      name=\"email\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'Email address' | translate }}\"\n      email\n      required\n      [readonly]=\"emailReadOnly\"\n    />\n  </c8y-form-group>\n\n  <div class=\"row content-flex-50\">\n    <div class=\"col-6\">\n      <c8y-form-group>\n        <label translate>New password</label>\n        <input\n          [(ngModel)]=\"model.newPassword\"\n          #newPassword=\"ngModel\"\n          type=\"password\"\n          name=\"newPassword\"\n          class=\"form-control\"\n          placeholder=\"{{ 'New password' | translate }}\"\n          [pattern]=\"passwordPattern\"\n          autocomplete=\"new-password\"\n          [passwordStrengthEnforced]=\"passwordStrengthEnforced\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"pattern\"\n            [text]=\"loginService.ERROR_MESSAGES.pattern_newPassword\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n\n      <c8y-form-group>\n        <label translate>Confirm password</label>\n        <input\n          [(ngModel)]=\"model.newPasswordConfirm\"\n          #newPasswordConfirm=\"ngModel\"\n          type=\"password\"\n          name=\"newPasswordConfirm\"\n          class=\"form-control\"\n          placeholder=\"{{ 'Confirm password' | translate }}\"\n          passwordConfirm=\"newPassword\"\n          autocomplete=\"new-password\"\n          required\n        />\n        <c8y-messages>\n          <c8y-message\n            name=\"passwordConfirm\"\n            [text]=\"loginService.ERROR_MESSAGES.passwordConfirm\"\n          ></c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </div>\n    <div class=\"col-6\">\n      <c8y-password-check-list\n        [password]=\"model.newPassword\"\n        [strengthEnforced]=\"passwordStrengthEnforced\"\n      ></c8y-password-check-list>\n    </div>\n  </div>\n\n  <button\n    title=\"{{ 'Set password' | translate }}\"\n    [disabled]=\"!changePasswordForm.form.valid || isLoading\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n  >\n    {{ 'Set password' | translate }}\n  </button>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: LoginService }, { type: i1$1.UserService }, { type: OptionsService }, { type: AlertService }], propDecorators: { credentials: [{
+        }], ctorParameters: () => [{ type: LoginService }, { type: i1.UserService }, { type: OptionsService }, { type: AlertService }], propDecorators: { credentials: [{
                 type: Input
             }], onChangeView: [{
                 type: Output
@@ -16239,7 +16243,7 @@ class CredentialsComponent {
         this.alert.warning(gettext$1('Two-factor authentication has been turned on for this account. Provide your phone number above to save it in your user profile and start receiving verification codes via SMS.'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CredentialsComponent, deps: [{ token: LoginService }, { token: AlertService }, { token: CredentialsFromQueryParamsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CredentialsComponent, selector: "c8y-credentials", inputs: { loginViewParams: "loginViewParams" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<div\n  id=\"oauth\"\n  *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\"\n>\n  <button\n    class=\"btn btn-default btn-block btn-lg form-group m-t-8\"\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n  >\n    <i\n      class=\"pull-left\"\n      [c8yIcon]=\"'sign-in'\"\n    ></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form\n  class=\"loginForm\"\n  (ngSubmit)=\"login()\"\n  #loginForm=\"ngForm\"\n  *ngIf=\"showLoginForm\"\n  novalidate\n>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n\n  <ng-template #orLegend>\n    <div\n      class=\"legend form-block center\"\n      translate\n    >\n      or\n    </div>\n  </ng-template>\n\n  <c8y-form-group\n    class=\"tenantField\"\n    id=\"tenantField\"\n    *ngIf=\"showTenant\"\n  >\n    <label\n      for=\"tenant\"\n      translate\n    >\n      Tenant ID\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"tenant\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      name=\"tenant\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"user\"\n      translate\n    >\n      Username\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"user\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      name=\"user\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"password\"\n      translate\n    >\n      Password\n    </label>\n    <c8y-password-input\n      name=\"password\"\n      required\n      [id]=\"'password'\"\n      [(ngModel)]=\"model.password\"\n      [autocomplete]=\"'off'\"\n    ></c8y-password-input>\n  </c8y-form-group>\n  <div\n    class=\"form-group\"\n    *ngIf=\"showBasicAuth\"\n  >\n    <label\n      class=\"c8y-checkbox\"\n      title=\"{{ 'Remember me' | translate }}\"\n    >\n      <input\n        name=\"remember\"\n        type=\"checkbox\"\n        [(ngModel)]=\"loginService.rememberMe\"\n      />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    title=\"{{ 'Log in' | translate }}\"\n    type=\"submit\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      class=\"btn btn-link btn-sm\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      type=\"button\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CredentialsComponent, selector: "c8y-credentials", inputs: { loginViewParams: "loginViewParams" }, outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<div\n  id=\"oauth\"\n  *ngIf=\"oauthOptions.initRequest && oauthOptions.visibleOnLoginPage\"\n>\n  <button\n    class=\"btn btn-default btn-block btn-lg form-group m-t-8\"\n    title=\"{{ oauthOptions.buttonName | translate }}\"\n    type=\"button\"\n    (click)=\"redirectToOauth()\"\n  >\n    <i\n      class=\"pull-left\"\n      [c8yIcon]=\"'sign-in'\"\n    ></i>\n    {{ oauthOptions.buttonName | translate }}\n  </button>\n</div>\n\n<form\n  class=\"loginForm\"\n  (ngSubmit)=\"login()\"\n  #loginForm=\"ngForm\"\n  *ngIf=\"showLoginForm\"\n  novalidate\n>\n  <span\n    class=\"legend form-block center\"\n    *ngIf=\"!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend\"\n    translate\n  >\n    Login\n  </span>\n\n  <ng-template #orLegend>\n    <div\n      class=\"legend form-block center\"\n      translate\n    >\n      or\n    </div>\n  </ng-template>\n\n  <c8y-form-group\n    class=\"tenantField\"\n    id=\"tenantField\"\n    *ngIf=\"showTenant\"\n  >\n    <label\n      for=\"tenant\"\n      translate\n    >\n      Tenant ID\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"tenant\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      name=\"tenant\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n      [readonly]=\"loginViewParams.disableTenant\"\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"user\"\n      translate\n    >\n      Username\n    </label>\n    <input\n      class=\"form-control\"\n      id=\"user\"\n      placeholder=\"{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}\"\n      name=\"user\"\n      type=\"text\"\n      required\n      [(ngModel)]=\"model.user\"\n      #user=\"ngModel\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      placeholder-no-required-hint\n    />\n  </c8y-form-group>\n  <c8y-form-group>\n    <label\n      for=\"password\"\n      translate\n    >\n      Password\n    </label>\n    <c8y-password-input\n      name=\"password\"\n      required\n      [id]=\"'password'\"\n      [(ngModel)]=\"model.password\"\n      [autocomplete]=\"'off'\"\n    ></c8y-password-input>\n  </c8y-form-group>\n  <div\n    class=\"form-group\"\n    *ngIf=\"showBasicAuth\"\n  >\n    <label\n      class=\"c8y-checkbox\"\n      title=\"{{ 'Remember me' | translate }}\"\n    >\n      <input\n        name=\"remember\"\n        type=\"checkbox\"\n        [(ngModel)]=\"loginService.rememberMe\"\n      />\n      <span></span>\n      <span>{{ 'Remember me' | translate }}</span>\n    </label>\n  </div>\n  <button\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    title=\"{{ 'Log in' | translate }}\"\n    type=\"submit\"\n    [disabled]=\"!loginForm.form.valid || isLoading\"\n  >\n    {{ 'Log in' | translate }}\n  </button>\n  <div class=\"text-center m-t-8\">\n    <button\n      class=\"btn btn-link btn-sm\"\n      title=\"{{ 'Forgot password?' | translate }}\"\n      type=\"button\"\n      (click)=\"onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })\"\n    >\n      {{ 'Forgot password?' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PasswordInputComponent, selector: "c8y-password-input", inputs: ["id", "autocomplete"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CredentialsComponent, decorators: [{
             type: Component,
@@ -16297,13 +16301,13 @@ class TotpAuthComponent {
             this.loading = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpAuthComponent, deps: [{ token: LoginService }, { token: i1$1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpAuthComponent, deps: [{ token: LoginService }, { token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TotpAuthComponent, selector: "c8y-totp-auth", inputs: { credentials: "credentials", view: "view" }, outputs: { onCancel: "onCancel" }, ngImport: i0, template: "<div\n  class=\"legend form-block center\"\n  translate\n>\n  Two-factor authentication\n</div>\n\n<c8y-totp-setup *ngIf=\"isSetup\">\n</c8y-totp-setup>\n<c8y-totp-challenge\n  [isModal]=\"false\"\n  [loading]=\"loading\"\n  [hasError]=\"hasError\"\n  [verify]=\"view === LOGIN_VIEWS.TotpSetup\"\n  (onSuccess)=\"onTotpSuccess($event)\"\n  (totpUnconfirmedEmitter)=\"onCancel.emit()\"\n></c8y-totp-challenge>\n\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: ["verify", "loading", "hasError", "isModal"], outputs: ["onSuccess", "totpUnconfirmedEmitter"] }, { kind: "component", type: TotpSetupComponent, selector: "c8y-totp-setup" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TotpAuthComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-totp-auth', template: "<div\n  class=\"legend form-block center\"\n  translate\n>\n  Two-factor authentication\n</div>\n\n<c8y-totp-setup *ngIf=\"isSetup\">\n</c8y-totp-setup>\n<c8y-totp-challenge\n  [isModal]=\"false\"\n  [loading]=\"loading\"\n  [hasError]=\"hasError\"\n  [verify]=\"view === LOGIN_VIEWS.TotpSetup\"\n  (onSuccess)=\"onTotpSuccess($event)\"\n  (totpUnconfirmedEmitter)=\"onCancel.emit()\"\n></c8y-totp-challenge>\n\n" }]
-        }], ctorParameters: () => [{ type: LoginService }, { type: i1$1.UserService }, { type: AlertService }], propDecorators: { credentials: [{
+        }], ctorParameters: () => [{ type: LoginService }, { type: i1.UserService }, { type: AlertService }], propDecorators: { credentials: [{
                 type: Input
             }], view: [{
                 type: Input
@@ -16370,13 +16374,13 @@ class TenantIdSetupComponent {
             this.onChangeView.emit({ view: LoginViews.Credentials });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TenantIdSetupComponent, deps: [{ token: i1$1.FetchClient }, { token: AppStateService }, { token: LoginService }, { token: AlertService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TenantIdSetupComponent, selector: "c8y-tenant-id-setup", outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<form #tenantIdSetupForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"setupLoginMode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Tenant setup</div>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\">\n    <label for=\"tenant\" translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      type=\"text\"\n      name=\"tenant\"\n      id=\"tenant\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Apply' | translate }}\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    [disabled]=\"!tenantIdSetupForm.form.valid\"\n  >\n    {{ 'Apply' | translate }}\n  </button>\n</form>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TenantIdSetupComponent, deps: [{ token: i1.FetchClient }, { token: AppStateService }, { token: LoginService }, { token: AlertService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TenantIdSetupComponent, selector: "c8y-tenant-id-setup", outputs: { onChangeView: "onChangeView" }, ngImport: i0, template: "<form #tenantIdSetupForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"setupLoginMode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Tenant setup</div>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\">\n    <label for=\"tenant\" translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      type=\"text\"\n      name=\"tenant\"\n      id=\"tenant\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Apply' | translate }}\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    [disabled]=\"!tenantIdSetupForm.form.valid\"\n  >\n    {{ 'Apply' | translate }}\n  </button>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TenantIdSetupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-tenant-id-setup', template: "<form #tenantIdSetupForm=\"ngForm\" class=\"loginForm\" (ngSubmit)=\"setupLoginMode()\" novalidate>\n  <div class=\"legend form-block center\" translate>Tenant setup</div>\n  <c8y-form-group class=\"tenantField\" id=\"tenantField\">\n    <label for=\"tenant\" translate>Tenant ID</label>\n    <input\n      [(ngModel)]=\"model.tenant\"\n      #tenant=\"ngModel\"\n      type=\"text\"\n      name=\"tenant\"\n      id=\"tenant\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      class=\"form-control\"\n      placeholder=\"{{ 'e.g.' | translate }} t12345\"\n      placeholder-no-required-hint\n      required\n    />\n  </c8y-form-group>\n\n  <button\n    title=\"{{ 'Apply' | translate }}\"\n    type=\"submit\"\n    class=\"btn btn-primary btn-lg btn-block form-group\"\n    [disabled]=\"!tenantIdSetupForm.form.valid\"\n  >\n    {{ 'Apply' | translate }}\n  </button>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.FetchClient }, { type: AppStateService }, { type: LoginService }, { type: AlertService }, { type: i1$2.TranslateService }], propDecorators: { onChangeView: [{
+        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: AppStateService }, { type: LoginService }, { type: AlertService }, { type: i1$1.TranslateService }], propDecorators: { onChangeView: [{
                 type: Output
             }] } });
 
@@ -16623,13 +16627,13 @@ class TabsOutletComponent {
         const scrollLeft = el.scrollLeft;
         return { widthScroll, width, scrollLeft };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$5.Router }, { token: i0.Renderer2 }, { token: HeaderService }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen", outletName: "outletName", context: "context", hasHeader: "hasHeader" }, host: { properties: { "class.has-header": "this.hasHeader", "class.navigator-open": "this.isNavigatorOpen", "class.page-tabs": "this.hasTabs", "class.page-tabs-horizontal": "this.isHorizontal", "class.page-tabs-vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            #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      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$4.Router }, { token: i0.Renderer2 }, { token: HeaderService }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen", outletName: "outletName", context: "context", hasHeader: "hasHeader" }, host: { properties: { "class.has-header": "this.hasHeader", "class.navigator-open": "this.isNavigatorOpen", "class.page-tabs": "this.hasTabs", "class.page-tabs-horizontal": "this.isHorizontal", "class.page-tabs-vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            #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      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-tabs-outlet,c8y-ui-tabs', template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            #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      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }], propDecorators: { tabs: [{
+        }], ctorParameters: () => [{ type: i1$4.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }], propDecorators: { tabs: [{
                 type: Input
             }], orientation: [{
                 type: Input
@@ -16909,7 +16913,7 @@ class C8yStepper extends CdkStepper {
             this.selectedIndex = index;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yStepper, deps: [{ token: i1$8.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: C8yStepper, deps: [{ token: i1$7.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: C8yStepper, selector: "c8y-stepper", inputs: { disableDefaultIcons: "disableDefaultIcons", disableProgressButtons: "disableProgressButtons", customClasses: "customClasses", hideStepProgress: "hideStepProgress", useStepLabelsAsTitlesOnly: "useStepLabelsAsTitlesOnly" }, outputs: { onStepChange: "onStepChange" }, providers: [
             { provide: CdkStepper, useExisting: C8yStepper },
             { provide: PRODUCT_EXPERIENCE_EVENT_SOURCE, useExisting: forwardRef(() => C8yStepper) }
@@ -16921,7 +16925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         { provide: CdkStepper, useExisting: C8yStepper },
                         { provide: PRODUCT_EXPERIENCE_EVENT_SOURCE, useExisting: forwardRef(() => C8yStepper) }
                     ], template: "<ul *ngIf=\"!hideStepProgress\" class=\"c8y-stepper\" [ngClass]=\"customClasses\">\n  <li *ngFor=\"let step of steps; let i = index\">\n    <c8y-stepper-progress\n      [iconOverrides]=\"_iconOverrides\"\n      [state]=\"getIndicatorType(i, step.state)\"\n      [index]=\"i\"\n      [selected]=\"selectedIndex === i\"\n      [disabled]=\"disableProgressButtons\"\n      (onStepClicked)=\"setIndex($event)\"\n      title=\"{{ step.label | translate }}\"\n      [ngClass]=\"{'active': selectedIndex === i}\"\n    >\n    </c8y-stepper-progress>\n    <div *ngIf=\"!useStepLabelsAsTitlesOnly\" class=\"c8y-step__label\"  title=\"{{ step.label | translate }}\">\n      {{ step.label | translate }}\n    </div>\n  </li>\n</ul>\n<ng-container [ngTemplateOutlet]=\"selected.content\"></ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$8.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { disableDefaultIcons: [{
+        }], ctorParameters: () => [{ type: i1$7.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { disableDefaultIcons: [{
                 type: Input
             }], disableProgressButtons: [{
                 type: Input
@@ -17556,7 +17560,7 @@ class CookieBannerPreferencesModalComponent {
         return this.cookieBannerService.getCookieDescription(cookieType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CookieBannerPreferencesModalComponent, deps: [{ token: CookieBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CookieBannerPreferencesModalComponent, selector: "c8y-cookie-banner-preferences-modal", viewQueries: [{ propertyName: "modalRef", first: true, predicate: ["modalRef"], descendants: true }], ngImport: i0, template: "<c8y-confirm-modal [title]=\"title\" [status]=\"status\" [labels]=\"labels\" #modalRef>\n\n  <div *ngFor=\"let item of configCookiePreferencesList\" class=\"row p-t-8 p-b-8 separator-top\">\n    <div class=\"col-xs-2\">\n      <div class=\"text-center\">\n        <label class=\"c8y-switch\">\n          <input\n            name=\"{{ item.name }}\"\n            type=\"checkbox\"\n            [(ngModel)]=\"item.value\"\n            [disabled]=\"item.isReadonly\"\n          />\n          <span></span>\n        </label>\n      </div>\n    </div>\n    <div class=\"col-xs-10\">\n      <h4 class=\"text-medium\">\n        {{ item.name | translate | humanize }}\n      </h4>\n      <p>\n        {{ getCookieDescription(item.name) | translate }}\n      </p>\n    </div>\n  </div>\n</c8y-confirm-modal>\n", dependencies: [{ kind: "directive", type: i1$7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: ["title", "body", "confirmOptions", "status", "labels"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CookieBannerPreferencesModalComponent, selector: "c8y-cookie-banner-preferences-modal", viewQueries: [{ propertyName: "modalRef", first: true, predicate: ["modalRef"], descendants: true }], ngImport: i0, template: "<c8y-confirm-modal [title]=\"title\" [status]=\"status\" [labels]=\"labels\" #modalRef>\n\n  <div *ngFor=\"let item of configCookiePreferencesList\" class=\"row p-t-8 p-b-8 separator-top\">\n    <div class=\"col-xs-2\">\n      <div class=\"text-center\">\n        <label class=\"c8y-switch\">\n          <input\n            name=\"{{ item.name }}\"\n            type=\"checkbox\"\n            [(ngModel)]=\"item.value\"\n            [disabled]=\"item.isReadonly\"\n          />\n          <span></span>\n        </label>\n      </div>\n    </div>\n    <div class=\"col-xs-10\">\n      <h4 class=\"text-medium\">\n        {{ item.name | translate | humanize }}\n      </h4>\n      <p>\n        {{ getCookieDescription(item.name) | translate }}\n      </p>\n    </div>\n  </div>\n</c8y-confirm-modal>\n", dependencies: [{ kind: "directive", type: i1$6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ConfirmModalComponent, selector: "c8y-confirm-modal", inputs: ["title", "body", "confirmOptions", "status", "labels"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CookieBannerPreferencesModalComponent, decorators: [{
             type: Component,
@@ -17630,13 +17634,13 @@ class CookieBannerComponent {
         this.showBanner = shouldShow;
         this.cookieBannerService.isCookieBannerShowed$.next(shouldShow);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CookieBannerComponent, deps: [{ token: i1$6.BsModalService }, { token: CookieBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CookieBannerComponent, deps: [{ token: i1$5.BsModalService }, { token: CookieBannerService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CookieBannerComponent, selector: "c8y-cookie-banner", ngImport: i0, template: "<div class=\"c8y-cookie-banner\">\n  <div class=\"container\">\n    <div class=\"row p-t-16 p-b-16\" *ngIf=\"showBanner\">\n      <div class=\"col-md-2\" *ngIf=\"settings.cookieBannerTitle\">\n        <h3>{{ settings.cookieBannerTitle | translate }}</h3>\n        <div class=\"p-b-16 visible-sm visible-xs\"></div>\n      </div>\n      <div class=\"col-md-7\">\n        <div class=\"cookie-banner-content text-pre-line\">\n          {{ settings.cookieBannerText | translate }}\n          <a\n            href=\"{{ settings.policyUrl }}\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            *ngIf=\"settings.policyUrl\"\n            class=\"text-primary\"\n          >\n            {{ 'See also our Privacy Notice.' | translate }}\n          </a>\n        </div>\n      </div>\n      <div class=\"col-md-3\">\n        <div class=\"row\">\n          <div class=\"col-sm-6 col-md-12\">\n            <div class=\"p-b-16 visible-sm visible-xs\"></div>\n            <button\n              class=\"btn btn-primary btn-block\"\n              (click)=\"acceptCookies()\"\n              [disabled]=\"shouldDisable\"\n            >\n              {{ 'Agree and proceed' | translate }}\n            </button>\n          </div>\n          <div class=\"col-sm-6 col-md-12\" *ngIf=\"!!cookiePreferences\">\n            <div class=\"p-b-16\"></div>\n            <button\n              class=\"btn btn-primary btn-block\"\n              (click)=\"rejectCookies()\"\n              [disabled]=\"shouldDisable\"\n            >\n              {{ 'Reject all`cookies`' | translate }}\n            </button>\n          </div>\n          <div class=\"col-sm-6 col-md-12\" *ngIf=\"!!cookiePreferences\">\n            <div class=\"p-b-16\"></div>\n            <button\n              class=\"btn btn-default btn-block\"\n              (click)=\"onConfigurePreferences()\"\n              [disabled]=\"shouldDisable\"\n            >\n              {{ 'Configure preferences' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CookieBannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-cookie-banner', template: "<div class=\"c8y-cookie-banner\">\n  <div class=\"container\">\n    <div class=\"row p-t-16 p-b-16\" *ngIf=\"showBanner\">\n      <div class=\"col-md-2\" *ngIf=\"settings.cookieBannerTitle\">\n        <h3>{{ settings.cookieBannerTitle | translate }}</h3>\n        <div class=\"p-b-16 visible-sm visible-xs\"></div>\n      </div>\n      <div class=\"col-md-7\">\n        <div class=\"cookie-banner-content text-pre-line\">\n          {{ settings.cookieBannerText | translate }}\n          <a\n            href=\"{{ settings.policyUrl }}\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            *ngIf=\"settings.policyUrl\"\n            class=\"text-primary\"\n          >\n            {{ 'See also our Privacy Notice.' | translate }}\n          </a>\n        </div>\n      </div>\n      <div class=\"col-md-3\">\n        <div class=\"row\">\n          <div class=\"col-sm-6 col-md-12\">\n            <div class=\"p-b-16 visible-sm visible-xs\"></div>\n            <button\n              class=\"btn btn-primary btn-block\"\n              (click)=\"acceptCookies()\"\n              [disabled]=\"shouldDisable\"\n            >\n              {{ 'Agree and proceed' | translate }}\n            </button>\n          </div>\n          <div class=\"col-sm-6 col-md-12\" *ngIf=\"!!cookiePreferences\">\n            <div class=\"p-b-16\"></div>\n            <button\n              class=\"btn btn-primary btn-block\"\n              (click)=\"rejectCookies()\"\n              [disabled]=\"shouldDisable\"\n            >\n              {{ 'Reject all`cookies`' | translate }}\n            </button>\n          </div>\n          <div class=\"col-sm-6 col-md-12\" *ngIf=\"!!cookiePreferences\">\n            <div class=\"p-b-16\"></div>\n            <button\n              class=\"btn btn-default btn-block\"\n              (click)=\"onConfigurePreferences()\"\n              [disabled]=\"shouldDisable\"\n            >\n              {{ 'Configure preferences' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$6.BsModalService }, { type: CookieBannerService }] });
+        }], ctorParameters: () => [{ type: i1$5.BsModalService }, { type: CookieBannerService }] });
 
 class MessageBannerService {
     constructor() {
@@ -17806,7 +17810,7 @@ class BootstrapComponent {
         this.pluginsResolve.markPluginsAsLoaded();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootstrapComponent, deps: [{ token: TabsService }, { token: AppStateService }, { token: NavigatorService }, { token: ActionBarService }, { token: HeaderService }, { token: OptionsService }, { token: PluginsResolveService }, { token: SetupService }, { token: LoginService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootstrapComponent, selector: "c8y-bootstrap", ngImport: i0, template: "<c8y-message-banner\n  *ngIf=\"!(showLogin$ | async)\"\n  class=\"c8y-message-banner\"\n></c8y-message-banner>\n<c8y-login *ngIf=\"showLogin$ | async\"></c8y-login>\n\n<div\n  class=\"init-load\"\n  *ngIf=\"showLoadingIndicator$ | async\"\n>\n  <div class=\"spinner-snake\"></div>\n  <div class=\"mainlogo-placeholder mainlogo\"></div>\n</div>\n\n<div\n  [class.head-open]=\"headerService.headerOpen\"\n  *ngIf=\"showMainView$ | async\"\n>\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    #header\n  ></c8y-header-bar>\n  <c8y-drawer-outlet\n    [tabindex]=\"(headerService.navigatorOpen$ | async) ? '0' : '-1'\"\n    role=\"region\"\n    position=\"left\"\n    data-cy=\"bootstrap.template--c8y-drawer-outlet\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  ></c8y-drawer-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    role=\"navigation\"\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  ></c8y-tabs-outlet>\n  <c8y-action-bar\n    role=\"group\"\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [isTabsHorizontal]=\"tabsComponent?.isHorizontal\"\n    [items$]=\"actionBar.items$\"\n  ></c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent?.hidden,\n      'has-header': headerService.hideHeader\n    }\"\n  >\n    <main\n      class=\"container-fluid\"\n      id=\"main-content\"\n      tabindex=\"-1\"\n    >\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </main>\n  </div>\n</div>\n\n<div *ngIf=\"showSetup$ | async\">\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    [simple]=\"true\"\n  ></c8y-header-bar>\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <div\n    class=\"mcontainer\"\n    role=\"main\"\n  >\n    <div class=\"container-fluid\">\n      <c8y-setup></c8y-setup>\n    </div>\n  </div>\n</div>\n\n<c8y-cookie-banner></c8y-cookie-banner>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: ["simple"] }, { kind: "component", type: LoginComponent, selector: "c8y-login", inputs: ["name"] }, { kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: ActionBarComponent, selector: "c8y-action-bar", inputs: ["navigatorOpen", "hasTabs", "hasHeader", "isTabsHorizontal", "items$"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: SetupComponent, selector: "c8y-setup" }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: CookieBannerComponent, selector: "c8y-cookie-banner" }, { kind: "component", type: MessageBannerComponent, selector: "c8y-message-banner" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootstrapComponent, selector: "c8y-bootstrap", ngImport: i0, template: "<c8y-message-banner\n  *ngIf=\"!(showLogin$ | async)\"\n  class=\"c8y-message-banner\"\n></c8y-message-banner>\n<c8y-login *ngIf=\"showLogin$ | async\"></c8y-login>\n\n<div\n  class=\"init-load\"\n  *ngIf=\"showLoadingIndicator$ | async\"\n>\n  <div class=\"spinner-snake\"></div>\n  <div class=\"mainlogo-placeholder mainlogo\"></div>\n</div>\n\n<div\n  [class.head-open]=\"headerService.headerOpen\"\n  *ngIf=\"showMainView$ | async\"\n>\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    #header\n  ></c8y-header-bar>\n  <c8y-drawer-outlet\n    [tabindex]=\"(headerService.navigatorOpen$ | async) ? '0' : '-1'\"\n    role=\"region\"\n    position=\"left\"\n    data-cy=\"bootstrap.template--c8y-drawer-outlet\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  ></c8y-drawer-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    role=\"navigation\"\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  ></c8y-tabs-outlet>\n  <c8y-action-bar\n    role=\"group\"\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [isTabsHorizontal]=\"tabsComponent?.isHorizontal\"\n    [items$]=\"actionBar.items$\"\n  ></c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent?.hidden,\n      'has-header': headerService.hideHeader\n    }\"\n  >\n    <main\n      class=\"container-fluid\"\n      id=\"main-content\"\n      tabindex=\"-1\"\n    >\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </main>\n  </div>\n</div>\n\n<div *ngIf=\"showSetup$ | async\">\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    [simple]=\"true\"\n  ></c8y-header-bar>\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <div\n    class=\"mcontainer\"\n    role=\"main\"\n  >\n    <div class=\"container-fluid\">\n      <c8y-setup></c8y-setup>\n    </div>\n  </div>\n</div>\n\n<c8y-cookie-banner></c8y-cookie-banner>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: ["simple"] }, { kind: "component", type: LoginComponent, selector: "c8y-login", inputs: ["name"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: ActionBarComponent, selector: "c8y-action-bar", inputs: ["navigatorOpen", "hasTabs", "hasHeader", "isTabsHorizontal", "items$"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: SetupComponent, selector: "c8y-setup" }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: CookieBannerComponent, selector: "c8y-cookie-banner" }, { kind: "component", type: MessageBannerComponent, selector: "c8y-message-banner" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootstrapComponent, decorators: [{
             type: Component,
@@ -17883,7 +17887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  */
 class BreadcrumbModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbOutletComponent], imports: [i1$5.RouterModule, CommonModule, i2$3.TooltipModule], exports: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbOutletComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbOutletComponent], imports: [i1$4.RouterModule, CommonModule, i2$3.TooltipModule], exports: [BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbOutletComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbModule, imports: [RouterModule$1.forChild([]), CommonModule, TooltipModule.forRoot()] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BreadcrumbModule, decorators: [{
@@ -18083,13 +18087,13 @@ class NavigatorNodeComponent {
             injector: this.node.injector
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorNodeComponent, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: NavigatorNodeComponent, selector: "c8y-navigator-node", inputs: { node: "node", isRoot: "isRoot" }, outputs: { nodeClick: "nodeClick" }, viewQueries: [{ propertyName: "iconSlot", first: true, predicate: ["icon"], descendants: true, read: ViewContainerRef }, { propertyName: "confirm", first: true, predicate: PopoverConfirmComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"node.component\">\n  <ng-container *c8yComponentOutlet=\"node.component; environmentInjector: node.injector\"></ng-container>\n</ng-container>\n\n<div\n  class=\"slot\"\n  *ngIf=\"!node.component\"\n  [hidden]=\"node.hidden\"\n  (dragstart)=\"node.dragStart($event)\"\n  (dragend)=\"node.dragEnd($event)\"\n  (drop)=\"node.drop($event)\"\n  [draggable]=\"node.draggable\"\n  [ngClass]=\"{ dragged: node.dragged, disabled: node.loading }\"\n>\n  <ng-container>\n    <div\n      class=\"link\"\n      tabindex=\"-1\"\n      [routerLink]=\"node.canNavigate ? node.path : undefined\"\n      [ngClass]=\"{\n        active: isActive$ | async,\n        'dragged-hover': node.draggedHover && !node.dragged\n      }\"\n      (dragover)=\"node.canDrop && $event.preventDefault()\"\n      (dragenter)=\"node.canDrop && node.dragEnter($event)\"\n      (dragleave)=\"node.canDrop && node.dragLeave($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"navicon\"></ng-container>\n      <button\n        class=\"btn-clean\"\n        title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        [attr.aria-expanded]=\"node.hasChildren ? node.open : null\"\n        type=\"button\"\n        draggable=\"false\"\n        [attr.data-cy]=\"node.label\"\n        [attr.id]=\"isRoot ? node.id : undefined\"\n        (click)=\"click(node.canNavigate ? 'link' : 'expander', $event)\"\n        [ngClass]=\"{\n          'root-link': isRoot,\n          open: node.open && node.hasChildren,\n          parent: node.hasChildren\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n      </button>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"children panel-expand expand\"\n    *ngIf=\"node.children.length\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n  >\n    <c8y-navigator-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      (nodeClick)=\"nodeClick.emit($event)\"\n    ></c8y-navigator-node>\n  </div>\n</div>\n\n<!-- icon -->\n<ng-template #navicon>\n  <!-- loader -->\n  <i\n    class=\"icon-spin loadingIndicator\"\n    [c8yIcon]=\"'circle-o-notch'\"\n    [ngClass]=\"{ 'm-l-16' : isRoot, 'm-l-8': !isRoot }\"\n    *ngIf=\"node.loading && !isRoot\"\n  ></i>\n  <ng-container #icon></ng-container>\n</ng-template>\n\n<ng-template #inner>\n  <!--title  -->\n  <span>{{ node.translateLabel ? (node.label | translate) : node.label }}</span>\n\n  <!--expander  -->\n  <i\n    class=\"expander\"\n    [c8yIcon]=\"'chevron-down'\"\n    [attr.aria-label]=\"expandTitle\"\n    role=\"button\"\n    *ngIf=\"node.hasChildren\"\n    (click)=\"click('expander', $event)\"\n    data-cy=\"c8y-navigator-node--expander\"\n  ></i>\n\n  <!--  Popover confirm  -->\n  <c8y-popover-confirm\n    triggers=\"focus\"\n    containerClass=\"navigator-popover\"\n  ></c8y-popover-confirm>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "component", type: NavigatorNodeComponent, selector: "c8y-navigator-node", inputs: ["node", "isRoot"], outputs: ["nodeClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorNodeComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: NavigatorNodeComponent, selector: "c8y-navigator-node", inputs: { node: "node", isRoot: "isRoot" }, outputs: { nodeClick: "nodeClick" }, viewQueries: [{ propertyName: "iconSlot", first: true, predicate: ["icon"], descendants: true, read: ViewContainerRef }, { propertyName: "confirm", first: true, predicate: PopoverConfirmComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"node.component\">\n  <ng-container *c8yComponentOutlet=\"node.component; environmentInjector: node.injector\"></ng-container>\n</ng-container>\n\n<div\n  class=\"slot\"\n  *ngIf=\"!node.component\"\n  [hidden]=\"node.hidden\"\n  (dragstart)=\"node.dragStart($event)\"\n  (dragend)=\"node.dragEnd($event)\"\n  (drop)=\"node.drop($event)\"\n  [draggable]=\"node.draggable\"\n  [ngClass]=\"{ dragged: node.dragged, disabled: node.loading }\"\n>\n  <ng-container>\n    <div\n      class=\"link\"\n      tabindex=\"-1\"\n      [routerLink]=\"node.canNavigate ? node.path : undefined\"\n      [ngClass]=\"{\n        active: isActive$ | async,\n        'dragged-hover': node.draggedHover && !node.dragged\n      }\"\n      (dragover)=\"node.canDrop && $event.preventDefault()\"\n      (dragenter)=\"node.canDrop && node.dragEnter($event)\"\n      (dragleave)=\"node.canDrop && node.dragLeave($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"navicon\"></ng-container>\n      <button\n        class=\"btn-clean\"\n        title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        [attr.aria-expanded]=\"node.hasChildren ? node.open : null\"\n        type=\"button\"\n        draggable=\"false\"\n        [attr.data-cy]=\"node.label\"\n        [attr.id]=\"isRoot ? node.id : undefined\"\n        (click)=\"click(node.canNavigate ? 'link' : 'expander', $event)\"\n        [ngClass]=\"{\n          'root-link': isRoot,\n          open: node.open && node.hasChildren,\n          parent: node.hasChildren\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n      </button>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"children panel-expand expand\"\n    *ngIf=\"node.children.length\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n  >\n    <c8y-navigator-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      (nodeClick)=\"nodeClick.emit($event)\"\n    ></c8y-navigator-node>\n  </div>\n</div>\n\n<!-- icon -->\n<ng-template #navicon>\n  <!-- loader -->\n  <i\n    class=\"icon-spin loadingIndicator\"\n    [c8yIcon]=\"'circle-o-notch'\"\n    [ngClass]=\"{ 'm-l-16' : isRoot, 'm-l-8': !isRoot }\"\n    *ngIf=\"node.loading && !isRoot\"\n  ></i>\n  <ng-container #icon></ng-container>\n</ng-template>\n\n<ng-template #inner>\n  <!--title  -->\n  <span>{{ node.translateLabel ? (node.label | translate) : node.label }}</span>\n\n  <!--expander  -->\n  <i\n    class=\"expander\"\n    [c8yIcon]=\"'chevron-down'\"\n    [attr.aria-label]=\"expandTitle\"\n    role=\"button\"\n    *ngIf=\"node.hasChildren\"\n    (click)=\"click('expander', $event)\"\n    data-cy=\"c8y-navigator-node--expander\"\n  ></i>\n\n  <!--  Popover confirm  -->\n  <c8y-popover-confirm\n    triggers=\"focus\"\n    containerClass=\"navigator-popover\"\n  ></c8y-popover-confirm>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$8.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "component", type: NavigatorNodeComponent, selector: "c8y-navigator-node", inputs: ["node", "isRoot"], outputs: ["nodeClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-navigator-node', template: "<ng-container *ngIf=\"node.component\">\n  <ng-container *c8yComponentOutlet=\"node.component; environmentInjector: node.injector\"></ng-container>\n</ng-container>\n\n<div\n  class=\"slot\"\n  *ngIf=\"!node.component\"\n  [hidden]=\"node.hidden\"\n  (dragstart)=\"node.dragStart($event)\"\n  (dragend)=\"node.dragEnd($event)\"\n  (drop)=\"node.drop($event)\"\n  [draggable]=\"node.draggable\"\n  [ngClass]=\"{ dragged: node.dragged, disabled: node.loading }\"\n>\n  <ng-container>\n    <div\n      class=\"link\"\n      tabindex=\"-1\"\n      [routerLink]=\"node.canNavigate ? node.path : undefined\"\n      [ngClass]=\"{\n        active: isActive$ | async,\n        'dragged-hover': node.draggedHover && !node.dragged\n      }\"\n      (dragover)=\"node.canDrop && $event.preventDefault()\"\n      (dragenter)=\"node.canDrop && node.dragEnter($event)\"\n      (dragleave)=\"node.canDrop && node.dragLeave($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"navicon\"></ng-container>\n      <button\n        class=\"btn-clean\"\n        title=\"{{ node.translateLabel ? (node.label | translate) : node.label }}\"\n        [attr.aria-expanded]=\"node.hasChildren ? node.open : null\"\n        type=\"button\"\n        draggable=\"false\"\n        [attr.data-cy]=\"node.label\"\n        [attr.id]=\"isRoot ? node.id : undefined\"\n        (click)=\"click(node.canNavigate ? 'link' : 'expander', $event)\"\n        [ngClass]=\"{\n          'root-link': isRoot,\n          open: node.open && node.hasChildren,\n          parent: node.hasChildren\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n      </button>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"children panel-expand expand\"\n    *ngIf=\"node.children.length\"\n    [collapse]=\"!node.open\"\n    [isAnimated]=\"true\"\n  >\n    <c8y-navigator-node\n      *ngFor=\"let childNode of node.children\"\n      [node]=\"childNode\"\n      (nodeClick)=\"nodeClick.emit($event)\"\n    ></c8y-navigator-node>\n  </div>\n</div>\n\n<!-- icon -->\n<ng-template #navicon>\n  <!-- loader -->\n  <i\n    class=\"icon-spin loadingIndicator\"\n    [c8yIcon]=\"'circle-o-notch'\"\n    [ngClass]=\"{ 'm-l-16' : isRoot, 'm-l-8': !isRoot }\"\n    *ngIf=\"node.loading && !isRoot\"\n  ></i>\n  <ng-container #icon></ng-container>\n</ng-template>\n\n<ng-template #inner>\n  <!--title  -->\n  <span>{{ node.translateLabel ? (node.label | translate) : node.label }}</span>\n\n  <!--expander  -->\n  <i\n    class=\"expander\"\n    [c8yIcon]=\"'chevron-down'\"\n    [attr.aria-label]=\"expandTitle\"\n    role=\"button\"\n    *ngIf=\"node.hasChildren\"\n    (click)=\"click('expander', $event)\"\n    data-cy=\"c8y-navigator-node--expander\"\n  ></i>\n\n  <!--  Popover confirm  -->\n  <c8y-popover-confirm\n    triggers=\"focus\"\n    containerClass=\"navigator-popover\"\n  ></c8y-popover-confirm>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.Router }], propDecorators: { iconSlot: [{
+        }], ctorParameters: () => [{ type: i1$4.Router }], propDecorators: { iconSlot: [{
                 type: ViewChild,
                 args: ['icon', { read: ViewContainerRef, static: false }]
             }], node: [{
@@ -18172,7 +18176,7 @@ class NavigatorModule {
         return [hookDrawer(NavigatorDrawerFactory)];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: NavigatorModule, declarations: [NavigatorOutletComponent, NavigatorNodeComponent, NavigatorIconComponent], imports: [RouterModule$1, i1$9.CollapseModule, CommonModule, ModalModule], exports: [NavigatorOutletComponent, NavigatorNodeComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: NavigatorModule, declarations: [NavigatorOutletComponent, NavigatorNodeComponent, NavigatorIconComponent], imports: [RouterModule$1, i1$8.CollapseModule, CommonModule, ModalModule], exports: [NavigatorOutletComponent, NavigatorNodeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorModule, imports: [RouterModule$1, CollapseModule.forRoot(), CommonModule, ModalModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavigatorModule, decorators: [{
@@ -18576,7 +18580,7 @@ class ListItemComponent {
         this.pulse$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], ngImport: i0, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n      <div\n        class=\"c8y-list__item__footer\"\n        *ngIf=\"showFooter\"\n      >\n        <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n      </div>\n    </div>\n\n    <div\n      class=\"c8y-list__item__actions\"\n      *ngIf=\"(showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions\"\n    >\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        [attr.aria-expanded]=\"!collapsed\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        *ngIf=\"showCollapse && itemCollapse.collapseWay === 'button'\"\n        data-cy=\"c8y-li--collapse-btn\"\n      >\n        <i [c8yIcon]=\"'chevron-down'\"></i>\n      </button>\n      <div\n        class=\"dropdown\"\n        #liDropdownActions=\"bs-dropdown\"\n        [cdkTrapFocus]=\"liDropdownActions.isOpen\"\n        dropdown\n        c8yDropdownDirection\n        #dropDirection=\"bs-dropdown\"\n        [cdkTrapFocus]=\"dropDirection.isOpen\"\n        *ngIf=\"showActions\"\n      >\n        <button\n          class=\"dropdown-toggle c8y-dropdown\"\n          title=\"{{ 'Actions' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n          data-cy=\"c8y-li--actions-btn\"\n        >\n          <i [c8yIcon]=\"'ellipsis-v'\"></i>\n        </button>\n        <ul\n          class=\"dropdown-menu dropdown-menu-right\"\n          data-cy=\"list-item--dropdown-menu\"\n          *dropdownMenu\n        >\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n          <ng-container *ngFor=\"let action of actions\">\n            <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n\n      <ng-content\n        select=\"c8y-list-item-action, c8y-li-action\"\n        *ngIf=\"showActions\"\n      ></ng-content>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showCollapse\"\n    [collapse]=\"collapsed\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: { active: "active", highlighted: "highlighted", emptyActions: "emptyActions", dense: "dense", collapsed: "collapsed", selectable: "selectable" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "class.active": "this.active", "class.highlighted": "this.highlighted", "class.c8y-list__item--empty-actions": "this.emptyActions", "class.c8y-list__item--dense": "this.dense", "class.selectable": "this.selectable" }, classAttribute: "c8y-list__item" }, queries: [{ propertyName: "itemFooter", first: true, predicate: ListItemFooterComponent, descendants: true }, { propertyName: "itemCollapse", first: true, predicate: ListItemCollapseComponent, descendants: true }, { propertyName: "itemActions", predicate: ListItemActionComponent }], ngImport: i0, template: "<div\n  [ngClass]=\"{ expanded: !collapsed, interact: itemCollapse && itemCollapse.collapseWay === 'row' }\"\n>\n  <div class=\"c8y-list__item__block\">\n    <ng-content select=\"c8y-list-item-drag-handle, c8y-li-drag-handle\"></ng-content>\n    <ng-content select=\"c8y-list-item-radio, c8y-li-radio\"></ng-content>\n    <ng-content select=\"c8y-list-item-checkbox, c8y-li-checkbox\"></ng-content>\n\n    <ng-content select=\"c8y-list-item-icon, c8y-li-icon\"></ng-content>\n\n    <div\n      class=\"c8y-list__item__body text-truncate-wrap\"\n      (click)=\"rowToggleCollapsed()\"\n    >\n      <ng-content select=\"c8y-list-item-body, c8y-li-body\"></ng-content>\n      <ng-content></ng-content>\n      <div\n        class=\"c8y-list__item__footer\"\n        *ngIf=\"showFooter\"\n      >\n        <ng-content select=\"c8y-list-item-footer, c8y-li-footer\"></ng-content>\n      </div>\n    </div>\n\n    <div\n      class=\"c8y-list__item__actions\"\n      *ngIf=\"(showCollapse && itemCollapse && itemCollapse.collapseWay === 'button') || showActions\"\n    >\n      <button\n        class=\"collapse-btn\"\n        title=\"{{ 'Expand' | translate }}\"\n        [attr.aria-expanded]=\"!collapsed\"\n        type=\"button\"\n        (click)=\"toggleCollapsed($event)\"\n        *ngIf=\"showCollapse && itemCollapse.collapseWay === 'button'\"\n        data-cy=\"c8y-li--collapse-btn\"\n      >\n        <i [c8yIcon]=\"'chevron-down'\"></i>\n      </button>\n      <div\n        class=\"dropdown\"\n        #liDropdownActions=\"bs-dropdown\"\n        [cdkTrapFocus]=\"liDropdownActions.isOpen\"\n        dropdown\n        c8yDropdownDirection\n        #dropDirection=\"bs-dropdown\"\n        [cdkTrapFocus]=\"dropDirection.isOpen\"\n        *ngIf=\"showActions\"\n      >\n        <button\n          class=\"dropdown-toggle c8y-dropdown\"\n          title=\"{{ 'Actions' | translate }}\"\n          type=\"button\"\n          dropdownToggle\n          data-cy=\"c8y-li--actions-btn\"\n        >\n          <i [c8yIcon]=\"'ellipsis-v'\"></i>\n        </button>\n        <ul\n          class=\"dropdown-menu dropdown-menu-right\"\n          data-cy=\"list-item--dropdown-menu\"\n          *dropdownMenu\n        >\n          <ng-content select=\"c8y-list-item-action, c8y-li-action\"></ng-content>\n          <ng-container *ngFor=\"let action of actions\">\n            <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n\n      <ng-content\n        select=\"c8y-list-item-action, c8y-li-action\"\n        *ngIf=\"showActions\"\n      ></ng-content>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showCollapse\"\n    [collapse]=\"collapsed\"\n    [isAnimated]=\"true\"\n  >\n    <div class=\"c8y-list__item__collapse--container\">\n      <ng-content select=\"c8y-list-item-collapse, c8y-li-collapse\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$8.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
@@ -19019,7 +19023,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  dropdown\n  [container]=\"container\"\n  placement=\"bottom left\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div role=\"button\" class=\"input-group input-group-dropdown\">\n    <input\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      type=\"text\"\n      class=\"form-control text-truncate\"\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=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event });\"\n        data-cy=\"typeahead-button\"\n      >\n        <i [c8yIcon]=\"icon\" class=\"text-primary\"></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    data-cy=\"typeahead--dropdown-menu\"\n    role=\"menu\"\n    *dropdownMenu\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { 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  dropdown\n  [container]=\"container\"\n  placement=\"bottom left\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"true\"\n  (onShown)=\"onShown()\"\n  [isDisabled]=\"disabled\"\n  dropdownToggle\n>\n  <div role=\"button\" class=\"input-group input-group-dropdown\">\n    <input\n      #searchControl\n      #searchControlModel=\"ngModel\"\n      type=\"text\"\n      class=\"form-control text-truncate\"\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=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event });\"\n        data-cy=\"typeahead-button\"\n      >\n        <i [c8yIcon]=\"icon\" class=\"text-primary\"></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    data-cy=\"typeahead--dropdown-menu\"\n    role=\"menu\"\n    *dropdownMenu\n    [style.width]=\"container === 'body' ? searchControl.clientWidth + 'px' : undefined\"\n  >\n    <ng-content select=\"div, c8y-li, c8y-list-item, button, a\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeaheadComponent, decorators: [{
             type: Component,
@@ -19145,7 +19149,7 @@ class InventorySearchService {
             }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InventorySearchService, deps: [{ token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InventorySearchService, deps: [{ token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InventorySearchService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InventorySearchService, decorators: [{
@@ -19153,7 +19157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.InventoryService }] });
+        }], ctorParameters: () => [{ type: i1.InventoryService }] });
 
 /**
  * An icon to display on a list item. Use it with content projection.
@@ -19338,13 +19342,13 @@ class DeviceStatusComponent {
     getPushStatusTooltip(isActive) {
         return isActive ? tooltips.pushStatusConnected : tooltips.pushStatusDisconnected;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceStatusComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceStatusComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: { node: ["mo", "node"], size: "size" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"size < 32\">\n  <button\n    class=\"btn-clean p-0\"\n    style=\"max-width: {{size}}px\"\n    [attr.aria-label]=\"'Connection status' | translate\"\n    tooltip=\"{{\n      !!status().maintenanceStatus\n        ? (status().maintenanceStatus.tooltip | translate)\n        : (status().sendStatus.tooltip | translate) + '\\n' + ( status().pushStatus.tooltip | translate ) }}\"\n    placement=\"right\"\n    container=\"body\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n  >\n    <svg\n      style=\"max-width: {{ size }}px; min-width: 20px; pointer-events: none;\"\n      viewBox=\"0 0 90 90\"\n      fill=\"none\"\n    >\n      <g *ngIf=\"!status().maintenanceStatus\">\n        <path\n          class=\"sendStatus\"\n          [ngClass]=\"status().sendStatus.class\"\n          d=\"M45 3C21.804 3 3 21.804 3 45H87C87 21.804 68.196 3 45 3Z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M67.0952 27.4943C67.0952 27.27 66.9967 27.0702 66.8472 26.9215L57.2702 18.1929C57.0221 17.9922 56.6974 17.9439 56.3974 18.0679C56.0982 18.1929 55.9231 18.4674 55.9231 18.7903V24.3768H24.7981C24.3493 24.3768 24 24.7262 24 25.1749V29.9634C24 30.4121 24.3493 30.7614 24.7981 30.7614H55.9231V36.3471C55.9231 36.6718 56.1237 36.9463 56.3974 37.0713C56.6974 37.1953 57.0221 37.1451 57.2702 36.9208L66.8472 28.0927C66.9967 27.944 67.0952 27.7196 67.0952 27.4943Z\"\n          fill=\"var(--c8y-palette-high)\"\n        />\n      </g>\n      <g *ngIf=\"!status().maintenanceStatus\">\n        <path\n          d=\"M45 87C68.196 87 87 68.196 87 45L3 45C3 68.196 21.804 87 45 87Z\"\n          [ngClass]=\"status().pushStatus.class\"\n          class=\"pushStatus\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M23.9048 62.4943C23.9048 62.27 24.0033 62.0702 24.1528 61.9215L33.7298 53.1929C33.9779 52.9922 34.3026 52.9439 34.6026 53.0679C34.9018 53.1929 35.0769 53.4674 35.0769 53.7903V59.3768H66.2019C66.6507 59.3768 67 59.7262 67 60.1749V64.9634C67 65.4121 66.6507 65.7614 66.2019 65.7614H35.0769V71.3471C35.0769 71.6718 34.8763 71.9463 34.6026 72.0713C34.3026 72.1953 33.9779 72.1451 33.7298 71.9208L24.1528 63.0927C24.0033 62.944 23.9048 62.7196 23.9048 62.4943Z\"\n          fill=\"var(--c8y-palette-high)\"\n        />\n      </g>\n      <g *ngIf=\"!!status().maintenanceStatus\">\n        <path \n          class=\"maintenanceStatus\"\n          d=\"M45.5 88C68.9721 88 88 68.9721 88 45.5C88 22.0279 68.9721 3 45.5 3C22.0279 3 3 22.0279 3 45.5C3 68.9721 22.0279 88 45.5 88Z\"\n          fill=\"var(--c8y-palette-status-warning)\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M66.7 32.6935C66.7 33.6665 66.346 34.8755 66.021 35.8195C64.163 41.0685 59.119 44.6975 53.544 44.6975C46.259 44.6975 40.33 38.7685 40.33 31.4835C40.33 24.1985 46.259 18.2695 53.544 18.2695C55.698 18.2695 58.499 18.9175 60.299 20.1275C60.593 20.3345 60.77 20.6005 60.77 20.9535C60.77 21.2785 60.563 21.6005 60.299 21.7795L51.656 26.7625V33.3685L57.349 36.5245C58.322 35.9635 65.165 31.6595 65.754 31.6595C66.346 31.6615 66.7 32.1035 66.7 32.6935ZM48 45.5225L27.886 65.6375C27.207 66.3165 26.234 66.7295 25.23 66.7295C24.228 66.7295 23.254 66.3165 22.546 65.6375L19.421 62.4515C18.713 61.7735 18.299 60.8005 18.299 59.7975C18.299 58.7955 18.712 57.8225 19.421 57.1125L39.506 37.0295C41.04 40.8935 44.137 43.9895 48 45.5225ZM29.006 57.9105C29.006 56.8785 28.151 56.0235 27.118 56.0235C26.085 56.0235 25.23 56.8775 25.23 57.9105C25.23 58.9435 26.085 59.7975 27.118 59.7975C28.15 59.7975 29.006 58.9425 29.006 57.9105Z\"\n          fill=\"var(--c8y-palette-high)\"\n        />\n      </g>\n\n      <path\n        d=\"M88 45C88 68.7482 68.7482 88 45 88C21.2518 88 2 68.7482 2 45C2 21.2518 21.2518 2 45 2C68.7482 2 88 21.2518 88 45Z\"\n        stroke=\"var(--c8y-root-component-border-color)\"\n        stroke-width=\"4\"\n        stroke-miterlimit=\"10\"\n      />\n    </svg>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"size >=32\">\n  <svg\n    style=\"max-width: {{ size }}px; min-width: 20px;\"\n    viewBox=\"0 0 90 90\"\n    class=\"d-inline-block\"\n    fill=\"none\"\n  >\n    <g\n      tooltip=\"{{ status().sendStatus.tooltip | translate }}\"\n      [delay]=\"500\"\n      container=\"body\"\n      *ngIf=\"!status().maintenanceStatus\"\n    >\n      <path\n        class=\"sendStatus\"\n        d=\"M45 3C21.804 3 3 21.804 3 45H87C87 21.804 68.196 3 45 3Z\"\n        [ngClass]=\"status().sendStatus.class\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M67.0952 27.4943C67.0952 27.27 66.9967 27.0702 66.8472 26.9215L57.2702 18.1929C57.0221 17.9922 56.6974 17.9439 56.3974 18.0679C56.0982 18.1929 55.9231 18.4674 55.9231 18.7903V24.3768H24.7981C24.3493 24.3768 24 24.7262 24 25.1749V29.9634C24 30.4121 24.3493 30.7614 24.7981 30.7614H55.9231V36.3471C55.9231 36.6718 56.1237 36.9463 56.3974 37.0713C56.6974 37.1953 57.0221 37.1451 57.2702 36.9208L66.8472 28.0927C66.9967 27.944 67.0952 27.7196 67.0952 27.4943Z\"\n        fill=\"var(--c8y-palette-high)\"\n      />\n    </g>\n    <g\n      tooltip=\"{{ status().pushStatus.tooltip | translate }}\"\n      [delay]=\"500\"\n      container=\"body\"\n      *ngIf=\"!status().maintenanceStatus\"\n    >\n      <path\n        d=\"M45 87C68.196 87 87 68.196 87 45L3 45C3 68.196 21.804 87 45 87Z\"\n        [ngClass]=\"status().pushStatus.class\"\n        class=\"pushStatus\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M23.9048 62.4943C23.9048 62.27 24.0033 62.0702 24.1528 61.9215L33.7298 53.1929C33.9779 52.9922 34.3026 52.9439 34.6026 53.0679C34.9018 53.1929 35.0769 53.4674 35.0769 53.7903V59.3768H66.2019C66.6507 59.3768 67 59.7262 67 60.1749V64.9634C67 65.4121 66.6507 65.7614 66.2019 65.7614H35.0769V71.3471C35.0769 71.6718 34.8763 71.9463 34.6026 72.0713C34.3026 72.1953 33.9779 72.1451 33.7298 71.9208L24.1528 63.0927C24.0033 62.944 23.9048 62.7196 23.9048 62.4943Z\"\n        fill=\"var(--c8y-palette-high)\"\n        style=\"pointer-events: none;\"\n      />\n    </g>\n    <g\n      tooltip=\"{{ status().maintenanceStatus.tooltip | translate }}\"\n      [delay]=\"500\"\n      container=\"body\"\n      *ngIf=\"!!status().maintenanceStatus\"\n    >\n      <path \n        d=\"M45.5 88C68.9721 88 88 68.9721 88 45.5C88 22.0279 68.9721 3 45.5 3C22.0279 3 3 22.0279 3 45.5C3 68.9721 22.0279 88 45.5 88Z\"\n        fill=\"var(--c8y-palette-status-warning)\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M69.7 35.6935C69.7 36.6665 69.346 37.8755 69.021 38.8195C67.163 44.0685 62.119 47.6975 56.544 47.6975C49.259 47.6975 43.33 41.7685 43.33 34.4835C43.33 27.1985 49.259 21.2695 56.544 21.2695C58.698 21.2695 61.499 21.9175 63.299 23.1275C63.593 23.3345 63.77 23.6005 63.77 23.9535C63.77 24.2785 63.563 24.6005 63.299 24.7795L54.656 29.7625V36.3685L60.349 39.5245C61.322 38.9635 68.165 34.6595 68.754 34.6595C69.346 34.6615 69.7 35.1035 69.7 35.6935ZM51 48.5225L30.886 68.6375C30.207 69.3165 29.234 69.7295 28.23 69.7295C27.228 69.7295 26.254 69.3165 25.546 68.6375L22.421 65.4515C21.713 64.7735 21.299 63.8005 21.299 62.7975C21.299 61.7955 21.712 60.8225 22.421 60.1125L42.506 40.0295C44.04 43.8935 47.137 46.9895 51 48.5225ZM32.006 60.9105C32.006 59.8785 31.151 59.0235 30.118 59.0235C29.085 59.0235 28.23 59.8775 28.23 60.9105C28.23 61.9435 29.085 62.7975 30.118 62.7975C31.15 62.7975 32.006 61.9425 32.006 60.9105Z\"\n        fill=\"var(--c8y-palette-high)\"\n        style=\"pointer-events: none;\"\n      />\n    </g>\n\n    <path\n      d=\"M88 45C88 68.7482 68.7482 88 45 88C21.2518 88 2 68.7482 2 45C2 21.2518 21.2518 2 45 2C68.7482 2 88 21.2518 88 45Z\"\n      stroke=\"var(--c8y-root-component-border-color)\"\n      stroke-width=\"4\"\n      stroke-miterlimit=\"10\"\n    />\n  </svg>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DeviceStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'device-status, c8y-device-status', template: "<ng-container *ngIf=\"size < 32\">\n  <button\n    class=\"btn-clean p-0\"\n    style=\"max-width: {{size}}px\"\n    [attr.aria-label]=\"'Connection status' | translate\"\n    tooltip=\"{{\n      !!status().maintenanceStatus\n        ? (status().maintenanceStatus.tooltip | translate)\n        : (status().sendStatus.tooltip | translate) + '\\n' + ( status().pushStatus.tooltip | translate ) }}\"\n    placement=\"right\"\n    container=\"body\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n  >\n    <svg\n      style=\"max-width: {{ size }}px; min-width: 20px; pointer-events: none;\"\n      viewBox=\"0 0 90 90\"\n      fill=\"none\"\n    >\n      <g *ngIf=\"!status().maintenanceStatus\">\n        <path\n          class=\"sendStatus\"\n          [ngClass]=\"status().sendStatus.class\"\n          d=\"M45 3C21.804 3 3 21.804 3 45H87C87 21.804 68.196 3 45 3Z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M67.0952 27.4943C67.0952 27.27 66.9967 27.0702 66.8472 26.9215L57.2702 18.1929C57.0221 17.9922 56.6974 17.9439 56.3974 18.0679C56.0982 18.1929 55.9231 18.4674 55.9231 18.7903V24.3768H24.7981C24.3493 24.3768 24 24.7262 24 25.1749V29.9634C24 30.4121 24.3493 30.7614 24.7981 30.7614H55.9231V36.3471C55.9231 36.6718 56.1237 36.9463 56.3974 37.0713C56.6974 37.1953 57.0221 37.1451 57.2702 36.9208L66.8472 28.0927C66.9967 27.944 67.0952 27.7196 67.0952 27.4943Z\"\n          fill=\"var(--c8y-palette-high)\"\n        />\n      </g>\n      <g *ngIf=\"!status().maintenanceStatus\">\n        <path\n          d=\"M45 87C68.196 87 87 68.196 87 45L3 45C3 68.196 21.804 87 45 87Z\"\n          [ngClass]=\"status().pushStatus.class\"\n          class=\"pushStatus\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M23.9048 62.4943C23.9048 62.27 24.0033 62.0702 24.1528 61.9215L33.7298 53.1929C33.9779 52.9922 34.3026 52.9439 34.6026 53.0679C34.9018 53.1929 35.0769 53.4674 35.0769 53.7903V59.3768H66.2019C66.6507 59.3768 67 59.7262 67 60.1749V64.9634C67 65.4121 66.6507 65.7614 66.2019 65.7614H35.0769V71.3471C35.0769 71.6718 34.8763 71.9463 34.6026 72.0713C34.3026 72.1953 33.9779 72.1451 33.7298 71.9208L24.1528 63.0927C24.0033 62.944 23.9048 62.7196 23.9048 62.4943Z\"\n          fill=\"var(--c8y-palette-high)\"\n        />\n      </g>\n      <g *ngIf=\"!!status().maintenanceStatus\">\n        <path \n          class=\"maintenanceStatus\"\n          d=\"M45.5 88C68.9721 88 88 68.9721 88 45.5C88 22.0279 68.9721 3 45.5 3C22.0279 3 3 22.0279 3 45.5C3 68.9721 22.0279 88 45.5 88Z\"\n          fill=\"var(--c8y-palette-status-warning)\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M66.7 32.6935C66.7 33.6665 66.346 34.8755 66.021 35.8195C64.163 41.0685 59.119 44.6975 53.544 44.6975C46.259 44.6975 40.33 38.7685 40.33 31.4835C40.33 24.1985 46.259 18.2695 53.544 18.2695C55.698 18.2695 58.499 18.9175 60.299 20.1275C60.593 20.3345 60.77 20.6005 60.77 20.9535C60.77 21.2785 60.563 21.6005 60.299 21.7795L51.656 26.7625V33.3685L57.349 36.5245C58.322 35.9635 65.165 31.6595 65.754 31.6595C66.346 31.6615 66.7 32.1035 66.7 32.6935ZM48 45.5225L27.886 65.6375C27.207 66.3165 26.234 66.7295 25.23 66.7295C24.228 66.7295 23.254 66.3165 22.546 65.6375L19.421 62.4515C18.713 61.7735 18.299 60.8005 18.299 59.7975C18.299 58.7955 18.712 57.8225 19.421 57.1125L39.506 37.0295C41.04 40.8935 44.137 43.9895 48 45.5225ZM29.006 57.9105C29.006 56.8785 28.151 56.0235 27.118 56.0235C26.085 56.0235 25.23 56.8775 25.23 57.9105C25.23 58.9435 26.085 59.7975 27.118 59.7975C28.15 59.7975 29.006 58.9425 29.006 57.9105Z\"\n          fill=\"var(--c8y-palette-high)\"\n        />\n      </g>\n\n      <path\n        d=\"M88 45C88 68.7482 68.7482 88 45 88C21.2518 88 2 68.7482 2 45C2 21.2518 21.2518 2 45 2C68.7482 2 88 21.2518 88 45Z\"\n        stroke=\"var(--c8y-root-component-border-color)\"\n        stroke-width=\"4\"\n        stroke-miterlimit=\"10\"\n      />\n    </svg>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"size >=32\">\n  <svg\n    style=\"max-width: {{ size }}px; min-width: 20px;\"\n    viewBox=\"0 0 90 90\"\n    class=\"d-inline-block\"\n    fill=\"none\"\n  >\n    <g\n      tooltip=\"{{ status().sendStatus.tooltip | translate }}\"\n      [delay]=\"500\"\n      container=\"body\"\n      *ngIf=\"!status().maintenanceStatus\"\n    >\n      <path\n        class=\"sendStatus\"\n        d=\"M45 3C21.804 3 3 21.804 3 45H87C87 21.804 68.196 3 45 3Z\"\n        [ngClass]=\"status().sendStatus.class\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M67.0952 27.4943C67.0952 27.27 66.9967 27.0702 66.8472 26.9215L57.2702 18.1929C57.0221 17.9922 56.6974 17.9439 56.3974 18.0679C56.0982 18.1929 55.9231 18.4674 55.9231 18.7903V24.3768H24.7981C24.3493 24.3768 24 24.7262 24 25.1749V29.9634C24 30.4121 24.3493 30.7614 24.7981 30.7614H55.9231V36.3471C55.9231 36.6718 56.1237 36.9463 56.3974 37.0713C56.6974 37.1953 57.0221 37.1451 57.2702 36.9208L66.8472 28.0927C66.9967 27.944 67.0952 27.7196 67.0952 27.4943Z\"\n        fill=\"var(--c8y-palette-high)\"\n      />\n    </g>\n    <g\n      tooltip=\"{{ status().pushStatus.tooltip | translate }}\"\n      [delay]=\"500\"\n      container=\"body\"\n      *ngIf=\"!status().maintenanceStatus\"\n    >\n      <path\n        d=\"M45 87C68.196 87 87 68.196 87 45L3 45C3 68.196 21.804 87 45 87Z\"\n        [ngClass]=\"status().pushStatus.class\"\n        class=\"pushStatus\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M23.9048 62.4943C23.9048 62.27 24.0033 62.0702 24.1528 61.9215L33.7298 53.1929C33.9779 52.9922 34.3026 52.9439 34.6026 53.0679C34.9018 53.1929 35.0769 53.4674 35.0769 53.7903V59.3768H66.2019C66.6507 59.3768 67 59.7262 67 60.1749V64.9634C67 65.4121 66.6507 65.7614 66.2019 65.7614H35.0769V71.3471C35.0769 71.6718 34.8763 71.9463 34.6026 72.0713C34.3026 72.1953 33.9779 72.1451 33.7298 71.9208L24.1528 63.0927C24.0033 62.944 23.9048 62.7196 23.9048 62.4943Z\"\n        fill=\"var(--c8y-palette-high)\"\n        style=\"pointer-events: none;\"\n      />\n    </g>\n    <g\n      tooltip=\"{{ status().maintenanceStatus.tooltip | translate }}\"\n      [delay]=\"500\"\n      container=\"body\"\n      *ngIf=\"!!status().maintenanceStatus\"\n    >\n      <path \n        d=\"M45.5 88C68.9721 88 88 68.9721 88 45.5C88 22.0279 68.9721 3 45.5 3C22.0279 3 3 22.0279 3 45.5C3 68.9721 22.0279 88 45.5 88Z\"\n        fill=\"var(--c8y-palette-status-warning)\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M69.7 35.6935C69.7 36.6665 69.346 37.8755 69.021 38.8195C67.163 44.0685 62.119 47.6975 56.544 47.6975C49.259 47.6975 43.33 41.7685 43.33 34.4835C43.33 27.1985 49.259 21.2695 56.544 21.2695C58.698 21.2695 61.499 21.9175 63.299 23.1275C63.593 23.3345 63.77 23.6005 63.77 23.9535C63.77 24.2785 63.563 24.6005 63.299 24.7795L54.656 29.7625V36.3685L60.349 39.5245C61.322 38.9635 68.165 34.6595 68.754 34.6595C69.346 34.6615 69.7 35.1035 69.7 35.6935ZM51 48.5225L30.886 68.6375C30.207 69.3165 29.234 69.7295 28.23 69.7295C27.228 69.7295 26.254 69.3165 25.546 68.6375L22.421 65.4515C21.713 64.7735 21.299 63.8005 21.299 62.7975C21.299 61.7955 21.712 60.8225 22.421 60.1125L42.506 40.0295C44.04 43.8935 47.137 46.9895 51 48.5225ZM32.006 60.9105C32.006 59.8785 31.151 59.0235 30.118 59.0235C29.085 59.0235 28.23 59.8775 28.23 60.9105C28.23 61.9435 29.085 62.7975 30.118 62.7975C31.15 62.7975 32.006 61.9425 32.006 60.9105Z\"\n        fill=\"var(--c8y-palette-high)\"\n        style=\"pointer-events: none;\"\n      />\n    </g>\n\n    <path\n      d=\"M88 45C88 68.7482 68.7482 88 45 88C21.2518 88 2 68.7482 2 45C2 21.2518 21.2518 2 45 2C68.7482 2 88 21.2518 88 45Z\"\n      stroke=\"var(--c8y-root-component-border-color)\"\n      stroke-width=\"4\"\n      stroke-miterlimit=\"10\"\n    />\n  </svg>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { node: [{
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { node: [{
                 type: Input,
                 args: ['mo']
             }], size: [{
@@ -19524,13 +19528,13 @@ class SearchInputComponent {
         this.term = term;
         this.isLoading = term.length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchInputComponent, deps: [{ token: i1$5.Router }, { token: i1$1.InventoryService }, { token: InventorySearchService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SearchInputComponent, 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" }, 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'\"\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' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      title=\"Search\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"true\"\n    >\n      <div\n        class=\"c8y-list__item p-l-24 p-r-24 p-b-8 separator-bottom sticky-top p-t-4\"\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\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=\"p-l-24 p-r-24\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        class=\"p-l-24 p-r-24\"\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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=\"p-l-24 p-r-24\"\n        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block m-0\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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' }\"\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'\"\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'\"\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: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: SearchInputComponent, 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" }, 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'\"\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' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      title=\"Search\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"true\"\n    >\n      <div\n        class=\"c8y-list__item p-b-8 separator-bottom sticky-top p-t-4\"\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\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        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block m-0\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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' }\"\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'\"\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'\"\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: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: DeviceStatusComponent, selector: "device-status, c8y-device-status", inputs: ["mo", "size"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: ShouldShowMoPipe, name: "shouldShowMo" }, { kind: "pipe", type: GetGroupIconPipe, name: "getGroupIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-search-input', template: "<div\n  class=\"dropdown\"\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n  *ngIf=\"mode === 'search'\"\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' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      title=\"Search\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"true\"\n    >\n      <div\n        class=\"c8y-list__item p-l-24 p-r-24 p-b-8 separator-bottom sticky-top p-t-4\"\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\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=\"p-l-24 p-r-24\"\n        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        class=\"p-l-24 p-r-24\"\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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=\"p-l-24 p-r-24\"\n        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block m-0\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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' }\"\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'\"\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'\"\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$5.Router }, { type: i1$1.InventoryService }, { type: InventorySearchService }, { type: i0.ChangeDetectorRef }], propDecorators: { mode: [{
+            args: [{ selector: 'c8y-search-input', template: "<div\n  class=\"dropdown\"\n  #searchDropdown=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  (isOpenChange)=\"onOpenChange($event)\"\n  [cdkTrapFocus]=\"searchDropdown.isOpen\"\n  *ngIf=\"mode === 'search'\"\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' }\"\n    novalidate\n    #searchForm=\"ngForm\"\n  >\n    <c8y-typeahead\n      (onIconClick)=\"onReset($event)\"\n      [icon]=\"term ? 'times' : 'search'\"\n      title=\"Search\"\n      placeholder=\"{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}\"\n      name=\"selected\"\n      [(ngModel)]=\"selected\"\n      (keydown)=\"keyDown($event)\"\n      [allowFreeEntries]=\"false\"\n      [container]=\"container\"\n      [highlightFirstItem]=\"true\"\n    >\n      <div\n        class=\"c8y-list__item p-b-8 separator-bottom sticky-top p-t-4\"\n        *ngIf=\"enableCustomTemplatePlaceholder && mode === 'search'\"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <!-- filter buttons -->\n      <c8y-li\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        *ngIf=\"term.length === 0 && recentSearchResults.length > 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recent search views</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\n        *ngFor=\"let result of term.length === 0 ? recentSearchResults : []\"\n        (click)=\"open($event, result, result.name)\"\n      >\n        <c8y-li-icon>\n          <ng-container *ngIf=\"result | shouldShowMo: deviceType.DEVICE; else group\">\n            <device-status [mo]=\"result\"></device-status>\n          </ng-container>\n          <ng-template #group>\n            <i\n              class=\"c8y-icon-duocolor\"\n              [c8yIcon]=\"result | getGroupIcon | async\"\n            ></i>\n          </ng-template>\n        </c8y-li-icon>\n        {{ result.name || '--' }}\n      </c8y-li>\n\n      <!-- Recently registered devices -->\n      <c8y-li\n        *ngIf=\"\n          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly\n        \"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block\">\n          <span translate>Recently registered devices</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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        *ngIf=\"term.length !== 0\"\n        [selectable]=\"false\"\n      >\n        <div class=\"legend form-block m-0\">\n          <span translate>Search results</span>\n        </div>\n      </c8y-li>\n      <c8y-li\n        class=\"c8y-list__item--link m-l-16 m-r-16\"\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' }\"\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'\"\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'\"\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: [{
                 type: Input
@@ -19736,7 +19740,7 @@ class SelectLegacyComponent {
         return this.searchFilter ? this.labelsForSelectAll.allFiltered : this.labelsForSelectAll.all;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectLegacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectLegacyComponent, selector: "c8y-select-legacy", inputs: { placeholder: "placeholder", selectedLabel: "selectedLabel", applyLabel: "applyLabel", items: "items", selected: "selected", updateItems: "updateItems", disableApplyOnNoSelection: "disableApplyOnNoSelection", addDropdownContainerToBody: "addDropdownContainerToBody" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "preventClick($event)" } }, queries: [{ propertyName: "liChildren", predicate: ListItemComponent }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown fit-w\"\n  container=\"{{ addDropdownContainerToBody ? 'body' : null }}\"\n  (isOpenChange)=\"isOpenChange($event)\"\n  dropdown\n  #dropdown=\"bs-dropdown\"\n  c8yDropdownDirection\n  px-event=\"Select type\"\n  [insideClick]=\"true\"\n>\n  <div class=\"input-group dropdown-toggle\">\n    <div\n      class=\"form-control pointer d-flex inner-scroll\"\n      (click)=\"dropdown.isOpen = !dropdown.isOpen\"\n    >\n      <ng-container *ngIf=\"itemsSelected.size !== items.length; else all\">\n        <em\n          class=\"text-muted\"\n          *ngIf=\"itemsSelected.size === 0\"\n        >\n          {{ placeholder | translate }}\n        </em>\n        <span\n          class=\"tag tag--info chip\"\n          *ngFor=\"let selectedItem of itemsSelected\"\n        >\n          <button\n            class=\"btn btn-xs btn-clean text-10\"\n            title=\"{{ 'Remove' | translate }}\"\n            type=\"button\"\n            (click)=\"deselectItem(selectedItem); $event.stopPropagation()\"\n          >\n            <i [c8yIcon]=\"'times'\"></i>\n          </button>\n          {{ selectedItem.name | nameTransform | translate }}\n        </span>\n      </ng-container>\n      <ng-template #all>\n        {{ 'All`possible options`' | translate }}\n      </ng-template>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default d-flex a-i-center w-auto\"\n        title=\"{{ labelText || placeholder | translate }}\"\n        aria-haspopup=\"true\"\n        dropdownToggle\n      >\n        <i class=\"c8y-glyph-caret icon-16\"></i>\n      </button>\n    </div>\n  </div>\n\n  <ul\n    class=\"dropdown-menu multiselect-container\"\n    *dropdownMenu\n  >\n    <ng-content select=\"c8y-li\"></ng-content>\n    <ng-container *ngIf=\"liChildren.length === 0\">\n      <li\n        class=\"multiselect-item sticky-top\"\n        *ngIf=\"items.length > sizeToShowFilter\"\n      >\n        <div class=\"input-group input-group-search\">\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Filter' | translate }}\u2026\"\n            type=\"search\"\n            (keyup)=\"updateFiltered($event.target.value)\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <span class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"!textFilter\"\n            ></i>\n            <i\n              class=\"text-muted\"\n              c8yIcon=\"times\"\n              *ngIf=\"textFilter\"\n              (click)=\"textFilter = ''\"\n            ></i>\n          </span>\n        </div>\n      </li>\n\n      <li class=\"multiselect-item\">\n        <label\n          class=\"c8y-checkbox input-sm\"\n          [title]=\"getSelectAllToggleStatus().label | translate\"\n          ng-click=\"vm.toggleSelectAll(); $event.preventDefault()\"\n        >\n          <input\n            class=\"m-t-0\"\n            type=\"checkbox\"\n            [checked]=\"getSelectAllToggleStatus().checked\"\n            (change)=\"selectAll($event.target.checked)\"\n            [indeterminate]=\"getSelectAllToggleStatus().indeterminate\"\n          />\n          <span></span>\n          <span class=\"label-text\">\n            {{ getSelectAllToggleStatus().label | translate }}\n          </span>\n        </label>\n      </li>\n\n      <li\n        class=\"multiselect-item\"\n        *ngFor=\"let item of filteredItems\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"item.name | nameTransform | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(item)\"\n            (change)=\"onChangeItem($event.target.checked, item)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">{{ item.name | nameTransform | translate }}</span>\n        </label>\n      </li>\n      <li class=\"divider\"></li>\n      <li class=\"sticky-bottom bg-level-0\">\n        <button\n          class=\"btn btn-primary btn-block\"\n          title=\"{{ applyLabel | translate }}\"\n          [disabled]=\"disableApplyOnNoSelection && isNoItemSelected()\"\n          (click)=\"applyChanges()\"\n        >\n          {{ applyLabel | translate }}\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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: NameTransformPipe, name: "nameTransform" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectLegacyComponent, selector: "c8y-select-legacy", inputs: { placeholder: "placeholder", selectedLabel: "selectedLabel", applyLabel: "applyLabel", items: "items", selected: "selected", updateItems: "updateItems", disableApplyOnNoSelection: "disableApplyOnNoSelection", addDropdownContainerToBody: "addDropdownContainerToBody" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "preventClick($event)" } }, queries: [{ propertyName: "liChildren", predicate: ListItemComponent }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown fit-w\"\n  container=\"{{ addDropdownContainerToBody ? 'body' : null }}\"\n  (isOpenChange)=\"isOpenChange($event)\"\n  dropdown\n  #dropdown=\"bs-dropdown\"\n  c8yDropdownDirection\n  px-event=\"Select type\"\n  [insideClick]=\"true\"\n>\n  <div class=\"input-group dropdown-toggle\">\n    <div\n      class=\"form-control pointer d-flex inner-scroll\"\n      (click)=\"dropdown.isOpen = !dropdown.isOpen\"\n    >\n      <ng-container *ngIf=\"itemsSelected.size !== items.length; else all\">\n        <em\n          class=\"text-muted\"\n          *ngIf=\"itemsSelected.size === 0\"\n        >\n          {{ placeholder | translate }}\n        </em>\n        <span\n          class=\"tag tag--info chip\"\n          *ngFor=\"let selectedItem of itemsSelected\"\n        >\n          <button\n            class=\"btn btn-xs btn-clean text-10\"\n            title=\"{{ 'Remove' | translate }}\"\n            type=\"button\"\n            (click)=\"deselectItem(selectedItem); $event.stopPropagation()\"\n          >\n            <i [c8yIcon]=\"'times'\"></i>\n          </button>\n          {{ selectedItem.name | nameTransform | translate }}\n        </span>\n      </ng-container>\n      <ng-template #all>\n        {{ 'All`possible options`' | translate }}\n      </ng-template>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default d-flex a-i-center w-auto\"\n        title=\"{{ labelText || placeholder | translate }}\"\n        aria-haspopup=\"true\"\n        dropdownToggle\n      >\n        <i class=\"c8y-glyph-caret icon-16\"></i>\n      </button>\n    </div>\n  </div>\n\n  <ul\n    class=\"dropdown-menu multiselect-container\"\n    *dropdownMenu\n  >\n    <ng-content select=\"c8y-li\"></ng-content>\n    <ng-container *ngIf=\"liChildren.length === 0\">\n      <li\n        class=\"multiselect-item sticky-top\"\n        *ngIf=\"items.length > sizeToShowFilter\"\n      >\n        <div class=\"input-group input-group-search\">\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Filter' | translate }}\u2026\"\n            type=\"search\"\n            (keyup)=\"updateFiltered($event.target.value)\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <span class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"!textFilter\"\n            ></i>\n            <i\n              class=\"text-muted\"\n              c8yIcon=\"times\"\n              *ngIf=\"textFilter\"\n              (click)=\"textFilter = ''\"\n            ></i>\n          </span>\n        </div>\n      </li>\n\n      <li class=\"multiselect-item\">\n        <label\n          class=\"c8y-checkbox input-sm\"\n          [title]=\"getSelectAllToggleStatus().label | translate\"\n          ng-click=\"vm.toggleSelectAll(); $event.preventDefault()\"\n        >\n          <input\n            class=\"m-t-0\"\n            type=\"checkbox\"\n            [checked]=\"getSelectAllToggleStatus().checked\"\n            (change)=\"selectAll($event.target.checked)\"\n            [indeterminate]=\"getSelectAllToggleStatus().indeterminate\"\n          />\n          <span></span>\n          <span class=\"label-text\">\n            {{ getSelectAllToggleStatus().label | translate }}\n          </span>\n        </label>\n      </li>\n\n      <li\n        class=\"multiselect-item\"\n        *ngFor=\"let item of filteredItems\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"item.name | nameTransform | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(item)\"\n            (change)=\"onChangeItem($event.target.checked, item)\"\n          />\n          <span></span>\n          <span class=\"m-l-8\">{{ item.name | nameTransform | translate }}</span>\n        </label>\n      </li>\n      <li class=\"divider\"></li>\n      <li class=\"sticky-bottom bg-level-0\">\n        <button\n          class=\"btn btn-primary btn-block\"\n          title=\"{{ applyLabel | translate }}\"\n          [disabled]=\"disableApplyOnNoSelection && isNoItemSelected()\"\n          (click)=\"applyChanges()\"\n        >\n          {{ applyLabel | translate }}\n        </button>\n      </li>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: NameTransformPipe, name: "nameTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectLegacyComponent, decorators: [{
             type: Component,
@@ -20021,7 +20025,7 @@ class ListGroupModule {
             ListItemCheckboxComponent,
             ListItemRadioComponent,
             ListItemTimelineComponent,
-            ListItemDragHandleComponent], imports: [CommonModule, i1$9.CollapseModule, BsDropdownModule, A11yModule], exports: [ListGroupComponent,
+            ListItemDragHandleComponent], imports: [CommonModule, i1$8.CollapseModule, BsDropdownModule, A11yModule], exports: [ListGroupComponent,
             ListItemComponent,
             ListItemIconComponent,
             ListItemBodyComponent,
@@ -20585,7 +20589,7 @@ class CoreSearchModule {
             CommonModule,
             SelectModule,
             ListGroupModule,
-            DeviceStatusModule, i1$5.RouterModule], exports: [SearchOutletComponent,
+            DeviceStatusModule, i1$4.RouterModule], exports: [SearchOutletComponent,
             SearchComponent,
             HighlightComponent,
             SearchResultEmptyComponent,
@@ -20758,7 +20762,7 @@ class UiSettingsComponent {
         return shouldReload;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: UiSettingsComponent, 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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UiSettingsComponent, 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: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UiSettingsComponent, decorators: [{
             type: Component,
@@ -20853,13 +20857,13 @@ class UserTotpSetupComponent {
     close() {
         this.modal.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserTotpSetupComponent, deps: [{ token: i1$1.UserService }, { token: ModalService }, { token: i1$6.BsModalRef }, { token: LoginService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserTotpSetupComponent, deps: [{ token: i1.UserService }, { token: ModalService }, { token: i1$5.BsModalRef }, { token: LoginService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserTotpSetupComponent, selector: "c8y-user-totp-setup", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Set up two-factor authentication' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-phonelink-lock\"></span>\n  </ng-container>\n\n  <c8y-totp-setup></c8y-totp-setup>\n  <c8y-totp-challenge [isModal]=\"true\" (onSuccess)=\"totpSetupVerified()\" (totpUnconfirmedEmitter)=\"close()\"></c8y-totp-challenge>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: TotpChallengeComponent, selector: "c8y-totp-challenge", inputs: ["verify", "loading", "hasError", "isModal"], outputs: ["onSuccess", "totpUnconfirmedEmitter"] }, { kind: "component", type: TotpSetupComponent, selector: "c8y-totp-setup" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserTotpSetupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-user-totp-setup', template: "<c8y-modal\n  [title]=\"'Set up two-factor authentication' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  [customFooter]=\"true\"\n>\n  <ng-container c8y-modal-title>\n    <span class=\"dlt-c8y-icon-phonelink-lock\"></span>\n  </ng-container>\n\n  <c8y-totp-setup></c8y-totp-setup>\n  <c8y-totp-challenge [isModal]=\"true\" (onSuccess)=\"totpSetupVerified()\" (totpUnconfirmedEmitter)=\"close()\"></c8y-totp-challenge>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.UserService }, { type: ModalService }, { type: i1$6.BsModalRef }, { type: LoginService }] });
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: ModalService }, { type: i1$5.BsModalRef }, { type: LoginService }] });
 
 class UserEditComponent {
     set user(u) {
@@ -20946,13 +20950,13 @@ class UserEditComponent {
         const loginOptions = (await this.tenantLoginOptionsService.listForCurrentTenant()).data;
         return loginOptions.some(({ tfaStrategy = '' }) => tfaStrategy.toLowerCase() === 'totp');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserEditComponent, deps: [{ token: AppStateService }, { token: TranslateService }, { token: i1$6.BsModalService }, { token: AlertService }, { token: i1$1.UserService }, { token: i1$1.TenantLoginOptionsService }, { token: i1$1.TenantService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserEditComponent, selector: "c8y-user-edit", inputs: { loading: "loading", user: "user", showProductExperienceOptions: "showProductExperienceOptions", isUsageTrackingEnabled: "isUsageTrackingEnabled", isUserEngagementPreferenceEnabled: "isUserEngagementPreferenceEnabled" }, outputs: { onUser: "onUser", onUsageTrackingChange: "onUsageTrackingChange", onUserEngagementPreferenceChange: "onUserEngagementPreferenceChange", onCancel: "onCancel" }, ngImport: i0, template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$7.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NewPasswordComponent, selector: "c8y-new-password", outputs: ["password"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserEditComponent, deps: [{ token: AppStateService }, { token: TranslateService }, { token: i1$5.BsModalService }, { token: AlertService }, { token: i1.UserService }, { token: i1.TenantLoginOptionsService }, { token: i1.TenantService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserEditComponent, selector: "c8y-user-edit", inputs: { loading: "loading", user: "user", showProductExperienceOptions: "showProductExperienceOptions", isUsageTrackingEnabled: "isUsageTrackingEnabled", isUserEngagementPreferenceEnabled: "isUserEngagementPreferenceEnabled" }, outputs: { onUser: "onUser", onUsageTrackingChange: "onUsageTrackingChange", onUserEngagementPreferenceChange: "onUserEngagementPreferenceChange", onCancel: "onCancel" }, ngImport: i0, template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: PhoneValidationDirective, selector: "[c8yPhoneValidation]" }, { kind: "directive", type: DefaultValidationDirective, selector: "[c8yDefaultValidation]", inputs: ["c8yDefaultValidation"] }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$6.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.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: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NewPasswordComponent, selector: "c8y-new-password", outputs: ["password"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-user-edit', template: "<form #userForm=\"ngForm\" (ngSubmit)=\"userForm.form.valid && save()\">\n  <div class=\"d-block p-24 p-b-0\">\n    <div class=\"alert alert-warning\" role=\"alert\" *ngIf=\"userIsExternal\" translate>\n      Some of the user settings are not editable here because they are managed via your\n      authorization server.\n    </div>\n    <c8y-form-group>\n      <label translate for=\"userName\">Username</label>\n      <input\n        id=\"userName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.userName\"\n        name=\"userName\"\n        autocomplete=\"off\"\n        required\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [disabled]=\"user.id\"\n        c8yDefaultValidation=\"user\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group>\n      <label translate for=\"displayName\">Login alias</label>\n      <input\n        id=\"displayName\"\n        class=\"form-control\"\n        [(ngModel)]=\"user.displayName\"\n        name=\"displayName\"\n        autocomplete=\"off\"\n        maxlength=\"254\"\n        placeholder=\"{{ 'e.g. joe.doe`LOCALIZE`' | translate }}\"\n        [disabled]=\"userIsExternal\"\n        c8yDefaultValidation=\"loginAlias\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group [hasWarning]=\"!user.email\">\n      <label translate for=\"userEmail\">Email</label>\n      <input\n        id=\"userEmail\"\n        class=\"form-control\"\n        type=\"email\"\n        name=\"email\"\n        [maxlength]=\"254\"\n        autocomplete=\"off\"\n        placeholder=\"{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}\"\n        [(ngModel)]=\"user.email\"\n        email\n        [required]=\"true\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <div class=\"row\">\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userFirstName\">First name</label>\n          <input\n            id=\"userFirstName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Joe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"firstName\"\n            [(ngModel)]=\"user.firstName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n      <div class=\"col-sm-6\">\n        <c8y-form-group>\n          <label translate for=\"userLastName\">Last name</label>\n          <input\n            id=\"userLastName\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            placeholder=\"{{ 'e.g. Doe`LOCALIZE`' | translate }}\"\n            maxlength=\"50\"\n            name=\"lastName\"\n            [(ngModel)]=\"user.lastName\"\n            [disabled]=\"userIsExternal\"\n          />\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <c8y-form-group>\n      <label translate for=\"userTelephone\">Telephone</label>\n      <input\n        id=\"userTelephone\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"phone\"\n        maxlength=\"254\"\n        [(ngModel)]=\"user.phone\"\n        placeholder=\"{{ 'e.g. +49 9 876 543 210`LOCALIZE`' | translate }}\"\n        c8yPhoneValidation\n        [required]=\"isPhoneRequired\"\n        [disabled]=\"userIsExternal\"\n      />\n    </c8y-form-group>\n\n    <c8y-form-group class=\"p-t-16 separator-top\" *ngIf=\"showProductExperienceOptions\">\n      <label translate>Product experience</label>\n      <label class=\"c8y-switch\" for=\"productUsageTracking\">\n        <input\n          id=\"productUsageTracking\"\n          name=\"productUsageTracking\"\n          type=\"checkbox\"\n          [(ngModel)]=\"isUsageTrackingEnabled\"\n        />\n        <span></span>\n        {{ 'Enable personalized product experience tracking' | translate }}\n      </label>\n      <ng-container *ngIf=\"isUsageTrackingEnabled\">\n        <label class=\"c8y-switch m-l-0\" for=\"userEngagementPreference\">\n          <input\n            id=\"userEngagementPreference\"\n            name=\"userEngagementPreference\"\n            type=\"checkbox\"\n            [(ngModel)]=\"isUserEngagementPreferenceEnabled\"\n          />\n          <span></span>\n          {{ 'Enable in-product information & communication' | translate }}\n        </label>\n      </ng-container>\n    </c8y-form-group>\n\n    <div class=\"form-group p-t-16 separator-top\" *ngIf=\"!userIsExternal\">\n      <label class=\"control-label\">{{ 'Login options' | translate }}</label>\n      <c8y-new-password (password)=\"onNewPasswordChanged($event)\"></c8y-new-password>\n      <button\n        class=\"btn btn-default\"\n        type=\"button\"\n        title=\"{{ 'Set up two-factor authentication' | translate }}\"\n        (click)=\"setupTotp()\"\n        *ngIf=\"userCanSetupTotp && !userHasActiveTotp && isTfaEnabled\"\n      >\n        {{ 'Set up two-factor authentication' | translate }}\n      </button>\n    </div>\n\n    <c8y-form-group *ngIf=\"!!(state.state$ | async).newsletter\">\n      <label translate>Newsletter</label>\n      <label\n        title=\"{{ 'Send me information about outages, maintenance or updates.' | translate }}\"\n        class=\"c8y-checkbox\"\n      >\n        <input\n          type=\"checkbox\"\n          name=\"newsletter\"\n          [(ngModel)]=\"user.newsletter\"\n          [disabled]=\"userIsExternal\"\n        />\n        <span></span>\n        <span>\n          {{ 'Send me information about outages, maintenance or updates.' | translate }}\n        </span>\n      </label>\n    </c8y-form-group>\n  </div>\n  <div class=\"modal-footer separator-top bg-level-0 sticky-bottom\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      [disabled]=\"!userForm.form.valid || userForm.form.pristine || loading\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: TranslateService }, { type: i1$6.BsModalService }, { type: AlertService }, { type: i1$1.UserService }, { type: i1$1.TenantLoginOptionsService }, { type: i1$1.TenantService }], propDecorators: { loading: [{
+        }], ctorParameters: () => [{ type: AppStateService }, { type: TranslateService }, { type: i1$5.BsModalService }, { type: AlertService }, { type: i1.UserService }, { type: i1.TenantLoginOptionsService }, { type: i1.TenantService }], propDecorators: { loading: [{
                 type: Input
             }], user: [{
                 type: Input
@@ -21109,13 +21113,13 @@ class UserEditModalComponent {
         };
         this.auth.updateCredentials(newCredentials);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserEditModalComponent, deps: [{ token: i1$6.BsModalRef }, { token: i1$1.UserService }, { token: AppStateService }, { token: i1$1.BasicAuth }, { token: i1$1.FetchClient }, { token: AlertService }, { token: UserPreferencesService }, { token: ModalService }, { token: GainsightService }, { token: CookieBannerService }, { token: LoginService }, { token: PasswordService }, { token: UserEngagementsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserEditModalComponent, deps: [{ token: i1$5.BsModalRef }, { token: i1.UserService }, { token: AppStateService }, { token: i1.BasicAuth }, { token: i1.FetchClient }, { token: AlertService }, { token: UserPreferencesService }, { token: ModalService }, { token: GainsightService }, { token: CookieBannerService }, { token: LoginService }, { token: PasswordService }, { token: UserEngagementsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserEditModalComponent, selector: "c8y-user-edit-modal", ngImport: i0, 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    (onUsageTrackingChange)=\"onUsageTrackingChange($event)\"\n    (onUserEngagementPreferenceChange)=\"onUserEngagementPreferenceChange($event)\"\n    (onUser)=\"updateAndClose($event)\"\n    (onCancel)=\"onDismiss()\"\n  ></c8y-user-edit>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: UserEditComponent, selector: "c8y-user-edit", inputs: ["loading", "user", "showProductExperienceOptions", "isUsageTrackingEnabled", "isUserEngagementPreferenceEnabled"], outputs: ["onUser", "onUsageTrackingChange", "onUserEngagementPreferenceChange", "onCancel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserEditModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-user-edit-modal', 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    (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$6.BsModalRef }, { type: i1$1.UserService }, { type: AppStateService }, { type: i1$1.BasicAuth }, { type: i1$1.FetchClient }, { type: AlertService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: LoginService }, { type: PasswordService }, { type: UserEngagementsService }] });
+        }], ctorParameters: () => [{ type: i1$5.BsModalRef }, { type: i1.UserService }, { type: AppStateService }, { type: i1.BasicAuth }, { type: i1.FetchClient }, { type: AlertService }, { type: UserPreferencesService }, { type: ModalService }, { type: GainsightService }, { type: CookieBannerService }, { type: LoginService }, { type: PasswordService }, { type: UserEngagementsService }] });
 
 /**
  * The angular module definition for the login.
@@ -21194,13 +21198,13 @@ class UserMenuOutletComponent {
     async logout() {
         await this.loginService.logout();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserMenuOutletComponent, deps: [{ token: AppStateService }, { token: i1$6.BsModalService }, { token: LoginService }, { token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserMenuOutletComponent, deps: [{ token: AppStateService }, { token: i1$5.BsModalService }, { token: LoginService }, { token: UserMenuService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserMenuOutletComponent, selector: "c8y-user-menu-outlet", ngImport: i0, template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n", dependencies: [{ kind: "directive", type: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UserMenuItemComponent, selector: "c8y-user-menu-item", inputs: ["icon", "label", "link", "target", "priority", "dataCy"], outputs: ["click"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserMenuOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-user-menu-outlet', template: "<ng-container *ngIf=\"items$ | async as items\">\n  <div\n    class=\"p-t-8 p-b-8\"\n    *ngIf=\"items.length\"\n  >\n    <ul class=\"list-unstyled m-b-0\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container *ngIf=\"item.template\">\n          <ng-container *c8yOutlet=\"item.template\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!item.template\">\n          <li>\n            <button\n              class=\"c8y-right-drawer__link\"\n              [attr.aria-label]=\"item.label | translate\"\n              [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n              type=\"button\"\n              (click)=\"item.click()\"\n              [attr.href]=\"item.link\"\n              [attr.target]=\"item.target\"\n            >\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ng-container>\n    </ul>\n  </div>\n</ng-container>\n\n<!-- the default items -->\n<c8y-user-menu-item\n  [icon]=\"'user-menu-male'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'User settings' | translate\"\n  [priority]=\"20\"\n  [dataCy]=\"'user-menu-user-settings-button'\"\n  (click)=\"editUser()\"\n></c8y-user-menu-item>\n<c8y-user-menu-item\n  [icon]=\"'sign-out'\"\n  *ngIf=\"(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'\"\n  [label]=\"'Logout' | translate\"\n  [dataCy]=\"'user-menu-logout-button'\"\n  (click)=\"logout()\"\n></c8y-user-menu-item>\n" }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: i1$6.BsModalService }, { type: LoginService }, { type: UserMenuService }, { type: HeaderService }] });
+        }], ctorParameters: () => [{ type: AppStateService }, { type: i1$5.BsModalService }, { type: LoginService }, { type: UserMenuService }, { type: HeaderService }] });
 
 class UserTotpRevokeComponent {
     constructor(users, alert) {
@@ -21218,13 +21222,13 @@ class UserTotpRevokeComponent {
             this.alert.addServerFailure(e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserTotpRevokeComponent, deps: [{ token: i1$1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserTotpRevokeComponent, deps: [{ token: i1.UserService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserTotpRevokeComponent, selector: "c8y-user-totp-revoke", inputs: { user: "user" }, outputs: { revokeEmitter: "revoke" }, ngImport: i0, template: "<button\n  class=\"btn btn-default\"\n  type=\"button\"\n  [popoverTitle]=\"'Revoke TOTP secret' | translate\"\n  [popover]=\"confirm\"\n  #popover=\"bs-popover\"\n  placement=\"bottom\"\n>\n  <i c8yIcon=\"key\"></i>\n  {{ 'Revoke TOTP secret' | translate }}\n</button>\n\n<ng-template #confirm>\n  <p class=\"m-b-16\" translate>\n    This action will revoke the user's stored TOTP secret which will require a new setup.\n  </p>\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    title=\"{{ 'Cancel' | translate }}\"\n    (click)=\"popover.hide()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    class=\"btn btn-danger\"\n    type=\"button\"\n    title=\"{{ 'Revoke' | translate }}\"\n    (click)=\"revoke(); popover.hide()\"\n    translate\n  >\n    Revoke\n  </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$4.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserTotpRevokeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-user-totp-revoke', template: "<button\n  class=\"btn btn-default\"\n  type=\"button\"\n  [popoverTitle]=\"'Revoke TOTP secret' | translate\"\n  [popover]=\"confirm\"\n  #popover=\"bs-popover\"\n  placement=\"bottom\"\n>\n  <i c8yIcon=\"key\"></i>\n  {{ 'Revoke TOTP secret' | translate }}\n</button>\n\n<ng-template #confirm>\n  <p class=\"m-b-16\" translate>\n    This action will revoke the user's stored TOTP secret which will require a new setup.\n  </p>\n  <button\n    class=\"btn btn-default\"\n    type=\"button\"\n    title=\"{{ 'Cancel' | translate }}\"\n    (click)=\"popover.hide()\"\n    translate\n  >\n    Cancel\n  </button>\n  <button\n    class=\"btn btn-danger\"\n    type=\"button\"\n    title=\"{{ 'Revoke' | translate }}\"\n    (click)=\"revoke(); popover.hide()\"\n    translate\n  >\n    Revoke\n  </button>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.UserService }, { type: AlertService }], propDecorators: { user: [{
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: AlertService }], propDecorators: { user: [{
                 type: Input
             }], revokeEmitter: [{
                 type: Output,
@@ -21295,7 +21299,7 @@ class UserRolesListPipe {
         }
         return groupNames.join(', ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRolesListPipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRolesListPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: UserRolesListPipe, name: "userRolesList" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRolesListPipe, decorators: [{
@@ -21303,7 +21307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     name: 'userRolesList'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 class UserDetailsDrawerComponent {
     constructor(appState, headerService) {
@@ -21653,13 +21657,13 @@ class PlatformDetailsService {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PlatformDetailsService, deps: [{ token: VersionService }, { token: AppStateService }, { token: i1$1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PlatformDetailsService, deps: [{ token: VersionService }, { token: AppStateService }, { token: i1.ApplicationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PlatformDetailsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PlatformDetailsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: i1$1.ApplicationService }] });
+        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: i1.ApplicationService }] });
 
 class VersionListComponent {
     constructor(version, appState, clipboardService, modalService, platformDetails, headerService) {
@@ -21682,13 +21686,13 @@ class VersionListComponent {
     copyIt(text) {
         this.clipboardService.writeText(text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: VersionListComponent, deps: [{ token: VersionService }, { token: AppStateService }, { token: ClipboardService }, { token: i1$6.BsModalService }, { token: PlatformDetailsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: VersionListComponent, deps: [{ token: VersionService }, { token: AppStateService }, { token: ClipboardService }, { token: i1$5.BsModalService }, { token: PlatformDetailsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: VersionListComponent, selector: "c8y-version-list", 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=\"c8y-cumulocity-iot\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        translate\n        (click)=\"downloadPlatformDetails()\"\n      >\n        Download platform details\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: VersionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-version-list', template: "<div class=\"separator-top p-t-8 p-b-8\">\n  <div class=\"c8y-right-drawer__item sticky-top\">\n    <i c8yIcon=\"c8y-cumulocity-iot\"></i>\n    <span class=\"text-bold\">{{ 'Platform info' | translate }}</span>\n  </div>\n\n  <ul class=\"list-unstyled\">\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngIf=\"currentTenantId$ | async as tenantId\"\n    >\n      <span\n        class=\"flex-grow text-muted m-0 text-12 text-truncate\"\n        translate\n      >\n        Tenant ID\n      </span>\n      <button\n        class=\"m-l-auto flex-no-shrink btn-clean p-0 btn-link\"\n        title=\"{{ 'Copy tenant ID to the clipboard' | translate }}\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); copyIt(tenantId)\"\n      >\n        {{ tenantId }}\n        <i\n          class=\"text-14 m-0\"\n          [c8yIcon]=\"'clipboard'\"\n        ></i>\n      </button>\n    </li>\n    <li\n      class=\"c8y-right-drawer__item\"\n      *ngFor=\"let versionEntry of versionsToDirectlyDisplay$ | async\"\n    >\n      <span\n        class=\"flex-no-shrink text-muted text-12 text-truncate m-r-8\"\n        [title]=\"versionEntry.label | translate\"\n      >\n        {{ versionEntry.label | translate }}\n      </span>\n      <span\n        class=\"flex-grow text-right text-truncate\"\n        [title]=\"versionEntry.version | translate\"\n      >\n        {{ versionEntry.version }}\n      </span>\n    </li>\n    <li class=\"c8y-right-drawer__item\">\n      <button\n        class=\"btn btn-default btn-sm\"\n        [attr.tabindex]=\"(open$ | async) ? '0' : '-1'\"\n        title=\"{{ 'Download platform details' | translate }}\"\n        translate\n        (click)=\"downloadPlatformDetails()\"\n      >\n        Download platform details\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$6.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
+        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$5.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
 
 class VersionDrawerFactory {
     constructor(options) {
@@ -21935,7 +21939,7 @@ class HeaderModule {
             ActionModule,
             BreadcrumbModule,
             NavigatorModule,
-            VersionModule, i2$3.TooltipModule, i1$9.CollapseModule, ProductExperienceModule,
+            VersionModule, i2$3.TooltipModule, i1$8.CollapseModule, ProductExperienceModule,
             DrawerModule,
             UiSettingsModule], exports: [HeaderBarComponent, TitleComponent, TitleOutletComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HeaderModule, imports: [ApplicationModule,
@@ -22279,8 +22283,8 @@ class ConditionalTabsOutletComponent {
         this.endSubscriptions$.next();
         this.endSubscriptions$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConditionalTabsOutletComponent, deps: [{ token: TabsService }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ConditionalTabsOutletComponent, selector: "c8y-conditional-tabs-outlet", ngImport: i0, template: ` <router-outlet></router-outlet> `, isInline: true, dependencies: [{ kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConditionalTabsOutletComponent, deps: [{ token: TabsService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ConditionalTabsOutletComponent, selector: "c8y-conditional-tabs-outlet", ngImport: i0, template: ` <router-outlet></router-outlet> `, isInline: true, dependencies: [{ kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConditionalTabsOutletComponent, decorators: [{
             type: Component,
@@ -22288,11 +22292,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     selector: 'c8y-conditional-tabs-outlet',
                     template: ` <router-outlet></router-outlet> `
                 }]
-        }], ctorParameters: () => [{ type: TabsService }, { type: i1$5.Router }] });
+        }], ctorParameters: () => [{ type: TabsService }, { type: i1$4.Router }] });
 
 class TabsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TabsModule, declarations: [ConditionalTabsOutletComponent, TabsOutletComponent, TabComponent], imports: [CommonModule, i1$5.RouterModule, i2$3.TooltipModule, HeaderModule], exports: [ConditionalTabsOutletComponent, TabsOutletComponent, TabComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TabsModule, declarations: [ConditionalTabsOutletComponent, TabsOutletComponent, TabComponent], imports: [CommonModule, i1$4.RouterModule, i2$3.TooltipModule, HeaderModule], exports: [ConditionalTabsOutletComponent, TabsOutletComponent, TabComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsModule, imports: [CommonModule, RouterModule$1.forChild([]), TooltipModule.forRoot(), HeaderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsModule, decorators: [{
@@ -22473,13 +22477,13 @@ class BottomDrawerService {
     openDrawer(component, options) {
         return new BottomDrawerRef(component, this.applicationRef, this.router, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BottomDrawerService, deps: [{ token: i0.ApplicationRef }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BottomDrawerService, deps: [{ token: i0.ApplicationRef }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BottomDrawerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BottomDrawerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i1$5.Router }] });
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i1$4.Router }] });
 
 class NavigatorTopComponent {
     constructor(ui) {
@@ -22892,13 +22896,13 @@ class DropAreaComponent {
         }
         resolve(reader.result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FilesService }, { token: i1$2.TranslateService }, { token: BytesPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", 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 }\"\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 *ngIf=\"!errors\">\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\"\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: "18.2.9", ngImport: i0, type: DropAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-drop-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }], standalone: true, imports: [CommonModule, C8yTranslatePipe, NgIf, NgClass, IconDirective], 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 }\"\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 *ngIf=\"!errors\">\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\"\n/>\n<div\n  #area\n  [hidden]=\"isOver || loading\"\n  (dragover)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FilesService }, { type: i1$2.TranslateService }, { type: BytesPipe }, { type: i0.ElementRef }], propDecorators: { formControl: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FilesService }, { type: i1$1.TranslateService }, { type: BytesPipe }, { type: i0.ElementRef }], propDecorators: { formControl: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -23037,7 +23041,7 @@ class FilePickerComponent {
         return !isEmpty(this.fileUrlPopover);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FilePickerComponent, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    title=\"{{ 'Provide a file path' | translate }}\"\n    class=\"c8y-radio radio-inline m-l-8\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$7.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$7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$4.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FilePickerComponent, selector: "c8y-file-picker", inputs: { maxAllowedFiles: "maxAllowedFiles", uploadChoice: "uploadChoice", fileUrl: "fileUrl", fileBinary: "fileBinary", config: "config", filePickerIndex: "filePickerIndex", fileUrlPopover: "fileUrlPopover" }, outputs: { onFilesPicked: "onFilesPicked" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <label title=\"{{ 'Upload a binary' | translate }}\" class=\"c8y-radio radio-inline\">\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadBinary\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearInputFromUrl()\"\n    />\n    <span></span>\n    <span>{{ 'Upload a binary' | translate }}</span>\n  </label>\n  <label\n    title=\"{{ 'Provide a file path' | translate }}\"\n    class=\"c8y-radio radio-inline m-l-8\"\n    data-cy=\"file-picker--file-path-input\"\n  >\n    <input\n      #radio\n      type=\"radio\"\n      value=\"uploadUrl\"\n      name=\"uploadChoice-{{filePickerIndex}}\"\n      [(ngModel)]=\"uploadChoice\"\n      (click)=\"clearSelectedFiles()\"\n    />\n    <span></span>\n    <span>\n      {{ 'Provide a file path' | translate }}\n    </span>\n    <button\n      class=\"btn-help\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      popover=\"{{ fileUrlPopover | translate }}\"\n      placement=\"top\"\n      triggers=\"focus\"\n      container=\"body\"\n      placement=\"top\"\n      *ngIf=\"isPopoverUsed()\"\n    ></button>\n  </label>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadBinary'\">\n  <c8y-form-group class=\"m-0\">\n    <c8y-drop-area\n      class=\"drop-area-sm\"\n      (dropped)=\"onFileDropped($event)\"\n      [title]=\"'Drop file or click to browse' | translate\"\n      [attr.aria-label]=\"'Drop file or click to browse' | translate\"\n      [maxAllowedFiles]=\"maxAllowedFiles\"\n      [files]=\"droppedFiles\"\n    ></c8y-drop-area>\n  </c8y-form-group>\n</div>\n\n<div [hidden]=\"uploadChoice !== 'uploadUrl'\">\n  <c8y-form-group class=\"m-0\">\n    <div class=\"m-b-4 p-b-8\">\n      <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n          <i c8yIcon=\"globe\"></i>\n        </span>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"fileUrl\"\n          data-cy=\"file-picker--fileUrl\"\n          [(ngModel)]=\"fileUrl\"\n          (ngModelChange)=\"onFileUrlChange($event)\"\n          placeholder=\"{{ 'e.g.' | translate }} http://example.com/binary.zip\"\n          maxlength=\"{{ config.maxlength }}\"\n          required\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$6.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$6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$4.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilePickerComponent, decorators: [{
             type: Component,
@@ -23751,7 +23755,7 @@ class DatePickerComponent {
         this.dateTo = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatePickerComponent, selector: "c8y-date-picker", inputs: { placeholder: "placeholder" }, 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 }\"\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 }\"\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: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DatePickerComponent, selector: "c8y-date-picker", inputs: { placeholder: "placeholder" }, 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 }\"\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 }\"\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: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -23864,7 +23868,7 @@ class RouterTabsResolver {
         }
         return guards;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterTabsResolver, deps: [{ token: i0.Injector }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterTabsResolver, deps: [{ token: i0.Injector }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterTabsResolver, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterTabsResolver, decorators: [{
@@ -23872,7 +23876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }] });
 
 class ViewContextServices {
     static { this.services = {
@@ -24032,7 +24036,7 @@ class ContextRouteService {
         }
         return {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteService, deps: [{ token: RouterTabsResolver }, { token: TabsService }, { token: i1$5.Router }, { token: i1.ApiService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteService, deps: [{ token: RouterTabsResolver }, { token: TabsService }, { token: i1$4.Router }, { token: i4.ApiService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteService, decorators: [{
@@ -24040,7 +24044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: RouterTabsResolver }, { type: TabsService }, { type: i1$5.Router }, { type: i1.ApiService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: RouterTabsResolver }, { type: TabsService }, { type: i1$4.Router }, { type: i4.ApiService }, { type: i0.Injector }] });
 
 /**
  * A hook to use for Multi Provider extension.
@@ -24173,7 +24177,7 @@ class RouterService extends ExtensionPointWithoutStateForPlugins {
             this.addRoute(routeWithInjector);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: ContextRouteService }, { token: PluginsResolveService }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: ContextRouteService }, { token: PluginsResolveService }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RouterService, decorators: [{
@@ -24181,7 +24185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: ContextRouteService }, { type: PluginsResolveService }, { type: OptionsService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: ContextRouteService }, { type: PluginsResolveService }, { type: OptionsService }] });
 
 class ContextRouteComponent {
     constructor(route, contextRouteService) {
@@ -24197,13 +24201,13 @@ class ContextRouteComponent {
     refreshTabs() {
         this.contextRouteService.refreshContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ContextRouteComponent, selector: "c8y-context-route", ngImport: i0, template: "<router-outlet></router-outlet>\n", dependencies: [{ kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ContextRouteComponent, selector: "c8y-context-route", ngImport: i0, template: "<router-outlet></router-outlet>\n", dependencies: [{ kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-context-route', template: "<router-outlet></router-outlet>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: ContextRouteService }] });
+        }], ctorParameters: () => [{ type: i1$4.ActivatedRoute }, { type: ContextRouteService }] });
 
 class ContextRouteGuard {
     constructor(injector) {
@@ -24230,7 +24234,7 @@ class ContextRouteGuard {
         const cache = this.getCache(service);
         let cached = cache[id];
         if (!cached) {
-            const params = service instanceof InventoryService$1 ? { withChildren: false } : undefined;
+            const params = service instanceof InventoryService ? { withChildren: false } : undefined;
             cached = from(service.detail(id, params)).pipe(map(({ data }) => data), shareReplay(1));
             cache[id] = cached;
         }
@@ -24468,7 +24472,7 @@ class HelpAndSupportOutletComponent {
         this.drawerOpen$ = this.headerService.rightDrawerOpen$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpAndSupportOutletComponent, deps: [{ token: DocsService }, { token: AppStateService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: HelpAndSupportOutletComponent, selector: "c8y-help-and-support-outlet", ngImport: i0, template: "<ng-container *ngIf=\"helpAndSupport$ | async as helpAndSupport\">\n  <div\n    class=\"separator-top p-t-8 p-b-8\"\n    *ngIf=\"(appState$ | async).showRightDrawer && helpAndSupport.length\"\n  >\n    <button\n      class=\"c8y-right-drawer__link sticky-top\"\n      [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n      [attr.aria-expanded]=\"documentationOpen\"\n      [attr.aria-controls]=\"'collapseDocs'\"\n      type=\"button\"\n      (click)=\"documentationOpen = !documentationOpen\"\n    >\n      <i c8yIcon=\"book-shelf\"></i>\n      <span class=\"text-bold\">{{ 'Documentation' | translate }}</span>\n      <i\n        class=\"m-l-auto\"\n        c8yIcon=\"angle-down\"\n        [ngClass]=\"{ 'icon-rotate-180': documentationOpen }\"\n      ></i>\n    </button>\n    <div\n      class=\"collapse\"\n      id=\"collapseDocs\"\n      [collapse]=\"!documentationOpen\"\n      [isAnimated]=\"true\"\n      #documentationCol=\"bs-collapse\"\n    >\n      <ng-container *ngFor=\"let link of helpAndSupport\">\n        <ng-container *ngIf=\"link.component\">\n          <ng-container *c8yComponentOutlet=\"link.component; environmentInjector: link.injector\"></ng-container>\n        </ng-container>\n        <a\n          class=\"c8y-right-drawer__link\"\n          title=\"{{ link.label | translate }}\"\n          [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n          type=\"button\"\n          target=\"_blank\"\n          *ngIf=\"!link.component\"\n          rel=\"noopener noreferrer\"\n          [href]=\"link.url\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n            action: link.label\n          }\"\n        >\n          <span\n            class=\"text-truncate text-12\"\n            title=\"{{ link.label | translate }}\"\n          >\n            {{ link.label | translate }}\n          </span>\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: HelpAndSupportOutletComponent, selector: "c8y-help-and-support-outlet", ngImport: i0, template: "<ng-container *ngIf=\"helpAndSupport$ | async as helpAndSupport\">\n  <div\n    class=\"separator-top p-t-8 p-b-8\"\n    *ngIf=\"(appState$ | async).showRightDrawer && helpAndSupport.length\"\n  >\n    <button\n      class=\"c8y-right-drawer__link sticky-top\"\n      [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n      [attr.aria-expanded]=\"documentationOpen\"\n      [attr.aria-controls]=\"'collapseDocs'\"\n      type=\"button\"\n      (click)=\"documentationOpen = !documentationOpen\"\n    >\n      <i c8yIcon=\"book-shelf\"></i>\n      <span class=\"text-bold\">{{ 'Documentation' | translate }}</span>\n      <i\n        class=\"m-l-auto\"\n        c8yIcon=\"angle-down\"\n        [ngClass]=\"{ 'icon-rotate-180': documentationOpen }\"\n      ></i>\n    </button>\n    <div\n      class=\"collapse\"\n      id=\"collapseDocs\"\n      [collapse]=\"!documentationOpen\"\n      [isAnimated]=\"true\"\n      #documentationCol=\"bs-collapse\"\n    >\n      <ng-container *ngFor=\"let link of helpAndSupport\">\n        <ng-container *ngIf=\"link.component\">\n          <ng-container *c8yComponentOutlet=\"link.component; environmentInjector: link.injector\"></ng-container>\n        </ng-container>\n        <a\n          class=\"c8y-right-drawer__link\"\n          title=\"{{ link.label | translate }}\"\n          [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n          type=\"button\"\n          target=\"_blank\"\n          *ngIf=\"!link.component\"\n          rel=\"noopener noreferrer\"\n          [href]=\"link.url\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n            action: link.label\n          }\"\n        >\n          <span\n            class=\"text-truncate text-12\"\n            title=\"{{ link.label | translate }}\"\n          >\n            {{ link.label | translate }}\n          </span>\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$8.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpAndSupportOutletComponent, decorators: [{
             type: Component,
@@ -24562,13 +24566,13 @@ class SupportOutletComponent {
         const currentUserResult = await this.userService.current();
         this.ui.currentUser.next(currentUserResult.data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SupportOutletComponent, deps: [{ token: AppStateService }, { token: OptionsService }, { token: ModalService }, { token: i1$2.TranslateService }, { token: i1$1.TenantService }, { token: AlertService }, { token: i1$1.UserService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SupportOutletComponent, selector: "c8y-support-outlet", ngImport: i0, template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    [ngClass]=\"{'separator-top': !isCollapsible}\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SupportOutletComponent, deps: [{ token: AppStateService }, { token: OptionsService }, { token: ModalService }, { token: i1$1.TranslateService }, { token: i1.TenantService }, { token: AlertService }, { token: i1.UserService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SupportOutletComponent, selector: "c8y-support-outlet", ngImport: i0, template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    [ngClass]=\"{'separator-top': !isCollapsible}\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$8.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SupportOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-support-outlet', template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    [ngClass]=\"{'separator-top': !isCollapsible}\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: AppStateService }, { type: OptionsService }, { type: ModalService }, { type: i1$2.TranslateService }, { type: i1$1.TenantService }, { type: AlertService }, { type: i1$1.UserService }, { type: HeaderService }] });
+        }], ctorParameters: () => [{ type: AppStateService }, { type: OptionsService }, { type: ModalService }, { type: i1$1.TranslateService }, { type: i1.TenantService }, { type: AlertService }, { type: i1.UserService }, { type: HeaderService }] });
 
 class SupportOutletModule {
     static providers() {
@@ -24753,7 +24757,7 @@ class FieldCheckbox extends FieldType {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldCheckbox, 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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$4.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: i1$7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵ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: "18.2.9", type: FieldCheckbox, 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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2$4.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: i1$6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵ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: "18.2.9", ngImport: i0, type: FieldCheckbox, decorators: [{
             type: Component,
@@ -24770,7 +24774,7 @@ const fieldDateTypeConfig = () => importProvidersFrom(FormlyModule.forChild({
 }));
 class FieldDate extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldDate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldDate, 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: 'YYYY-MM-DD' }\"\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.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: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { 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: "18.2.9", type: FieldDate, 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: 'YYYY-MM-DD' }\"\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.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: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldDate, decorators: [{
             type: Component,
@@ -24818,7 +24822,7 @@ class FieldFile extends FieldType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldFile, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldFile, selector: "c8y-field-file", viewQueries: [{ propertyName: "dropArea", first: true, predicate: ["dropArea"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"form-group\"\n  [attr.aria-labelledby]=\"id + '-fieldset'\"\n  role=\"group\"\n>\n  <label\n    id=\"{{ id + '-fieldset' }}\"\n    *ngIf=\"to.label || to.description\"\n  >\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm\"\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  </label>\n  <c8y-drop-area\n    class=\"drop-area-sm\"\n    #dropArea\n    [formControl]=\"formControl\"\n    (dropped)=\"droppedEvent($event)\"\n  ></c8y-drop-area>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.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: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { 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: "18.2.9", type: FieldFile, selector: "c8y-field-file", viewQueries: [{ propertyName: "dropArea", first: true, predicate: ["dropArea"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"form-group\"\n  [attr.aria-labelledby]=\"id + '-fieldset'\"\n  role=\"group\"\n>\n  <label\n    id=\"{{ id + '-fieldset' }}\"\n    *ngIf=\"to.label || to.description\"\n  >\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm\"\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  </label>\n  <c8y-drop-area\n    class=\"drop-area-sm\"\n    #dropArea\n    [formControl]=\"formControl\"\n    (dropped)=\"droppedEvent($event)\"\n  ></c8y-drop-area>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.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: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldFile, decorators: [{
             type: Component,
@@ -24886,7 +24890,7 @@ class FieldInput extends FieldType {
         return this.to.type || 'text';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldInput, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.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$7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldInput, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.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$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
@@ -24925,7 +24929,7 @@ class FieldRadio extends FieldType {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldRadio, 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$7.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$7.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: i5$1.FormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldRadio, 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.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$6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: i5$1.FormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldRadio, decorators: [{
             type: Component,
@@ -25132,7 +25136,7 @@ class DateTimePickerComponent {
                 useExisting: forwardRef(() => DateTimePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: BsDatepickerDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"datetime-picker\"\n  [ngSwitch]=\"dateType\"\n>\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'DateAndTime'\"\n    [closeDatepicker]=\"datepicker\"\n  >\n    <div class=\"form-group datepicker {{ size ? 'form-group-' + size : '' }}\">\n      <input\n        class=\"form-control\"\n        [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n        bsDatepicker\n        [outsideClick]=\"false\"\n        [bsConfig]=\"{\n          customTodayClass: 'today',\n          dateInputFormat: dateInputFormat,\n          adaptivePosition: adaptivePosition\n        }\"\n        [formControl]=\"form.get('date')\"\n        (blur)=\"onTouched()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n      />\n    </div>\n    <timepicker\n      class=\"form-group {{ size ? 'form-group-' + size : '' }}\"\n      [formControl]=\"form.get('time')\"\n      [showSeconds]=\"config.showSeconds\"\n      [showSpinners]=\"config.showSpinners\"\n      [showMeridian]=\"config.showMeridian\"\n      (wheel)=\"handleMouseWheel($event)\"\n    ></timepicker>\n  </div>\n\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'Date'\"\n    [closeDatepicker]=\"datepicker\"\n  >\n    <div class=\"form-group datepicker {{ size ? 'form-group-' + size : '' }}\">\n      <input\n        class=\"form-control\"\n        [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n        bsDatepicker\n        [outsideClick]=\"false\"\n        [bsConfig]=\"{\n          customTodayClass: 'today',\n          dateInputFormat: dateInputFormat,\n          adaptivePosition: adaptivePosition\n        }\"\n        [formControl]=\"form.get('date')\"\n        (blur)=\"onTouched()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n      />\n    </div>\n  </div>\n\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'DateRange'\"\n  >\n    <div class=\"form-group datepicker {{ size ? 'form-group-' + size : '' }}\">\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'Select a date range' | translate }}\"\n        [formControl]=\"form.get('date')\"\n        [bsConfig]=\"{\n          customTodayClass: 'today',\n          adaptivePosition: true,\n          rangeInputFormat: dateInputFormat\n        }\"\n        bsDaterangepicker\n      />\n    </div>\n  </div>\n\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'Time'\"\n  >\n    <timepicker\n      class=\"form-group {{ size ? 'form-group-' + size : '' }}\"\n      [formControl]=\"form.get('time')\"\n      [showSeconds]=\"config.showSeconds\"\n      [showSpinners]=\"config.showSpinners\"\n      [showMeridian]=\"config.showMeridian\"\n      [minutesPlaceholder]=\"'MM`MINUTES`' | translate\"\n      [hoursPlaceholder]=\"'HH`HOURS`' | translate\"\n      [secondsPlaceholder]=\"'SS`SECONDS`' | translate\"\n      (wheel)=\"handleMouseWheel($event)\"\n    ></timepicker>\n  </div>\n\n  <div *ngSwitchCase=\"'SingleDateRequired'\">\n    <div class=\"form-group {{ size ? 'form-group-' + size : '' }}\">\n      <c8y-date-picker (onDateSelected)=\"onDateSelected.emit($event)\"></c8y-date-picker>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i3.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }, { kind: "component", type: i4.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: DatePickerComponent, selector: "c8y-date-picker", inputs: ["placeholder"], outputs: ["onDateSelected"] }, { kind: "directive", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: ["closeDatepicker"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: BsDatepickerDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"datetime-picker\"\n  [ngSwitch]=\"dateType\"\n>\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'DateAndTime'\"\n    [closeDatepicker]=\"datepicker\"\n  >\n    <div class=\"form-group datepicker {{ size ? 'form-group-' + size : '' }}\">\n      <input\n        class=\"form-control\"\n        [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n        bsDatepicker\n        [outsideClick]=\"false\"\n        [bsConfig]=\"{\n          customTodayClass: 'today',\n          dateInputFormat: dateInputFormat,\n          adaptivePosition: adaptivePosition\n        }\"\n        [formControl]=\"form.get('date')\"\n        (blur)=\"onTouched()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n      />\n    </div>\n    <timepicker\n      class=\"form-group {{ size ? 'form-group-' + size : '' }}\"\n      [formControl]=\"form.get('time')\"\n      [showSeconds]=\"config.showSeconds\"\n      [showSpinners]=\"config.showSpinners\"\n      [showMeridian]=\"config.showMeridian\"\n      (wheel)=\"handleMouseWheel($event)\"\n    ></timepicker>\n  </div>\n\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'Date'\"\n    [closeDatepicker]=\"datepicker\"\n  >\n    <div class=\"form-group datepicker {{ size ? 'form-group-' + size : '' }}\">\n      <input\n        class=\"form-control\"\n        [placeholder]=\"placeholder || defaultPlaceholder | translate\"\n        bsDatepicker\n        [outsideClick]=\"false\"\n        [bsConfig]=\"{\n          customTodayClass: 'today',\n          dateInputFormat: dateInputFormat,\n          adaptivePosition: adaptivePosition\n        }\"\n        [formControl]=\"form.get('date')\"\n        (blur)=\"onTouched()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n      />\n    </div>\n  </div>\n\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'DateRange'\"\n  >\n    <div class=\"form-group datepicker {{ size ? 'form-group-' + size : '' }}\">\n      <input\n        class=\"form-control\"\n        placeholder=\"{{ 'Select a date range' | translate }}\"\n        [formControl]=\"form.get('date')\"\n        [bsConfig]=\"{\n          customTodayClass: 'today',\n          adaptivePosition: true,\n          rangeInputFormat: dateInputFormat\n        }\"\n        bsDaterangepicker\n      />\n    </div>\n  </div>\n\n  <div\n    class=\"d-contents\"\n    *ngSwitchCase=\"'Time'\"\n  >\n    <timepicker\n      class=\"form-group {{ size ? 'form-group-' + size : '' }}\"\n      [formControl]=\"form.get('time')\"\n      [showSeconds]=\"config.showSeconds\"\n      [showSpinners]=\"config.showSpinners\"\n      [showMeridian]=\"config.showMeridian\"\n      [minutesPlaceholder]=\"'MM`MINUTES`' | translate\"\n      [hoursPlaceholder]=\"'HH`HOURS`' | translate\"\n      [secondsPlaceholder]=\"'SS`SECONDS`' | translate\"\n      (wheel)=\"handleMouseWheel($event)\"\n    ></timepicker>\n  </div>\n\n  <div *ngSwitchCase=\"'SingleDateRequired'\">\n    <div class=\"form-group {{ size ? 'form-group-' + size : '' }}\">\n      <c8y-date-picker (onDateSelected)=\"onDateSelected.emit($event)\"></c8y-date-picker>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i3.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }, { kind: "component", type: i4$1.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: DatePickerComponent, selector: "c8y-date-picker", inputs: ["placeholder"], outputs: ["onDateSelected"] }, { kind: "directive", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: ["closeDatepicker"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -25184,7 +25188,7 @@ const fieldDateTimeTypeConfig = () => importProvidersFrom(FormlyModule.forChild(
 }));
 class FieldDateTime extends FieldType {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldDateTime, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldDateTime, selector: "c8y-field-date-time", usesInheritance: true, ngImport: i0, template: "<c8y-date-time-picker\n  [minDate]=\"to.minDate\"\n  [maxDate]=\"to.maxDate\"\n  [placeholder]=\"(to.placeholder | translate)\"\n  [formControl]=\"formControl\"\n></c8y-date-time-picker>\n", dependencies: [{ kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FieldDateTime, selector: "c8y-field-date-time", usesInheritance: true, ngImport: i0, template: "<c8y-date-time-picker\n  [minDate]=\"to.minDate\"\n  [maxDate]=\"to.maxDate\"\n  [placeholder]=\"(to.placeholder | translate)\"\n  [formControl]=\"formControl\"\n></c8y-date-time-picker>\n", dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldDateTime, decorators: [{
             type: Component,
@@ -25337,7 +25341,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<table>\n  <tbody>\n    <tr>\n      <td class=\"form-group\">\n        <input\n          type=\"text\"\n          class=\"form-control text-center bs-timepicker-field\"\n          [disabled]=\"disabled\"\n          [placeholder]=\"'HH`HOURS`' | translate\"\n          [(ngModel)]=\"hours\"\n          (input)=\"parseValue('hours', 'lastValidHours', 23); initializeMinutes()\"\n          (change)=\"emitValue()\"\n          (wheel)=\"handleHourScroll($event)\"\n          (focus)=\"markAsTouched()\"\n        />\n      </td>\n      <td>&nbsp;:&nbsp;</td>\n      <td class=\"form-group\">\n        <input\n          type=\"text\"\n          class=\"form-control text-center bs-timepicker-field\"\n          [disabled]=\"disabled\"\n          [placeholder]=\"'MM`MINUTES`' | translate\"\n          [(ngModel)]=\"minutes\"\n          (input)=\"parseValue('minutes', 'lastValidMinutes', 59); initializeHours()\"\n          (change)=\"emitValue()\"\n          (wheel)=\"handleMinuteScroll($event)\"\n          (focus)=\"markAsTouched()\"\n        />\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<table>\n  <tbody>\n    <tr>\n      <td class=\"form-group\">\n        <input\n          type=\"text\"\n          class=\"form-control text-center bs-timepicker-field\"\n          [disabled]=\"disabled\"\n          [placeholder]=\"'HH`HOURS`' | translate\"\n          [(ngModel)]=\"hours\"\n          (input)=\"parseValue('hours', 'lastValidHours', 23); initializeMinutes()\"\n          (change)=\"emitValue()\"\n          (wheel)=\"handleHourScroll($event)\"\n          (focus)=\"markAsTouched()\"\n        />\n      </td>\n      <td>&nbsp;:&nbsp;</td>\n      <td class=\"form-group\">\n        <input\n          type=\"text\"\n          class=\"form-control text-center bs-timepicker-field\"\n          [disabled]=\"disabled\"\n          [placeholder]=\"'MM`MINUTES`' | translate\"\n          [(ngModel)]=\"minutes\"\n          (input)=\"parseValue('minutes', 'lastValidMinutes', 59); initializeHours()\"\n          (change)=\"emitValue()\"\n          (wheel)=\"handleMinuteScroll($event)\"\n          (focus)=\"markAsTouched()\"\n        />\n      </td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -25401,7 +25405,7 @@ class DateTimePickerModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent, CloseDatePickerDirective], imports: [FormsModule,
             CommonModule$1,
             FormsModule$1,
-            ReactiveFormsModule, i3.BsDatepickerModule, i4.TimepickerModule, CommonModule,
+            ReactiveFormsModule, i3.BsDatepickerModule, i4$1.TimepickerModule, CommonModule,
             TimePickerModule,
             DatePickerModule], exports: [DateTimePickerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerModule, imports: [FormsModule,
@@ -25488,13 +25492,13 @@ class TypeaheadTypeComponent extends FieldType {
             this.cdRef.detectChanges();
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeaheadTypeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TypeaheadTypeComponent, 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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { 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: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: TypeaheadTypeComponent, 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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { 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: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TypeaheadTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-typeahead-type', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }] });
 
 const selectTypeConfig = () => importProvidersFrom(FormlyModule.forChild({
     types: [
@@ -25523,13 +25527,13 @@ class SelectTypeComponent extends FieldType {
             this.valueProp = this.properties.valueProp;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectTypeComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectTypeComponent, 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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectTypeComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectTypeComponent, 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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-select-type', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 
 const fieldTextareaTypeConfig = () => importProvidersFrom(FormlyModule.forChild({
     types: [
@@ -25570,7 +25574,7 @@ class FieldTextArea extends FieldType {
       [formlyAttributes]="field"
       [placeholder]="props.placeholder"
     ></textarea>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FieldTextArea, decorators: [{
             type: Component,
@@ -26309,7 +26313,7 @@ class DynamicComponentService extends ExtensionPointForPlugins {
             stateToFactory(this.state$)
         ]).pipe(distinctUntilChanged(), takeUntil(combineLatest([timer(this.waitTimeout || this.DEFAULT_WAIT_TIMEOUT), remotesLoaded$])), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: RESOLVING_COMPONENT_WAIT_TIME, optional: true }, { token: DynamicResolverService }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: RESOLVING_COMPONENT_WAIT_TIME, optional: true }, { token: DynamicResolverService }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentService, decorators: [{
@@ -26317,7 +26321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -26667,7 +26671,7 @@ class DynamicComponentComponent {
         return of(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentComponent, deps: [{ token: DynamicComponentService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: { componentId: "componentId", config: "config", mode: "mode", notFoundError: "notFoundError", executeResolvers: "executeResolvers" }, outputs: { updateWidgetClasses: "updateWidgetClasses" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #host></ng-template>\n\n<div class=\"alert alert-warning m-8\" role=\"alert\" *ngIf=\"error && notFoundError\">\n  <strong class=\"message\">\n    {{\n      'This widget cannot be rendered because the current application does not support the following component:'\n        | translate\n    }}\n    {{ componentId }}.\n  </strong>\n  <p class=\"text-muted m-t-8\">\n    <button class=\"btn btn-clean\" (click)=\"expandErrorDetails = !expandErrorDetails\">\n      <i c8yIcon=\"chevron-down\"></i>\n      <span *ngIf=\"!expandErrorDetails\" translate>Show details</span>\n      <span *ngIf=\"expandErrorDetails\" translate>Hide details</span>\n    </button>\n  </p>\n  <div [collapse]=\"!expandErrorDetails\" [isAnimated]=\"true\">\n    <pre>\n      {{ error }}\n    </pre>\n  </div>\n</div>\n\n<div\n  class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\"\n  *ngIf=\"\n    errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&\n      componentInstance?.alerts?.anyAlertExists$ | async\n  \"\n>\n  <c8y-dynamic-component-alerts [alerts]=\"componentInstance.alerts\"></c8y-dynamic-component-alerts>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: { componentId: "componentId", config: "config", mode: "mode", notFoundError: "notFoundError", executeResolvers: "executeResolvers" }, outputs: { updateWidgetClasses: "updateWidgetClasses" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #host></ng-template>\n\n<div class=\"alert alert-warning m-8\" role=\"alert\" *ngIf=\"error && notFoundError\">\n  <strong class=\"message\">\n    {{\n      'This widget cannot be rendered because the current application does not support the following component:'\n        | translate\n    }}\n    {{ componentId }}.\n  </strong>\n  <p class=\"text-muted m-t-8\">\n    <button class=\"btn btn-clean\" (click)=\"expandErrorDetails = !expandErrorDetails\">\n      <i c8yIcon=\"chevron-down\"></i>\n      <span *ngIf=\"!expandErrorDetails\" translate>Show details</span>\n      <span *ngIf=\"expandErrorDetails\" translate>Hide details</span>\n    </button>\n  </p>\n  <div [collapse]=\"!expandErrorDetails\" [isAnimated]=\"true\">\n    <pre>\n      {{ error }}\n    </pre>\n  </div>\n</div>\n\n<div\n  class=\"overlay-center-vertically d-flex d-col a-i-stretch j-c-start p-16 p-r-24 p-l-24\"\n  *ngIf=\"\n    errorStrategy === dynamicComponentErrorStrategy.OVERLAY_ERROR &&\n      componentInstance?.alerts?.anyAlertExists$ | async\n  \"\n>\n  <c8y-dynamic-component-alerts [alerts]=\"componentInstance.alerts\"></c8y-dynamic-component-alerts>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$8.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentComponent, decorators: [{
             type: Component,
@@ -26691,7 +26695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 
 class DynamicComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentModule, declarations: [DynamicComponentComponent, DynamicComponentAlertsComponent], imports: [CommonModule, CollapseModule, i1$5.RouterModule, I18nModule], exports: [DynamicComponentComponent, DynamicComponentAlertsComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentModule, declarations: [DynamicComponentComponent, DynamicComponentAlertsComponent], imports: [CommonModule, CollapseModule, i1$4.RouterModule, I18nModule], exports: [DynamicComponentComponent, DynamicComponentAlertsComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentModule, imports: [CommonModule, CollapseModule, RouterModule$1.forChild([]), I18nModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicComponentModule, decorators: [{
@@ -26891,13 +26895,13 @@ class DynamicManagedObjectResolver extends DynamicBulkIIdentifiedResolver {
             return { id: moId, ...pick$1(e.res, ['status', 'statusText']) };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicManagedObjectResolver, deps: [{ token: DynamicResolverService }, { token: i1$1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicManagedObjectResolver, deps: [{ token: DynamicResolverService }, { token: i1.InventoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicManagedObjectResolver, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DynamicManagedObjectResolver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: DynamicResolverService }, { type: i1$1.InventoryService }] });
+        }], ctorParameters: () => [{ type: DynamicResolverService }, { type: i1.InventoryService }] });
 
 /**
  * A DynamicDetailsResolver responsible to resolve configured datapoints for dynamic components.
@@ -27325,7 +27329,7 @@ class DashboardComponent {
     calculateRowSize() {
         return this.dashboardRect.height / this.rows;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardComponent, deps: [{ token: i0.ElementRef }, { token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardComponent, selector: "c8y-dashboard", inputs: { columns: "columns", gap: "gap", rows: "rows" }, outputs: { dashboardChange: "dashboardChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "attr.style": "this.inlineStyle" }, classAttribute: "c8y-grid-dashboard dashboard-grid" }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardComponent, decorators: [{
@@ -27333,7 +27337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{ selector: 'c8y-dashboard', host: {
                         class: 'c8y-grid-dashboard dashboard-grid'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$4.DomSanitizer }], propDecorators: { columns: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.DomSanitizer }], propDecorators: { columns: [{
                 type: Input
             }], gap: [{
                 type: Input
@@ -27692,7 +27696,7 @@ class DashboardChildComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$4.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$3.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n  <div\n    class=\"card-placeholder\"\n    *ngIf=\"isResize\"\n  ></div>\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div\n        class=\"header-actions d-flex a-i-center\"\n        *ngIf=\"actions.length > 0\"\n      >\n        <c8y-widget-time-context-icon-bar\n          *ngIf=\"data?.config?.displaySettings && data?.config?.widgetInstanceGlobalTimeContext\"\n          [config]=\"data.config\"\n        ></c8y-widget-time-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          delay=\"500\"\n          container=\"body\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [disabled]=\"editMode || !canToggleFullscreen\"\n          (click)=\"toggleFullscreen.next()\"\n          data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n        >\n          <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n        </button>\n        <div\n          class=\"optionsBtn dropdown\"\n          placement=\"bottom right\"\n          dropdown\n          [container]=\"'body'\"\n        >\n          <button\n            class=\"btn btn-icon c8y-dropdown\"\n            title=\"{{ 'Settings' | translate }}\"\n            aria-haspopup=\"true\"\n            *ngIf=\"editMode\"\n            data-cy=\"c8y-dashboard-child--settings\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n            tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n            container=\"body\"\n            *ngIf=\"!editMode\"\n            (click)=\"(false)\"\n            data-cy=\"c8y-dashboard-child--settings-locked\"\n          >\n            <i [c8yIcon]=\"'lock'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            data-cy=\"c8y-dashboard-child--actions-dropdown\"\n            style=\"right: -1px\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"resize-handle hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n      cdkDrag\n      [cdkDragDisabled]=\"!editMode || fullscreen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div\n      class=\"resize-icon hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n    ></div>\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: ["config"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardChildComponent, decorators: [{
@@ -27700,7 +27704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{ selector: 'c8y-dashboard-child', host: {
                         class: 'dashboard-grid-child'
                     }, template: "<div cdkDropList>\n  <div\n    class=\"card-placeholder\"\n    *ngIf=\"isResize\"\n  ></div>\n  <div\n    [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n    [ngClass]=\"klasses\"\n    cdkDrag\n    (cdkDragStarted)=\"dragStarted($event)\"\n    (cdkDragEnded)=\"reset($event)\"\n    [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n  >\n    <div\n      class=\"card-header-actions card-header-grid\"\n      [ngClass]=\"{\n        'drag-handle': editMode && !fullscreen,\n        draggableCursor: editMode && !fullscreen\n      }\"\n      cdkDragHandle\n    >\n      <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n      <div\n        class=\"header-actions d-flex a-i-center\"\n        *ngIf=\"actions.length > 0\"\n      >\n        <c8y-widget-time-context-icon-bar\n          *ngIf=\"data?.config?.displaySettings && data?.config?.widgetInstanceGlobalTimeContext\"\n          [config]=\"data.config\"\n        ></c8y-widget-time-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          delay=\"500\"\n          container=\"body\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [disabled]=\"editMode || !canToggleFullscreen\"\n          (click)=\"toggleFullscreen.next()\"\n          data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n        >\n          <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n        </button>\n        <div\n          class=\"optionsBtn dropdown\"\n          placement=\"bottom right\"\n          dropdown\n          [container]=\"'body'\"\n        >\n          <button\n            class=\"btn btn-icon c8y-dropdown\"\n            title=\"{{ 'Settings' | translate }}\"\n            aria-haspopup=\"true\"\n            *ngIf=\"editMode\"\n            data-cy=\"c8y-dashboard-child--settings\"\n            (click)=\"(false)\"\n            dropdownToggle\n          >\n            <i [c8yIcon]=\"'cog'\"></i>\n          </button>\n          <button\n            class=\"btn btn-icon\"\n            [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n            tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n            container=\"body\"\n            *ngIf=\"!editMode\"\n            (click)=\"(false)\"\n            data-cy=\"c8y-dashboard-child--settings-locked\"\n          >\n            <i [c8yIcon]=\"'lock'\"></i>\n          </button>\n          <ul\n            class=\"dropdown-menu dropdown-menu-right\"\n            data-cy=\"c8y-dashboard-child--actions-dropdown\"\n            style=\"right: -1px\"\n            *dropdownMenu\n          >\n            <ng-container *ngFor=\"let action of actions\">\n              <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-inner-scroll\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"resize-handle hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n      cdkDrag\n      [cdkDragDisabled]=\"!editMode || fullscreen\"\n      (cdkDragStarted)=\"resizeStarted($event)\"\n      (cdkDragEnded)=\"reset($event)\"\n    ></div>\n    <div\n      class=\"resize-icon hidden-xs\"\n      *ngIf=\"editMode && !isDragging && !fullscreen\"\n    ></div>\n\n    <div\n      class=\"card-placeholder\"\n      *cdkDragPlaceholder\n    ></div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$4.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
+        }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$3.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
                 type: ContentChildren,
                 args: [DashboardChildActionComponent]
             }], fullscreen: [{
@@ -28023,13 +28027,13 @@ class WidgetTimeContextQueryService {
         const dateRangeValid = this.helperService.isValidDateRange(params.dateContextFrom, params.dateContextTo);
         return intervalProvided || dateRangeValid;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextQueryService, deps: [{ token: i1$5.ActivatedRoute }, { token: WidgetTimeContextHelperService }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextQueryService, deps: [{ token: i1$4.ActivatedRoute }, { token: WidgetTimeContextHelperService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextQueryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextQueryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: WidgetTimeContextHelperService }, { type: i1$5.Router }] });
+        }], ctorParameters: () => [{ type: i1$4.ActivatedRoute }, { type: WidgetTimeContextHelperService }, { type: i1$4.Router }] });
 
 class IntervalPickerComponent {
     constructor() {
@@ -28578,13 +28582,13 @@ class WidgetTimeContextComponent {
             return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextComponent, deps: [{ token: WidgetsDashboardEventService }, { token: DashboardChildComponent }, { token: i1$7.FormBuilder }, { token: WidgetTimeContextQueryService }, { token: WidgetTimeContextHelperService }, { token: i1$5.Router }, { token: ActionBarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple", displaySettings: "displaySettings", hidden: "hidden" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled && !hidden\"\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [inGroupPriority]=\"actionBarInGroupPriority\"\n  [placement]=\"'left'\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{\n    date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n  }\"\n></ng-container>\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container *ngIf=\"displaySettings.globalTimeContext\">\n      <div>\n        <div\n          class=\"dropdown flex-grow\"\n          #dropdown=\"bs-dropdown\"\n          \n          dropdown\n          [insideClick]=\"true\"\n          *ngIf=\"date\"\n        >\n          <button\n            data-cy=\"widget-time-context--date-picker-dropdown-button\"\n            class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n            attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{\n              date[1] | c8yDate: DATE_FORMAT\n            }}\"\n            tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n            placement=\"top\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4 \"\n              c8yIcon=\"schedule1\"\n            ></i>\n            <div class=\"d-col text-left fit-w\">\n              <span class=\"text-12\" data-cy=\"widget-time-context--selected-interval\">\n                {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n              </span>\n              <span\n                class=\"text-10 text-muted text-truncate\"\n                data-cy=\"widget-time-context--selected-time-range\"\n              >\n                {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n              </span>\n            </div>\n            <span class=\"caret m-r-16 m-l-4\"></span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu dropdown-menu--date-range\"\n            *dropdownMenu\n          >\n            <c8y-interval-picker\n              class=\"d-contents\"\n              formControlName=\"currentDateContextInterval\"\n            ></c8y-interval-picker>\n\n            <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n              <div class=\"p-l-16 p-r-16\">\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'From`date`' | translate\"\n                    for=\"temporaryUserSelectedFromDate\"\n                    translate\n                  >\n                    From`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedFromDate\"\n                    [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                    [placeholder]=\"'From`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"'This date is after the latest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'To`date`' | translate\"\n                    for=\"temporaryUserSelectedToDate\"\n                    translate\n                  >\n                    To`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedToDate\"\n                    [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                    [placeholder]=\"'To`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                    <c8y-message\n                      name=\"dateBeforeRangeMin\"\n                      [text]=\"'This date is before the earliest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n              </div>\n\n              <div class=\"p-16 d-flex gap-8 separator-top\">\n                <button\n                  class=\"btn btn-default btn-sm flex-grow\"\n                  title=\"{{ 'Reset' | translate }}\"\n                  type=\"button\"\n                  (click)=\"reset(); dropdown.isOpen = false\"\n                  [disabled]=\"form.value.realtime\"\n                  translate\n                >\n                  Reset\n                </button>\n\n                <button\n                  class=\"btn btn-primary btn-sm flex-grow\"\n                  title=\"{{ 'Apply' | translate }}\"\n                  type=\"button\"\n                  (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                  [disabled]=\"\n                    (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                  \"\n                  translate\n                >\n                  Apply\n                </button>\n              </div>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n      *ngIf=\"displaySettings.globalRealtimeContext\"\n      formControlName=\"realtime\"\n      class=\"form-control p-0 flex-no-grow w-auto\"\n      ></c8y-realtime-control>\n\n      <c8y-aggregation-picker\n        *ngIf=\"displaySettings.globalAggregationContext\"\n        formControlName=\"aggregation\"\n        [disabledAggregations]=\"disabledAggregations\"\n      ></c8y-aggregation-picker>\n    </div>\n  </form>\n</ng-template>\n\n<c8y-dashboard-child-action>\n  <button\n    type=\"button\"\n    (click)=\"toggleDecoupling()\"\n  >\n    <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </button>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker" }, { kind: "component", type: RealtimeControlComponent, selector: "c8y-realtime-control" }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextComponent, deps: [{ token: WidgetsDashboardEventService }, { token: DashboardChildComponent }, { token: i1$6.FormBuilder }, { token: WidgetTimeContextQueryService }, { token: WidgetTimeContextHelperService }, { token: i1$4.Router }, { token: ActionBarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple", displaySettings: "displaySettings", hidden: "hidden" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled && !hidden\"\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [inGroupPriority]=\"actionBarInGroupPriority\"\n  [placement]=\"'left'\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{\n    date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n  }\"\n></ng-container>\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container *ngIf=\"displaySettings.globalTimeContext\">\n      <div>\n        <div\n          class=\"dropdown flex-grow\"\n          #dropdown=\"bs-dropdown\"\n          \n          dropdown\n          [insideClick]=\"true\"\n          *ngIf=\"date\"\n        >\n          <button\n            data-cy=\"widget-time-context--date-picker-dropdown-button\"\n            class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n            attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{\n              date[1] | c8yDate: DATE_FORMAT\n            }}\"\n            tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n            placement=\"top\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4 \"\n              c8yIcon=\"schedule1\"\n            ></i>\n            <div class=\"d-col text-left fit-w\">\n              <span class=\"text-12\" data-cy=\"widget-time-context--selected-interval\">\n                {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n              </span>\n              <span\n                class=\"text-10 text-muted text-truncate\"\n                data-cy=\"widget-time-context--selected-time-range\"\n              >\n                {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n              </span>\n            </div>\n            <span class=\"caret m-r-16 m-l-4\"></span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu dropdown-menu--date-range\"\n            *dropdownMenu\n          >\n            <c8y-interval-picker\n              class=\"d-contents\"\n              formControlName=\"currentDateContextInterval\"\n            ></c8y-interval-picker>\n\n            <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n              <div class=\"p-l-16 p-r-16\">\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'From`date`' | translate\"\n                    for=\"temporaryUserSelectedFromDate\"\n                    translate\n                  >\n                    From`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedFromDate\"\n                    [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                    [placeholder]=\"'From`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"'This date is after the latest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'To`date`' | translate\"\n                    for=\"temporaryUserSelectedToDate\"\n                    translate\n                  >\n                    To`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedToDate\"\n                    [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                    [placeholder]=\"'To`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                    <c8y-message\n                      name=\"dateBeforeRangeMin\"\n                      [text]=\"'This date is before the earliest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n              </div>\n\n              <div class=\"p-16 d-flex gap-8 separator-top\">\n                <button\n                  class=\"btn btn-default btn-sm flex-grow\"\n                  title=\"{{ 'Reset' | translate }}\"\n                  type=\"button\"\n                  (click)=\"reset(); dropdown.isOpen = false\"\n                  [disabled]=\"form.value.realtime\"\n                  translate\n                >\n                  Reset\n                </button>\n\n                <button\n                  class=\"btn btn-primary btn-sm flex-grow\"\n                  title=\"{{ 'Apply' | translate }}\"\n                  type=\"button\"\n                  (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                  [disabled]=\"\n                    (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                  \"\n                  translate\n                >\n                  Apply\n                </button>\n              </div>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n      *ngIf=\"displaySettings.globalRealtimeContext\"\n      formControlName=\"realtime\"\n      class=\"form-control p-0 flex-no-grow w-auto\"\n      ></c8y-realtime-control>\n\n      <c8y-aggregation-picker\n        *ngIf=\"displaySettings.globalAggregationContext\"\n        formControlName=\"aggregation\"\n        [disabledAggregations]=\"disabledAggregations\"\n      ></c8y-aggregation-picker>\n    </div>\n  </form>\n</ng-template>\n\n<c8y-dashboard-child-action>\n  <button\n    type=\"button\"\n    (click)=\"toggleDecoupling()\"\n  >\n    <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </button>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker" }, { kind: "component", type: RealtimeControlComponent, selector: "c8y-realtime-control" }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled && !hidden\"\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [inGroupPriority]=\"actionBarInGroupPriority\"\n  [placement]=\"'left'\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"dateTimePicker\"\n    [ngTemplateOutletContext]=\"{\n      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n    }\"\n  ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n  *ngIf=\"!isCoupled\"\n  [ngTemplateOutlet]=\"dateTimePicker\"\n  [ngTemplateOutletContext]=\"{\n    date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]\n  }\"\n></ng-container>\n\n<ng-template\n  #dateTimePicker\n  let-date=\"date\"\n>\n  <form\n    class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n    [formGroup]=\"form\"\n  >\n    <ng-container *ngIf=\"displaySettings.globalTimeContext\">\n      <div>\n        <div\n          class=\"dropdown flex-grow\"\n          #dropdown=\"bs-dropdown\"\n          \n          dropdown\n          [insideClick]=\"true\"\n          *ngIf=\"date\"\n        >\n          <button\n            data-cy=\"widget-time-context--date-picker-dropdown-button\"\n            class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n            attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{\n              date[1] | c8yDate: DATE_FORMAT\n            }}\"\n            tooltip=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n            placement=\"top\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n            [delay]=\"500\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4 \"\n              c8yIcon=\"schedule1\"\n            ></i>\n            <div class=\"d-col text-left fit-w\">\n              <span class=\"text-12\" data-cy=\"widget-time-context--selected-interval\">\n                {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n              </span>\n              <span\n                class=\"text-10 text-muted text-truncate\"\n                data-cy=\"widget-time-context--selected-time-range\"\n              >\n                {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n              </span>\n            </div>\n            <span class=\"caret m-r-16 m-l-4\"></span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu dropdown-menu--date-range\"\n            *dropdownMenu\n          >\n            <c8y-interval-picker\n              class=\"d-contents\"\n              formControlName=\"currentDateContextInterval\"\n            ></c8y-interval-picker>\n\n            <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n              <div class=\"p-l-16 p-r-16\">\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'From`date`' | translate\"\n                    for=\"temporaryUserSelectedFromDate\"\n                    translate\n                  >\n                    From`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedFromDate\"\n                    [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n                    [placeholder]=\"'From`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n                    <c8y-message\n                      name=\"dateAfterRangeMax\"\n                      [text]=\"'This date is after the latest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n\n                <c8y-form-group\n                  [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                >\n                  <label\n                    [title]=\"'To`date`' | translate\"\n                    for=\"temporaryUserSelectedToDate\"\n                    translate\n                  >\n                    To`date`\n                  </label>\n                  <c8y-date-time-picker\n                    id=\"temporaryUserSelectedToDate\"\n                    [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n                    [placeholder]=\"'To`date`' | translate\"\n                    [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n                    [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n                  ></c8y-date-time-picker>\n                  <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n                    <c8y-message\n                      name=\"dateBeforeRangeMin\"\n                      [text]=\"'This date is before the earliest allowed date.' | translate\"\n                    ></c8y-message>\n                    <c8y-message\n                      name=\"invalidDateTime\"\n                      [text]=\"'This date is invalid.' | translate\"\n                    ></c8y-message>\n                  </c8y-messages>\n                </c8y-form-group>\n              </div>\n\n              <div class=\"p-16 d-flex gap-8 separator-top\">\n                <button\n                  class=\"btn btn-default btn-sm flex-grow\"\n                  title=\"{{ 'Reset' | translate }}\"\n                  type=\"button\"\n                  (click)=\"reset(); dropdown.isOpen = false\"\n                  [disabled]=\"form.value.realtime\"\n                  translate\n                >\n                  Reset\n                </button>\n\n                <button\n                  class=\"btn btn-primary btn-sm flex-grow\"\n                  title=\"{{ 'Apply' | translate }}\"\n                  type=\"button\"\n                  (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n                  [disabled]=\"\n                    (form.pristine && form.untouched) || form.invalid || form.value.realtime\n                  \"\n                  translate\n                >\n                  Apply\n                </button>\n              </div>\n            </ng-container>\n          </ul>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"input-group w-auto\">\n      <c8y-realtime-control\n      *ngIf=\"displaySettings.globalRealtimeContext\"\n      formControlName=\"realtime\"\n      class=\"form-control p-0 flex-no-grow w-auto\"\n      ></c8y-realtime-control>\n\n      <c8y-aggregation-picker\n        *ngIf=\"displaySettings.globalAggregationContext\"\n        formControlName=\"aggregation\"\n        [disabledAggregations]=\"disabledAggregations\"\n      ></c8y-aggregation-picker>\n    </div>\n  </form>\n</ng-template>\n\n<c8y-dashboard-child-action>\n  <button\n    type=\"button\"\n    (click)=\"toggleDecoupling()\"\n  >\n    <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n    <span class=\"m-l-4\">\n      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n    </span>\n  </button>\n</c8y-dashboard-child-action>\n" }]
-        }], ctorParameters: () => [{ type: WidgetsDashboardEventService }, { type: DashboardChildComponent }, { type: i1$7.FormBuilder }, { type: WidgetTimeContextQueryService }, { type: WidgetTimeContextHelperService }, { type: i1$5.Router }, { type: ActionBarService }], propDecorators: { canDecouple: [{
+        }], ctorParameters: () => [{ type: WidgetsDashboardEventService }, { type: DashboardChildComponent }, { type: i1$6.FormBuilder }, { type: WidgetTimeContextQueryService }, { type: WidgetTimeContextHelperService }, { type: i1$4.Router }, { type: ActionBarService }], propDecorators: { canDecouple: [{
                 type: Input
             }], displaySettings: [{
                 type: Input
@@ -28819,7 +28823,7 @@ class WidgetsDashboardComponent {
         });
         return widgets;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$2.TranslateService }, { token: i1$5.ActivatedRoute }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetsDashboardComponent, deps: [{ token: DynamicComponentService }, { token: i1$1.TranslateService }, { token: i1$4.ActivatedRoute }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetsDashboardComponent, 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  *ngIf=\"!editMode\"\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\"\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\"\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\"\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) | 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\"\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\"\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\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!editMode\"\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\"\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\"\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          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode\"\n        ></c8y-widget-time-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: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { 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: DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { 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: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetsDashboardComponent, decorators: [{
@@ -28830,7 +28834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
     `,
                         class: 'dashboard c8y-grid-dashboard'
                     }, providers: [WidgetsDashboardEventService], 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  *ngIf=\"!editMode\"\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\"\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\"\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\"\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) | 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\"\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\"\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\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!editMode\"\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\"\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\"\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          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"editMode\"\n        ></c8y-widget-time-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" }]
-        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$2.TranslateService }, { type: i1$5.ActivatedRoute }, { type: ModalService }], propDecorators: { widgets: [{
+        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$4.ActivatedRoute }, { type: ModalService }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{
                 type: Input
@@ -28896,13 +28900,13 @@ class HelpService {
     getContextHelpOption() {
         return this.options.contextHelp;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpService, deps: [{ token: i1$2.TranslateService }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpService, deps: [{ token: i1$1.TranslateService }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: OptionsService }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: OptionsService }] });
 
 /**
  * A component which shows a context help in
@@ -29070,7 +29074,7 @@ class HelpComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpComponent, deps: [{ token: DocsService }, { token: HelpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: HelpComponent, selector: "c8y-help", inputs: { src: "src", isCollapsed: "isCollapsed", priority: "priority", icon: "icon" }, ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-md-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help hidden-xs\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    aria-controls=\"collapseHelp\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    type=\"button\"\n    data-cy=\"help--help-btn\"\n    [delay]=\"750\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  ></button>\n  <button\n    class=\"btn btn-link visible-xs\"\n    title=\"{{ 'About this page' | translate }}\"\n    aria-controls=\"collapseHelp\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    type=\"button\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  >\n    <i c8yIcon=\"help-outline\" class=\"text-info\"></i>\n    {{ 'About this page' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div\n  class=\"c8y-help-drawer\"\n  id=\"collapseHelp\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n    data-cy=\"c8y-help--c8y-help-drawer-block\"\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          class=\"c8y-icon-duocolor icon-48\"\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n        ></i>\n        <div\n          class=\"p-l-16 flex-grow\"\n          *ngIf=\"!hasError\"\n        >\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              [attr.aria-label]=\"'Close' | translate\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div\n            class=\"help-content\"\n            id=\"helpContent\"\n            [innerHTML]=\"sectionContent\"\n            data-cy=\"help--c8y-help-content\"\n          ></div>\n        </div>\n\n        <div\n          class=\"p-l-16 p-t-16 flex-grow\"\n          *ngIf=\"hasError\"\n        >\n          <h4\n            class=\"text-bold m-b-16\"\n            translate\n          >\n            Content couldn't be loaded.\n          </h4>\n          <div class=\"help-content\">\n            <p translate>Check internet connection or reload page.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n    data-cy=\"c8y-help--c8y-help-drawer-footer\"\n  >\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Close help' | translate\"\n      aria-controls=\"collapseHelp\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      type=\"button\"\n      (click)=\"toggle()\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      class=\"btn btn-primary\"\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      target=\"_blank\"\n      data-cy=\"c8y-help--user-guide\"\n      rel=\"noopener noreferrer\"\n    >\n      <span\n        translate\n        *ngIf=\"!hasError\"\n      >\n        Open the\n        <span>user documentation</span>\n      </span>\n      <span\n        translate\n        *ngIf=\"hasError\"\n      >\n        Check the\n        <span>user documentation</span>\n      </span>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: HelpComponent, selector: "c8y-help", inputs: { src: "src", isCollapsed: "isCollapsed", priority: "priority", icon: "icon" }, ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-md-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help hidden-xs\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    aria-controls=\"collapseHelp\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    type=\"button\"\n    data-cy=\"help--help-btn\"\n    [delay]=\"750\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  ></button>\n  <button\n    class=\"btn btn-link visible-xs\"\n    title=\"{{ 'About this page' | translate }}\"\n    aria-controls=\"collapseHelp\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    type=\"button\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  >\n    <i c8yIcon=\"help-outline\" class=\"text-info\"></i>\n    {{ 'About this page' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div\n  class=\"c8y-help-drawer\"\n  id=\"collapseHelp\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n    data-cy=\"c8y-help--c8y-help-drawer-block\"\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          class=\"c8y-icon-duocolor icon-48\"\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n        ></i>\n        <div\n          class=\"p-l-16 flex-grow\"\n          *ngIf=\"!hasError\"\n        >\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              [attr.aria-label]=\"'Close' | translate\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div\n            class=\"help-content\"\n            id=\"helpContent\"\n            [innerHTML]=\"sectionContent\"\n            data-cy=\"help--c8y-help-content\"\n          ></div>\n        </div>\n\n        <div\n          class=\"p-l-16 p-t-16 flex-grow\"\n          *ngIf=\"hasError\"\n        >\n          <h4\n            class=\"text-bold m-b-16\"\n            translate\n          >\n            Content couldn't be loaded.\n          </h4>\n          <div class=\"help-content\">\n            <p translate>Check internet connection or reload page.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n    data-cy=\"c8y-help--c8y-help-drawer-footer\"\n  >\n    <button\n      class=\"btn btn-default\"\n      [title]=\"'Close help' | translate\"\n      aria-controls=\"collapseHelp\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      type=\"button\"\n      (click)=\"toggle()\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      class=\"btn btn-primary\"\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      target=\"_blank\"\n      data-cy=\"c8y-help--user-guide\"\n      rel=\"noopener noreferrer\"\n    >\n      <span\n        translate\n        *ngIf=\"!hasError\"\n      >\n        Open the\n        <span>user documentation</span>\n      </span>\n      <span\n        translate\n        *ngIf=\"hasError\"\n      >\n        Check the\n        <span>user documentation</span>\n      </span>\n    </a>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i1$8.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpComponent, decorators: [{
             type: Component,
@@ -29093,7 +29097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  */
 class HelpModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: HelpModule, declarations: [HelpComponent], imports: [CommonModule, i1$9.CollapseModule, i2$3.TooltipModule, ActionBarModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: HelpModule, declarations: [HelpComponent], imports: [CommonModule, i1$8.CollapseModule, i2$3.TooltipModule, ActionBarModule,
             ProductExperienceModule], exports: [HelpComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: HelpModule, providers: [HelpService], imports: [CommonModule,
             CollapseModule.forRoot(),
@@ -29232,13 +29236,13 @@ class AuditLogComponent {
             type
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AuditLogComponent, deps: [{ token: i1$1.AuditService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AuditLogComponent, deps: [{ token: i1.AuditService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AuditLogComponent, selector: "c8y-audit-log", inputs: { source: "source", type: "type" }, ngImport: i0, template: "<div class=\"inner-scroll\">\n  <ul class=\"c8y-list__group c8y-list--timeline m-t-16\">\n    <li\n      class=\"c8y-list--timeline__item\"\n      *c8yFor=\"let record of records | async\"\n    >\n      <small class=\"c8y-list--timeline__item__date\">\n        {{ record.time | c8yDate }}\n      </small>\n      <div class=\"c8y-list__item\">\n        <div class=\"c8y-list__item__block\">\n          <div class=\"c8y-list__item__body text-truncate-wrap\">\n            <div class=\"row\">\n              <div class=\"col-md-5 d-flex a-i-baseline\">\n                <span\n                  class=\"text-truncate\"\n                  title=\"{{ record.activity | translate }}\"\n                >\n                  {{ record.activity | translate }}\n                </span>\n                <small class=\"m-l-4 text-muted flex-no-shrink\">{{ record.user }}</small>\n              </div>\n              <div class=\"col-md-7\">\n                <div class=\"small text-truncate-wrap\">{{ record.text | translate }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ 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: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AuditLogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-audit-log', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inner-scroll\">\n  <ul class=\"c8y-list__group c8y-list--timeline m-t-16\">\n    <li\n      class=\"c8y-list--timeline__item\"\n      *c8yFor=\"let record of records | async\"\n    >\n      <small class=\"c8y-list--timeline__item__date\">\n        {{ record.time | c8yDate }}\n      </small>\n      <div class=\"c8y-list__item\">\n        <div class=\"c8y-list__item__block\">\n          <div class=\"c8y-list__item__body text-truncate-wrap\">\n            <div class=\"row\">\n              <div class=\"col-md-5 d-flex a-i-baseline\">\n                <span\n                  class=\"text-truncate\"\n                  title=\"{{ record.activity | translate }}\"\n                >\n                  {{ record.activity | translate }}\n                </span>\n                <small class=\"m-l-4 text-muted flex-no-shrink\">{{ record.user }}</small>\n              </div>\n              <div class=\"col-md-7\">\n                <div class=\"small text-truncate-wrap\">{{ record.text | translate }}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.AuditService }], propDecorators: { source: [{
+        }], ctorParameters: () => [{ type: i1.AuditService }], propDecorators: { source: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -29442,7 +29446,7 @@ class FilteringFormRendererComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilteringFormRendererComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: { _spec: ["spec", "_spec"] }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"spec.renderer\">\n  <ng-container\n    *ngIf=\"rendererType === 'TEMPLATE'\"\n    [ngTemplateOutlet]=\"spec.renderer\"\n    [ngTemplateOutletContext]=\"{ $implicit: spec.context }\"\n  ></ng-container>\n\n  <ng-container\n    *ngIf=\"rendererType === 'COMPONENT'\"\n    [c8yComponentOutlet]=\"spec.renderer\"\n    [c8yComponentOutletInjector]=\"rendererInjector\"\n  ></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!spec.renderer\">\n  <div class=\"form-group p-t-8\">\n    <label>{{ 'Filter text' | translate }}</label>\n    <input\n      class=\"form-control\"\n      [(ngModel)]=\"defaultRendererFilterText\"\n      (keyup.enter)=\"\n        spec.context.applyFilter({\n          filterPredicate: defaultRendererFilterText\n        })\n      \"\n    />\n  </div>\n\n  <div class=\"data-grid__dropdown__footer d-flex separator-top\">\n    <button\n      title=\"{{ 'Reset' | translate }}\"\n      class=\"btn btn-default btn-sm flex-grow m-r-8\"\n      (click)=\"defaultRendererFilterText = ''; spec.context.resetFilter()\"\n    >\n      {{ 'Reset' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Apply' | translate }}\"\n      class=\"btn btn-primary btn-sm flex-grow\"\n      (click)=\"\n        spec.context.applyFilter({\n          filterPredicate: defaultRendererFilterText\n        })\n      \"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: { _spec: ["spec", "_spec"] }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"spec.renderer\">\n  <ng-container\n    *ngIf=\"rendererType === 'TEMPLATE'\"\n    [ngTemplateOutlet]=\"spec.renderer\"\n    [ngTemplateOutletContext]=\"{ $implicit: spec.context }\"\n  ></ng-container>\n\n  <ng-container\n    *ngIf=\"rendererType === 'COMPONENT'\"\n    [c8yComponentOutlet]=\"spec.renderer\"\n    [c8yComponentOutletInjector]=\"rendererInjector\"\n  ></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!spec.renderer\">\n  <div class=\"form-group p-t-8\">\n    <label>{{ 'Filter text' | translate }}</label>\n    <input\n      class=\"form-control\"\n      [(ngModel)]=\"defaultRendererFilterText\"\n      (keyup.enter)=\"\n        spec.context.applyFilter({\n          filterPredicate: defaultRendererFilterText\n        })\n      \"\n    />\n  </div>\n\n  <div class=\"data-grid__dropdown__footer d-flex separator-top\">\n    <button\n      title=\"{{ 'Reset' | translate }}\"\n      class=\"btn btn-default btn-sm flex-grow m-r-8\"\n      (click)=\"defaultRendererFilterText = ''; spec.context.resetFilter()\"\n    >\n      {{ 'Reset' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Apply' | translate }}\"\n      class=\"btn btn-primary btn-sm flex-grow\"\n      (click)=\"\n        spec.context.applyFilter({\n          filterPredicate: defaultRendererFilterText\n        })\n      \"\n    >\n      {{ 'Apply' | translate }}\n    </button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FilteringFormRendererComponent, decorators: [{
             type: Component,
@@ -29488,13 +29492,13 @@ class ConfigureCustomColumnComponent {
             this.modalRef.hide();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfigureCustomColumnComponent, deps: [{ token: i1$7.FormBuilder }, { token: i1$6.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ConfigureCustomColumnComponent, selector: "c8y-configure-custom-column", outputs: { onAddCustomColumn: "onAddCustomColumn" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["columnConfigForm"], descendants: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3 id=\"modal-title\" translate>Configure custom column</h3>\n  </div>\n\n  <form class=\"d-contents\" #columnConfigForm=\"ngForm\" [formGroup]=\"formGroup\">\n    <div class=\"modal-inner-scroll\" id=\"modal-body\">\n      <div class=\"modal-body\">\n        <c8y-form-group>\n          <label for=\"header\" translate>Header</label>\n          <input\n            id=\"header\"\n            data-cy=\"configure-custom-column--header\"\n            formControlName=\"header\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            [placeholder]=\"'e.g. Agent name' | translate\"\n            [required]=\"true\"\n            uniqueByPath\n            [collection]=\"columns\"\n            path=\"header\"\n            [comparator]=\"comparator\"\n          />\n          <c8y-messages>\n            <c8y-message\n              name=\"uniqueByPath\"\n              [text]=\"uniqueHeaderMsg\"\n            ></c8y-message>\n          </c8y-messages>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label for=\"fragmentPath\" translate>Fragment path</label>\n          <input\n            id=\"fragmentPath\"\n            data-cy=\"configure-custom-column--fragmentPath\"\n            formControlName=\"path\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Agent.name' }\"\n          />\n        </c8y-form-group>\n        <label class=\"c8y-switch\" [title]=\"'Add another column after saving this one' | translate\">\n          <input type=\"checkbox\" formControlName=\"addAnother\" class=\"form-control\" />\n          <span></span>\n          <span translate>Add another column after saving this one</span>\n        </label>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"modalRef.hide()\">\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        title=\"{{ 'Save' | translate }}\"\n        class=\"btn btn-primary\"\n        [disabled]=\"columnConfigForm.form.pristine || !columnConfigForm.form.valid\"\n        (click)=\"addColumn()\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.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$7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: UniqueInCollectionByPathValidationDirective, selector: "[uniqueByPath]", inputs: ["collection", "path", "comparator"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfigureCustomColumnComponent, deps: [{ token: i1$6.FormBuilder }, { token: i1$5.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ConfigureCustomColumnComponent, selector: "c8y-configure-custom-column", outputs: { onAddCustomColumn: "onAddCustomColumn" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["columnConfigForm"], descendants: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3 id=\"modal-title\" translate>Configure custom column</h3>\n  </div>\n\n  <form class=\"d-contents\" #columnConfigForm=\"ngForm\" [formGroup]=\"formGroup\">\n    <div class=\"modal-inner-scroll\" id=\"modal-body\">\n      <div class=\"modal-body\">\n        <c8y-form-group>\n          <label for=\"header\" translate>Header</label>\n          <input\n            id=\"header\"\n            data-cy=\"configure-custom-column--header\"\n            formControlName=\"header\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            [placeholder]=\"'e.g. Agent name' | translate\"\n            [required]=\"true\"\n            uniqueByPath\n            [collection]=\"columns\"\n            path=\"header\"\n            [comparator]=\"comparator\"\n          />\n          <c8y-messages>\n            <c8y-message\n              name=\"uniqueByPath\"\n              [text]=\"uniqueHeaderMsg\"\n            ></c8y-message>\n          </c8y-messages>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label for=\"fragmentPath\" translate>Fragment path</label>\n          <input\n            id=\"fragmentPath\"\n            data-cy=\"configure-custom-column--fragmentPath\"\n            formControlName=\"path\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Agent.name' }\"\n          />\n        </c8y-form-group>\n        <label class=\"c8y-switch\" [title]=\"'Add another column after saving this one' | translate\">\n          <input type=\"checkbox\" formControlName=\"addAnother\" class=\"form-control\" />\n          <span></span>\n          <span translate>Add another column after saving this one</span>\n        </label>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"modalRef.hide()\">\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        title=\"{{ 'Save' | translate }}\"\n        class=\"btn btn-primary\"\n        [disabled]=\"columnConfigForm.form.pristine || !columnConfigForm.form.valid\"\n        (click)=\"addColumn()\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: UniqueInCollectionByPathValidationDirective, selector: "[uniqueByPath]", inputs: ["collection", "path", "comparator"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConfigureCustomColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-configure-custom-column', template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header separator-bottom\">\n    <h3 id=\"modal-title\" translate>Configure custom column</h3>\n  </div>\n\n  <form class=\"d-contents\" #columnConfigForm=\"ngForm\" [formGroup]=\"formGroup\">\n    <div class=\"modal-inner-scroll\" id=\"modal-body\">\n      <div class=\"modal-body\">\n        <c8y-form-group>\n          <label for=\"header\" translate>Header</label>\n          <input\n            id=\"header\"\n            data-cy=\"configure-custom-column--header\"\n            formControlName=\"header\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            [placeholder]=\"'e.g. Agent name' | translate\"\n            [required]=\"true\"\n            uniqueByPath\n            [collection]=\"columns\"\n            path=\"header\"\n            [comparator]=\"comparator\"\n          />\n          <c8y-messages>\n            <c8y-message\n              name=\"uniqueByPath\"\n              [text]=\"uniqueHeaderMsg\"\n            ></c8y-message>\n          </c8y-messages>\n        </c8y-form-group>\n        <c8y-form-group>\n          <label for=\"fragmentPath\" translate>Fragment path</label>\n          <input\n            id=\"fragmentPath\"\n            data-cy=\"configure-custom-column--fragmentPath\"\n            formControlName=\"path\"\n            class=\"form-control\"\n            autocomplete=\"off\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Agent.name' }\"\n          />\n        </c8y-form-group>\n        <label class=\"c8y-switch\" [title]=\"'Add another column after saving this one' | translate\">\n          <input type=\"checkbox\" formControlName=\"addAnother\" class=\"form-control\" />\n          <span></span>\n          <span translate>Add another column after saving this one</span>\n        </label>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"modalRef.hide()\">\n        {{ 'Cancel' | translate }}\n      </button>\n      <button\n        title=\"{{ 'Save' | translate }}\"\n        class=\"btn btn-primary\"\n        [disabled]=\"columnConfigForm.form.pristine || !columnConfigForm.form.valid\"\n        (click)=\"addColumn()\"\n      >\n        {{ 'Save' | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$7.FormBuilder }, { type: i1$6.BsModalRef }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: i1$6.FormBuilder }, { type: i1$5.BsModalRef }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['columnConfigForm', { static: false }]
             }], onAddCustomColumn: [{
@@ -29543,7 +29547,7 @@ class ActionControlsExtensionService extends ExtensionPointWithoutStateForPlugin
             () => this.factories
         ]).pipe(shareReplay$1(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionControlsExtensionService, deps: [{ token: i0.Injector }, { token: PluginsResolveService }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionControlsExtensionService, deps: [{ token: i0.Injector }, { token: PluginsResolveService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionControlsExtensionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionControlsExtensionService, decorators: [{
@@ -29551,7 +29555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }, { type: i1$5.Router }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }, { type: i1$4.Router }] });
 
 class BaseColumn {
     constructor(config = {}) {
@@ -31333,13 +31337,13 @@ class DataGridComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataGridComponent, deps: [{ token: DATA_GRID_CONFIGURATION_STRATEGY, optional: true }, { token: DataGridService }, { token: i1$4.DomSanitizer }, { token: GainsightService }, { token: i1$6.BsModalService }, { token: AlertService }, { token: ActionControlsExtensionService }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataGridComponent, deps: [{ token: DATA_GRID_CONFIGURATION_STRATEGY, optional: true }, { token: DataGridService }, { token: i1$3.DomSanitizer }, { token: GainsightService }, { token: i1$5.BsModalService }, { token: AlertService }, { token: ActionControlsExtensionService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DataGridComponent, selector: "c8y-data-grid", inputs: { title: "title", loadMoreItemsLabel: "loadMoreItemsLabel", loadingItemsLabel: "loadingItemsLabel", showSearch: "showSearch", refresh: "refresh", _columns: ["columns", "_columns"], _rows: ["rows", "_rows"], _pagination: ["pagination", "_pagination"], _infiniteScroll: ["infiniteScroll", "_infiniteScroll"], _serverSideDataCallback: ["serverSideDataCallback", "_serverSideDataCallback"], _selectable: ["selectable", "_selectable"], _singleSelection: ["singleSelection", "_singleSelection"], _selectionPrimaryKey: ["selectionPrimaryKey", "_selectionPrimaryKey"], _displayOptions: ["displayOptions", "_displayOptions"], _actionControls: ["actionControls", "_actionControls"], _bulkActionControls: ["bulkActionControls", "_bulkActionControls"], _headerActionControls: ["headerActionControls", "_headerActionControls"], searchText: "searchText", configureColumnsEnabled: "configureColumnsEnabled", showCounterWarning: "showCounterWarning", activeClassName: "activeClassName", expandableRows: "expandableRows" }, outputs: { rowMouseOver: "rowMouseOver", rowMouseLeave: "rowMouseLeave", rowClick: "rowClick", onConfigChange: "onConfigChange", onBeforeFilter: "onBeforeFilter", onBeforeSearch: "onBeforeSearch", onFilter: "onFilter", itemsSelect: "itemsSelect", onReload: "onReload", onAddCustomColumn: "onAddCustomColumn", onRemoveCustomColumn: "onRemoveCustomColumn", onColumnFilterReset: "onColumnFilterReset", onSort: "onSort", onPageSizeChange: "onPageSizeChange", onColumnReordered: "onColumnReordered", onColumnVisibilityChange: "onColumnVisibilityChange" }, host: { classAttribute: "d-contents" }, providers: [
             {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
                 useExisting: forwardRef(() => DataGridComponent)
             }
-        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i9.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i9.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i9.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i9.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i9.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i9.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i9.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i9.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i9.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i9.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i9.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i9.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i9.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i9.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.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$7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$4.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: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i19.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
+        ], queries: [{ propertyName: "expandableRow", first: true, predicate: ExpandableRowDirective, descendants: true }, { propertyName: "emptyState", first: true, predicate: EmptyStateContextDirective, descendants: true }, { propertyName: "columnRenderers", predicate: ColumnDirective }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scroll"], descendants: true, static: true }, { propertyName: "infiniteScrollContainer", first: true, predicate: ["infiniteScrollContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tableRef", first: true, predicate: CdkTable, descendants: true }, { propertyName: "thRefs", predicate: CdkHeaderCell, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"table-data-grid-scroll\"\n  #scroll\n  [ngClass]=\"{\n    'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent?.isLoading\n  }\"\n  data-cy=\"c8y-data-grid--table-data-grid-scroll\"\n>\n  <div\n    class=\"table-data-grid__loading--wrapper\"\n    *ngIf=\"(dataSource.loading$ | async) && !loadMoreComponent?.isLoading\"\n  >\n    <div class=\"table-data-grid__loading--loader\">\n      <c8y-loading\n        layout=\"application\"\n        [message]=\"loadingItemsLabel\"\n      ></c8y-loading>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-header separator large-padding\"\n    *ngIf=\"displayOptions.gridHeader\"\n  >\n    <div\n      class=\"h4\"\n      [ngClass]=\"{ 'm-r-16': !!title }\"\n    >\n      {{ title | translate }}\n    </div>\n\n    <ng-container *ngIf=\"displayOptions.filter\">\n      <span *ngIf=\"!filteringApplied\">\n        <small\n          class=\"m-r-4\"\n          *ngIf=\"!!filteringLabelsParams.allItemsCount\"\n          ngNonBindable\n          translate\n          [translateParams]=\"filteringLabelsParams\"\n        >\n          {{ filteredItemsCount }} of {{ allItemsCount }} items\n        </small>\n        <span\n          class=\"label label-default m-r-4\"\n          translate\n        >\n          No filters\n        </span>\n      </span>\n      <span\n        class=\"d-flex a-i-center\"\n        *ngIf=\"filteringApplied\"\n      >\n        <ng-container *ngIf=\"!!filteringLabelsParams.allItemsCount\">\n          <div class=\"a-i-center\">\n            <span class=\"badge badge-info m-r-4\">\n              {{ (dataSource.stats$ | async).filteredSize }}\n            </span>\n            <small\n              ngNonBindable\n              translate\n              [translateParams]=\"filteringLabelsParams\"\n            >\n              of {{ allItemsCount }} items\n            </small>\n          </div>\n        </ng-container>\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          dropdown\n          #ddFilters=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddFilters.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btn btn-default btn-sm m-l-8\"\n            title=\"{{ 'Active filters' | translate }}\"\n            aria-haspopup=\"true\"\n            dropdownToggle\n            data-cy=\"c8y-data-grid--filters\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"filter\"\n            ></i>\n            <span>{{ 'Active filters' | translate }}</span>\n            <span class=\"p-relative p-l-4 p-r-16\">\n              <span class=\"badge badge-system p-absolute\">\n                {{ columnsWithFiltersApplied.length }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            class=\"dropdown-menu\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <div class=\"data-grid__dropdown bg-level-0\">\n              <ul class=\"list-unstyled m-0\">\n                <li\n                  *ngFor=\"let column of columnsWithFiltersApplied; let last = last\"\n                  [ngClass]=\"{ 'separator-bottom': !last }\"\n                >\n                  <ng-container>\n                    <div\n                      class=\"dropdown-header sticky-top text-truncate no-border-top p-b-0\"\n                      title=\"{{ (column.header | translate) || column.name }}\"\n                    >\n                      <label>\n                        {{ (column.header | translate) || column.name }}\n                      </label>\n                    </div>\n                    <div\n                      class=\"list-group-item borderless d-flex d-col\"\n                      *ngFor=\"\n                        let groupedFilterChips of column\n                          | mapToFilterChips\n                          | async\n                          | groupedFilterChips;\n                        let first = first\n                      \"\n                      [ngClass]=\"{ 'p-t-0': first }\"\n                    >\n                      <p\n                        class=\"small p-b-4\"\n                        *ngIf=\"groupedFilterChips.label\"\n                      >\n                        {{ groupedFilterChips.label | translate }}\n                      </p>\n                      <div class=\"d-flex a-i-center gap-4 flex-wrap\">\n                        <span\n                          class=\"tag tag--info chip\"\n                          *ngFor=\"let chip of groupedFilterChips.chips\"\n                        >\n                          <button\n                            class=\"btn btn-xs btn-clean text-10 m-r-4\"\n                            title=\"{{ 'Remove filter' | translate }}\"\n                            (click)=\"removeFilter(chip.remove())\"\n                            data-cy=\"c8y-data-grid--remove-chip\"\n                          >\n                            <i c8yIcon=\"times\"></i>\n                          </button>\n                          {{ chip.displayValue | translate }}\n                        </span>\n                      </div>\n                    </div>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-group-item separator-top sticky-bottom\">\n              <button\n                class=\"btn btn-sm btn-default\"\n                title=\"{{ 'Clear all filters' | translate }}\"\n                type=\"button\"\n                (click)=\"clearFilters()\"\n                data-cy=\"c8y-data-grid--clear-filters\"\n              >\n                {{ 'Clear all filters' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </span>\n\n      <button\n        class=\"btn-help btn-help--sm hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        [popover]=\"filtersHelpPopover\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"displayOptions.filter\"\n        data-cy=\"data-grid--help-filters\"\n      >\n        <i c8yIcon=\"question-circle-o\"></i>\n      </button>\n      <ng-template #filtersHelpPopover>\n        <div [innerHtml]=\"filtersHelpPopoverHtml | translate\"></div>\n      </ng-template>\n\n      <button\n        class=\"btn-clean text-primary hidden-xs hidden-sm\"\n        [attr.aria-label]=\"'Help' | translate\"\n        popover=\"{{ 'The counter for the total number of items might be inaccurate.' | translate }}\"\n        placement=\"right\"\n        triggers=\"focus\"\n        type=\"button\"\n        *ngIf=\"showCounterWarning\"\n      >\n        <i c8yIcon=\"warning\"></i>\n      </button>\n    </ng-container>\n\n    <div class=\"m-l-auto\">\n      <div class=\"btnbar d-flex a-i-center\">\n        <ng-container\n          *ngFor=\"let headerActionControl of headerActionControls | visibleControls | async\"\n        >\n          <ng-container *ngIf=\"!headerActionControl.template; else customTemplate\">\n            <button\n              class=\"btnbar-btn btn-link\"\n              title=\"{{ headerActionControl.text | translate }}\"\n              type=\"button\"\n              (click)=\"headerActionControl.callback()\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{\n                action: PX_ACTIONS.CUSTOM_ACTION,\n                customActionName: headerActionControl.text,\n                type: headerActionControl.type\n              }\"\n            >\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"headerActionControl.icon\"\n              ></i>\n              <span>{{ headerActionControl.text | translate }}</span>\n            </button>\n          </ng-container>\n          <ng-template #customTemplate>\n            <ng-container\n              *ngTemplateOutlet=\"\n                headerActionControl.template;\n                context: { headerActionControl: headerActionControl }\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n\n        <div\n          class=\"dropdown\"\n          placement=\"bottom left\"\n          *ngIf=\"configureColumnsEnabled\"\n          dropdown\n          #ddConfigureColumns=\"bs-dropdown\"\n          [cdkTrapFocus]=\"ddConfigureColumns.isOpen\"\n          [insideClick]=\"true\"\n        >\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Configure columns' | translate }}\"\n            type=\"button\"\n            data-cy=\"data-grid--custom-column-btn\"\n            dropdownToggle\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"columns\"\n            ></i>\n            <span>{{ 'Configure columns' | translate }}</span>\n          </button>\n\n          <ul\n            class=\"dropdown-menu data-grid__dropdown\"\n            *dropdownMenu\n            (click)=\"$event.stopPropagation()\"\n          >\n            <li>\n              <div\n                class=\"list-group m-0\"\n                cdkDropList\n                (cdkDropListDropped)=\"onColumnDrop($event)\"\n              >\n                <div\n                  *ngFor=\"let column of columns\"\n                  cdkDrag\n                  cdkDragLockAxis=\"y\"\n                >\n                  <ng-container *ngIf=\"!column.positionFixed\">\n                    <div class=\"list-group-item draggable-after p-0 a-i-center\">\n                      <label\n                        class=\"c8y-checkbox p-l-16\"\n                        title=\"{{ (column.header | translate) || column.name }}\"\n                        [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n                      >\n                        <input\n                          type=\"checkbox\"\n                          [(ngModel)]=\"column.visible\"\n                          (change)=\"\n                            updateGridColumnsSize(); emitConfigChange('changeColumnVisibility')\n                          \"\n                          c8yProductExperience\n                          inherit\n                          [actionData]=\"{\n                            action: PX_ACTIONS.CHANGE_VISIBILITY,\n                            column: column.name,\n                            visible: !column.visible\n                          }\"\n                        />\n                        <span></span>\n                        <span>{{ (column.header | translate) || column.name }}</span>\n                      </label>\n                      <button\n                        class=\"btn btn-dot showOnHover max-width-fit a-i-center\"\n                        [attr.aria-label]=\"'Remove`column,verb`' | translate\"\n                        tooltip=\"{{ 'Remove`column,verb`' | translate }}\"\n                        placement=\"left\"\n                        container=\"body\"\n                        type=\"button\"\n                        (click)=\"removeCustomColumn(poConfirm, column, ddConfigureColumns)\"\n                        *ngIf=\"column.custom\"\n                      >\n                        <c8y-popover-confirm\n                          [title]=\"'Confirm removal' | translate\"\n                          triggers=\"focus\"\n                          [placement]=\"'left'\"\n                          #poConfirm\n                        ></c8y-popover-confirm>\n                        <i\n                          c8yIcon=\"minus-circle\"\n                          data-cy=\"data-grid--custom-column-remove-btn\"\n                        ></i>\n                      </button>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </li>\n            <li\n              class=\"p-8 sticky-bottom separator-top\"\n              *ngIf=\"isConfigContextKnown\"\n            >\n              <button\n                class=\"btn btn-default btn-block\"\n                title=\"{{ 'Add custom column' | translate }}\"\n                type=\"button\"\n                data-cy=\"data-grid--add-custom-column\"\n                (click)=\"openCustomColumnModal(); ddConfigureColumns.hide()\"\n              >\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"plus-circle\"\n                ></i>\n                <span>{{ 'Add custom column' | translate }}</span>\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <button\n          class=\"btnbar-btn btn-link\"\n          title=\"{{ 'Reload' | translate }}\"\n          type=\"button\"\n          data-cy=\"data-grid--reload-btn\"\n          [disabled]=\"dataSource.loading$ | async\"\n          (click)=\"clickReload()\"\n        >\n          <i\n            class=\"m-r-4\"\n            c8yIcon=\"refresh\"\n          ></i>\n          <span>{{ 'Reload' | translate }}</span>\n        </button>\n\n        <div\n          class=\"input-group input-group-search m-l-sm-16 data-grid__search-input\"\n          *ngIf=\"!serverSideDataCallback || showSearch\"\n        >\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'Search\u2026' | translate }}\"\n            type=\"search\"\n            [ngModel]=\"searchText\"\n            (input)=\"searchText$.emit($event.target.value)\"\n          />\n          <div class=\"input-group-addon\">\n            <i\n              c8yIcon=\"search\"\n              *ngIf=\"searchText.length === 0\"\n            ></i>\n            <i\n              class=\"pointer\"\n              c8yIcon=\"times\"\n              *ngIf=\"searchText.length > 0\"\n              (click)=\"searchText = ''; searchText$.emit('')\"\n              c8yProductExperience\n              inherit\n              [actionData]=\"{ action: PX_ACTIONS.CLEAR_SEARCH }\"\n            ></i>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"table-data-grid-header-bulk-actions animated slideInDown fast\"\n      data-cy=\"table-data-grid-header-bulk-actions\"\n      *ngIf=\"selectedItemIds.length !== 0\"\n    >\n      <h4>\n        <ng-container [ngPlural]=\"selectedItemIds.length\">\n          <ng-template ngPluralCase=\"=1\">\n            <span translate>1 selected item.</span>\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: selectedItemIds.length }\"\n            >\n              {{ count }} selected items.\n            </span>\n          </ng-template>\n        </ng-container>\n        <br class=\"visible-xs\" />\n        <small *ngIf=\"!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize\">\n          <a\n            class=\"interact\"\n            (click)=\"setAllItemsSelected(true)\"\n            c8yProductExperience\n            inherit\n            [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n          >\n            <span\n              ngNonBindable\n              translate\n              [translateParams]=\"{ count: (dataSource.stats$ | async).filteredSize }\"\n            >\n              Select all {{ count }} items\n            </span>\n          </a>\n        </small>\n      </h4>\n      <div class=\"m-l-auto\">\n        <div class=\"btnbar d-flex\">\n          <ng-container\n            *ngFor=\"\n              let bulkActionControl of bulkActionControls | visibleControls: selectedItemIds | async\n            \"\n          >\n            <ng-container [ngSwitch]=\"bulkActionControl.type\">\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Export' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Export\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_EXPORT }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"sign-out\"></i>\n                <span>{{ 'Export' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ 'Delete' | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchCase=\"builtInActionType.Delete\"\n                [actionData]=\"{ action: PX_ACTIONS.BULK_DELETE }\"\n                c8yProductExperience\n                inherit\n              >\n                <i c8yIcon=\"delete\"></i>\n                <span>{{ 'Delete' | translate }}</span>\n              </button>\n\n              <button\n                class=\"btnbar-btn\"\n                title=\"{{ bulkActionControl.text | translate }}\"\n                type=\"button\"\n                (click)=\"bulkActionControl.callback(selectedItemIds, reload.bind(this))\"\n                *ngSwitchDefault\n                [actionData]=\"{\n                  action: PX_ACTIONS.BULK_CUSTOM_ACTION,\n                  customActionName: bulkActionControl.text\n                }\"\n                c8yProductExperience\n                inherit\n              >\n                <i\n                  [class]=\"bulkActionControl.iconClasses\"\n                  c8yIcon=\"{{ bulkActionControl.icon }}\"\n                ></i>\n                <span>{{ bulkActionControl.text | translate }}</span>\n              </button>\n            </ng-container>\n          </ng-container>\n\n          <button\n            class=\"btnbar-btn\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"cancel()\"\n            [actionData]=\"{\n              action: PX_ACTIONS.BULK_CANCEL\n            }\"\n            c8yProductExperience\n            inherit\n          >\n            <i c8yIcon=\"times\"></i>\n            <span>{{ 'Cancel' | translate }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <table\n    class=\"table table-filtered-sorted table-data-grid large-padding\"\n    [class.table-striped]=\"displayOptions.striped\"\n    [class.table-bordered]=\"displayOptions.bordered\"\n    [class.table-hover]=\"displayOptions.hover\"\n    [class.table-data-grid-with-checkboxes]=\"selectable\"\n    [class.table-data-grid-with-actions]=\"actionControls.length > 0\"\n    [style.grid-template-columns]=\"styles.gridTemplateColumns\"\n    cdk-table\n    [dataSource]=\"dataSource\"\n    [multiTemplateDataRows]=\"true\"\n    (mousemove)=\"resizeHandleContainerMouseMove$.emit($event)\"\n    (mouseup)=\"resizeHandleContainerMouseUp$.emit($event)\"\n    data-cy=\"c8y-data-grid--table\"\n  >\n    <ng-container\n      *ngFor=\"let column of columns; let i = index; trackBy: trackByName\"\n      [cdkColumnDef]=\"column.name\"\n    >\n      <ng-container [ngSwitch]=\"column.name\">\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <div>\n              <label class=\"c8y-checkbox\">\n                <input\n                  [attr.aria-label]=\"'Selected' | translate\"\n                  type=\"checkbox\"\n                  [checked]=\"currentPageSelectionState.allSelected\"\n                  [indeterminate]=\"\n                    !(\n                      currentPageSelectionState.allSelected ||\n                      currentPageSelectionState.allDeselected\n                    )\n                  \"\n                  (change)=\"setAllItemsInCurrentPageSelected($event.target.checked)\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{ action: PX_ACTIONS.SELECT_ALL_ITEMS }\"\n                />\n                <span></span>\n              </label>\n            </div>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-checkbox\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                type=\"checkbox\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"setItemsSelected([row], $event.target.checked)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--checkbox\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'radio-button'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          ></th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <label class=\"c8y-radio\">\n              <input\n                [attr.aria-label]=\"'Selected' | translate\"\n                name=\"select-row\"\n                type=\"radio\"\n                [checked]=\"isItemSelected(row)\"\n                (change)=\"changeSelectedItem(row)\"\n                c8yProductExperience\n                inherit\n                [actionData]=\"{\n                  action: PX_ACTIONS.SELECT_ITEM,\n                  id: row.id\n                }\"\n                data-cy=\"c8y-data-grid--radio\"\n              />\n              <span></span>\n            </label>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'actions'\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            data-type=\"icon\"\n          >\n            <p class=\"text-medium sr-only\">{{ 'Actions' | translate }}</p>\n          </th>\n\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            data-type=\"icon\"\n          >\n            <ng-container\n              *ngFor=\"\n                let actionControl of actionControls\n                  | visibleControls: row\n                  | async\n                  | slice: 0 : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n              \"\n            >\n              <ng-container [ngSwitch]=\"actionControl.type\">\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  tooltip=\"{{ 'Edit' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  *ngSwitchCase=\"builtInActionType.Edit\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  c8yProductExperience\n                  inherit\n                  [actionData]=\"{\n                    action: PX_ACTIONS.EDIT_ITEM,\n                    id: row.id\n                  }\"\n                  data-cy=\"c8y-data-grid--edit-button-in-row\"\n                >\n                  <i c8yIcon=\"pencil\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot btn-dot--danger showOnHover\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  tooltip=\"{{ 'Delete' | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [delay]=\"500\"\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  *ngSwitchCase=\"builtInActionType.Delete\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.DELETE_ITEM,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  data-cy=\"c8y-data-grid--remove-button-in-row\"\n                >\n                  <i c8yIcon=\"delete\"></i>\n                </button>\n\n                <button\n                  class=\"btn btn-dot\"\n                  [attr.aria-label]=\"(actionControl.icon ? actionControl.text : '') | translate\"\n                  tooltip=\"{{ (actionControl.icon ? actionControl.text : '') | translate }}\"\n                  container=\"body\"\n                  type=\"button\"\n                  [ngClass]=\"{ showOnHover: actionControl.showOnHover }\"\n                  [delay]=\"500\"\n                  *ngSwitchDefault\n                  (click)=\"actionControl.callback(row, reload.bind(this))\"\n                  [actionData]=\"{\n                    action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                    customActionName: actionControl.text,\n                    id: row.id\n                  }\"\n                  c8yProductExperience\n                  inherit\n                  [attr.data-cy]=\"'c8y-data-grid--button-in-row--' + actionControl.text\"\n                >\n                  <i\n                    c8yIcon=\"{{ actionControl.icon }}\"\n                    *ngIf=\"actionControl.icon\"\n                  ></i>\n                  <span *ngIf=\"!actionControl.icon\">{{ actionControl.text | translate }}</span>\n                </button>\n              </ng-container>\n            </ng-container>\n\n            <div\n              [ngClass]=\"{\n                'm-l-auto overflow-visible':\n                  (actionControls | visibleControls: row | async)?.length > 2\n              }\"\n            >\n              <div\n                class=\"dropdown\"\n                placement=\"bottom right\"\n                container=\"body\"\n                dropdown\n                *ngIf=\"(actionControls | visibleControls: row | async)?.length > 2\"\n              >\n                <button\n                  class=\"dropdown-toggle c8y-dropdown\"\n                  title=\"{{ 'Actions' | translate }}\"\n                  aria-haspopup=\"true\"\n                  type=\"button\"\n                  data-cy=\"c8y-data-grid--row-actions-dropdown\"\n                  dropdownToggle\n                >\n                  <i c8yIcon=\"ellipsis-v\"></i>\n                </button>\n                <ul\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  *dropdownMenu\n                >\n                  <li\n                    *ngFor=\"\n                      let actionControl of actionControls\n                        | visibleControls: row\n                        | async\n                        | slice\n                          : ((actionControls | visibleControls: row | async)?.length > 2 ? 1 : 2)\n                    \"\n                  >\n                    <ng-container [ngSwitch]=\"actionControl.type\">\n                      <button\n                        title=\"{{ 'Edit' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Edit\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EDIT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"pencil\"></i>\n                        {{ 'Edit' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Delete' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Delete\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.DELETE_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"delete\"></i>\n                        {{ 'Delete' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ 'Export' | translate }}\"\n                        type=\"button\"\n                        *ngSwitchCase=\"builtInActionType.Export\"\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        [actionData]=\"{\n                          action: PX_ACTIONS.EXPORT_ITEM,\n                          id: row.id\n                        }\"\n                        c8yProductExperience\n                        inherit\n                      >\n                        <i c8yIcon=\"data-export\"></i>\n                        {{ 'Export' | translate }}\n                      </button>\n                      <button\n                        title=\"{{ actionControl.text | translate }}\"\n                        type=\"button\"\n                        *ngSwitchDefault\n                        (click)=\"actionControl.callback(row, reload.bind(this))\"\n                        c8yProductExperience\n                        inherit\n                        [actionData]=\"{\n                          action: PX_ACTIONS.CUSTOM_ACTION_ITEM,\n                          customActionName: actionControl.text,\n                          id: row.id\n                        }\"\n                      >\n                        <i c8yIcon=\"{{ actionControl.icon }}\"></i>\n                        {{ actionControl.text | translate }}\n                      </button>\n                    </ng-container>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n          <th\n            [class.sorted]=\"column.sortOrder\"\n            [class.filtered]=\"column | map: isColumnFilteringApplied\"\n            [class.hidden]=\"!column.visible\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [ngClass]=\"column.headerCSSClassName\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <div\n              [title]=\"(column.header | translate) || column.name\"\n              *ngIf=\"!column.filterable\"\n            >\n              <ng-container\n                *ngIf=\"\n                  [\n                    {\n                      columnName: column.name,\n                      value: (column.header | translate) || column.name\n                    }\n                  ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                \"\n              >\n                <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n              </ng-container>\n            </div>\n\n            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n            <div\n              class=\"dropdown\"\n              placement=\"bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }}\"\n              *ngIf=\"column.filterable\"\n              dropdown\n              #gridHeaderDropdown=\"bs-dropdown\"\n              [cdkTrapFocus]=\"gridHeaderDropdown.isOpen\"\n              [insideClick]=\"true\"\n            >\n              <button\n                class=\"btn-header\"\n                [title]=\"(column.header | translate) || column.name\"\n                type=\"button\"\n                [attr.data-cy]=\"'data-grid--header-btn--' + column.header\"\n                dropdownToggle\n              >\n                <ng-container\n                  *ngIf=\"\n                    [\n                      {\n                        columnName: column.name,\n                        value: (column.header | translate) || column.name\n                      }\n                    ] | map: getHeaderCellRendererSpec : this as cellRendererSpec\n                  \"\n                >\n                  <c8y-cell-renderer\n                    data-cy=\"c8y-data-grid--c8y-cell-renderer\"\n                    [spec]=\"cellRendererSpec\"\n                  ></c8y-cell-renderer>\n                </ng-container>\n                <i\n                  c8yIcon=\"filter\"\n                  title=\"{{ 'Filter' | translate }}\"\n                ></i>\n              </button>\n\n              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->\n              <ul\n                class=\"dropdown-menu\"\n                *dropdownMenu\n                [ngClass]=\"{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <li class=\"data-grid__dropdown\">\n                  <ng-container\n                    *ngIf=\"\n                      [\n                        {\n                          column: column,\n                          dropdown: gridHeaderDropdown\n                        }\n                      ] | map: getFilteringFormRendererSpec : this as filteringFormRendererSpec\n                    \"\n                  >\n                    <c8y-filtering-form-renderer\n                      class=\"bg-component\"\n                      [spec]=\"filteringFormRendererSpec\"\n                      data-cy=\"c8y-data-grid--c8y-filtering-form-renderer\"\n                    ></c8y-filtering-form-renderer>\n                  </ng-container>\n                </li>\n              </ul>\n            </div>\n\n            <button\n              class=\"btn-sort\"\n              [title]=\"sortColumnTitle | translate: { name: column.header | translate }\"\n              type=\"button\"\n              *ngIf=\"column.sortable\"\n              (click)=\"changeSortOrder(column.name)\"\n              data-cy=\"change-sort-order\"\n            >\n              <ng-container [ngSwitch]=\"column.sortOrder\">\n                <i\n                  c8yIcon=\"long-arrow-up\"\n                  *ngSwitchCase=\"'asc'\"\n                ></i>\n                <i\n                  c8yIcon=\"long-arrow-down\"\n                  *ngSwitchCase=\"'desc'\"\n                ></i>\n                <i\n                  c8yIcon=\"exchange\"\n                  *ngSwitchDefault\n                ></i>\n              </ng-container>\n            </button>\n\n            <span\n              class=\"resize-handle\"\n              *ngIf=\"column.resizable\"\n              (mousedown)=\"\n                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })\n              \"\n            ></span>\n          </th>\n\n          <td\n            [class.hidden]=\"!column.visible\"\n            [attr.data-cell-title]=\"column.header | translate\"\n            cdk-cell\n            *cdkCellDef=\"let row\"\n            [ngClass]=\"column.cellCSSClassName\"\n            [attr.data-cy]=\"'data-grid--' + column.header\"\n            [attr.data-type]=\"column.dataType\"\n          >\n            <ng-container\n              *ngIf=\"\n                [\n                  {\n                    value: resolveCellValue(row, column.path),\n                    row: row,\n                    columnName: column.name\n                  }\n                ] | map: getCellRendererSpec : this as cellRendererSpec\n              \"\n            >\n              <c8y-cell-renderer [spec]=\"cellRendererSpec\"></c8y-cell-renderer>\n            </ng-container>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-container cdkColumnDef=\"infiniteScrollFooter\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-footer-cell\n        *cdkFooterCellDef\n      >\n        <template #infiniteScrollContainer></template>\n      </td>\n    </ng-container>\n\n    <tr\n      cdk-header-row\n      *cdkHeaderRowDef=\"columnNames\"\n    ></tr>\n\n    <tr\n      data-cy=\"c8y-data-grid--row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: columnNames; let idx = dataIndex\"\n      [ngClass]=\"[\n        activeClassName && row === lastClickedRow ? activeClassName : '',\n        idx % 2 === 0 ? 'even' : 'odd'\n      ]\"\n      (mouseover)=\"rowMouseOver.emit(row)\"\n      (mouseleave)=\"rowMouseLeave.emit(row)\"\n      (click)=\"handleClick(row)\"\n    ></tr>\n\n    <tr\n      class=\"expanded-row\"\n      [ngClass]=\"{ hidden: !(expandedRows.get(row).visible$ | async) }\"\n      data-cy=\"c8y-data-grid--expanded-row-in-data-grid\"\n      cdk-row\n      *cdkRowDef=\"let row; columns: ['expanded-row']; when: isRowExpanded\"\n    ></tr>\n\n    <ng-container cdkColumnDef=\"expanded-row\">\n      <td\n        [style.grid-column]=\"styles.gridInfiniteScrollColumn\"\n        cdk-cell\n        *cdkCellDef=\"let row\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            expandableRow?.template;\n            context: {\n              $implicit: row,\n              asyncRenderSuccess: setExpandableRowVisible.bind(this, row, true),\n              asyncRenderFail: setExpandableRowVisible.bind(this, row, false)\n            }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <ng-container>\n      <tr\n        [ngClass]=\"{ hidden: !infiniteScroll }\"\n        cdk-footer-row\n        *cdkFooterRowDef=\"['infiniteScrollFooter']\"\n      ></tr>\n    </ng-container>\n  </table>\n\n  <div\n    class=\"d-flex m-0 p-t-40 p-b-40\"\n    *ngIf=\"\n      !(dataSource.loading$ | async) &&\n      ((dataSource.stats$ | async).filteredSize === 0 || (dataSource.data$ | async).length === 0)\n    \"\n  >\n    <div class=\"col-lg-3 col-sm-4 m-l-auto m-r-auto\">\n      <ng-content select=\"c8y-ui-empty-state, .c8y-empty-state\"></ng-content>\n      <ng-container\n        *ngTemplateOutlet=\"\n          emptyState?.templateRef;\n          context: { $implicit: emptyStateContext$ | async }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"table-data-grid-footer separator large-padding\"\n    *ngIf=\"pagination && !infiniteScroll\"\n  >\n    <div class=\"col-sm-4 no-gutter\">\n      <div\n        class=\"counter p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).currentPageSize > 0\"\n        data-cy=\"data-grid--counter\"\n      >\n        <span\n          class=\"text-muted\"\n          ngNonBindable\n          translate\n          [translateParams]=\"paginationLabelParams\"\n        >\n          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-center\">\n      <div\n        class=\"form-group form-inline p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > minPossiblePageSize\"\n      >\n        <label\n          class=\"m-r-4\"\n          for=\"filteredSize\"\n        >\n          {{ 'Items per page' | translate }}\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"filteredSize\"\n            data-cy=\"data-grid--pagesize-options\"\n            [ngModel]=\"pagination.pageSize\"\n            (ngModelChange)=\"\n              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })\n            \"\n          >\n            <option\n              *ngFor=\"let pageSize of possiblePageSizes\"\n              [ngValue]=\"pageSize\"\n            >\n              {{ pageSize }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"col-sm-4 no-gutter text-right\">\n      <pagination\n        [class.hidden]=\"hidePagination$ | async\"\n        class=\"p-t-8 p-b-8\"\n        *ngIf=\"(dataSource.stats$ | async).filteredSize > 0\"\n        [ngModel]=\"pagination.currentPage\"\n        (pageChanged)=\"updatePagination($event)\"\n        [totalItems]=\"(dataSource.stats$ | async).filteredSize\"\n        [itemsPerPage]=\"pagination.pageSize\"\n        (numPages)=\"totalPagesCount$.next($event)\"\n        [maxSize]=\"5\"\n        [boundaryLinks]=\"false\"\n        previousText=\"Previous\"\n        nextText=\"Next\"\n      ></pagination>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i2.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "component", type: i9.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i9.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i9.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i9.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i9.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i9.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i9.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i9.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i9.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i9.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i9.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i9.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i9.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i9.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.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$6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick", "adaptivePosition", "container"] }, { kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i2$4.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: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: i19.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CellRendererComponent, selector: "c8y-cell-renderer", inputs: ["spec"] }, { kind: "component", type: FilteringFormRendererComponent, selector: "c8y-filtering-form-renderer", inputs: ["spec"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: MapFunctionPipe, name: "map" }, { kind: "pipe", type: FilterMapperPipe, name: "mapToFilterChips" }, { kind: "pipe", type: GroupedFilterChips, name: "groupedFilterChips" }, { kind: "pipe", type: VisibleControlsPipe, name: "visibleControls" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -31354,7 +31358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }, {
                     type: Inject,
                     args: [DATA_GRID_CONFIGURATION_STRATEGY]
-                }] }, { type: DataGridService }, { type: i1$4.DomSanitizer }, { type: GainsightService }, { type: i1$6.BsModalService }, { type: AlertService }, { type: ActionControlsExtensionService }, { type: i1$5.ActivatedRoute }], propDecorators: { title: [{
+                }] }, { type: DataGridService }, { type: i1$3.DomSanitizer }, { type: GainsightService }, { type: i1$5.BsModalService }, { type: AlertService }, { type: ActionControlsExtensionService }, { type: i1$4.ActivatedRoute }], propDecorators: { title: [{
                 type: Input
             }], loadMoreItemsLabel: [{
                 type: Input
@@ -31979,7 +31983,7 @@ class ListDisplaySwitchComponent {
         return this.listKey || this.location.path();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ListDisplaySwitchComponent, deps: [{ token: i2.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: { listKey: "listKey", listLength: "listLength", filterPipe: "filterPipe" }, outputs: { onListClassChange: "onListClassChange" }, ngImport: i0, template: "<div class=\"form-group\">\n  <label class=\"m-r-8\" 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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: { listKey: "listKey", listLength: "listLength", filterPipe: "filterPipe" }, outputs: { onListClassChange: "onListClassChange" }, ngImport: i0, template: "<div class=\"form-group\">\n  <label class=\"m-r-8\" 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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ListDisplaySwitchComponent, decorators: [{
             type: Component,
@@ -32149,13 +32153,13 @@ class RangeDisplayComponent {
     isValueInRange(value, min, max) {
         return min != null && max != null && value >= min && value <= max;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RangeDisplayComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RangeDisplayComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: RangeDisplayComponent, selector: "c8y-range-display", inputs: { config: "config", display: "display" }, host: { properties: { "attr.style": "this.inlineStyle" } }, viewQueries: [{ propertyName: "rangeDisplay", first: true, predicate: ["rangeDisplay"], descendants: true }, { propertyName: "currentRangeElement", first: true, predicate: ["currentRangeElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max ?? 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RangeDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-range-display', template: "<div\n  [ngClass]=\"{\n    'range-display--vertical': config.orientation === 'vertical',\n    'range-display--compact': display === 'compact',\n    'range-display--inline': display === 'inline'\n  }\"\n  attr.data-label=\"{{ config.unit }}\"\n>\n  <div\n    class=\"range-display\"\n    #rangeDisplay\n  >\n    <div class=\"range-display__range\">\n      <div class=\"range-display__range__unit\">\n        {{ config.unit }}\n      </div>\n      <div\n        *ngIf=\"isYellowRangeDisplayed()\"\n        class=\"range-display__range__min\"\n      ></div>\n      <div\n        *ngIf=\"isRedRangeDisplayed()\"\n        class=\"range-display__range__max\"\n      ></div>\n      <div\n        *ngIf=\"checkTarget()\"\n        class=\"range-display__range__target\"\n        attr.data-label=\"{{ config.target }} {{ config.unit }}\"\n        title=\"{{ 'Target' | translate }}: {{ config.target }} {{ config.unit }}\"\n      ></div>\n      <div\n        [ngStyle]=\"{\n          display:\n            config.current != undefined &&\n            config.current >= config.min &&\n            config.current <= config.max\n              ? 'block'\n              : 'none'\n        }\"\n        #currentRangeElement\n        class=\"range-display__range__current\"\n        attr.data-label=\"{{ config.current }} {{ config.unit }} &#xa;{{ config.time | c8yDate }}\"\n        title=\"{{ 'Current' | translate }}: {{ config.current }} {{ config.unit }} | {{\n          config.time | c8yDate\n        }}\"\n      ></div>\n    </div>\n    <div class=\"range-display__ruler\">\n      <div\n        *ngFor=\"let x of [].constructor(10); let index = index; trackBy: trackByIndex\"\n        attr.data-label=\"{{ rulerCalc(index) }}\"\n        class=\"range-display__tick\"\n      ></div>\n      <div\n        attr.data-label=\"{{ config.max ?? 100 | number }}\"\n        class=\"range-display__tick\"\n      ></div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$4.DomSanitizer }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { config: [{
                 type: Input
             }], display: [{
                 type: Input
@@ -32364,7 +32368,7 @@ class SelectModalComponent {
             .filter(option => !option.selected)
             .map(selectedOption => selectedOption.obj);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectModalComponent, deps: [{ token: i1$6.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectModalComponent, deps: [{ token: i1$5.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SelectModalComponent, selector: "c8y-select-modal", inputs: { icon: "icon", title: "title", subTitle: "subTitle", items: "items", mode: "mode", disableSelected: "disableSelected", showFilter: "showFilter", additionalFilterTemplate: "additionalFilterTemplate", areMoreEntries: "areMoreEntries", labels: "labels", noItemsMessage: "noItemsMessage", hideEmptyItems: "hideEmptyItems" }, outputs: { result: "result", search: "search", onChoiceUpdated: "onChoiceUpdated" }, providers: [
             {
                 provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
@@ -32380,7 +32384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => SelectModalComponent)
                         }
                     ], template: "<div class=\"viewport-modal\">\n  <div class=\"modal-header dialog-header\">\n    <i [c8yIcon]=\"icon\"></i>\n    <h1\n      class=\"h3\"\n      id=\"modal-title\"\n    >\n      {{ title | translate }}\n    </h1>\n  </div>\n  <div class=\"p-16 text-center separator-bottom min-height-fit\">\n    <p class=\"m-b-8\">{{ subTitle | translate }}</p>\n    <div class=\"row\">\n      <div\n        *ngIf=\"showFilter\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <c8y-filter\n          [icon]=\"'search'\"\n          (onSearch)=\"updatePipe($event)\"\n        ></c8y-filter>\n      </div>\n      <div\n        *ngIf=\"additionalFilterTemplate\"\n        [ngClass]=\"{\n          'col-xs-6': showFilter && additionalFilterTemplate,\n          'col-xs-12': !showFilter || !additionalFilterTemplate\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"additionalFilterTemplate\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"modal-inner-scroll\"\n    id=\"modal-body\"\n  >\n    <div class=\"p-l-16 p-r-16\">\n      <div\n        class=\"panel m-t-8 m-b-8\"\n        *ngIf=\"!items || items.length === 0 || (emptyItemsOnly && hideEmptyItems)\"\n      >\n        <div class=\"c8y-empty-state text-left\">\n          <h1\n            class=\"c8y-icon-duocolor\"\n            c8yIcon=\"{{ icon }} \"\n          ></h1>\n          <p>{{ (noItemsMessage | translate) ?? 'No items to display.' | translate }}</p>\n        </div>\n      </div>\n    </div>\n    <c8y-list-group>\n      <ng-container *ngFor=\"let item of listItems | selectModalFilterPipe : filterTerm\">\n        <c8y-li *ngIf=\"item.options?.length > 0 || !hideEmptyItems\">\n          <c8y-li-icon>\n            <i c8yIcon=\"{{ icon }}\"></i>\n          </c8y-li-icon>\n\n          <c8y-li-body class=\"content-flex-30\">\n            <div class=\"col-9\">\n              <div\n                *ngFor=\"let bodyPart of item.body\"\n                [ngClass]=\"bodyPart.class\"\n              >\n                <c8y-highlight\n                  [title]=\"bodyPart.value\"\n                  [pattern]=\"filterTerm\"\n                  [text]=\"bodyPart.value\"\n                ></c8y-highlight>\n              </div>\n            </div>\n\n            <div\n              class=\"col-3 text-right\"\n              *ngIf=\"item.additionalInformation\"\n            >\n              <div [ngClass]=\"item.additionalInformation.class\">\n                {{ item.additionalInformation.value }}\n              </div>\n            </div>\n          </c8y-li-body>\n\n          <c8y-li-collapse *ngIf=\"item.options?.length > 0\">\n            <c8y-list-group>\n              <c8y-li *ngFor=\"let option of item.options\">\n                <c8y-li-radio\n                  [name]=\"mode === 'single' ? 'single' : item.groupId\"\n                  (onSelect)=\"updateChoice({ item: item, id: option.obj.id })\"\n                  [disabled]=\"option.disabled\"\n                  [selected]=\"option.selected\"\n                ></c8y-li-radio>\n                <c8y-li-body class=\"content-flex-20\">\n                  <div\n                    *ngFor=\"let optionPart of option.body; let i = index\"\n                    [ngClass]=\"optionPart.class\"\n                  >\n                    <c8y-highlight\n                      [pattern]=\"filterTerm\"\n                      [text]=\"optionPart.value\"\n                    ></c8y-highlight>\n                  </div>\n                  <ng-container\n                    *ngIf=\"option.template\"\n                    [ngTemplateOutlet]=\"option.template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, option: option }\"\n                  ></ng-container>\n                </c8y-li-body>\n              </c8y-li>\n            </c8y-list-group>\n          </c8y-li-collapse>\n        </c8y-li>\n      </ng-container>\n      <div *ngIf=\"areMoreEntries\">\n        <div\n          class=\"alert alert-info m-t-16 m-r-8 m-l-8\"\n          translate\n        >\n          Some entries might not be shown. Try narrowing search criteria.\n        </div>\n      </div>\n    </c8y-list-group>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ labels.cancel | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Cancel-button\"\n      *ngIf=\"labels.cancel\"\n      (click)=\"dismiss()\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.cancel }\"\n    >\n      {{ labels.cancel | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ labels.ok | translate }}\"\n      type=\"button\"\n      data-cy=\"select-modal--Save-button\"\n      (click)=\"select()\"\n      [disabled]=\"!selected\"\n      c8yProductExperience\n      inherit\n      [actionData]=\"{ result: labels.ok }\"\n    >\n      {{ labels.ok | translate }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$6.BsModalRef }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i1$5.BsModalRef }], propDecorators: { icon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -32552,7 +32556,7 @@ class TimeIntervalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimeIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TimeIntervalComponent, isStandalone: true, selector: "c8y-time-interval", inputs: { minCustomDate: "minCustomDate", maxCustomDate: "maxCustomDate", dateRangePickerConfig: "dateRangePickerConfig", selectedInterval: "selectedInterval" }, outputs: { interval: "interval" }, ngImport: i0, template: "<form class=\"form-inline\">\n  <div class=\"form-group\">\n    <div class=\"c8y-select-wrapper\">\n      <select\n        class=\"form-control\"\n        [attr.aria-label]=\"'Time interval' | translate\"\n        name=\"interval\"\n        [(ngModel)]=\"selectedInterval\"\n        (ngModelChange)=\"changeInterval($event)\"\n      >\n        <option\n          *ngFor=\"let interval of intvervals\"\n          [ngValue]=\"interval\"\n        >\n          {{ interval.label | translate }}\n        </option>\n      </select>\n    </div>\n  </div>\n\n  <div\n    class=\"form-group datepicker\"\n    *ngIf=\"selectedInterval === CUSTOM\"\n  >\n    <input\n      class=\"form-control\"\n      [placeholder]=\"'Select date range' | translate\"\n      bsDaterangepicker\n      [bsConfig]=\"dateRangePickerConfig\"\n      [minDate]=\"minCustomDate\"\n      [maxDate]=\"maxCustomDate\"\n      [(bsValue)]=\"customRange\"\n      (bsValueChange)=\"changeCustomRange($event)\"\n    />\n  </div>\n\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"selectedInterval === CUSTOM && (!customRange || customRange.length === 0)\"\n    (click)=\"reload()\"\n  >\n    <i c8yIcon=\"refresh\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$7.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i3.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TimeIntervalComponent, isStandalone: true, selector: "c8y-time-interval", inputs: { minCustomDate: "minCustomDate", maxCustomDate: "maxCustomDate", dateRangePickerConfig: "dateRangePickerConfig", selectedInterval: "selectedInterval" }, outputs: { interval: "interval" }, ngImport: i0, template: "<form class=\"form-inline\">\n  <div class=\"form-group\">\n    <div class=\"c8y-select-wrapper\">\n      <select\n        class=\"form-control\"\n        [attr.aria-label]=\"'Time interval' | translate\"\n        name=\"interval\"\n        [(ngModel)]=\"selectedInterval\"\n        (ngModelChange)=\"changeInterval($event)\"\n      >\n        <option\n          *ngFor=\"let interval of intvervals\"\n          [ngValue]=\"interval\"\n        >\n          {{ interval.label | translate }}\n        </option>\n      </select>\n    </div>\n  </div>\n\n  <div\n    class=\"form-group datepicker\"\n    *ngIf=\"selectedInterval === CUSTOM\"\n  >\n    <input\n      class=\"form-control\"\n      [placeholder]=\"'Select date range' | translate\"\n      bsDaterangepicker\n      [bsConfig]=\"dateRangePickerConfig\"\n      [minDate]=\"minCustomDate\"\n      [maxDate]=\"maxCustomDate\"\n      [(bsValue)]=\"customRange\"\n      (bsValueChange)=\"changeCustomRange($event)\"\n    />\n  </div>\n\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Reload' | translate\"\n    type=\"button\"\n    [disabled]=\"selectedInterval === CUSTOM && (!customRange || customRange.length === 0)\"\n    (click)=\"reload()\"\n  >\n    <i c8yIcon=\"refresh\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i3.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimeIntervalComponent, decorators: [{
             type: Component,
@@ -32660,7 +32664,7 @@ class WizardService extends ExtensionPointForPlugins {
     getUniqIdentifierForKeys(entry, keys) {
         return keys.map(key => entry[key]).join('_');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardService, deps: [{ token: i0.Injector }, { token: i1$4.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardService, decorators: [{
@@ -32668,7 +32672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.Router }, { type: PluginsResolveService }] });
 
 class WizardOutletComponent {
     constructor(router, c8yWizardService, viewContainerRef, injector) {
@@ -32765,13 +32769,13 @@ class WizardOutletComponent {
         Object.assign(componentInstance.instance, this.initialState);
         this.componentInstance = componentInstance;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardOutletComponent, deps: [{ token: i1$5.Router }, { token: WizardService }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardOutletComponent, deps: [{ token: i1$4.Router }, { token: WizardService }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WizardOutletComponent, selector: "c8y-wizard-outlet", inputs: { initialState: "initialState", id: "id" }, outputs: { onSelect: "onSelect", onPath: "onPath" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n  <div class=\"modal-inner-scroll animated fadeIn\" *ngIf=\"showList\" id=\"modal-body\">\n    <p class=\"p-16 text-center text-medium separator-bottom\">\n      <span translate>Select method</span>\n    </p>\n    <div class=\"list-group list-group-links\" *ngIf=\"entries.length > 0; else emptyState\">\n      <button\n        *ngFor=\"let entry of entries\"\n        type=\"button\"\n        class=\"list-group-item d-flex a-i-center p-t-8 p-b-8\"\n        (click)=\"handleEntry(entry)\"\n      >\n        <div class=\"list-item-icon\">\n          <i [c8yIcon]=\"entry.c8yIcon || 'cogs'\"></i>\n        </div>\n        <div title=\"{{ entry.name | translate }}\" class=\"list-item-body text-truncate\">\n          {{ entry.name | translate }}\n        </div>\n      </button>\n    </div>\n\n    <ng-template #emptyState>\n      <div class=\"c8y-empty-state\">\n        <p>{{ 'No options available.' | translate }}</p>\n      </div>\n    </ng-template>\n  </div>\n</ng-container>\n<template #container [hidden]=\"showList\"></template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-wizard-outlet', template: "<ng-container>\n  <div class=\"modal-inner-scroll animated fadeIn\" *ngIf=\"showList\" id=\"modal-body\">\n    <p class=\"p-16 text-center text-medium separator-bottom\">\n      <span translate>Select method</span>\n    </p>\n    <div class=\"list-group list-group-links\" *ngIf=\"entries.length > 0; else emptyState\">\n      <button\n        *ngFor=\"let entry of entries\"\n        type=\"button\"\n        class=\"list-group-item d-flex a-i-center p-t-8 p-b-8\"\n        (click)=\"handleEntry(entry)\"\n      >\n        <div class=\"list-item-icon\">\n          <i [c8yIcon]=\"entry.c8yIcon || 'cogs'\"></i>\n        </div>\n        <div title=\"{{ entry.name | translate }}\" class=\"list-item-body text-truncate\">\n          {{ entry.name | translate }}\n        </div>\n      </button>\n    </div>\n\n    <ng-template #emptyState>\n      <div class=\"c8y-empty-state\">\n        <p>{{ 'No options available.' | translate }}</p>\n      </div>\n    </ng-template>\n  </div>\n</ng-container>\n<template #container [hidden]=\"showList\"></template>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.Router }, { type: WizardService }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { container: [{
+        }], ctorParameters: () => [{ type: i1$4.Router }, { type: WizardService }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef }]
             }], initialState: [{
@@ -32889,13 +32893,13 @@ class WizardComponent {
             this.wizardService.footerTemplate$.next({ template: this.footer, wizardId: this.id });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardComponent, deps: [{ token: WizardService }, { token: i1$6.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardComponent, deps: [{ token: WizardService }, { token: i1$5.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WizardComponent, selector: "c8y-wizard", inputs: { id: "id", wizardConfig: "wizardConfig" }, outputs: { onClose: "onClose", onReset: "onReset", onSelect: "onSelect" }, viewQueries: [{ propertyName: "header", first: true, predicate: ["headerRef"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["bodyRef"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footerRef"], descendants: true, static: true }, { propertyName: "outlet", first: true, predicate: WizardOutletComponent, descendants: true }], ngImport: i0, template: "<div class=\"viewport-modal animated fadeIn\">\n  <ng-template *ngTemplateOutlet=\"(headerTemplate$ | async)?.template\"></ng-template>\n\n  <ng-template #headerRef>\n    <div class=\"modal-header dialog-header animated fadeIn\">\n      <i [c8yIcon]=\"wizardConfig.headerIcon\"></i>\n      <h4 id=\"modal-title\">{{ wizardConfig.headerText | translate }}</h4>\n    </div>\n  </ng-template>\n\n  <ng-template *ngTemplateOutlet=\"(bodyTemplate$ | async)?.template\"></ng-template>\n\n  <ng-template #bodyRef>\n    <div class=\"p-16 p-t-8 text-center\" *ngIf=\"wizardConfig.bodyHeaderText\">\n      <div class=\"c8y-wizard-nav\">\n        <i [c8yIcon]=\"wizardConfig.bodyHeaderIcon\"></i>\n        <span>{{ wizardConfig.bodyHeaderText | translate }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <c8y-wizard-outlet\n    [initialState]=\"componentInitialState\"\n    [id]=\"id\"\n    (onSelect)=\"onSelect.emit($event)\"\n    (onPath)=\"onPath()\"\n  ></c8y-wizard-outlet>\n\n  <ng-template *ngTemplateOutlet=\"(footerTemplate$ | async)?.template\"></ng-template>\n  <ng-template #footerRef>\n    <div class=\"modal-footer animated fadeIn\">\n      <button\n        (click)=\"close()\"\n        type=\"button\"\n        class=\"btn btn-default\"\n        title=\"{{ 'Cancel' | translate }}\"\n      >\n        <span translate>Cancel</span>\n      </button>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: WizardOutletComponent, selector: "c8y-wizard-outlet", inputs: ["initialState", "id"], outputs: ["onSelect", "onPath"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-wizard', template: "<div class=\"viewport-modal animated fadeIn\">\n  <ng-template *ngTemplateOutlet=\"(headerTemplate$ | async)?.template\"></ng-template>\n\n  <ng-template #headerRef>\n    <div class=\"modal-header dialog-header animated fadeIn\">\n      <i [c8yIcon]=\"wizardConfig.headerIcon\"></i>\n      <h4 id=\"modal-title\">{{ wizardConfig.headerText | translate }}</h4>\n    </div>\n  </ng-template>\n\n  <ng-template *ngTemplateOutlet=\"(bodyTemplate$ | async)?.template\"></ng-template>\n\n  <ng-template #bodyRef>\n    <div class=\"p-16 p-t-8 text-center\" *ngIf=\"wizardConfig.bodyHeaderText\">\n      <div class=\"c8y-wizard-nav\">\n        <i [c8yIcon]=\"wizardConfig.bodyHeaderIcon\"></i>\n        <span>{{ wizardConfig.bodyHeaderText | translate }}</span>\n      </div>\n    </div>\n  </ng-template>\n  <c8y-wizard-outlet\n    [initialState]=\"componentInitialState\"\n    [id]=\"id\"\n    (onSelect)=\"onSelect.emit($event)\"\n    (onPath)=\"onPath()\"\n  ></c8y-wizard-outlet>\n\n  <ng-template *ngTemplateOutlet=\"(footerTemplate$ | async)?.template\"></ng-template>\n  <ng-template #footerRef>\n    <div class=\"modal-footer animated fadeIn\">\n      <button\n        (click)=\"close()\"\n        type=\"button\"\n        class=\"btn btn-default\"\n        title=\"{{ 'Cancel' | translate }}\"\n      >\n        <span translate>Cancel</span>\n      </button>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: WizardService }, { type: i1$6.BsModalRef }], propDecorators: { header: [{
+        }], ctorParameters: () => [{ type: WizardService }, { type: i1$5.BsModalRef }], propDecorators: { header: [{
                 type: ViewChild,
                 args: ['headerRef', { static: true }]
             }], body: [{
@@ -33055,7 +33059,7 @@ class WizardModalService {
         };
         return this.bsModalService.show(WizardComponent, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardModalService, deps: [{ token: i1$6.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardModalService, deps: [{ token: i1$5.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardModalService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardModalService, decorators: [{
@@ -33063,7 +33067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$6.BsModalService }] });
+        }], ctorParameters: () => [{ type: i1$5.BsModalService }] });
 
 class WizardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -33206,7 +33210,7 @@ class CountdownIntervalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CountdownIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: { countdownInterval: "countdownInterval" }, outputs: { countdownEnded: "countdownEnded" }, ngImport: i0, template: "<div\n  class=\"time-elapsed\"\n  [style.--timescope]=\"countdownInterval + 'ms'\"\n  [title]=\"'{{ secondsLeft }} s / {{ interval }} s' | translate: { secondsLeft: secondsUntilRefresh$ | async, interval: countdownInterval / 1000 }\"\n>\n  <svg\n    [ngClass]=\"{ 'time-on': runSpinner$ | async }\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle\n      cx=\"20\"\n      cy=\"20\"\n      r=\"15.8\"\n      stroke=\"var(--c8y-brand-primary)\"\n      stroke-width=\"6\"\n    />\n  </svg>\n\n  <span>{{ secondsUntilRefresh$ | async }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: { countdownInterval: "countdownInterval" }, outputs: { countdownEnded: "countdownEnded" }, ngImport: i0, template: "<div\n  class=\"time-elapsed\"\n  [style.--timescope]=\"countdownInterval + 'ms'\"\n  [title]=\"'{{ secondsLeft }} s / {{ interval }} s' | translate: { secondsLeft: secondsUntilRefresh$ | async, interval: countdownInterval / 1000 }\"\n>\n  <svg\n    [ngClass]=\"{ 'time-on': runSpinner$ | async }\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle\n      cx=\"20\"\n      cy=\"20\"\n      r=\"15.8\"\n      stroke=\"var(--c8y-brand-primary)\"\n      stroke-width=\"6\"\n    />\n  </svg>\n\n  <span>{{ secondsUntilRefresh$ | async }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CountdownIntervalComponent, decorators: [{
             type: Component,
@@ -33263,7 +33267,7 @@ class ColorInputComponent {
                 useExisting: forwardRef(() => ColorInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"input-group\">\n  <div class=\"color-input form-control\">\n    <div class=\"c8y-colorpicker\">\n      <input\n        type=\"color\"\n        [disabled]=\"isDisabled\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [ngModel]=\"currentValue\"\n        (ngModelChange)=\"valueChange($event)\"\n      />\n      <span [style.background-color]=\"currentValue\"></span>\n    </div>\n  </div>\n  <input\n    class=\"form-control\"\n    type=\"text\"\n    [disabled]=\"isDisabled\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [ngModel]=\"currentValue\"\n    (ngModelChange)=\"valueChange($event)\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        ], ngImport: i0, template: "<div class=\"input-group\">\n  <div class=\"color-input form-control\">\n    <div class=\"c8y-colorpicker\">\n      <input\n        type=\"color\"\n        [disabled]=\"isDisabled\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [ngModel]=\"currentValue\"\n        (ngModelChange)=\"valueChange($event)\"\n      />\n      <span [style.background-color]=\"currentValue\"></span>\n    </div>\n  </div>\n  <input\n    class=\"form-control\"\n    type=\"text\"\n    [disabled]=\"isDisabled\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [ngModel]=\"currentValue\"\n    (ngModelChange)=\"valueChange($event)\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -33586,12 +33590,12 @@ class ProviderConfigurationService extends Service {
     getDetailUrl(_) {
         return this.listUrl;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationService, deps: [{ token: i1$1.FetchClient }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationService, deps: [{ token: i1.FetchClient }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.FetchClient }, { type: i1$5.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1$4.ActivatedRoute }] });
 
 class ProviderDefinitionsService extends Service {
     constructor(client, activatedRoute) {
@@ -33602,12 +33606,12 @@ class ProviderDefinitionsService extends Service {
     async list() {
         return super.list();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderDefinitionsService, deps: [{ token: i1$1.FetchClient }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderDefinitionsService, deps: [{ token: i1.FetchClient }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderDefinitionsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderDefinitionsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.FetchClient }, { type: i1$5.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1$4.ActivatedRoute }] });
 
 class ProviderConfigurationComponent {
     constructor(permissions, activatedRoute, modalService, alertService, providerDefinitionsService, providerConfigurationService, jsonschema) {
@@ -33710,13 +33714,13 @@ class ProviderConfigurationComponent {
     removeEncryptedValues(configuration) {
         return mapValues(configuration, value => (value === '<<Encrypted>>' ? undefined : value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationComponent, deps: [{ token: Permissions }, { token: i1$5.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: "18.2.9", type: ProviderConfigurationComponent, 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: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.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: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i6.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: ProviderConfigurationComponent, 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: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.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: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i6.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-sms-gateway', providers: [ProviderConfigurationService, ProviderDefinitionsService], 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" }]
-        }], ctorParameters: () => [{ type: Permissions }, { type: i1$5.ActivatedRoute }, { type: ModalService }, { type: AlertService }, { type: ProviderDefinitionsService }, { type: ProviderConfigurationService }, { type: C8yJSONSchema }] });
+        }], ctorParameters: () => [{ type: Permissions }, { type: i1$4.ActivatedRoute }, { type: ModalService }, { type: AlertService }, { type: ProviderDefinitionsService }, { type: ProviderConfigurationService }, { type: C8yJSONSchema }] });
 
 class ProviderConfigurationRouteFactory {
     constructor(config) {
@@ -33805,7 +33809,7 @@ class ProviderConfigurationTabFactory {
     getNodeTabPath(nodePath, tabPath) {
         return `${nodePath.replace(/^\/|\/$/g, '')}/${tabPath.replace(/^\/|\/$/g, '')}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationTabFactory, deps: [{ token: HOOK_DYNAMIC_PROVIDER_CONFIG, optional: true }, { token: i1$5.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationTabFactory, deps: [{ token: HOOK_DYNAMIC_PROVIDER_CONFIG, optional: true }, { token: i1$4.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationTabFactory, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ProviderConfigurationTabFactory, decorators: [{
@@ -33816,7 +33820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }, {
                     type: Inject,
                     args: [HOOK_DYNAMIC_PROVIDER_CONFIG]
-                }] }, { type: i1$5.Router }, { type: i0.Injector }] });
+                }] }, { type: i1$4.Router }, { type: i0.Injector }] });
 
 class ProviderConfigurationModule {
     static config(config) {
@@ -33953,12 +33957,12 @@ class MeasurementRealtimeService extends RealtimeService {
     channel() {
         return '/measurements/*';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MeasurementRealtimeService, deps: [{ token: RealtimeSubjectService }, { token: i1$1.MeasurementService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MeasurementRealtimeService, deps: [{ token: RealtimeSubjectService }, { token: i1.MeasurementService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MeasurementRealtimeService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MeasurementRealtimeService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: RealtimeSubjectService }, { type: i1$1.MeasurementService }] });
+        }], ctorParameters: () => [{ type: RealtimeSubjectService }, { type: i1.MeasurementService }] });
 
 /**
  * A service for handling bulk operation realtime notifications in RxJS fashion.
@@ -34177,13 +34181,13 @@ class AssetTypesService {
         const hasRequiredUrl = call.url.includes('managedObjects');
         return hasRequiredMethod && hasRequiredUrl;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesService, deps: [{ token: AssetTypesRealtimeService }, { token: i1.ApiService }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesService, deps: [{ token: AssetTypesRealtimeService }, { token: i4.ApiService }, { token: AppStateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetTypesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: AssetTypesRealtimeService }, { type: i1.ApiService }, { type: AppStateService }] });
+        }], ctorParameters: () => [{ type: AssetTypesRealtimeService }, { type: i4.ApiService }, { type: AppStateService }] });
 
 function colorValidator(allowedModes) {
     return async (control) => {