@c8y/ngx-components 1021.52.0 → 1021.54.2

package/fesm2022/c8y-ngx-components.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, Injector, InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Pipe, EventEmitter, NgModule, LOCALE_ID, EnvironmentInjector, HostListener, NgModuleRef, createNgModule, Component, Output, HostBinding, forwardRef, SecurityContext, TemplateRef, APP_INITIALIZER, runInInjectionContext, effect, Self, SkipSelf, ViewChild, Attribute, ContentChild, ViewContainerRef, ContentChildren, ElementRef, ViewChildren, createComponent, importProvidersFrom, ChangeDetectionStrategy, SimpleChange, reflectComponentType, signal, Type, DestroyRef } from '@angular/core';
-import * as i2$2 from 'ngx-bootstrap/dropdown';
+import * as i1$4 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule, BsDropdownDirective } from 'ngx-bootstrap/dropdown';
-import * as i3$1 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import * as i3 from '@angular/cdk/a11y';
+import { A11yModule, CdkTrapFocus } 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, reduce, union, cloneDeep, uniqBy, assign, min, every, first, map as map$2, find, negate, upperFirst, memoize as memoize$1, property, some, entries, omitBy, isDate, 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, map as map$1, distinctUntilChanged as distinctUntilChanged$1, fromEvent, pipe, throwError, concat, EMPTY, timer, fromEventPattern, startWith as startWith$1, switchMap as switchMap$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, takeUntil, tap, catchError, first as first$1, retryWhen, delay, concatMap, debounce, sample, withLatestFrom, mergeMap, every as every$1, toArray, merge as merge$1, expand, skip, mapTo, finalize, reduce as reduce$1, combineLatestWith } from 'rxjs/operators';
 import * as i1 from '@c8y/client';
 import { ApplicationAvailability, OperationStatus, TenantLoginOptionType, UserManagementSource, GrantType, ApplicationType, BearerAuthFromSessionStorage, FetchClient, Client, PasswordStrength, QueriesUtil, InventoryService, UserService, ApplicationService, TenantService, AlarmService, aggregationType, Service } from '@c8y/client';
 import { __decorate, __metadata } from 'tslib';
-import * as i1$3 from '@angular/router';
+import * as i1$5 from '@angular/router';
 import { NavigationEnd, RouterModule as RouterModule$1, ActivationEnd, NavigationStart, PRIMARY_OUTLET, ActivatedRoute, ActivationStart, ChildActivationEnd, ROUTES, Router, NavigationCancel, NavigationError } from '@angular/router';
 import * as i4 from '@c8y/ngx-components/api';
 import { DataModule } from '@c8y/ngx-components/api';
@@ -18,27 +18,27 @@ import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2$1 from '@angular/cdk/scrolling';
 import { VIRTUAL_SCROLL_STRATEGY, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/common';
-import { formatDate, registerLocaleData, DOCUMENT, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, AsyncPipe } from '@angular/common';
-import * as i2$3 from 'ngx-bootstrap/tooltip';
+import { formatDate, registerLocaleData, DOCUMENT, DatePipe as DatePipe$1, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, NgStyle, CommonModule as CommonModule$1, NgFor, AsyncPipe, NgSwitch, NgSwitchCase } from '@angular/common';
+import * as i2$2 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { setTheme } from 'ngx-bootstrap/utils';
 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';
-import * as i3 from 'ngx-bootstrap/datepicker';
+import * as i1$2 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 { compare, coerce } from 'semver';
 import saveAs$1, { saveAs } from 'file-saver';
-import * as i1$2 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$7 from 'ngx-bootstrap/collapse';
+import * as i1$8 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
-import * as i1$4 from 'ngx-bootstrap/modal';
+import * as i1$6 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$5 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { NgModel, FormControlName, Validators, NG_VALIDATORS, ControlContainer, NgForm, NG_VALUE_ACCESSOR, FormControl, FormsModule as FormsModule$1, ReactiveFormsModule, CheckboxControlValueAccessor, FormArray, NgControl, FormGroup, FormBuilder } from '@angular/forms';
 import { parsePhoneNumberFromString } from 'libphonenumber-js/max';
 import * as i5 from 'angularx-qrcode';
@@ -47,7 +47,7 @@ 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$6 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -55,13 +55,12 @@ 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$1 from 'ngx-bootstrap/timepicker';
+import * as i3$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';
 import * as i5$2 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i20 from '@c8y/ngx-components/interval-picker';
 import { TimeSpanInMs, INTERVAL_VALUES, INTERVALS, INTERVAL_TITLES, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
 import * as i9 from '@angular/cdk/table';
 import { CdkTable, CdkHeaderCell, CdkTableModule } from '@angular/cdk/table';
@@ -4207,7 +4206,7 @@ class TranslateService {
             }
         }
     }
-    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.ɵ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: i1$2.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: [{
@@ -4218,7 +4217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
         }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: AppStateService }, { type: OptionsService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i3.BsLocaleService, decorators: [{
+                }] }, { type: i1$2.BsLocaleService, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -7400,7 +7399,7 @@ class MarkdownToHtmlPipe {
             }))
             : of('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MarkdownToHtmlPipe, deps: [{ token: i1$2.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: [{
@@ -7409,7 +7408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     name: 'markdownToHtml',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }] });
 
 class MoNameCacheService {
     constructor(inventoryService) {
@@ -10356,7 +10355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 
 class AppSwitcherComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppSwitcherComponent, selector: "c8y-app-switcher", ngImport: i0, template: "<div\n  class=\"app-switcher-dropdown\"\n  dropdown\n  #appSwitcherDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    title=\"{{ 'Application switcher' | translate }}\"\n    id=\"appSwitcherDropdown\"\n    type=\"button\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"th\"\n    ></i>\n  </button>\n  <div\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n    *dropdownMenu\n  >\n    <c8y-app-switcher-inline></c8y-app-switcher-inline>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: "component", type: AppSwitcherInlineComponent, selector: "c8y-app-switcher-inline" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AppSwitcherComponent, selector: "c8y-app-switcher", ngImport: i0, template: "<div\n  class=\"app-switcher-dropdown\"\n  dropdown\n  #appSwitcherDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"appSwitcherDropdown.isOpen\"\n>\n  <button\n    class=\"main-header-button c8y-dropdown dropdown-toggle\"\n    title=\"{{ 'Application switcher' | translate }}\"\n    id=\"appSwitcherDropdown\"\n    type=\"button\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-2x\"\n      c8yIcon=\"th\"\n    ></i>\n  </button>\n  <div\n    class=\"app-switcher-dropdown-menu dropdown-menu\"\n    aria-labelledby=\"appSwitcherDropdown\"\n    role=\"group\"\n    *dropdownMenu\n  >\n    <c8y-app-switcher-inline></c8y-app-switcher-inline>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: AppSwitcherInlineComponent, selector: "c8y-app-switcher-inline" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AppSwitcherComponent, decorators: [{
             type: Component,
@@ -10725,7 +10724,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$3.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$5.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: [{
@@ -10733,7 +10732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 /**
  * A <c8y-action-bar-item> can be added with content projection.
@@ -10920,7 +10919,7 @@ class ActionBarComponent {
         return -item.priority;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarComponent, deps: [{ token: GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ActionBarComponent, selector: "c8y-action-bar", inputs: { navigatorOpen: "navigatorOpen", hasTabs: "hasTabs", hasHeader: "hasHeader", isTabsHorizontal: "isTabsHorizontal", items$: "items$" }, host: { listeners: { "mousedown": "mouseDown($event.target)" }, properties: { "class.navigator-open": "this.navigatorOpen", "class.has-tabs": "this.hasTabs", "class.has-header": "this.hasHeader", "class.horizontal-tabs": "this.isTabsHorizontal", "class.c8y-ui-action-bar": "this.uiActionBar", "hidden": "this.hidden" }, classAttribute: "c8y-ui-action-bar" }, ngImport: i0, template: "<div\n  class=\"navbar-header\"\n  role=\"presentation\"\n>\n  <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n    <span class=\"text-primary\">{{ 'Action bar' | translate }}</span>\n  </p>\n</div>\n\n<div\n  class=\"navbar-collapse\"\n  id=\"page-toolbar\"\n  role=\"complementary\"\n>\n  <ul class=\"nav navbar-nav navbar-left gap-sm-8 p-l-sm-16 p-l-lg-0\">\n    <ng-container *ngFor=\"let item of left$ | async\">\n      <ng-container\n        *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n      ></ng-container>\n    </ng-container>\n  </ul>\n  <ul class=\"nav navbar-nav navbar-right gap-sm-8\">\n    <ng-container *ngFor=\"let item of right$ | async\">\n      <ng-container\n        *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n      ></ng-container>\n    </ng-container>\n    <li *ngIf=\"(more$ | async).length === 1; else moreWithMultipleOptions\">\n      <ng-container *ngFor=\"let item of more$ | async\">\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n        ></ng-container>\n      </ng-container>\n    </li>\n    <ng-template #moreWithMultipleOptions>\n      <li\n        class=\"no-remove more-wrapper\"\n        *ngIf=\"(more$ | async).length > 1\"\n      >\n        <div\n          class=\"dropdown\"\n          dropdown\n        >\n          <c8y-action-bar-item\n            [placement]=\"'right'\"\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown d-flex\"\n              title=\"{{ 'More\u2026' | translate }}\"\n              aria-haspopup=\"true\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"action-bar--button-more\"\n            >\n              <span\n                class=\"text-truncate\"\n                translate\n              >\n                More\u2026\n              </span>\n              <i [c8yIcon]=\"'caret-down'\"></i>\n            </button>\n            <ul class=\"dropdown-menu visible-xs\">\n              <ng-container *ngFor=\"let item of more$ | async\">\n                <ng-container\n                  *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n                ></ng-container>\n              </ng-container>\n            </ul>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right hidden-xs\"\n              *dropdownMenu\n            >\n              <ng-container *ngFor=\"let item of more$ | async\">\n                <ng-container\n                  *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n                ></ng-container>\n              </ng-container>\n            </ul>\n          </c8y-action-bar-item>\n        </div>\n      </li>\n    </ng-template>\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: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { 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: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { 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: ActionBarComponent, selector: "c8y-action-bar", inputs: { navigatorOpen: "navigatorOpen", hasTabs: "hasTabs", hasHeader: "hasHeader", isTabsHorizontal: "isTabsHorizontal", items$: "items$" }, host: { listeners: { "mousedown": "mouseDown($event.target)" }, properties: { "class.navigator-open": "this.navigatorOpen", "class.has-tabs": "this.hasTabs", "class.has-header": "this.hasHeader", "class.horizontal-tabs": "this.isTabsHorizontal", "class.c8y-ui-action-bar": "this.uiActionBar", "hidden": "this.hidden" }, classAttribute: "c8y-ui-action-bar" }, ngImport: i0, template: "<div\n  class=\"navbar-header\"\n  role=\"presentation\"\n>\n  <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n    <span class=\"text-primary\">{{ 'Action bar' | translate }}</span>\n  </p>\n</div>\n\n<div\n  class=\"navbar-collapse\"\n  id=\"page-toolbar\"\n  role=\"complementary\"\n>\n  <ul class=\"nav navbar-nav navbar-left gap-sm-8 p-l-sm-16 p-l-lg-0\">\n    <ng-container *ngFor=\"let item of left$ | async\">\n      <ng-container\n        *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n      ></ng-container>\n    </ng-container>\n  </ul>\n  <ul class=\"nav navbar-nav navbar-right gap-sm-8\">\n    <ng-container *ngFor=\"let item of right$ | async\">\n      <ng-container\n        *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n      ></ng-container>\n    </ng-container>\n    <li *ngIf=\"(more$ | async).length === 1; else moreWithMultipleOptions\">\n      <ng-container *ngFor=\"let item of more$ | async\">\n        <ng-container\n          *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n        ></ng-container>\n      </ng-container>\n    </li>\n    <ng-template #moreWithMultipleOptions>\n      <li\n        class=\"no-remove more-wrapper\"\n        *ngIf=\"(more$ | async).length > 1\"\n      >\n        <div\n          class=\"dropdown\"\n          dropdown\n        >\n          <c8y-action-bar-item\n            [placement]=\"'right'\"\n          >\n            <button\n              class=\"dropdown-toggle c8y-dropdown d-flex\"\n              title=\"{{ 'More\u2026' | translate }}\"\n              aria-haspopup=\"true\"\n              type=\"button\"\n              dropdownToggle\n              data-cy=\"action-bar--button-more\"\n            >\n              <span\n                class=\"text-truncate\"\n                translate\n              >\n                More\u2026\n              </span>\n              <i [c8yIcon]=\"'caret-down'\"></i>\n            </button>\n            <ul class=\"dropdown-menu visible-xs\">\n              <ng-container *ngFor=\"let item of more$ | async\">\n                <ng-container\n                  *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n                ></ng-container>\n              </ng-container>\n            </ul>\n            <ul\n              class=\"dropdown-menu dropdown-menu-right hidden-xs\"\n              *dropdownMenu\n            >\n              <ng-container *ngFor=\"let item of more$ | async\">\n                <ng-container\n                  *c8yOutlet=\"item.component || item.template; injector: item.injector\"\n                ></ng-container>\n              </ng-container>\n            </ul>\n          </c8y-action-bar-item>\n        </div>\n      </li>\n    </ng-template>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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: OutletDirective, selector: "[c8yOutlet]", inputs: ["c8yOutlet", "c8yOutletProperties", "c8yOutletInjector"] }, { 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: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { 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: ActionBarComponent, decorators: [{
             type: Component,
@@ -10975,7 +10974,7 @@ 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], imports: [BsDropdownModule,
             CommonModule,
-            CollapseModule, i1$3.RouterModule, ActionBarItemComponent], exports: [ActionBarComponent, ActionBarItemComponent] }); }
+            CollapseModule, i1$5.RouterModule, ActionBarItemComponent], exports: [ActionBarComponent, ActionBarItemComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionBarModule, imports: [BsDropdownModule,
             CommonModule,
             CollapseModule,
@@ -11067,7 +11066,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$3.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$5.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: [{
@@ -11075,7 +11074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 /**
  * This component is used as the outlet to show the action list.
@@ -11118,7 +11117,7 @@ class ActionOutletComponent {
         return -item.priority;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ActionOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ActionOutletComponent, selector: "c8y-action-outlet", inputs: { items: "items" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<ng-container *ngIf=\"(components$ | async)?.length > 0\">\n  <div class=\"main-header-item\" *ngFor=\"let item of components$ | async\">\n    <ng-container *c8yComponentOutlet=\"item.component; environmentInjector: item.injector\"></ng-container>\n  </div>\n</ng-container>\n<ng-container>\n  <div class=\"main-header-item\" *ngIf=\"(templatesAndLabels$ | async)?.length > 0\">\n    <div class=\"dropdown\" dropdown>\n      <button\n        type=\"button\"\n        class=\"main-header-button dropdown-toggle c8y-dropdown\"\n        dropdownToggle\n        aria-haspopup=\"true\"\n        title=\"{{ 'Actions' | translate }}\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\" class=\"icon-2x\"></i>\n      </button>\n\n      <ul class=\"dropdown-menu cog-dropdown\" *dropdownMenu>\n        <ng-container *ngFor=\"let item of templatesAndLabels$ | async\">\n          <ng-container *c8yOutlet=\"item.template; injector: item.injector\"></ng-container>\n          <li *ngIf=\"item.label\">\n            <button\n              title=\"{{ item.label | translate }}\"\n              type=\"button\"\n              [attr.disabled]=\"item.disabled ? 'disabled' : null\"\n              (click)=\"invoke(item)\"\n            >\n              <i *ngIf=\"item.icon\" [c8yIcon]=\"item.icon\"></i>\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { 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: "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: ActionOutletComponent, selector: "c8y-action-outlet", inputs: { items: "items" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<ng-container *ngIf=\"(components$ | async)?.length > 0\">\n  <div class=\"main-header-item\" *ngFor=\"let item of components$ | async\">\n    <ng-container *c8yComponentOutlet=\"item.component; environmentInjector: item.injector\"></ng-container>\n  </div>\n</ng-container>\n<ng-container>\n  <div class=\"main-header-item\" *ngIf=\"(templatesAndLabels$ | async)?.length > 0\">\n    <div class=\"dropdown\" dropdown>\n      <button\n        type=\"button\"\n        class=\"main-header-button dropdown-toggle c8y-dropdown\"\n        dropdownToggle\n        aria-haspopup=\"true\"\n        title=\"{{ 'Actions' | translate }}\"\n      >\n        <i [c8yIcon]=\"'plus-circle'\" class=\"icon-2x\"></i>\n      </button>\n\n      <ul class=\"dropdown-menu cog-dropdown\" *dropdownMenu>\n        <ng-container *ngFor=\"let item of templatesAndLabels$ | async\">\n          <ng-container *c8yOutlet=\"item.template; injector: item.injector\"></ng-container>\n          <li *ngIf=\"item.label\">\n            <button\n              title=\"{{ item.label | translate }}\"\n              type=\"button\"\n              [attr.disabled]=\"item.disabled ? 'disabled' : null\"\n              (click)=\"invoke(item)\"\n            >\n              <i *ngIf=\"item.icon\" [c8yIcon]=\"item.icon\"></i>\n              {{ item.label | translate }}\n            </button>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { 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: ActionOutletComponent, decorators: [{
             type: Component,
@@ -11188,7 +11187,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$3.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$5.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: [{
@@ -11515,13 +11514,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$3.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$5.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$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 /**
  * A service which defines header functions.
@@ -12189,7 +12188,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$3.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$5.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: [{
@@ -12197,7 +12196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 /**
  * Default steppers used in the platform. Use this too hook into
@@ -12313,7 +12312,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$3.Router }, { token: i1$1.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$5.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: [{
@@ -12321,7 +12320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: i1$1.TranslateService }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: i1$1.TranslateService }, { type: PluginsResolveService }] });
 
 /**
  * The state determines the current status of the wizard:
@@ -12520,7 +12519,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$3.Router }, { token: i1$1.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$5.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: [{
@@ -12528,7 +12527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: i1$1.TranslateService }, { type: OptionsService }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: i1$1.TranslateService }, { type: OptionsService }, { type: PluginsResolveService }] });
 
 class ConfirmModalComponent {
     set labels(labels) {
@@ -12574,13 +12573,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$4.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$6.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$4.BsModalRef }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i1$6.BsModalRef }], propDecorators: { title: [{
                 type: Input
             }], body: [{
                 type: Input
@@ -12678,7 +12677,7 @@ class ModalService {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, deps: [{ token: i1$4.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$6.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: [{
@@ -12686,7 +12685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$4.BsModalService }, { type: GainsightService }] });
+        }], ctorParameters: () => [{ type: i1$6.BsModalService }, { type: GainsightService }] });
 
 /**
  * Service to manage the login.
@@ -13367,7 +13366,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$3.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$5.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: [{
@@ -13375,7 +13374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 const legalNoticesItem = {
     icon: 'gavel',
@@ -13563,7 +13562,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$3.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$5.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: [{
@@ -13571,7 +13570,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$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: OptionsService }, { type: AppStateService }, { type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 /**
  * A hook to use for Multi Provider extension.
@@ -13650,7 +13649,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$3.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$5.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: [{
@@ -13658,15 +13657,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
-class UserMenuService extends StateService {
-    constructor() {
-        super();
-        this.state$ = new BehaviorSubject({
-            userMenuItems: new Set()
-        });
-        this.items$ = this.state$.pipe(map(state => Array.from(state.userMenuItems.values())), map(items => sortByPriority(items)), distinctUntilChanged());
+/**
+ * A hook to use for Multi Provider extension.
+ * Consider using the `hookUserMenu` function instead.
+ */
+const HOOK_USER_MENU = new InjectionToken('HOOK_USER_MENU');
+/**
+ * You can either provide a single `UserMenuItem` as parameter:
+ * ```typescript
+ * hookUserMenu(...)
+ * ```
+ *
+ * Or an array to directly register multiple:
+ * ```typescript
+ * hookUserMenu([...])
+ * ```
+ *
+ * Or you provide a Service that implements `ExtensionFactory<UserMenuItem>`
+ * ```typescript
+ * export class MyUserMenuFactory implements ExtensionFactory<UserMenuItem> {...}
+ * ...
+ * hookUserMenu(MyUserMenuFactory)
+ * ```
+ * @param userMenu The `UserMenuItem`'s or `ExtensionFactory` to be provided.
+ * @param options The options to use for the hook.
+ * @returns A `Provider` to be provided in your module.
+ */
+function hookUserMenu(userMenu, options) {
+    return hookGeneric(userMenu, HOOK_USER_MENU, options);
+}
+class UserMenuService extends ExtensionPointForPlugins {
+    constructor(rootInjector, router, pluginService) {
+        super(rootInjector, pluginService);
+        this.router = router;
+        this.items$ = this.setupItemsObservable();
     }
     /**
      * Returns the current state.
@@ -13681,7 +13707,7 @@ class UserMenuService extends StateService {
      * @param item The item to add.
      */
     add(item) {
-        this.state.userMenuItems.add(item);
+        this.state.add(item);
         this.emitNewState();
     }
     /**
@@ -13689,10 +13715,21 @@ class UserMenuService extends StateService {
      * @param item The item to remove.
      */
     remove(item) {
-        this.state.userMenuItems.delete(item);
+        this.state.delete(item);
         this.emitNewState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /**
+     * Sets the items observable.
+     * @returns The items observable.
+     */
+    setupItemsObservable() {
+        return fromTriggerOnce(this.router, this.refresh$, [
+            getInjectedHooks(HOOK_USER_MENU, this.injectors),
+            () => this.factories,
+            stateToFactory(this.state$)
+        ]).pipe(map(items => Array.from(items.values())), map(items => sortByPriority(items)), distinctUntilChanged(), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserMenuService, deps: [{ token: i0.Injector }, { token: i1$5.Router }, { token: PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserMenuService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserMenuService, decorators: [{
@@ -13700,7 +13737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 class SearchOutletComponent {
     constructor(alertService) {
@@ -13735,7 +13772,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$3.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$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$2.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,
@@ -13758,7 +13795,7 @@ class DrawerOutletComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DrawerOutletComponent, deps: [{ token: DrawerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: { position: "position", open: "open" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  id=\"navigator\"\n  class=\"navigator\"\n  [attr.aria-label]=\"'Navigator' | translate\"\n  [ngClass]=\"{ open: open }\"\n  *ngIf=\"isLeft$ | async; else right\"\n>\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</nav>\n\n<ng-template #right>\n  <aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"open\" [attr.aria-label]=\"'User menu' | translate\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </aside>\n</ng-template>\n\n<ng-template #content>\n  <ng-container *ngFor=\"let drawerItem of drawerItems$ | async\">\n    <ng-container *c8yComponentOutlet=\"drawerItem.component; environmentInjector: drawerItem.injector\"></ng-container>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: "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: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: { position: "position", open: "open" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  id=\"navigator\"\n  class=\"navigator\"\n  [attr.aria-label]=\"'Navigator' | translate\"\n  [ngClass]=\"{ open: open }\"\n  *ngIf=\"isLeft$ | async; else right\"\n>\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</nav>\n\n<ng-template #right>\n  <aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"open\" [attr.aria-label]=\"'User menu' | translate\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </aside>\n</ng-template>\n\n<ng-template #content>\n  <ng-container *ngFor=\"let drawerItem of drawerItems$ | async\">\n    <ng-container *c8yComponentOutlet=\"drawerItem.component; environmentInjector: drawerItem.injector\"></ng-container>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: "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: DrawerOutletComponent, decorators: [{
             type: Component,
@@ -13828,7 +13865,7 @@ class HeaderBarComponent {
         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: 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" }] }); }
+    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$2.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,
@@ -14295,15 +14332,16 @@ 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$1.TranslateService }, { token: i1$5.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 }); }
+    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: i2$3.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: RequiredInputPlaceholderDirective, isStandalone: true, selector: "input[required], input[formControlName]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RequiredInputPlaceholderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[required], input[formControlName]'
+                    selector: 'input[required], input[formControlName]',
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.TranslateService }, { type: i1$5.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.TranslateService }, { type: i2$3.NgControl, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -14399,7 +14437,7 @@ class SmsChallengeComponent {
         }
     }
     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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -14488,7 +14526,7 @@ 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.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -14530,7 +14568,7 @@ class RecoverPasswordComponent {
         }
     }
     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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -14670,13 +14708,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$4.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$6.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$4.BsModalRef, decorators: [{
+        }], ctorParameters: () => [{ type: i1$6.BsModalRef, decorators: [{
                     type: Optional
                 }] }], propDecorators: { onDismiss: [{
                 type: Output
@@ -14756,7 +14794,7 @@ class PasswordConfirmModalComponent {
         this.modal._dismiss();
     }
     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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -14781,13 +14819,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$4.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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$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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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$4.BsModalRef }], propDecorators: { currentPasswordEmitter: [{
+        }], ctorParameters: () => [{ type: i1$6.BsModalRef }], propDecorators: { currentPasswordEmitter: [{
                 type: Output
             }] } });
 
@@ -14868,12 +14906,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$4.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$6.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$4.BsModalService }] });
+        }], ctorParameters: () => [{ type: i1$6.BsModalService }] });
 
 class PasswordCheckListComponent {
     set password(password) {
@@ -15100,7 +15138,7 @@ class TotpChallengeComponent {
         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.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -15357,7 +15395,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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.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,
@@ -15455,7 +15493,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$4.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$6.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: [{
@@ -15590,7 +15628,7 @@ class InputGroupListComponent {
         this.onRemove.emit(this.index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputGroupListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InputGroupListComponent, selector: "c8y-input-group-list", inputs: { plus: "plus", minus: "minus", index: "index" }, outputs: { onRemove: "onRemove", onAdd: "onAdd" }, ngImport: i0, template: "<ng-container>\n  <div class=\"input-group\">\n    <ng-content></ng-content>\n    <div class=\"input-group-btn\">\n      <button\n        *ngIf=\"minus\"\n        tooltip=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        [delay]=\"500\"\n        type=\"button\"\n        class=\"btn btn-dot btn-dot--danger\"\n        (click)=\"remove()\"\n      >\n        <i c8yIcon=\"minus-circle\"></i>\n      </button>\n      <button\n        *ngIf=\"plus\"\n        tooltip=\"{{ 'Add' | translate }}\"\n        [attr.aria-label]=\"'Add' | translate\"\n        [delay]=\"500\"\n        type=\"button\"\n        class=\"btn btn-dot text-primary\"\n        (click)=\"add()\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: InputGroupListComponent, selector: "c8y-input-group-list", inputs: { plus: "plus", minus: "minus", index: "index" }, outputs: { onRemove: "onRemove", onAdd: "onAdd" }, ngImport: i0, template: "<ng-container>\n  <div class=\"input-group\">\n    <ng-content></ng-content>\n    <div class=\"input-group-btn\">\n      <button\n        *ngIf=\"minus\"\n        tooltip=\"{{ 'Remove' | translate }}\"\n        [attr.aria-label]=\"'Remove' | translate\"\n        [delay]=\"500\"\n        type=\"button\"\n        class=\"btn btn-dot btn-dot--danger\"\n        (click)=\"remove()\"\n      >\n        <i c8yIcon=\"minus-circle\"></i>\n      </button>\n      <button\n        *ngIf=\"plus\"\n        tooltip=\"{{ 'Add' | translate }}\"\n        [attr.aria-label]=\"'Add' | translate\"\n        [delay]=\"500\"\n        type=\"button\"\n        class=\"btn btn-dot text-primary\"\n        (click)=\"add()\"\n      >\n        <i c8yIcon=\"plus-circle\"></i>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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: InputGroupListComponent, decorators: [{
             type: Component,
@@ -15696,7 +15734,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$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$3.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: 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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IpRangeInputListComponent, decorators: [{
             type: Component,
@@ -15743,7 +15781,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$5.NgControl }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: JsonValidationPrettifierDirective, deps: [{ token: i2$3.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: [{
@@ -15751,7 +15789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     selector: 'textarea[prettyValidJson]'
                 }]
-        }], ctorParameters: () => [{ type: i1$5.NgControl }], propDecorators: { invalidJSON: [{
+        }], ctorParameters: () => [{ type: i2$3.NgControl }], propDecorators: { invalidJSON: [{
                 type: Output
             }] } });
 
@@ -16223,7 +16261,6 @@ class FormsModule {
             InputGroupListContainerDirective,
             JsonValidationPrettifierDirective,
             TextAreaRowHeightDirective,
-            RequiredInputPlaceholderDirective,
             IpRangeInputListComponent,
             FilterInputComponent,
             EmailsValidatorDirective,
@@ -16240,6 +16277,7 @@ class FormsModule {
             TooltipModule,
             FormGroupComponent,
             MessageDirective,
+            RequiredInputPlaceholderDirective,
             MessagesComponent], exports: [PhoneValidationDirective,
             DefaultValidationDirective,
             MinValidationDirective,
@@ -16280,6 +16318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         TooltipModule,
                         FormGroupComponent,
                         MessageDirective,
+                        RequiredInputPlaceholderDirective,
                         MessagesComponent
                     ],
                     exports: [
@@ -16316,7 +16355,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         InputGroupListContainerDirective,
                         JsonValidationPrettifierDirective,
                         TextAreaRowHeightDirective,
-                        RequiredInputPlaceholderDirective,
                         IpRangeInputListComponent,
                         FilterInputComponent,
                         EmailsValidatorDirective,
@@ -16504,7 +16542,7 @@ class ChangePasswordComponent {
         }
     }
     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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$5.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$3.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -16610,7 +16648,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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -16742,7 +16780,7 @@ class TenantIdSetupComponent {
         }
     }
     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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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,
@@ -17021,13 +17059,13 @@ class TabsOutletComponent {
         const scrollLeft = el.scrollLeft;
         return { widthScroll, width, scrollLeft };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$3.Router }, { token: i0.Renderer2 }, { token: HeaderService }, { token: TabsService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen", outletName: "outletName", context: "context", openFirstTab: "openFirstTab", hasHeader: "hasHeader" }, host: { properties: { "class.has-header": "this.hasHeader", "class.navigator-open": "this.isNavigatorOpen", "class.page-tabs": "this.hasTabs", "class.page-tabs-horizontal": "this.isHorizontal", "class.page-tabs-vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            [queryParamsHandling]=\"'preserve'\"\n            #rla=\"routerLinkActive\"\n            [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n            (click)=\"tab.onSelect?.emit()\"\n          >\n            <i\n              [c8yIcon]=\"tab?.icon\"\n              *ngIf=\"!tab.template && tab?.icon\"\n            ></i>\n            <span\n              title=\"{{ tab?.label | translate }}\"\n              *ngIf=\"!tab.template && !tab.component\"\n            >\n              {{ tab?.label | translate }}\n            </span>\n            <span\n              class=\"dashboard-template-marker\"\n              tooltip=\"{{ tab?.tooltipText | translate }}\"\n              placement=\"bottom\"\n              container=\"body\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"300\"\n              *ngIf=\"!tab.template && tab?.badge\"\n            ></span>\n          </a>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n        </div>\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n    *ngIf=\"outletName\"\n    #tabsContainer\n  >\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByPath\">\n      <div\n        [ngClass]=\"{ active: tab.isActive }\"\n        [routerLink]=\"tab.path\"\n        [routerLinkActive]=\"tab.path ? 'active' : ''\"\n        [queryParamsHandling]=\"'preserve'\"\n      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    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 }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen", outletName: "outletName", context: "context", openFirstTab: "openFirstTab", hasHeader: "hasHeader" }, host: { properties: { "class.has-header": "this.hasHeader", "class.navigator-open": "this.isNavigatorOpen", "class.page-tabs": "this.hasTabs", "class.page-tabs-horizontal": "this.isHorizontal", "class.page-tabs-vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            [queryParamsHandling]=\"'preserve'\"\n            #rla=\"routerLinkActive\"\n            [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n            (click)=\"tab.onSelect?.emit()\"\n          >\n            <i\n              [c8yIcon]=\"tab?.icon\"\n              *ngIf=\"!tab.template && tab?.icon\"\n            ></i>\n            <span\n              title=\"{{ tab?.label | translate }}\"\n              *ngIf=\"!tab.template && !tab.component\"\n            >\n              {{ tab?.label | translate }}\n            </span>\n            <span\n              class=\"dashboard-template-marker\"\n              tooltip=\"{{ tab?.tooltipText | translate }}\"\n              placement=\"bottom\"\n              container=\"body\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"300\"\n              *ngIf=\"!tab.template && tab?.badge\"\n            ></span>\n          </a>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n        </div>\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n    *ngIf=\"outletName\"\n    #tabsContainer\n  >\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByPath\">\n      <div\n        [ngClass]=\"{ active: tab.isActive }\"\n        [routerLink]=\"tab.path\"\n        [routerLinkActive]=\"tab.path ? 'active' : ''\"\n        [queryParamsHandling]=\"'preserve'\"\n      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$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$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabsOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-tabs-outlet,c8y-ui-tabs', template: "<div\n  class=\"tabContainer\"\n  [ngClass]=\"{ 'hidden-xs': !outletName }\"\n  #container\n>\n  <button\n    class=\"tabs-slider tabs-slider-left\"\n    title=\"{{ 'Scroll to the left' | translate }}\"\n    type=\"button\"\n    #left\n    *ngIf=\"showLeft || showRight\"\n    [disabled]=\"!showLeft\"\n    (click)=\"scroll('left')\"\n  >\n    <i [c8yIcon]=\"'chevron-left'\"></i>\n  </button>\n  <button\n    class=\"tabs-slider tabs-slider-right\"\n    title=\"{{ 'Scroll to the right' | translate }}\"\n    type=\"button\"\n    #right\n    *ngIf=\"showRight || showLeft\"\n    [disabled]=\"!showRight\"\n    (click)=\"scroll('right')\"\n  >\n    <i [c8yIcon]=\"'chevron-right'\"></i>\n  </button>\n  <ng-container *ngIf=\"!outletName\">\n    <div\n      class=\"nav nav-tabs nav-tabsc8y\"\n      role=\"list\"\n      #tabsContainer\n    >\n      <ng-container *ngFor=\"let tab of tabs\">\n        <div\n          role=\"listitem\"\n          [ngClass]=\"{ active: rla?.isActive }\"\n          *ngIf=\"!tab.component && !tab.hide\"\n        >\n          <a\n            [routerLink]=\"tab.path\"\n            routerLinkActive\n            [queryParamsHandling]=\"'preserve'\"\n            #rla=\"routerLinkActive\"\n            [ngClass]=\"{ 'p-r-24': !tab.template && tab?.badge }\"\n            (click)=\"tab.onSelect?.emit()\"\n          >\n            <i\n              [c8yIcon]=\"tab?.icon\"\n              *ngIf=\"!tab.template && tab?.icon\"\n            ></i>\n            <span\n              title=\"{{ tab?.label | translate }}\"\n              *ngIf=\"!tab.template && !tab.component\"\n            >\n              {{ tab?.label | translate }}\n            </span>\n            <span\n              class=\"dashboard-template-marker\"\n              tooltip=\"{{ tab?.tooltipText | translate }}\"\n              placement=\"bottom\"\n              container=\"body\"\n              [adaptivePosition]=\"false\"\n              [delay]=\"300\"\n              *ngIf=\"!tab.template && tab?.badge\"\n            ></span>\n          </a>\n          <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n        </div>\n        <ng-container *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div\n    class=\"component-tabs nav nav-tabs nav-tabsc8y\"\n    *ngIf=\"outletName\"\n    #tabsContainer\n  >\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByPath\">\n      <div\n        [ngClass]=\"{ active: tab.isActive }\"\n        [routerLink]=\"tab.path\"\n        [routerLinkActive]=\"tab.path ? 'active' : ''\"\n        [queryParamsHandling]=\"'preserve'\"\n      >\n        <a\n          class=\"pointer\"\n          title=\"{{ tab?.label | translate }}\"\n          (click)=\"tab.onSelect?.emit()\"\n        >\n          <i [c8yIcon]=\"tab?.icon\"></i>\n          <span>\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<div\n  class=\"visible-xs mobile-tabs\"\n  *ngIf=\"!outletName\"\n>\n  <ul class=\"list-unstyled d-flex m-b-0\">\n    <li class=\"c8y-select-wrapper flex-grow\">\n      <select\n        (change)=\"navigateTo($event.target.value)\"\n        #select\n      >\n        <ng-container *ngFor=\"let tab of tabs\">\n          <option\n            *ngIf=\"!tab.component\"\n            [value]=\"tab.path\"\n            [selected]=\"isActive(tab)\"\n          >\n            {{ tab?.label | translate }}\n          </option>\n        </ng-container>\n      </select>\n    </li>\n    <ng-container *ngFor=\"let tab of tabs\">\n      <ng-container *ngIf=\"tab.component\">\n        <ng-container\n          *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }, { type: i1$3.ActivatedRoute }], propDecorators: { tabs: [{
+        }], ctorParameters: () => [{ type: i1$5.Router }, { type: i0.Renderer2 }, { type: HeaderService }, { type: TabsService }, { type: i1$5.ActivatedRoute }], propDecorators: { tabs: [{
                 type: Input
             }], orientation: [{
                 type: Input
@@ -17309,7 +17347,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$6.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) }
@@ -17321,7 +17359,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$6.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
@@ -17957,7 +17995,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$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -18031,13 +18069,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$4.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$6.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$4.BsModalService }, { type: CookieBannerService }] });
+        }], ctorParameters: () => [{ type: i1$6.BsModalService }, { type: CookieBannerService }] });
 
 class MessageBannerService {
     constructor() {
@@ -18211,7 +18249,7 @@ class BootstrapComponent {
         this.pluginsResolve.markPluginsAsLoaded();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootstrapComponent, deps: [{ token: TabsService }, { token: AppStateService }, { token: NavigatorService }, { token: ActionBarService }, { token: HeaderService }, { token: OptionsService }, { token: PluginsResolveService }, { token: SetupService }, { token: LoginService }, { token: TranslationLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootstrapComponent, selector: "c8y-bootstrap", ngImport: i0, template: "<c8y-message-banner\n  *ngIf=\"!(showLogin$ | async)\"\n  class=\"c8y-message-banner\"\n></c8y-message-banner>\n<c8y-login *ngIf=\"showLogin$ | async\"></c8y-login>\n\n<div\n  class=\"init-load\"\n  *ngIf=\"showLoadingIndicator$ | async\"\n>\n  <div class=\"spinner-snake\"></div>\n  <div class=\"mainlogo-placeholder mainlogo\"></div>\n</div>\n\n<div\n  [class.head-open]=\"headerService.headerOpen\"\n  *ngIf=\"showMainView$ | async\"\n>\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    #header\n  ></c8y-header-bar>\n  <c8y-drawer-outlet\n    [tabindex]=\"(headerService.navigatorOpen$ | async) ? '0' : '-1'\"\n    role=\"region\"\n    position=\"left\"\n    data-cy=\"bootstrap.template--c8y-drawer-outlet\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  ></c8y-drawer-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    role=\"navigation\"\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  ></c8y-tabs-outlet>\n  <c8y-action-bar\n    role=\"group\"\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [hasHeader]=\"tabsComponent.hasHeader\"\n    [isTabsHorizontal]=\"tabsComponent?.isHorizontal\"\n    [items$]=\"actionBar.items$\"\n  ></c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent?.hidden,\n      'has-header': headerService.hideHeader\n    }\"\n  >\n    <main\n      class=\"container-fluid\"\n      id=\"main-content\"\n      tabindex=\"-1\"\n    >\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </main>\n  </div>\n</div>\n\n<div *ngIf=\"showSetup$ | async\">\n  <c8y-header-bar\n    *ngIf=\"!headerService.hideHeader\"\n    [simple]=\"true\"\n  ></c8y-header-bar>\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <div\n    class=\"mcontainer\"\n    role=\"main\"\n  >\n    <div class=\"container-fluid\">\n      <c8y-setup></c8y-setup>\n    </div>\n  </div>\n</div>\n\n<c8y-cookie-banner></c8y-cookie-banner>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderBarComponent, selector: "c8y-header-bar", inputs: ["simple"] }, { kind: "component", type: LoginComponent, selector: "c8y-login", inputs: ["name"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: ActionBarComponent, selector: "c8y-action-bar", inputs: ["navigatorOpen", "hasTabs", "hasHeader", "isTabsHorizontal", "items$"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: SetupComponent, selector: "c8y-setup" }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: CookieBannerComponent, selector: "c8y-cookie-banner" }, { kind: "component", type: MessageBannerComponent, selector: "c8y-message-banner" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    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", "openFirstTab", "hasHeader"] }, { kind: "component", type: ActionBarComponent, selector: "c8y-action-bar", inputs: ["navigatorOpen", "hasTabs", "hasHeader", "isTabsHorizontal", "items$"] }, { kind: "component", type: AlertOutletComponent, selector: "c8y-alert-outlet" }, { kind: "component", type: SetupComponent, selector: "c8y-setup" }, { kind: "component", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: ["position", "open"] }, { kind: "component", type: CookieBannerComponent, selector: "c8y-cookie-banner" }, { kind: "component", type: MessageBannerComponent, selector: "c8y-message-banner" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootstrapComponent, decorators: [{
             type: Component,
@@ -18288,7 +18326,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$3.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$5.RouterModule, CommonModule, i2$2.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: [{
@@ -18497,13 +18535,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$3.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$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.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$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$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$3.Router }], propDecorators: { iconSlot: [{
+        }], ctorParameters: () => [{ type: i1$5.Router }], propDecorators: { iconSlot: [{
                 type: ViewChild,
                 args: ['icon', { read: ViewContainerRef, static: false }]
             }], node: [{
@@ -18586,7 +18624,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$7.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: [{
@@ -18990,7 +19028,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$7.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: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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.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,
@@ -19437,7 +19475,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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.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: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$3.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,
@@ -19757,7 +19795,7 @@ class DeviceStatusComponent {
         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$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" }] }); }
+    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$2.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,
@@ -19942,13 +19980,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$3.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]=\"false\"\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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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$5.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]=\"false\"\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.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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]=\"false\"\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$3.Router }, { type: i1.InventoryService }, { type: InventorySearchService }, { type: i0.ChangeDetectorRef }], propDecorators: { mode: [{
+        }], ctorParameters: () => [{ type: i1$5.Router }, { type: i1.InventoryService }, { type: InventorySearchService }, { type: i0.ChangeDetectorRef }], propDecorators: { mode: [{
                 type: Input
             }], enableCustomTemplatePlaceholder: [{
                 type: Input
@@ -20154,7 +20192,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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -20439,7 +20477,7 @@ class ListGroupModule {
             ListItemCheckboxComponent,
             ListItemRadioComponent,
             ListItemTimelineComponent,
-            ListItemDragHandleComponent], imports: [CommonModule, i1$7.CollapseModule, BsDropdownModule, A11yModule], exports: [ListGroupComponent,
+            ListItemDragHandleComponent], imports: [CommonModule, i1$8.CollapseModule, BsDropdownModule, A11yModule], exports: [ListGroupComponent,
             ListItemComponent,
             ListItemIconComponent,
             ListItemBodyComponent,
@@ -20866,7 +20904,7 @@ class SelectComponent {
                 multi: true
             },
             SelectKeyboardService
-        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault();\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i2$2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2$2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2$2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], queries: [{ propertyName: "projectedSelectedItems", first: true, predicate: SelectedItemsDirective, descendants: true }, { propertyName: "projectedSelectableItems", predicate: SelectItemDirective }], viewQueries: [{ propertyName: "searchControl", first: true, predicate: ["searchControl"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "list", predicate: ListItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"c8y-search-dropdown dropdown fit-w\"\n  placement=\"bottom left\"\n  dropdown\n  [container]=\"container\"\n  #dropdown=\"bs-dropdown\"\n  [autoClose]=\"autoClose\"\n  [isDisabled]=\"disabled\"\n  [insideClick]=\"insideClick\"\n  (onShown)=\"onShown()\"\n  (onHidden)=\"onHidden()\"\n  dropdownToggle\n  (click)=\"open()\"\n>\n  <div\n    class=\"input-group input-group-dropdown\"\n    role=\"button\"\n  >\n    <div\n      class=\"form-control text-truncate\"\n      *ngIf=\"true\"\n      [ngClass]=\"{\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0,\n        'text-truncate': !multi,\n        'inner-scroll d-flex a-i-center': multi\n      }\"\n    >\n      <!-- rendering of selected items (with content projection) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"projectedSelectedItems\"\n      >\n        <ng-container *ngFor=\"let selectedItem of selected\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              projectedSelectedItems.templateRef;\n              context: { $implicit: selectedItem }\n            \"\n          ></ng-container>\n        </ng-container>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !searchHasFocus && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n      </div>\n\n      <!-- rendering of selected items (default) -->\n      <div\n        class=\"selected-items\"\n        *ngIf=\"!projectedSelectedItems\"\n      >\n        <span *ngIf=\"!multi\">\n          <span *ngIf=\"searchHasFocus && preselectedItem\">\n            {{ preselectedItem.label | translate }}\n          </span>\n          <span *ngIf=\"!searchHasFocus && selected.length === 1\">\n            {{ selected[0].label | translate }}\n          </span>\n        </span>\n        <i\n          class=\"text-muted\"\n          *ngIf=\"selected.length === 0 && !preselectedItem && searchControl.value.length === 0\"\n        >\n          {{ placeholder | translate }}\n        </i>\n        <ng-container *ngIf=\"multi\">\n          <span class=\"m-r-4\">{{ searchControl.value }}</span>\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let selectedItem of selected\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10 m-r-4\"\n              title=\"{{ selectedItem.label | translate }}\"\n              type=\"button\"\n              (click)=\"$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ selectedItem.label | translate }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    \n    <input\n      class=\"form-control text-truncate\"\n      type=\"text\"\n      autocomplete=\"off\"\n      #searchControl\n      [ngClass]=\"{\n        'p-absolute': true,\n        'm-r-80': canDeselect && selected.length > 0,\n        'm-r-40': !canDeselect || selected.length === 0\n      }\"\n      [required]=\"required\"\n      (blur)=\"doBlur()\"\n      (focus)=\"doFocus()\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n    />\n\n    <span class=\"input-group-btn\">\n      <!-- this button is displayed only if we have something selected and are allowed to deselect -->\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Deselect' | translate }}\"\n        type=\"button\"\n        *ngIf=\"canDeselect && selected.length > 0\"\n        [disabled]=\"disabled\"\n        (click)=\"$event.preventDefault(); $event.stopPropagation(); deselectAll()\"\n      >\n        <i c8yIcon=\"times\"></i>\n      </button>\n      <button\n        class=\"btn btn-dot\"\n        title=\"{{ 'Search' | translate }}\"\n        type=\"button\"\n        [disabled]=\"disabled\"\n        (click)=\"onIconClick.emit({ icon, $event })\"\n        data-cy=\"select-button\"\n      >\n        <i\n          class=\"text-primary\"\n          [c8yIcon]=\"icon\"\n        ></i>\n      </button>\n    </span>\n  </div>\n\n  <c8y-list-group\n    class=\"dropdown-menu dropdown-menu--modal\"\n    [style.width]=\"container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined\"\n    role=\"menu\"\n    data-cy=\"select--dropdown-menu\"\n    *dropdownMenu\n  >\n    <!-- rendering of items (default) -->\n    <c8y-li\n      style=\"cursor: pointer\"\n      *ngFor=\"let item of items\"\n      [selectable]=\"true\"\n      [dense]=\"true\"\n      [active]=\"!multi && item.value === selected[0]?.value\"\n      (click)=\"select(item)\"\n    >\n      <span [attr.data-search-label]=\"item.label | translate\"></span>\n      <c8y-li-checkbox\n        *ngIf=\"multi\"\n        [selected]=\"selected.indexOf(item) > -1\"\n        (click)=\"$event.preventDefault();\"\n      ></c8y-li-checkbox>\n      <c8y-li-body\n        *ngIf=\"!item.template\"\n      >\n        {{ item.label | translate }}\n      </c8y-li-body>\n      <ng-container\n        *ngTemplateOutlet=\"item?.template\"\n        ngProjectAs=\"c8y-li-body\"\n      ></ng-container>\n    </c8y-li>\n    <ng-content select=\"div\"></ng-content>\n  </c8y-list-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -20952,7 +20990,7 @@ class SelectModule {
             TypeaheadComponent,
             SelectedItemsComponent,
             SelectItemDirective,
-            SelectedItemsDirective], imports: [i2$2.BsDropdownModule, CommonModule,
+            SelectedItemsDirective], imports: [i1$4.BsDropdownModule, CommonModule,
             ListGroupModule,
             FormsModule,
             NameTransformPipe], exports: [SelectComponent,
@@ -21031,7 +21069,7 @@ class CoreSearchModule {
             CommonModule,
             SelectModule,
             ListGroupModule,
-            DeviceStatusModule, i1$3.RouterModule], exports: [SearchOutletComponent,
+            DeviceStatusModule, i1$5.RouterModule], exports: [SearchOutletComponent,
             SearchComponent,
             HighlightComponent,
             SearchResultEmptyComponent,
@@ -21204,7 +21242,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$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -21299,13 +21337,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.UserService }, { token: ModalService }, { token: i1$4.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$6.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.UserService }, { type: ModalService }, { type: i1$4.BsModalRef }, { type: LoginService }] });
+        }], ctorParameters: () => [{ type: i1.UserService }, { type: ModalService }, { type: i1$6.BsModalRef }, { type: LoginService }] });
 
 class UserEditComponent {
     set user(u) {
@@ -21392,13 +21430,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$4.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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$6.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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$3.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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$4.BsModalService }, { type: AlertService }, { type: i1.UserService }, { type: i1.TenantLoginOptionsService }, { type: i1.TenantService }], propDecorators: { loading: [{
+        }], ctorParameters: () => [{ type: AppStateService }, { type: TranslateService }, { type: i1$6.BsModalService }, { type: AlertService }, { type: i1.UserService }, { type: i1.TenantLoginOptionsService }, { type: i1.TenantService }], propDecorators: { loading: [{
                 type: Input
             }], user: [{
                 type: Input
@@ -21555,13 +21593,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$4.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserEditModalComponent, deps: [{ token: i1$6.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$4.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 }] });
+        }], ctorParameters: () => [{ type: i1$6.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.
@@ -21640,13 +21678,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$4.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$6.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$4.BsModalService }, { type: LoginService }, { type: UserMenuService }, { type: HeaderService }] });
+        }], ctorParameters: () => [{ type: AppStateService }, { type: i1$6.BsModalService }, { type: LoginService }, { type: UserMenuService }, { type: HeaderService }] });
 
 class UserTotpRevokeComponent {
     constructor(users, alert) {
@@ -21822,7 +21860,7 @@ class UserModule {
             BsDropdownModule,
             AuthenticationModule,
             AlertModule,
-            RouterModule$1, i2$3.TooltipModule, PopoverModule,
+            RouterModule$1, i2$2.TooltipModule, PopoverModule,
             ClipboardModule,
             UserDetailsDrawerModule], exports: [UserMenuOutletComponent,
             UserMenuItemComponent,
@@ -22128,13 +22166,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$4.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$6.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$4.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
+        }], ctorParameters: () => [{ type: VersionService }, { type: AppStateService }, { type: ClipboardService }, { type: i1$6.BsModalService }, { type: PlatformDetailsService }, { type: HeaderService }] });
 
 class VersionDrawerFactory {
     constructor(options) {
@@ -22381,7 +22419,7 @@ class HeaderModule {
             ActionModule,
             BreadcrumbModule,
             NavigatorModule,
-            VersionModule, i2$3.TooltipModule, i1$7.CollapseModule, ProductExperienceModule,
+            VersionModule, i2$2.TooltipModule, i1$8.CollapseModule, ProductExperienceModule,
             DrawerModule,
             UiSettingsModule,
             TitleComponent], exports: [HeaderBarComponent, TitleComponent, TitleOutletComponent] }); }
@@ -22729,8 +22767,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$3.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$3.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$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ConditionalTabsOutletComponent, decorators: [{
             type: Component,
@@ -22738,11 +22776,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$3.Router }] });
+        }], ctorParameters: () => [{ type: TabsService }, { type: i1$5.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$3.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$5.RouterModule, i2$2.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: [{
@@ -22923,13 +22961,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$3.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$5.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$3.Router }] });
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i1$5.Router }] });
 
 class NavigatorTopComponent {
     constructor(ui) {
@@ -23488,7 +23526,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          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i1$5.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$5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$5.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          [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n        />\n      </div>\n    </div>\n  </c8y-form-group>\n</div>\n", dependencies: [{ kind: "directive", type: i2$3.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: i2$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$3.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,
@@ -24202,11 +24240,24 @@ 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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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, isStandalone: true, 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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i1$2.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: i1$2.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "pipe", type: DatePipe$1, 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,
-            args: [{ selector: 'c8y-date-picker', 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" }]
+            args: [{ selector: 'c8y-date-picker', standalone: true, imports: [
+                        BsDropdownModule,
+                        CdkTrapFocus,
+                        IconDirective,
+                        NgIf,
+                        FormsModule$1,
+                        ReactiveFormsModule,
+                        FormGroupComponent,
+                        C8yTranslateDirective,
+                        RequiredInputPlaceholderDirective,
+                        BsDatepickerModule,
+                        DatePipe$1,
+                        C8yTranslatePipe
+                    ], template: "<div\n  dropdown\n  class=\"c8y-child-assets-selector dropdown\"\n  #datefilter=\"bs-dropdown\"\n  [insideClick]=\"true\"\n  placement=\"bottom left\"\n  [cdkTrapFocus]=\"datefilter.isOpen\"\n  >\n  <button\n    id=\"date-range\"\n    dropdownToggle\n    title=\"{{ 'Date filter' | translate }}\"\n    type=\"button\"\n    class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n  >\n    <i c8yIcon=\"calendar-o\" class=\"m-r-4 text-primary\"></i>\n    <span class=\"text-truncate\">\n      <span *ngIf=\"dateFrom\">\n        <span class=\"text-label-small\">{{ 'From`date`' | translate }}</span>\n        {{ dateFrom | date }}\n      </span>\n      <span *ngIf=\"dateTo\">\n        <span class=\"text-label-small\">{{ 'To`date`' | translate }}</span>\n        {{ dateTo | date }}\n      </span>\n      <em *ngIf=\"!dateFrom && !dateTo\" class=\"text-muted\">\n        {{ placeholder }}\n      </em>\n    </span>\n  </button>\n\n  <form [formGroup]=\"fgDatePicker\"\n    id=\"dropdown-date-range\"\n    *dropdownMenu\n    class=\"dropdown-menu\">\n    <div class=\"dropdown-form p-b-0\">\n      <c8y-form-group class=\"form-group-sm\">\n        <label for=\"dateFrom\" class=\"text-medium m-b-4\" translate>Date from</label>\n        <div class=\"form-group datepicker d-block m-b-0\">\n          <input\n            id=\"dateFrom\"\n            formControlName=\"dateFrom\"\n            class=\"form-control fit-w text-left\"\n            placeholder=\"{{ 'Date from' | translate }}\"\n            bsDatepicker\n            [maxDate]=\"dateTo\"\n            (bsValueChange)=\"dateFrom = $event\"\n            [bsConfig]=\"{ customTodayClass: 'today', returnFocusToInput: true }\"\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" }]
         }], propDecorators: { onDateSelected: [{
                 type: Output
             }], placeholder: [{
@@ -24219,11 +24270,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  */
 class DatePickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DatePickerModule, declarations: [DatePickerComponent], imports: [FormsModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DatePickerModule, imports: [FormsModule,
             CommonModule$1,
             FormsModule$1,
             A11yModule,
-            ReactiveFormsModule, i2$2.BsDropdownModule, i3.BsDatepickerModule, CommonModule], exports: [DatePickerComponent] }); }
+            ReactiveFormsModule, i1$4.BsDropdownModule, i1$2.BsDatepickerModule, CommonModule,
+            DatePickerComponent], exports: [DatePickerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePickerModule, imports: [FormsModule,
             CommonModule$1,
             FormsModule$1,
@@ -24231,7 +24283,8 @@ class DatePickerModule {
             ReactiveFormsModule,
             BsDropdownModule.forRoot(),
             BsDatepickerModule.forRoot(),
-            CommonModule] }); }
+            CommonModule,
+            DatePickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
@@ -24244,10 +24297,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         ReactiveFormsModule,
                         BsDropdownModule.forRoot(),
                         BsDatepickerModule.forRoot(),
-                        CommonModule
+                        CommonModule,
+                        DatePickerComponent
                     ],
-                    exports: [DatePickerComponent],
-                    declarations: [DatePickerComponent]
+                    exports: [DatePickerComponent]
                 }]
         }] });
 
@@ -24365,7 +24418,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$3.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$5.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: [{
@@ -24373,7 +24426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }] });
 
 class ViewContextServices {
     static { this.services = {
@@ -24610,7 +24663,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$3.Router }, { token: i4.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$5.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: [{
@@ -24618,7 +24671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: RouterTabsResolver }, { type: TabsService }, { type: i1$3.Router }, { type: i4.ApiService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: RouterTabsResolver }, { type: TabsService }, { type: i1$5.Router }, { type: i4.ApiService }, { type: i0.Injector }] });
 
 /**
  * A service which is injected into the context route component to handle the context data.
@@ -24757,12 +24810,12 @@ class ScopedContextRouteService {
         const matchingRegexContext = regexMatchers.find(context => new RegExp(context).test(url));
         return matchingRegexContext ? viewContexts[regexMatchers.indexOf(matchingRegexContext)] : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ScopedContextRouteService, deps: [{ token: RouterTabsResolver }, { token: TabsService }, { token: i1$3.Router }, { token: i4.ApiService }, { token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ScopedContextRouteService, deps: [{ token: RouterTabsResolver }, { token: TabsService }, { token: i1$5.Router }, { token: i4.ApiService }, { token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ScopedContextRouteService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ScopedContextRouteService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: RouterTabsResolver }, { type: TabsService }, { type: i1$3.Router }, { type: i4.ApiService }, { type: i0.Injector }, { type: i0.DestroyRef }] });
+        }], ctorParameters: () => [{ type: RouterTabsResolver }, { type: TabsService }, { type: i1$5.Router }, { type: i4.ApiService }, { type: i0.Injector }, { type: i0.DestroyRef }] });
 
 class ContextRouteComponent {
     constructor(route, scopedContextRouteService, contextRouteService, destroyRef) {
@@ -24783,13 +24836,13 @@ class ContextRouteComponent {
     refreshTabs() {
         this.scopedContextRouteService.refreshContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: ScopedContextRouteService }, { token: ContextRouteService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ContextRouteComponent, selector: "c8y-context-route", providers: [ScopedContextRouteService], ngImport: i0, template: "<router-outlet *ngIf=\"!(isLoading$ | async); else loading\"></router-outlet>\n\n<ng-template #loading>\n  <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n    <c8y-loading></c8y-loading>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { 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: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: ScopedContextRouteService }, { token: ContextRouteService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ContextRouteComponent, selector: "c8y-context-route", providers: [ScopedContextRouteService], ngImport: i0, template: "<router-outlet *ngIf=\"!(isLoading$ | async); else loading\"></router-outlet>\n\n<ng-template #loading>\n  <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n    <c8y-loading></c8y-loading>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { 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: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ContextRouteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-context-route', providers: [ScopedContextRouteService], template: "<router-outlet *ngIf=\"!(isLoading$ | async); else loading\"></router-outlet>\n\n<ng-template #loading>\n  <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n    <c8y-loading></c8y-loading>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: ScopedContextRouteService }, { type: ContextRouteService }, { type: i0.DestroyRef }] });
+        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: ScopedContextRouteService }, { type: ContextRouteService }, { type: i0.DestroyRef }] });
 
 class ContextRouteGuard {
     constructor(injector) {
@@ -24998,7 +25051,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$3.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$5.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: [{
@@ -25006,7 +25059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: ContextRouteService }, { type: PluginsResolveService }, { type: OptionsService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: ContextRouteService }, { type: PluginsResolveService }, { type: OptionsService }] });
 
 const extraRoutes = [
     {
@@ -25214,7 +25267,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$7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: 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,
@@ -25309,7 +25362,7 @@ class SupportOutletComponent {
         this.ui.currentUser.next(currentUserResult.data);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SupportOutletComponent, deps: [{ token: AppStateService }, { token: OptionsService }, { token: ModalService }, { token: i1$1.TranslateService }, { token: i1.TenantService }, { token: AlertService }, { token: i1.UserService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SupportOutletComponent, selector: "c8y-support-outlet", ngImport: i0, template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.ACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.DEACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    [ngClass]=\"{ 'separator-top': !isCollapsible }\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.OPEN_SUPPORT_LINK }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SupportOutletComponent, selector: "c8y-support-outlet", ngImport: i0, template: "<button\n  class=\"c8y-right-drawer__link sticky-top\"\n  [tabindex]=\"tabIndex$ | async\"\n  type=\"button\"\n  (click)=\"isCollapsed = !isCollapsed\"\n  *ngIf=\"isCollapsible\"\n>\n  <i c8yIcon=\"c8y-c8y-support\"></i>\n  <span class=\"text-bold\">{{ 'Support' | translate }}</span>\n  <i\n    class=\"m-l-auto\"\n    c8yIcon=\"angle-up\"\n    [ngClass]=\"{ 'icon-rotate-180': isCollapsed }\"\n  ></i>\n</button>\n<div\n  class=\"collapse\"\n  id=\"collapseSupport\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Activate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"!(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"activateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.ACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Activate support access' | translate }}\"\n    >\n      {{ 'Activate support access' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Deactivate support access' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    *ngIf=\"(supportUserEnabled$ | async) && userSupportAvailable\"\n    (click)=\"deactivateSupportAccess()\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.DEACTIVATE_SUPPORT_ACCESS }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Deactivate support access' | translate }}\"\n    >\n      {{ 'Deactivate support access' | translate }}\n    </span>\n  </button>\n  <a\n    class=\"c8y-right-drawer__link\"\n    title=\"{{ 'Request support' | translate }}\"\n    [tabindex]=\"tabIndex$ | async\"\n    role=\"button\"\n    target=\"_blank\"\n    [ngClass]=\"{ 'separator-top': !isCollapsible }\"\n    *ngIf=\"supportUrl\"\n    rel=\"noopener noreferrer\"\n    [href]=\"supportUrl\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n    [actionData]=\"{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.OPEN_SUPPORT_LINK }\"\n  >\n    <i\n      c8yIcon=\"c8y-c8y-support\"\n      *ngIf=\"!isCollapsible\"\n    ></i>\n    <span\n      [class]=\"textClass\"\n      title=\"{{ 'Request support' | translate }}\"\n    >\n      {{ 'Request support' | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$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,
@@ -25459,7 +25512,7 @@ class ArrayTypeComponent extends FieldArrayType {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ArrayTypeComponent, selector: "c8y-array-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <div id=\"{{ id + '-fieldset' }}\" class=\"legend form-block\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </div>\n\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n\n  <div *ngFor=\"let ifield of field.fieldGroup; let i = index\" class=\"input-group-array\">\n    <formly-field [field]=\"ifield | c8yArrayTypeInjectTemplate: customTemplate\"></formly-field>\n    <ng-container\n      *ngIf=\"ifield.type === 'formly-group' || ifield.type === 'array'\"\n      [ngTemplateOutlet]=\"customTemplate\"\n    ></ng-container>\n    <ng-template #customTemplate>\n      <div class=\"input-group-btn delete-row\">\n        <button\n          class=\"btn btn-dot btn-dot--danger flex-item-right\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          [delay]=\"500\"\n          placement=\"right\"\n          [disabled]=\"to.disabled || (field.fieldGroup.length === 1 && to.required)\"\n          (click)=\"remove(i)\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"p-t-8\">\n    <button\n      class=\"btn btn-sm btn-default\"\n      type=\"button\"\n      title=\"{{\n        (field.templateOptions?.addText | translate) || 'Add \\{\\{ label \\}\\}'\n          | translate: fieldArrayProps\n      }}\"\n      [disabled]=\"to.disabled\"\n      (click)=\"add()\"\n      [attr.data-cy]=\"field.templateOptions?.addTextDataCy || 'add-array-item'\"\n    >\n      <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n      <span\n        *ngIf=\"!field.templateOptions?.addText\"\n        ngNonBindable\n        translate\n        [translateParams]=\"fieldArrayProps\"\n      >\n        Add {{ label }}\n      </span>\n      <span *ngIf=\"field.templateOptions?.addText\">\n        {{ field.templateOptions?.addText | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: 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: 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: 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: i6.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i6.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: C8yArrayTypeInjectTemplatePipe, name: "c8yArrayTypeInjectTemplate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ArrayTypeComponent, selector: "c8y-array-type", usesInheritance: true, ngImport: i0, template: "<div role=\"group\" [attr.aria-labelledby]=\"id + '-fieldset'\">\n  <div id=\"{{ id + '-fieldset' }}\" class=\"legend form-block\" *ngIf=\"to.label || to.description\">\n    {{ to.label | humanize }}\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      type=\"button\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"to.description\"\n      placement=\"right\"\n      triggers=\"focus\"\n      *ngIf=\"to.description\"\n    ></button>\n  </div>\n\n  <div\n    class=\"form-control-feedback-message has-error\"\n    role=\"alert\"\n    *ngIf=\"showError && formControl.errors\"\n  >\n    <formly-validation-message [field]=\"field\"></formly-validation-message>\n  </div>\n\n  <div *ngFor=\"let ifield of field.fieldGroup; let i = index\" class=\"input-group-array\">\n    <formly-field [field]=\"ifield | c8yArrayTypeInjectTemplate: customTemplate\"></formly-field>\n    <ng-container\n      *ngIf=\"ifield.type === 'formly-group' || ifield.type === 'array'\"\n      [ngTemplateOutlet]=\"customTemplate\"\n    ></ng-container>\n    <ng-template #customTemplate>\n      <div class=\"input-group-btn delete-row\">\n        <button\n          class=\"btn btn-dot btn-dot--danger flex-item-right\"\n          type=\"button\"\n          [attr.aria-label]=\"'Delete' | translate\"\n          tooltip=\"{{ 'Delete' | translate }}\"\n          [delay]=\"500\"\n          placement=\"right\"\n          [disabled]=\"to.disabled || (field.fieldGroup.length === 1 && to.required)\"\n          (click)=\"remove(i)\"\n        >\n          <i c8yIcon=\"minus-circle\"></i>\n        </button>\n      </div>\n    </ng-template>\n  </div>\n\n  <div class=\"p-t-8\">\n    <button\n      class=\"btn btn-sm btn-default\"\n      type=\"button\"\n      title=\"{{\n        (field.templateOptions?.addText | translate) || 'Add \\{\\{ label \\}\\}'\n          | translate: fieldArrayProps\n      }}\"\n      [disabled]=\"to.disabled\"\n      (click)=\"add()\"\n      [attr.data-cy]=\"field.templateOptions?.addTextDataCy || 'add-array-item'\"\n    >\n      <i c8yIcon=\"plus-circle\" class=\"m-r-4\"></i>\n      <span\n        *ngIf=\"!field.templateOptions?.addText\"\n        ngNonBindable\n        translate\n        [translateParams]=\"fieldArrayProps\"\n      >\n        Add {{ label }}\n      </span>\n      <span *ngIf=\"field.templateOptions?.addText\">\n        {{ field.templateOptions?.addText | translate }}\n      </span>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: 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: 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: i2$2.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: i6.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i6.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: C8yArrayTypeInjectTemplatePipe, name: "c8yArrayTypeInjectTemplate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ArrayTypeComponent, decorators: [{
             type: Component,
@@ -25499,7 +25552,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$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -25516,7 +25569,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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.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: i1$2.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: i1$2.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,
@@ -25564,7 +25617,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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -25632,7 +25685,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$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.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,
@@ -25671,7 +25724,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$5.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$5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -25698,12 +25751,13 @@ class CloseDatePickerDirective {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CloseDatePickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: { closeDatepicker: "closeDatepicker" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: CloseDatePickerDirective, isStandalone: true, selector: "[closeDatepicker]", inputs: { closeDatepicker: "closeDatepicker" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CloseDatePickerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[closeDatepicker]'
+                    selector: '[closeDatepicker]',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { closeDatepicker: [{
                 type: Input
@@ -25740,6 +25794,7 @@ class DateTimePickerComponent {
         };
         this.onDateSelected = new EventEmitter();
         this.defaultPlaceholder = gettext$1('Select a date…');
+        this.previousTimePickerValues = {};
         this.destroy$ = new Subject();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
@@ -25829,19 +25884,24 @@ class DateTimePickerComponent {
     }
     handleMouseWheel(event) {
         const hours = this.form.get('time').value.getHours();
-        // up
+        const minutes = this.form.get('time').value.getMinutes();
+        // down
         event.preventDefault();
         if (event.deltaY > 0) {
-            if (Number(hours) === 23) {
+            if (Number(hours) === 23 && this.previousTimePickerValues.hours !== 23) {
                 this.previousDay();
             }
         }
-        // down
+        // up
         if (event.deltaY < 0) {
-            if (Number(hours) === 0) {
+            if (this.previousTimePickerValues.hours === undefined) {
+                // scrolling up on empty form should not result in increasing day.
+            }
+            else if (Number(hours) === 0 && this.previousTimePickerValues.hours !== 0) {
                 this.nextDay();
             }
         }
+        this.previousTimePickerValues = { hours, minutes };
     }
     /**
      * If internal form changes its value, then combine date and time into one Date and pass its ISO string value to onChange method
@@ -25849,31 +25909,42 @@ class DateTimePickerComponent {
      * @private
      */
     setDatetime(dateTime) {
-        if (!dateTime.date && this.previousValue?.date) {
+        // if date input is cleared from a previous correct value, clear form value:
+        if (this.isInputCleared(dateTime)) {
+            this.form.get('date').setValue(undefined, { emitEvent: false });
+            this.form.get('time').setValue(undefined, { emitEvent: false });
             this.onChange(null);
             return;
         }
-        if (!dateTime.time) {
-            dateTime.time = new Date(dateTime.date.getFullYear(), dateTime.date.getMonth(), dateTime.date.getDate(), 0, 0, 0);
-            dateTime.time.setMinutes(dateTime.time.getMinutes() - dateTime.time.getTimezoneOffset());
-            this.form.get('time').setValue(dateTime.time, { emitEvent: false });
-        }
-        if (!dateTime.date) {
-            dateTime.date = dateTime.time;
-        }
-        // if dateTime.date is not a date then make form invalid
-        if (isNaN(dateTime.date.getTime())) {
-            this.form.controls.date.setErrors({ invalidDate: true });
+        // if both date and time is invalid, do set form value to null and stop:
+        if (!this.verifyDate(dateTime.date) && !this.verifyDate(dateTime.time)) {
             this.onChange(null);
             return;
         }
+        // If only time is provided, set Date to today:
+        if (!this.verifyDate(dateTime.date) && this.verifyDate(dateTime.time)) {
+            dateTime.date = new Date(dateTime.time);
+        }
+        // If only date is provided, set time to 00:00:
+        if (this.verifyDate(dateTime.date) && !this.verifyDate(dateTime.time)) {
+            dateTime.time = new Date(dateTime.date.getFullYear(), dateTime.date.getMonth(), dateTime.date.getDate(), 0, 0, 0);
+            this.form.get('time').setValue(dateTime.time, { emitEvent: false });
+        }
+        // Merge date and time, and emit as new form value:
         this.date = new Date(dateTime.date);
         this.date.setHours(dateTime.time.getHours(), dateTime.time.getMinutes());
         this.form.get('date').setValue(dateTime.date, { emitEvent: false });
         this.onChange(this.date.toISOString());
     }
+    verifyDate(value) {
+        const date = value;
+        return date instanceof Date && !isNaN(date.getTime());
+    }
+    isInputCleared(value) {
+        return this.previousValue?.date && value.date === undefined;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: { _minDate: ["minDate", "_minDate"], _maxDate: ["maxDate", "_maxDate"], placeholder: "placeholder", dateInputFormat: "dateInputFormat", adaptivePosition: "adaptivePosition", size: "size", dateType: "dateType", config: "config" }, outputs: { onDateSelected: "onDateSelected" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DateTimePickerComponent, isStandalone: true, selector: "c8y-date-time-picker", inputs: { _minDate: ["minDate", "_minDate"], _maxDate: ["maxDate", "_maxDate"], placeholder: "placeholder", dateInputFormat: "dateInputFormat", adaptivePosition: "adaptivePosition", size: "size", dateType: "dateType", config: "config" }, outputs: { onDateSelected: "onDateSelected" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimePickerComponent),
@@ -25884,7 +25955,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        style=\"min-width: 120px\"\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$5.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$5.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$5.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" }] }); }
+        ], 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        style=\"min-width: 120px\"\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: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: CloseDatePickerDirective, selector: "[closeDatepicker]", inputs: ["closeDatepicker"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i1$2.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: i1$2.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i1$2.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: i1$2.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i3$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: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -25899,6 +25970,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => DateTimePickerComponent),
                             multi: true
                         }
+                    ], standalone: true, imports: [
+                        NgSwitch,
+                        NgSwitchCase,
+                        CloseDatePickerDirective,
+                        BsDatepickerModule,
+                        FormsModule$1,
+                        ReactiveFormsModule,
+                        TimepickerModule,
+                        DatePickerComponent,
+                        C8yTranslatePipe
                     ], 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        style=\"min-width: 120px\"\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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _minDate: [{
                 type: Input,
@@ -25936,7 +26017,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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -26089,7 +26170,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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -26120,7 +26201,7 @@ class TimePickerModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TimePickerModule, declarations: [TimePickerComponent], imports: [FormsModule,
             CommonModule$1,
             FormsModule$1,
-            ReactiveFormsModule, i3.BsDatepickerModule, CommonModule], exports: [TimePickerComponent] }); }
+            ReactiveFormsModule, i1$2.BsDatepickerModule, CommonModule], exports: [TimePickerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimePickerModule, imports: [FormsModule,
             CommonModule$1,
             FormsModule$1,
@@ -26150,12 +26231,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  */
 class DateTimePickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerModule, declarations: [DateTimePickerComponent, CloseDatePickerDirective], imports: [FormsModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerModule, imports: [FormsModule,
             CommonModule$1,
             FormsModule$1,
-            ReactiveFormsModule, i3.BsDatepickerModule, i4$1.TimepickerModule, CommonModule,
+            ReactiveFormsModule, i1$2.BsDatepickerModule, i3$1.TimepickerModule, CommonModule,
             TimePickerModule,
-            DatePickerModule], exports: [DateTimePickerComponent] }); }
+            DatePickerModule,
+            DateTimePickerComponent,
+            CloseDatePickerDirective], exports: [DateTimePickerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerModule, imports: [FormsModule,
             CommonModule$1,
             FormsModule$1,
@@ -26164,7 +26247,8 @@ class DateTimePickerModule {
             TimepickerModule.forRoot(),
             CommonModule,
             TimePickerModule,
-            DatePickerModule] }); }
+            DatePickerModule,
+            DateTimePickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DateTimePickerModule, decorators: [{
             type: NgModule,
@@ -26178,10 +26262,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         TimepickerModule.forRoot(),
                         CommonModule,
                         TimePickerModule,
-                        DatePickerModule
+                        DatePickerModule,
+                        DateTimePickerComponent,
+                        CloseDatePickerDirective
                     ],
-                    exports: [DateTimePickerComponent],
-                    declarations: [DateTimePickerComponent, CloseDatePickerDirective]
+                    exports: [DateTimePickerComponent]
                 }]
         }] });
 
@@ -26241,7 +26326,7 @@ class TypeaheadTypeComponent extends FieldType {
         }));
     }
     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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.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,
@@ -26276,7 +26361,7 @@ class SelectTypeComponent extends FieldType {
         }
     }
     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$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.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.ɵ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: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.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,
@@ -26322,7 +26407,7 @@ class FieldTextArea extends FieldType {
       [formlyAttributes]="field"
       [placeholder]="props.placeholder"
     ></textarea>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.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,
@@ -26391,7 +26476,7 @@ class DynamicFormsUIThemeModule {
             FieldTextArea,
             LegendFieldWrapper, C8yArrayTypeInjectTemplatePipe], imports: [CommonModule$1,
             CommonModule,
-            PopoverModule, i2$3.TooltipModule, ReactiveFormsModule,
+            PopoverModule, i2$2.TooltipModule, ReactiveFormsModule,
             C8yTranslateModule,
             DropAreaModule,
             FormsModule,
@@ -27061,7 +27146,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$3.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$5.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: [{
@@ -27069,7 +27154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -27439,7 +27524,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$7.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,
@@ -27463,7 +27548,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$3.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$5.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: [{
@@ -27738,11 +27823,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 
 class DashboardChildActionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardChildActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <li>\n    <ng-content></ng-content>\n  </li>\n</ng-template>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DashboardChildActionComponent, isStandalone: true, selector: "c8y-dashboard-child-action", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0, template: "<ng-template #template>\n  <li>\n    <ng-content></ng-content>\n  </li>\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardChildActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-dashboard-child-action', template: "<ng-template #template>\n  <li>\n    <ng-content></ng-content>\n  </li>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-dashboard-child-action', standalone: true, template: "<ng-template #template>\n  <li>\n    <ng-content></ng-content>\n  </li>\n</ng-template>\n" }]
         }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { static: false }]
@@ -28097,7 +28182,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$2.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: [{
@@ -28105,7 +28190,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$2.DomSanitizer }], propDecorators: { columns: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.DomSanitizer }], propDecorators: { columns: [{
                 type: Input
             }], gap: [{
                 type: Input
@@ -28126,7 +28211,7 @@ class WidgetAutoRefreshContextIconBarComponent {
         this.globalAutoRefreshTooltip = gettext$1('This widget is in sync with the dashboard auto refresh context.');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetAutoRefreshContextIconBarComponent, selector: "c8y-widget-auto-refresh-context-icon-bar", ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetAutoRefreshContextIconBarComponent, selector: "c8y-widget-auto-refresh-context-icon-bar", ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalAutoRefreshTooltip | translate\"\n    [tooltip]=\"globalAutoRefreshTooltip | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"c8y-widget-auto-refresh-context-icon-bar--global-refresh-context-indicator\"\n  >\n    <span class=\"tag tag--info chip\">\n      <i c8yIcon=\"refresh\"></i>\n      {{ 'Auto refresh' | translate }}\n    </span>\n  </button>\n</span>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$2.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: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetAutoRefreshContextIconBarComponent, decorators: [{
             type: Component,
@@ -28191,7 +28276,7 @@ class WidgetTimeContextIconBar {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextIconBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\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: 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: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: { config: "config" }, ngImport: i0, template: "<span class=\"m-l-auto d-flex\">\n  <button\n    class=\"btn btn-clean btn-no-focus\"\n    [attr.aria-label]=\"'Aggregation' | translate\"\n    tooltip=\"{{\n      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)\n        | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    *ngIf=\"config.displaySettings.globalAggregationContext\"\n    [adaptivePosition]=\"false\"\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"\n        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined\n      \"\n    ></i>\n  </button>\n  <button\n    class=\"btn c8y-realtime btn-no-focus\"\n    [attr.aria-label]=\"(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate\"\n    tooltip=\"{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n  >\n    <span\n      class=\"c8y-pulse m-0\"\n      [ngClass]=\"{ active: config?.realtime, inactive: !config?.realtime }\"\n    ></span>\n  </button>\n  <button\n    class=\"btn btn-clean btn-no-focus p-l-4 p-r-0\"\n    [attr.aria-label]=\"globalContextButtonText | translate\"\n    [tooltip]=\"globalContextButtonText | translate\"\n    placement=\"top\"\n    container=\"body\"\n    data-cy=\"dashboard-child--global-date-context-indicator\"\n  >\n    <span class=\"tag tag--success chip\">\n      <i c8yIcon=\"clock\"></i>\n      {{ 'Realtime' | translate }}\n    </span>\n  </button>\n</span>\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: i2$2.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: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextIconBar, decorators: [{
             type: Component,
@@ -28434,15 +28519,15 @@ 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$2.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        <c8y-widget-auto-refresh-context-icon-bar\n          *ngIf=\"\n            data?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            data?.config?.displaySettings.globalAutoRefreshContext\n          \"\n        ></c8y-widget-auto-refresh-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          delay=\"500\"\n          container=\"body\"\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: WidgetAutoRefreshContextIconBarComponent, selector: "c8y-widget-auto-refresh-context-icon-bar" }, { kind: "component", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: ["config"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    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        <c8y-widget-auto-refresh-context-icon-bar\n          *ngIf=\"\n            data?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            data?.config?.displaySettings.globalAutoRefreshContext\n          \"\n        ></c8y-widget-auto-refresh-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          delay=\"500\"\n          container=\"body\"\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: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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$2.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: WidgetAutoRefreshContextIconBarComponent, selector: "c8y-widget-auto-refresh-context-icon-bar" }, { kind: "component", type: WidgetTimeContextIconBar, selector: "c8y-widget-time-context-icon-bar", inputs: ["config"] }, { 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: DashboardChildComponent, decorators: [{
             type: Component,
             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        <c8y-widget-auto-refresh-context-icon-bar\n          *ngIf=\"\n            data?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            data?.config?.displaySettings.globalAutoRefreshContext\n          \"\n        ></c8y-widget-auto-refresh-context-icon-bar>\n\n        <button\n          class=\"btn btn-icon\"\n          [attr.aria-label]=\"'Full screen' | translate\"\n          [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n          delay=\"500\"\n          container=\"body\"\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$2.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
+        }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$3.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
                 type: ContentChildren,
                 args: [DashboardChildActionComponent]
             }], fullscreen: [{
@@ -28856,13 +28941,34 @@ 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$3.ActivatedRoute }, { token: WidgetTimeContextHelperService }, { token: i1$3.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$5.ActivatedRoute }, { token: WidgetTimeContextHelperService }, { token: i1$5.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$3.ActivatedRoute }, { type: WidgetTimeContextHelperService }, { type: i1$3.Router }] });
+        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: WidgetTimeContextHelperService }, { type: i1$5.Router }] });
+
+class WidgetTimeContextDateRangeService {
+    constructor() {
+        this.timeContextChange = signal(null);
+        this.initialTimeRange = signal(null);
+    }
+    emitPropertyUpdate(data) {
+        this.timeContextChange.set(data);
+    }
+    updateInitialTimeRange(data) {
+        this.initialTimeRange.set(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextDateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextDateRangeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextDateRangeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 class RealtimeControlComponent {
     constructor() {
@@ -28894,13 +29000,13 @@ class RealtimeControlComponent {
         this.disabled = disabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: RealtimeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: RealtimeControlComponent, selector: "c8y-realtime-control", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: RealtimeControlComponent, isStandalone: true, selector: "c8y-realtime-control", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RealtimeControlComponent),
                 multi: true
             }
-        ], ngImport: i0, template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$1.TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n", dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.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: 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: RealtimeControlComponent, decorators: [{
             type: Component,
@@ -28910,7 +29016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => RealtimeControlComponent),
                             multi: true
                         }
-                    ], template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n" }]
+                    ], standalone: true, imports: [TooltipModule, NgClass, C8yTranslatePipe], template: " <button\n  class=\"btn btn-icon c8y-realtime\"\n  [attr.aria-label]=\"(value ? disableRealtimeLabel : enableRealtimeLabel) | translate\"\n  tooltip=\"{{ (value ? disableRealtimeLabel : enableRealtimeLabel) | translate }}\"\n  placement=\"top\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"onChange(!value)\"\n  [adaptivePosition]=\"false\"\n  [delay]=\"500\"\n  [disabled]=\"disabled\"\n>\n  <span\n    class=\"c8y-pulse m-0\"\n    [ngClass]=\"{ active: value, inactive: !value }\"\n  ></span>\n</button>\n" }]
         }] });
 
 class AggregationPickerComponent {
@@ -28949,13 +29055,13 @@ class AggregationPickerComponent {
         this.disabled = disabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AggregationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: { disabledAggregations: "disabledAggregations" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AggregationPickerComponent, isStandalone: true, selector: "c8y-aggregation-picker", inputs: { disabledAggregations: "disabledAggregations" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AggregationPickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n", dependencies: [{ kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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: AggregationPickerComponent, decorators: [{
             type: Component,
@@ -28965,7 +29071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => AggregationPickerComponent),
                             multi: true
                         }
-                    ], template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
+                    ], standalone: true, imports: [BsDropdownModule, TooltipModule, IconDirective, NgFor, NgClass, C8yTranslatePipe], template: "<div\n  class=\"dropdown\"\n  style=\"border: 0; margin-left: -1px\"\n  #dropdown=\"bs-dropdown\"\n  dropdown\n  [insideClick]=\"true\"\n  [isDisabled]=\"disabled\"\n>\n  <button\n    class=\"dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center\"\n    [attr.aria-label]=\"(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate\"\n    tooltip=\"{{\n      (value\n        ? AGGREGATION_TEXTS[value]\n        : disabled\n          ? AGGREGATION_TEXTS.disabled\n          : AGGREGATION_TEXTS.undefined\n      ) | translate\n    }}\"\n    placement=\"top\"\n    container=\"body\"\n    type=\"button\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    dropdownToggle\n  >\n    <i\n      class=\"icon-14\"\n      [c8yIcon]=\"value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined\"\n    ></i>\n    <span class=\"caret m-r-8 m-l-4\"></span>\n  </button>\n\n  <ul\n    class=\"dropdown-menu dropdown-menu-right--xs\"\n    *dropdownMenu\n  >\n    <li\n      *ngFor=\"let aggregation of AGGREGATIONS\"\n      [ngClass]=\"{\n        active: aggregation.id === value,\n        disabled: disabledAggregations[aggregation.id]\n      }\"\n    >\n      <button\n        class=\"\"\n        (click)=\"onChange(aggregation.id); dropdown.isOpen = false\"\n        [disabled]=\"disabledAggregations[aggregation.id]\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n        <span>{{ aggregation.title | translate }}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" }]
         }], propDecorators: { disabledAggregations: [{
                 type: Input
             }] } });
@@ -28974,7 +29080,7 @@ class WidgetTimeContextComponent {
     /**
      * @ignore only DI.
      */
-    constructor(widgetEventService, dashboardChild, formBuilder, queryService, helperService, router, actionBarService, aggregationService) {
+    constructor(widgetEventService, dashboardChild, formBuilder, queryService, helperService, router, actionBarService, aggregationService, widgetTimeContextDateRangeService) {
         this.widgetEventService = widgetEventService;
         this.dashboardChild = dashboardChild;
         this.formBuilder = formBuilder;
@@ -28983,6 +29089,7 @@ class WidgetTimeContextComponent {
         this.router = router;
         this.actionBarService = actionBarService;
         this.aggregationService = aggregationService;
+        this.widgetTimeContextDateRangeService = widgetTimeContextDateRangeService;
         this.INTERVAL_TITLES = INTERVAL_TITLES;
         this.DATE_FORMAT = 'short';
         /**
@@ -29006,6 +29113,21 @@ class WidgetTimeContextComponent {
         this.ACTION_BAR_GROUP_ID = 'timecontext';
         this.REALTIME_INTERVAL = 1000;
         this.destroy$ = new Subject();
+        effect(() => {
+            const data = this.widgetTimeContextDateRangeService.timeContextChange();
+            if (data) {
+                const updatedFormData = {
+                    date: [new Date(data.dateFrom), new Date(data.dateTo)],
+                    interval: data.interval,
+                    realtime: false,
+                    aggregation: this.form.value.aggregation
+                };
+                this.sliderChange = true;
+                this.dateContextChange.emit({ ...updatedFormData, sliderChange: true });
+                this.stopRealtime();
+                this.updateFormValues(updatedFormData);
+            }
+        });
     }
     /**
      * @ignore Subscribing to the global context.
@@ -29133,6 +29255,10 @@ class WidgetTimeContextComponent {
         this.form.controls.aggregation.valueChanges
             .pipe(takeUntil(this.destroy$))
             .subscribe(aggregation => {
+            if (this.sliderChange) {
+                this.sliderChange = false;
+                return;
+            }
             this.update({
                 date: [
                     new Date(this.form.value.currentDateContextFromDate),
@@ -29184,6 +29310,8 @@ class WidgetTimeContextComponent {
             }
             this.dateContextChange.emit({
                 date,
+                sliderChange: false,
+                interval,
                 realtime,
                 aggregation
             });
@@ -29361,13 +29489,34 @@ 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$5.FormBuilder }, { token: WidgetTimeContextQueryService }, { token: WidgetTimeContextHelperService }, { token: i1$3.Router }, { token: ActionBarService }, { token: AggregationService }], 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  [priority]=\"ACTION_BAR_PRIORITY\"\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          dropdown\n          [insideClick]=\"true\"\n          *ngIf=\"date\"\n        >\n          <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            data-cy=\"widget-time-context--date-picker-dropdown-button\"\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\n                class=\"text-12\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\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]=\"\n                      form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\n                    \"\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        class=\"form-control p-0 flex-no-grow w-auto\"\n        *ngIf=\"displaySettings.globalRealtimeContext\"\n        formControlName=\"realtime\"\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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i20.IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: RealtimeControlComponent, selector: "c8y-realtime-control" }, { kind: "component", type: AggregationPickerComponent, selector: "c8y-aggregation-picker", inputs: ["disabledAggregations"] }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetTimeContextComponent, deps: [{ token: WidgetsDashboardEventService }, { token: DashboardChildComponent }, { token: i2$3.FormBuilder }, { token: WidgetTimeContextQueryService }, { token: WidgetTimeContextHelperService }, { token: i1$5.Router }, { token: ActionBarService }, { token: AggregationService }, { token: WidgetTimeContextDateRangeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetTimeContextComponent, isStandalone: true, 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  [priority]=\"ACTION_BAR_PRIORITY\"\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          dropdown\n          [insideClick]=\"true\"\n          *ngIf=\"date\"\n        >\n          <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            data-cy=\"widget-time-context--date-picker-dropdown-button\"\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\n                class=\"text-12\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\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]=\"\n                      form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\n                    \"\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        class=\"form-control p-0 flex-no-grow w-auto\"\n        *ngIf=\"displaySettings.globalRealtimeContext\"\n        formControlName=\"realtime\"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { 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" }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }] }); }
 }
 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  [priority]=\"ACTION_BAR_PRIORITY\"\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          dropdown\n          [insideClick]=\"true\"\n          *ngIf=\"date\"\n        >\n          <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            data-cy=\"widget-time-context--date-picker-dropdown-button\"\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\n                class=\"text-12\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\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]=\"\n                      form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\n                    \"\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        class=\"form-control p-0 flex-no-grow w-auto\"\n        *ngIf=\"displaySettings.globalRealtimeContext\"\n        formControlName=\"realtime\"\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$5.FormBuilder }, { type: WidgetTimeContextQueryService }, { type: WidgetTimeContextHelperService }, { type: i1$3.Router }, { type: ActionBarService }, { type: AggregationService }], propDecorators: { canDecouple: [{
+            args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, standalone: true, imports: [
+                        NgIf,
+                        ActionBarItemComponent,
+                        NgTemplateOutlet,
+                        FormsModule$1,
+                        ReactiveFormsModule,
+                        BsDropdownModule,
+                        TooltipModule,
+                        IconDirective,
+                        IntervalPickerComponent,
+                        FormGroupComponent,
+                        NgClass,
+                        C8yTranslateDirective,
+                        MessagesComponent,
+                        MessageDirective,
+                        RealtimeControlComponent,
+                        AggregationPickerComponent,
+                        C8yTranslatePipe,
+                        DatePipe,
+                        DashboardChildActionComponent,
+                        DateTimePickerComponent
+                    ], template: "<c8y-action-bar-item\n  *ngIf=\"isCoupled && !hidden\"\n  [priority]=\"ACTION_BAR_PRIORITY\"\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          dropdown\n          [insideClick]=\"true\"\n          *ngIf=\"date\"\n        >\n          <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            data-cy=\"widget-time-context--date-picker-dropdown-button\"\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\n                class=\"text-12\"\n                data-cy=\"widget-time-context--selected-interval\"\n              >\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]=\"\n                      form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\n                    \"\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        class=\"form-control p-0 flex-no-grow w-auto\"\n        *ngIf=\"displaySettings.globalRealtimeContext\"\n        formControlName=\"realtime\"\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: i2$3.FormBuilder }, { type: WidgetTimeContextQueryService }, { type: WidgetTimeContextHelperService }, { type: i1$5.Router }, { type: ActionBarService }, { type: AggregationService }, { type: WidgetTimeContextDateRangeService }], propDecorators: { canDecouple: [{
                 type: Input
             }], displaySettings: [{
                 type: Input
@@ -29821,7 +29970,7 @@ class AutoRefreshControlComponent {
                 useExisting: forwardRef(() => AutoRefreshControlComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], ngImport: i0, template: "<div class=\"input-group\">\n  <button\n    class=\"toggle-countdown\"\n    [attr.aria-label]=\"\n      ((showIntervalRefresh$ | async) ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) | translate\n    \"\n    [tooltip]=\"\n      ((showIntervalRefresh$ | async) ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) | translate\n    \"\n    placement=\"bottom\"\n    (click)=\"toggleIntervalRefresh()\"\n    [adaptivePosition]=\"false\"\n    mode\n    [delay]=\"500\"\n  >\n    <c8y-countdown-interval\n      [hidden]=\"!(showIntervalRefresh$ | async)\"\n      [countdownInterval]=\"(autoRefreshSeconds$ | async) ?? DEFAULT_INTERVAL_VALUE\"\n    ></c8y-countdown-interval>\n    <i\n      c8yIcon=\"pause\"\n      *ngIf=\"!(showIntervalRefresh$ | async)\"\n    ></i>\n  </button>\n  <span></span>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { 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: "component", type: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], ngImport: i0, template: "<div class=\"input-group\">\n  <button\n    class=\"toggle-countdown\"\n    [attr.aria-label]=\"\n      ((showIntervalRefresh$ | async) ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) | translate\n    \"\n    [tooltip]=\"\n      ((showIntervalRefresh$ | async) ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) | translate\n    \"\n    placement=\"bottom\"\n    (click)=\"toggleIntervalRefresh()\"\n    [adaptivePosition]=\"false\"\n    mode\n    [delay]=\"500\"\n  >\n    <c8y-countdown-interval\n      [hidden]=\"!(showIntervalRefresh$ | async)\"\n      [countdownInterval]=\"(autoRefreshSeconds$ | async) ?? DEFAULT_INTERVAL_VALUE\"\n    ></c8y-countdown-interval>\n    <i\n      c8yIcon=\"pause\"\n      *ngIf=\"!(showIntervalRefresh$ | async)\"\n    ></i>\n  </button>\n  <span></span>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.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: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { 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: AutoRefreshControlComponent, decorators: [{
             type: Component,
@@ -29867,7 +30016,7 @@ class AutoRefreshSelectControlComponent {
                 useExisting: forwardRef(() => AutoRefreshSelectControlComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"c8y-select-wrapper\">\n  <select\n    class=\"form-control text-12\"\n    [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n    [tooltip]=\"'Refresh interval in seconds' | translate\"\n    placement=\"bottom\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    [container]=\"'body'\"\n    mode\n    [(ngModel)]=\"autoRefreshSeconds\"\n    (ngModelChange)=\"onIntervalChange($event)\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  >\n    <option\n      *ngFor=\"let refreshInterval of DEFAULT_INTERVAL_VALUES\"\n      [ngValue]=\"refreshInterval\"\n      [attr.selected]=\"refreshInterval === START_INTERVAL_VALUE ? '' : null\"\n    >\n      {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n    </option>\n  </select>\n  <span></span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<div class=\"c8y-select-wrapper\">\n  <select\n    class=\"form-control text-12\"\n    [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n    [tooltip]=\"'Refresh interval in seconds' | translate\"\n    placement=\"bottom\"\n    [adaptivePosition]=\"false\"\n    [delay]=\"500\"\n    [container]=\"'body'\"\n    mode\n    [(ngModel)]=\"autoRefreshSeconds\"\n    (ngModelChange)=\"onIntervalChange($event)\"\n    [ngModelOptions]=\"{ standalone: true }\"\n  >\n    <option\n      *ngFor=\"let refreshInterval of DEFAULT_INTERVAL_VALUES\"\n      [ngValue]=\"refreshInterval\"\n      [attr.selected]=\"refreshInterval === START_INTERVAL_VALUE ? '' : null\"\n    >\n      {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n    </option>\n  </select>\n  <span></span>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.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: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AutoRefreshSelectControlComponent, decorators: [{
             type: Component,
@@ -29983,7 +30132,7 @@ class WidgetAutoRefreshContextComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: WidgetAutoRefreshContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetAutoRefreshContextComponent, selector: "c8y-widget-auto-refresh-context", inputs: { editMode$: "editMode$" }, ngImport: i0, template: "<c8y-action-bar-item\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [priority]=\"ACTION_BAR_PRIORITY\"\n  [placement]=\"'left'\"\n>\n  <form\n    class=\"d-flex\"\n    [formGroup]=\"form\"\n  >\n    <c8y-auto-refresh-control\n      [hidden]=\"editMode$ | async\"\n      (loading)=\"globalRefreshWidgetLoading = $event\"\n      formControlName=\"autoRefresh\"\n    ></c8y-auto-refresh-control>\n\n    <c8y-auto-refresh-select-control\n      [hidden]=\"editMode$ | async\"\n      formControlName=\"autoRefreshSeconds\"\n    ></c8y-auto-refresh-select-control>\n  </form>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default\"\n      style=\"border-left: 0\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"'Refresh' | translate\"\n      placement=\"bottom\"\n      type=\"button\"\n      *ngIf=\"!(editMode$ | async)\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"globalRefreshWidgetLoading\"\n      (click)=\"onRefresh()\"\n    >\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': globalRefreshWidgetLoading }\"\n      ></i>\n    </button>\n  </div>\n</c8y-action-bar-item>\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: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { 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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", outputs: ["loading"] }, { kind: "component", type: AutoRefreshSelectControlComponent, selector: "c8y-auto-refresh-select-control" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: WidgetAutoRefreshContextComponent, selector: "c8y-widget-auto-refresh-context", inputs: { editMode$: "editMode$" }, ngImport: i0, template: "<c8y-action-bar-item\n  [groupId]=\"ACTION_BAR_GROUP_ID\"\n  [priority]=\"ACTION_BAR_PRIORITY\"\n  [placement]=\"'left'\"\n>\n  <form\n    class=\"d-flex\"\n    [formGroup]=\"form\"\n  >\n    <c8y-auto-refresh-control\n      [hidden]=\"editMode$ | async\"\n      (loading)=\"globalRefreshWidgetLoading = $event\"\n      formControlName=\"autoRefresh\"\n    ></c8y-auto-refresh-control>\n\n    <c8y-auto-refresh-select-control\n      [hidden]=\"editMode$ | async\"\n      formControlName=\"autoRefreshSeconds\"\n    ></c8y-auto-refresh-select-control>\n  </form>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default\"\n      style=\"border-left: 0\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"'Refresh' | translate\"\n      placement=\"bottom\"\n      type=\"button\"\n      *ngIf=\"!(editMode$ | async)\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"globalRefreshWidgetLoading\"\n      (click)=\"onRefresh()\"\n    >\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': globalRefreshWidgetLoading }\"\n      ></i>\n    </button>\n  </div>\n</c8y-action-bar-item>\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: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: i2$2.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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AutoRefreshControlComponent, selector: "c8y-auto-refresh-control", outputs: ["loading"] }, { kind: "component", type: AutoRefreshSelectControlComponent, selector: "c8y-auto-refresh-select-control" }, { 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: WidgetAutoRefreshContextComponent, decorators: [{
             type: Component,
@@ -30062,8 +30211,8 @@ class WidgetsDashboardComponent {
         this.isExecutingResolvers$ = merge(this._widgets.pipe(map(() => true)), this.resolvedWidgets$.pipe(map(() => false)));
         this.isLoadingWidgets$ = combineLatest([this.isLoading$, this.isExecutingResolvers$]).pipe(map(loadings => loadings.some(loading => loading)), shareReplay(1));
     }
-    ngOnChanges({ isCopyDisabled }) {
-        if (isCopyDisabled) {
+    ngOnChanges(changes) {
+        if (changes.isCopyDisabled) {
             this.setCopyDisabledPopoverMsg();
         }
     }
@@ -30214,8 +30363,8 @@ 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$1.TranslateService }, { token: i1$3.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }], 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  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"enableEditMode()\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{\n        (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel) | translate\n      }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      data-cy=\"widgets-dashboard--copy-dashboard\"\n      (click)=\"onCopyDashboard.emit()\"\n      [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n      <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\n    </div>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode$ | async\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span translate>Edit</span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"(editMode$ | async)\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "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: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: "component", type: WidgetAutoRefreshContextComponent, selector: "c8y-widget-auto-refresh-context", inputs: ["editMode$"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    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$5.ActivatedRoute }, { token: ModalService }, { token: WidgetGlobalAutoRefreshService }], 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  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"enableEditMode()\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{\n        (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel) | translate\n      }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      data-cy=\"widgets-dashboard--copy-dashboard\"\n      (click)=\"onCopyDashboard.emit()\"\n      [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n      <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\n    </div>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode$ | async\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span translate>Edit</span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"(editMode$ | async)\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "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$2.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: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: ["canDecouple", "displaySettings", "hidden"], outputs: ["dateContextChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { 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: WidgetAutoRefreshContextComponent, selector: "c8y-widget-auto-refresh-context", inputs: ["editMode$"] }, { 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: WidgetsDashboardComponent, decorators: [{
             type: Component,
@@ -30225,7 +30374,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  [priority]=\"ACTION_BAR_EDIT_WIDGETS_PRIORITY\"\n  *ngIf=\"!(editMode$ | async)\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn hidden-xs\"\n    title=\"{{ 'Edit widgets' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled\"\n    (click)=\"enableEditMode()\"\n    data-cy=\"c8y-widget-dashboard--edit-widgets\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"send-backward\"></i>\n    <span class=\"m-l-4\">{{ 'Edit widgets' | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  *ngIf=\"editMode$ | async\"\n>\n  <button\n    class=\"btn btn-link animated fadeIn\"\n    title=\"{{ 'Add widget' | translate }}\"\n    type=\"button\"\n    (click)=\"onAddWidget.emit()\"\n    data-cy=\"widget-dashboard--Add-widget\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add widget' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"d-flex a-i-center gap-8\"\n  *ngIf=\"editMode$ | async\"\n>\n  <div class=\"input-group input-group-sm animated fadeIn\">\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Undo' | translate\"\n        [tooltip]=\"\n          editModeButtons.undoButtonDisabled\n            ? ''\n            : (undoMessage\n              | translate: { changeToUndo: editModeButtons.changeToUndoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('undo')\"\n        [disabled]=\"editModeButtons.undoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'undo'\"></i>\n      </button>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default btn-sm btn-icon\"\n        [attr.aria-label]=\"'Redo' | translate\"\n        [tooltip]=\"\n          editModeButtons.redoButtonDisabled\n            ? ''\n            : (redoMessage\n              | translate: { changeToRedo: editModeButtons.changeToRedoName | translate })\n        \"\n        container=\"body\"\n        (click)=\"revertChange.emit('redo')\"\n        [disabled]=\"editModeButtons.redoButtonDisabled\"\n      >\n        <i [c8yIcon]=\"'redo'\"></i>\n      </button>\n    </div>\n    <span></span>\n  </div>\n  <div class=\"btn-group animated fadeIn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancelDashboardSave()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary btn-sm m-l-8\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      [disabled]=\"editModeButtons.undoButtonDisabled\"\n      (click)=\"saveDashboard()\"\n      data-cy=\"c8y-widgets-dashboard--save\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"onEditDashboard.observers.length\"\n>\n  <button\n    class=\"btn btn-link hidden-xs m-l-0\"\n    title=\"{{ 'Dashboard settings' | translate }}\"\n    type=\"button\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n    (click)=\"onEditDashboard.emit()\"\n    data-cy=\"c8y-widgets-dashboard--edit-dashboard\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n  <button\n    class=\"btn btn-link visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"sorting-slider\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visible-lg-inline\">\n      {{ 'Dashboard settings' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  *ngIf=\"settings.allowFullscreen\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    tooltip=\"{{ 'Full screen' | translate }}\"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"widgets-dashboard--Full-screen\"\n  >\n    <i [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{ 'Full screen' | translate }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-2000\"\n  *ngIf=\"settings.canCopy\"\n>\n  <div\n    [ngStyle]=\"{\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center'\n    }\"\n  >\n    <button\n      class=\"hidden-xs\"\n      title=\"{{\n        (isCopyDisabled === true || !isCopyDisabled?.state ? 'Disabled' : copyDashboardLabel) | translate\n      }}\"\n      type=\"button\"\n      [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n      data-cy=\"widgets-dashboard--copy-dashboard\"\n      (click)=\"onCopyDashboard.emit()\"\n      [disabled]=\"isCopyDisabled === true || !isCopyDisabled?.state || (editMode$ | async)\"\n    >\n      <i c8yIcon=\"clone\"></i>\n      <span>{{ copyDashboardLabel | translate }}</span>\n    </button>\n      <button\n      class=\"btn-help btn-help--sm m-r-16 hidden-xs\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"copyDisabledPopoverMsg | translate\"\n      placement=\"right\"\n      triggers=\"focus\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"!isCopyDisabled?.state && copyDisabledPopoverMsg\"\n      data-cy=\"widgets-dashboard--info-copy-dashboard\"\n      (click)=\"$event.stopPropagation()\"\n    ></button>\n    </div>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canDelete }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"clone\"></i>\n    <span>{{ copyDashboardLabel | translate }}</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'more'\"\n  [priority]=\"-3000\"\n  *ngIf=\"settings.canDelete && onDeleteDashboard.observers.length\"\n>\n  <button\n    class=\"hidden-xs\"\n    title=\"{{ 'Delete dashboard' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    (click)=\"onDeleteDashboard.emit()\"\n    [disabled]=\"settings.isDisabled || (editMode$ | async)\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n  <button\n    class=\"visible-xs m-l-0\"\n    tooltip=\"{{ 'Not available on mobile phone' | translate }}\"\n    type=\"button\"\n    data-cy=\"widgets-dashboard--delete-dashboard-mobile\"\n    [ngClass]=\"{ 'btn btn-link': !settings.canCopy }\"\n    [disabled]=\"true\"\n  >\n    <i c8yIcon=\"delete\"></i>\n    <span translate>Delete dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<ng-template #loadingIndicator>\n  <c8y-loading\n    class=\"col-xs-12 text-center\"\n    *ngIf=\"isLoadingWidgets$ | async\"\n  ></c8y-loading>\n</ng-template>\n\n<ng-container *ngIf=\"!(isLoadingWidgets$ | async); else loadingIndicator\">\n  <ng-container *ngIf=\"resolvedWidgets$ | async as widgetsToDisplay\">\n    <!-- empty state -->\n    <c8y-ui-empty-state\n      [icon]=\"'c8y-device'\"\n      [title]=\"'No widgets to display.' | translate\"\n      *ngIf=\"widgetsToDisplay?.length === 0\"\n    >\n      <div *ngIf=\"onAddWidget.observers.length\">\n        <p\n          translate\n          *ngIf=\"editMode$ | async\"\n        >\n          Add widgets to this dashboard.\n        </p>\n        <p\n          translate\n          *ngIf=\"!(editMode$ | async)\"\n        >\n          Click \"Edit widgets\" to unlock\n        </p>\n        <div>\n          <button\n            class=\"btn btn-primary m-t-16\"\n            title=\"{{ 'Add widget' | translate }}\"\n            type=\"button\"\n            [disabled]=\"settings.isDisabled || !(editMode$ | async)\"\n            (click)=\"onAddWidget.emit()\"\n            data-cy=\"c8y-widgets-dashboard--add-widget\"\n            translate\n          >\n            Add widget\n          </button>\n        </div>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/working-with-dashboards\">user documentation</a>\n            .\n          </small>\n        </p>\n      </div>\n    </c8y-ui-empty-state>\n\n    <c8y-dashboard\n      [columns]=\"settings.columns\"\n      (dashboardChange)=\"onChangeDashboard.emit($event)\"\n      #dashboard\n    >\n      <c8y-dashboard-child\n        [class]=\"widget.classes\"\n        *ngFor=\"let widget of widgetsToDisplay\"\n        [x]=\"widget._x\"\n        [y]=\"widget._y\"\n        [width]=\"widget._width || settings.defaultWidth\"\n        [height]=\"widget._height || settings.defaultHeight\"\n        [margin]=\"settings.widgetMargin\"\n        [data]=\"widget\"\n        [useIntersection]=\"true\"\n        [editMode]=\"editMode$ | async\"\n        (changeStart)=\"onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (changeEnd)=\"onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })\"\n        (toggleFullscreen)=\"toggleFullscreenOnWidget(child)\"\n        [canToggleFullscreen]=\"!(inFullScreen$ | async) || widgetInFullscreenMode\"\n        #child\n      >\n        <c8y-dashboard-child-title>\n          <span\n            data-cy=\"c8y-dashboard-list--device-widget\"\n            *ngIf=\"settings.translateWidgetTitle\"\n          >\n            {{ widget.title | translate }}\n          </span>\n          <span *ngIf=\"!settings.translateWidgetTitle\">\n            {{ widget.title }}\n          </span>\n        </c8y-dashboard-child-title>\n        <c8y-dashboard-child-action *ngIf=\"onEditWidget.observers.length\">\n          <button\n            title=\"{{ 'Edit widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"widgets-dashboard--Edit-widget\"\n            (click)=\"onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"pencil\"></i>\n            <span translate>Edit</span>\n          </button>\n        </c8y-dashboard-child-action>\n        <c8y-dashboard-child-action *ngIf=\"onDeleteWidget.observers.length\">\n          <button\n            title=\"{{ 'Remove widget' | translate }}\"\n            type=\"button\"\n            data-cy=\"c8y-widgets-dashboard--remove-widget\"\n            (click)=\"onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })\"\n          >\n            <i c8yIcon=\"delete\"></i>\n            <span translate>Remove</span>\n          </button>\n        </c8y-dashboard-child-action>\n\n        <c8y-widget-time-context\n          *ngIf=\"\n            (widget.config?.displaySettings?.globalTimeContext ||\n              widget.config?.displaySettings?.globalRealtimeContext) &&\n            widget.config.widgetInstanceGlobalTimeContext\n          \"\n          (dateContextChange)=\"updateWidgetConfig($event, widget)\"\n          [canDecouple]=\"widget.config.canDecoupleGlobalTimeContext\"\n          [displaySettings]=\"widget.config.displaySettings\"\n          [hidden]=\"(editMode$ | async)\"\n        ></c8y-widget-time-context>\n\n        <c8y-widget-auto-refresh-context\n          *ngIf=\"\n            widget?.config?.widgetInstanceGlobalAutoRefreshContext &&\n            widget.config?.displaySettings.globalAutoRefreshContext\n          \"\n          [editMode$]=\"editMode$\"\n        ></c8y-widget-auto-refresh-context>\n\n        <c8y-dynamic-component\n          [componentId]=\"widget.componentId || widget.name\"\n          [config]=\"\n            widget.templateUrl || widget.widgetComponent\n              ? { child: widget, dashboard: contextDashboard, context: context }\n              : widget.config\n          \"\n          *ngIf=\"child.intersected\"\n          (updateWidgetClasses)=\"updateWidgetClasses(widget, $event)\"\n        ></c8y-dynamic-component>\n      </c8y-dashboard-child>\n    </c8y-dashboard>\n  </ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$3.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }], propDecorators: { widgets: [{
+        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i1$1.TranslateService }, { type: i1$5.ActivatedRoute }, { type: ModalService }, { type: WidgetGlobalAutoRefreshService }], propDecorators: { widgets: [{
                 type: Input
             }], context: [{
                 type: Input
@@ -30465,7 +30614,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$7.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$2.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,
@@ -30488,7 +30637,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$7.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$2.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(),
@@ -30517,11 +30666,7 @@ class DashboardModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DashboardModule, declarations: [DashboardChildComponent,
             DashboardComponent,
             DashboardChildTitleComponent,
-            DashboardChildActionComponent,
             WidgetsDashboardComponent,
-            WidgetTimeContextComponent,
-            RealtimeControlComponent,
-            AggregationPickerComponent,
             WidgetAutoRefreshContextComponent,
             WidgetAutoRefreshContextIconBarComponent,
             AutoRefreshControlComponent,
@@ -30529,7 +30674,7 @@ class DashboardModule {
             WidgetTimeContextIconBar], imports: [CommonModule,
             ActionBarModule,
             DynamicComponentModule,
-            DragDropModule, i2$2.BsDropdownModule, TooltipModule,
+            DragDropModule, i1$4.BsDropdownModule, TooltipModule,
             HeaderModule,
             DocsModule,
             BreadcrumbModule,
@@ -30541,7 +30686,11 @@ class DashboardModule {
             CountdownIntervalModule,
             TranslateModule,
             IntervalPickerComponent,
-            PopoverModule], exports: [DashboardComponent,
+            PopoverModule,
+            AggregationPickerComponent,
+            RealtimeControlComponent,
+            WidgetTimeContextComponent,
+            DashboardChildActionComponent], exports: [DashboardComponent,
             DashboardChildComponent,
             DashboardChildTitleComponent,
             DashboardChildActionComponent,
@@ -30564,7 +30713,10 @@ class DashboardModule {
             CountdownIntervalModule,
             TranslateModule,
             IntervalPickerComponent,
-            PopoverModule] }); }
+            PopoverModule,
+            AggregationPickerComponent,
+            RealtimeControlComponent,
+            WidgetTimeContextComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DashboardModule, decorators: [{
             type: NgModule,
@@ -30573,11 +30725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         DashboardChildComponent,
                         DashboardComponent,
                         DashboardChildTitleComponent,
-                        DashboardChildActionComponent,
                         WidgetsDashboardComponent,
-                        WidgetTimeContextComponent,
-                        RealtimeControlComponent,
-                        AggregationPickerComponent,
                         WidgetAutoRefreshContextComponent,
                         WidgetAutoRefreshContextIconBarComponent,
                         AutoRefreshControlComponent,
@@ -30602,7 +30750,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         CountdownIntervalModule,
                         TranslateModule,
                         IntervalPickerComponent,
-                        PopoverModule
+                        PopoverModule,
+                        AggregationPickerComponent,
+                        RealtimeControlComponent,
+                        WidgetTimeContextComponent,
+                        DashboardChildActionComponent
                     ],
                     exports: [
                         DashboardComponent,
@@ -30852,7 +31004,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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -30898,13 +31050,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$5.FormBuilder }, { token: i1$4.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.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$5.FormBuilder }, { type: i1$4.BsModalRef }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: i2$3.FormBuilder }, { type: i1$6.BsModalRef }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['columnConfigForm', { static: false }]
             }], onAddCustomColumn: [{
@@ -30953,7 +31105,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$3.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$5.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: [{
@@ -30961,7 +31113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }, { type: i1$3.Router }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: PluginsResolveService }, { type: i1$5.Router }] });
 
 class BaseColumn {
     constructor(config = {}) {
@@ -32746,13 +32898,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$2.DomSanitizer }, { token: GainsightService }, { token: i1$4.BsModalService }, { token: AlertService }, { token: ActionControlsExtensionService }, { token: i1$3.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$6.BsModalService }, { token: AlertService }, { token: ActionControlsExtensionService }, { token: i1$5.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$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.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$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.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: i2$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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: i1$4.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$4.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$4.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$2.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.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,
@@ -32767,7 +32919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }, {
                     type: Inject,
                     args: [DATA_GRID_CONFIGURATION_STRATEGY]
-                }] }, { type: DataGridService }, { type: i1$2.DomSanitizer }, { type: GainsightService }, { type: i1$4.BsModalService }, { type: AlertService }, { type: ActionControlsExtensionService }, { type: i1$3.ActivatedRoute }], propDecorators: { title: [{
+                }] }, { type: DataGridService }, { type: i1$3.DomSanitizer }, { type: GainsightService }, { type: i1$6.BsModalService }, { type: AlertService }, { type: ActionControlsExtensionService }, { type: i1$5.ActivatedRoute }], propDecorators: { title: [{
                 type: Input
             }], loadMoreItemsLabel: [{
                 type: Input
@@ -33249,7 +33401,7 @@ class DataGridModule {
             DynamicFormsModule,
             CommonModule,
             FormsModule,
-            ModalModule, i2$2.BsDropdownModule, i2$4.PopoverModule, i2$3.TooltipModule, i19.PaginationModule, ProductExperienceModule,
+            ModalModule, i1$4.BsDropdownModule, i2$4.PopoverModule, i2$2.TooltipModule, i19.PaginationModule, ProductExperienceModule,
             A11yModule,
             FilterMapperModule], exports: [CellRendererDefDirective,
             HeaderCellRendererDefDirective,
@@ -33392,7 +33544,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=\"d-flex\">\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$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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=\"d-flex\">\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: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -33562,13 +33714,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$2.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$2.DomSanitizer }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { config: [{
                 type: Input
             }], display: [{
                 type: Input
@@ -33777,7 +33929,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$4.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$6.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,
@@ -33793,7 +33945,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$4.BsModalRef }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i1$6.BsModalRef }], propDecorators: { icon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -33827,7 +33979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 
 class SelectModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SelectModalModule, declarations: [SelectModalComponent, SelectModalFilterPipe], imports: [i2$2.BsDropdownModule, CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SelectModalModule, declarations: [SelectModalComponent, SelectModalFilterPipe], imports: [i1$4.BsDropdownModule, CommonModule,
             ListGroupModule,
             CoreSearchModule,
             FormsModule,
@@ -33965,7 +34117,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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i1$2.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: i1$2.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TimeIntervalComponent, decorators: [{
             type: Component,
@@ -34073,7 +34225,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$3.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$5.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: [{
@@ -34081,7 +34233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.Router }, { type: PluginsResolveService }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.Router }, { type: PluginsResolveService }] });
 
 class WizardOutletComponent {
     constructor(router, c8yWizardService, viewContainerRef, injector) {
@@ -34178,13 +34330,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$3.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$5.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$3.Router }, { type: WizardService }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { container: [{
+        }], ctorParameters: () => [{ type: i1$5.Router }, { type: WizardService }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef }]
             }], initialState: [{
@@ -34302,13 +34454,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$4.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$6.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$4.BsModalRef }], propDecorators: { header: [{
+        }], ctorParameters: () => [{ type: WizardService }, { type: i1$6.BsModalRef }], propDecorators: { header: [{
                 type: ViewChild,
                 args: ['headerRef', { static: true }]
             }], body: [{
@@ -34468,7 +34620,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$4.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$6.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: [{
@@ -34476,7 +34628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$4.BsModalService }] });
+        }], ctorParameters: () => [{ type: i1$6.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 }); }
@@ -34545,7 +34697,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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.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: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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,
@@ -34868,12 +35020,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.FetchClient }, { token: i1$3.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$5.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.FetchClient }, { type: i1$3.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1$5.ActivatedRoute }] });
 
 class ProviderDefinitionsService extends Service {
     constructor(client, activatedRoute) {
@@ -34884,12 +35036,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.FetchClient }, { token: i1$3.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$5.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.FetchClient }, { type: i1$3.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1.FetchClient }, { type: i1$5.ActivatedRoute }] });
 
 class ProviderConfigurationComponent {
     constructor(permissions, activatedRoute, modalService, alertService, providerDefinitionsService, providerConfigurationService, jsonschema) {
@@ -34992,13 +35144,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$3.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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.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$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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.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$3.ActivatedRoute }, { type: ModalService }, { type: AlertService }, { type: ProviderDefinitionsService }, { type: ProviderConfigurationService }, { type: C8yJSONSchema }] });
+        }], ctorParameters: () => [{ type: Permissions }, { type: i1$5.ActivatedRoute }, { type: ModalService }, { type: AlertService }, { type: ProviderDefinitionsService }, { type: ProviderConfigurationService }, { type: C8yJSONSchema }] });
 
 class ProviderConfigurationRouteFactory {
     constructor(config) {
@@ -35087,7 +35239,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$3.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$5.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: [{
@@ -35098,7 +35250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }, {
                     type: Inject,
                     args: [HOOK_DYNAMIC_PROVIDER_CONFIG]
-                }] }, { type: i1$3.Router }, { type: i0.Injector }] });
+                }] }, { type: i1$5.Router }, { type: i0.Injector }] });
 
 class ProviderConfigurationModule {
     static config(config) {
@@ -35524,5 +35676,5 @@ function colorValidator(allowedModes) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_QUERY_PARAM, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RelativeTimePipe, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StandalonePluginInjector, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateParserCustom, TranslateService, TranslationLoaderService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookVersion, hookWidget, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, viewContextRoutes, wrapperLegendFieldConfig };
+export { ACTIONS_STEPPER, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LABELS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, AGGREGATION_VALUES, AGGREGATION_VALUES_ARR, ARRAY_VALIDATION_PREFIX, ASSET_PATH, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionControlsExtensionService, ActionModule, ActionOutletComponent, ActionService, AggregationPickerComponent, AggregationService, AlarmRealtimeService, AlarmWithChildrenRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherInlineComponent, AppSwitcherService, ApplicationModule, ApplicationPluginStatus, AssetLinkPipe, AssetTypesRealtimeService, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BuiltInActionType, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CUSTOM, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorInputComponent, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CopyDashboardDisabledReason, CoreModule, CoreSearchModule, CountdownIntervalComponent, CountdownIntervalModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, DEFAULT_INTERVAL_STATE, DEFAULT_INTERVAL_VALUE, DEFAULT_INTERVAL_VALUES, DRAWER_ANIMATION_TIME, DashboardChildActionComponent, DashboardChildChange, DashboardChildComponent, DashboardChildTitleComponent, DashboardComponent, DashboardModule, DataGridComponent, DataGridModule, DataGridService, DatapointLibraryValidationErrors, DateContextQueryParamNames, DateFilterMapper, DatePickerComponent, DatePickerModule, DatePipe, DateTimePickerComponent, DateTimePickerModule, DefaultValidationDirective, DeviceBootstrapRealtimeService, DeviceService, DeviceStatusComponent, DeviceStatusModule, DismissAlertStrategy, DocsModule, DocsService, DrawerModule, DrawerOutletComponent, DrawerService, DropAreaComponent, DropAreaModule, DropdownDirectionDirective, DynamicBulkDetailsResolver, DynamicBulkIIdentifiedResolver, DynamicComponentAlert, DynamicComponentAlertAggregator, DynamicComponentAlertsComponent, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EmptyStateContextDirective, EventRealtimeService, ExpandableRowDirective, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GLOBAL_CONTEXT_AUTO_REFRESH, GainsightService, GenericFileIconPipe, GeoService, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DOCS, HOOK_DYNAMIC_PROVIDER_CONFIG, HOOK_NAVIGATOR_NODES, HOOK_OPTIONS, HOOK_PATTERN_MESSAGES, HOOK_ROUTE, HOOK_SEARCH, HOOK_STEPPER, HOOK_TABS, HOOK_VERSION, HOOK_WIZARD, HeaderBarComponent, HeaderCellRendererDefDirective, HeaderModule, HeaderService, HelpComponent, HelpModule, HighlightComponent, HookProviderTypes, HumanizeAppNamePipe, HumanizePipe, HumanizeValidationMessagePipe, I18nModule, INTERVAL_OPTIONS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InterAppService, IntervalBasedReload, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LAST_DAY, LAST_HOUR, LAST_MINUTE, LAST_MONTH, LAST_WEEK, LOCALE_PATH, LegacyGridConfigMapperService, LegendFieldWrapper, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES_CORE_I18N, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageBannerService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NEW_DASHBOARD_QUERY_PARAM, NULL_VALUE_PLACEHOLDER, NUMBER_FORMAT_REGEXP, NameTransformPipe, NavigatorBottomModule, NavigatorIconComponent, NavigatorModule, NavigatorNode, NavigatorNodeComponent, NavigatorNodeRoot, NavigatorOutletComponent, NavigatorService, NavigatorTopModule, NewPasswordComponent, NumberPipe, OperationBulkRealtimeService, OperationRealtimeService, OperationResultComponent, OptionsService, OutletDirective, PRODUCT_EXPERIENCE_EVENT_SOURCE, PX_ACTIONS, PX_EVENT_NAME, PackageType, PasswordCheckListComponent, PasswordConfirm, PasswordConfirmModalComponent, PasswordInputComponent, PasswordService, PasswordStrengthCheckerService, PasswordStrengthComponent, PasswordStrengthValidatorDirective, PatternMessagesService, Permissions, PhoneValidationDirective, PlatformDetailsService, PluginLoadedPipe, PluginsExportScopes, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, PropertyValueTransformService, ProvidePhoneNumberComponent, ProviderConfigurationComponent, ProviderConfigurationModule, ProviderConfigurationNodeFactory, ProviderConfigurationRouteFactory, ProviderConfigurationService, ProviderDefinitionsService, PushStatus, PushStatusLabels, QuickLinkComponent, QuickLinkModule, RESOLVING_COMPONENT_WAIT_TIME, RadioFilterMapper, RangeComponent, RangeDirective, RangeDisplayComponent, RangeDisplayModule, RealtimeButtonComponent, RealtimeControlComponent, RealtimeMessage, RealtimeModule, RealtimeService, RealtimeSubjectService, RecoverPasswordComponent, RelativeTimePipe, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent, SelectFilterMapper, SelectItemDirective, SelectKeyboardService, SelectLegacyComponent, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SelectedItemsComponent, SelectedItemsDirective, SendStatus, SendStatusLabels, ServiceRegistry, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StandalonePluginInjector, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, SupportedApps, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, ThemeSwitcherService, TimeIntervalComponent, TimePickerComponent, TimePickerModule, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateParserCustom, TranslateService, TranslationLoaderService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WebSDKVersionFactory, WidgetGlobalAutoRefreshService, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetTimeContextDateRangeService, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, colorValidator, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getDictionaryWithTrimmedKeys, getInjectedHooks, globalAutoRefreshLoading, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDataGridActionControls, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookService, hookStepper, hookTab, hookUserMenu, hookVersion, hookWidget, hookWizard, initializeServices, internalApps, isEagerDynamicComponents, isExtensionFactory, isLazyDynamicComponents, isPromise, languagesFactory, loadLocale, localeId, localePathFactory, memoize, minColumnGridTrackSize, operationStatusClasses, operationStatusIcons, ratiosByColumnTypes, removeDuplicatesIds, resolveInjectedFactories, retryWithDelay, simpleJsonPathValidator, sortByPriority, stateToFactory, statusAlert, statusClasses, statusIcons, throttle, toObservable, toObservableOfArrays, tooltips, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements, viewContextRoutes, wrapperLegendFieldConfig };
 //# sourceMappingURL=c8y-ngx-components.mjs.map