@c8y/ngx-components 1018.503.56 → 1018.503.62

package/fesm2015/c8y-ngx-components.mjs

@@ -6597,6 +6597,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$1.UserService }, { type: i1$1.InventoryService }, { type: AppStateService }]; } });
 
+/**
+ * Simplified version of [NgComponentOutlet](https://github.com/angular/angular/blob/main/packages/common/src/directives/ng_component_outlet.ts)
+ *
+ * In contrast to NgComponentOutlet it allows to set the environment injector.
+ *
+ * A [PR](https://github.com/angular/angular/pull/54764) has been raised to add that functionality in Angular.
+ *
+ * TODO: Remove this directive once the PR is merged.
+ */
+class C8yComponentOutlet {
+    constructor(__viewContainerRef) {
+        this.__viewContainerRef = __viewContainerRef;
+        this.c8yComponentOutlet = null;
+    }
+    ngOnChanges(changes) {
+        if (this._needToReCreateComponentInstance(changes)) {
+            this.__viewContainerRef.clear();
+            this._componentRef = undefined;
+            if (this.c8yComponentOutlet) {
+                this._componentRef = this.__viewContainerRef.createComponent(this.c8yComponentOutlet, {
+                    injector: this.c8yComponentOutletInjector || this.__viewContainerRef.parentInjector,
+                    environmentInjector: this.c8yComponentOutletEnvironmentInjector
+                });
+            }
+        }
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    _needToReCreateComponentInstance(changes) {
+        // Note: square brackets property accessor is safe for Closure compiler optimizations (the
+        // `changes` argument of the `ngOnChanges` lifecycle hook retains the names of the fields that
+        // were changed).
+        return (changes['c8yComponentOutlet'] !== undefined ||
+            changes['c8yComponentOutletInjector'] !== undefined ||
+            changes['c8yComponentOutletEnvironmentInjector'] !== undefined);
+    }
+}
+C8yComponentOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: C8yComponentOutlet, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+C8yComponentOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: C8yComponentOutlet, isStandalone: true, selector: "[c8yComponentOutlet]", inputs: { c8yComponentOutlet: "c8yComponentOutlet", c8yComponentOutletInjector: "c8yComponentOutletInjector", c8yComponentOutletEnvironmentInjector: "c8yComponentOutletEnvironmentInjector" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: C8yComponentOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c8yComponentOutlet]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { c8yComponentOutlet: [{
+                type: Input
+            }], c8yComponentOutletInjector: [{
+                type: Input
+            }], c8yComponentOutletEnvironmentInjector: [{
+                type: Input
+            }] } });
+
 function initializeServices(translateService, state, userPreferences) {
     const initialize = () => {
         const queryStringLanguage = translateService.queryStringLang();
@@ -6703,7 +6758,7 @@ CommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         MarkdownToHtmlPipe,
         MoNamePipe,
         GenericFileIconPipe,
-        StringifyObjectPipe], imports: [CommonModule$1, I18nModule$1, TooltipModule, ScrollingModule], exports: [EmptyStateComponent,
+        StringifyObjectPipe], imports: [CommonModule$1, I18nModule$1, TooltipModule, ScrollingModule, C8yComponentOutlet], exports: [EmptyStateComponent,
         IconDirective,
         OutletDirective,
         I18nModule$1,
@@ -6734,13 +6789,14 @@ CommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         MarkdownToHtmlPipe,
         MoNamePipe,
         GenericFileIconPipe,
-        StringifyObjectPipe] });
+        StringifyObjectPipe,
+        C8yComponentOutlet] });
 CommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CommonModule, imports: [CommonModule$1, I18nModule$1, TooltipModule, ScrollingModule, I18nModule$1,
         CommonModule$1] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CommonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule$1, I18nModule$1, TooltipModule, ScrollingModule],
+                    imports: [CommonModule$1, I18nModule$1, TooltipModule, ScrollingModule, C8yComponentOutlet],
                     exports: [
                         EmptyStateComponent,
                         IconDirective,
@@ -6773,7 +6829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MarkdownToHtmlPipe,
                         MoNamePipe,
                         GenericFileIconPipe,
-                        StringifyObjectPipe
+                        StringifyObjectPipe,
+                        C8yComponentOutlet
                     ],
                     declarations: [
                         EmptyStateComponent,
@@ -8971,10 +9028,10 @@ class ActionOutletComponent {
     }
 }
 ActionOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ActionOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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 *ngComponentOutlet=\"item.component; injector: 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: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$6.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: i1$4.AsyncPipe, name: "async" }] });
+ActionOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$6.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: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ActionOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-action-outlet', host: { class: 'd-contents' }, template: "<ng-container *ngIf=\"(components$ | async)?.length > 0\">\n  <div class=\"main-header-item\" *ngFor=\"let item of components$ | async\">\n    <ng-container *ngComponentOutlet=\"item.component; injector: 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" }]
+            args: [{ selector: 'c8y-action-outlet', host: { class: 'd-contents' }, 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" }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -12010,10 +12067,10 @@ class DrawerOutletComponent {
     }
 }
 DrawerOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerOutletComponent, deps: [{ token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-DrawerOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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\n      *ngComponentOutlet=\"drawerItem.component; injector: drawerItem.injector\"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i6$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
+DrawerOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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: i6$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: DrawerOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-drawer-outlet', 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\n      *ngComponentOutlet=\"drawerItem.component; injector: drawerItem.injector\"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-drawer-outlet', 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" }]
         }], ctorParameters: function () { return [{ type: DrawerService }]; }, propDecorators: { position: [{
                 type: Input
             }], open: [{
@@ -15204,10 +15261,10 @@ class TabsOutletComponent {
     }
 }
 TabsOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TabsOutletComponent, deps: [{ token: i1$7.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component });
-TabsOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen" }, host: { properties: { "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: "leftBtn", first: true, predicate: ["left"], descendants: true, read: ElementRef }, { propertyName: "rightBtn", first: true, predicate: ["right"], descendants: true, read: ElementRef }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer hidden-xs\"\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  <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\"\n      >\n        <a\n          title=\"{{ tab?.label | translate }}\"\n          [routerLink]=\"tab.path\"\n          routerLinkActive\n          #rla=\"routerLinkActive\"\n        >\n          <i\n            [c8yIcon]=\"tab?.icon\"\n            *ngIf=\"!tab.template && tab?.icon\"\n          ></i>\n          <span *ngIf=\"!tab.template && !tab.component\">\n            {{ tab?.label | translate }}\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</div>\n\n<div class=\"visible-xs mobile-tabs\">\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 *ngComponentOutlet=\"tab.component; injector: tab.injector\"></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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
+TabsOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: { tabs: "tabs", orientation: "orientation", navigatorOpen: "navigatorOpen" }, host: { properties: { "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: "leftBtn", first: true, predicate: ["left"], descendants: true, read: ElementRef }, { propertyName: "rightBtn", first: true, predicate: ["right"], descendants: true, read: ElementRef }, { propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"tabContainer hidden-xs\"\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  <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\"\n      >\n        <a\n          title=\"{{ tab?.label | translate }}\"\n          [routerLink]=\"tab.path\"\n          routerLinkActive\n          #rla=\"routerLinkActive\"\n        >\n          <i\n            [c8yIcon]=\"tab?.icon\"\n            *ngIf=\"!tab.template && tab?.icon\"\n          ></i>\n          <span *ngIf=\"!tab.template && !tab.component\">\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n        <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n      </div>\n      <ng-container *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"visible-xs mobile-tabs\">\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 *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"></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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TabsOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-tabs-outlet,c8y-ui-tabs', template: "<div\n  class=\"tabContainer hidden-xs\"\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  <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\"\n      >\n        <a\n          title=\"{{ tab?.label | translate }}\"\n          [routerLink]=\"tab.path\"\n          routerLinkActive\n          #rla=\"routerLinkActive\"\n        >\n          <i\n            [c8yIcon]=\"tab?.icon\"\n            *ngIf=\"!tab.template && tab?.icon\"\n          ></i>\n          <span *ngIf=\"!tab.template && !tab.component\">\n            {{ tab?.label | translate }}\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</div>\n\n<div class=\"visible-xs mobile-tabs\">\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 *ngComponentOutlet=\"tab.component; injector: tab.injector\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n" }]
+            args: [{ selector: 'c8y-tabs-outlet,c8y-ui-tabs', template: "<div\n  class=\"tabContainer hidden-xs\"\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  <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\"\n      >\n        <a\n          title=\"{{ tab?.label | translate }}\"\n          [routerLink]=\"tab.path\"\n          routerLinkActive\n          #rla=\"routerLinkActive\"\n        >\n          <i\n            [c8yIcon]=\"tab?.icon\"\n            *ngIf=\"!tab.template && tab?.icon\"\n          ></i>\n          <span *ngIf=\"!tab.template && !tab.component\">\n            {{ tab?.label | translate }}\n          </span>\n        </a>\n        <ng-container *ngTemplateOutlet=\"tab.template; injector: tab.injector\"></ng-container>\n      </div>\n      <ng-container *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<div class=\"visible-xs mobile-tabs\">\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 *c8yComponentOutlet=\"tab.component; environmentInjector: tab.injector\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ul>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$7.Router }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: HeaderService }]; }, propDecorators: { tabs: [{
                 type: Input
             }], orientation: [{
@@ -15747,10 +15804,10 @@ class StepperOutletComponent {
     }
 }
 StepperOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StepperOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepperOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StepperOutletComponent, selector: "c8y-stepper-outlet", inputs: { steps: "steps", showDefaultButtons: "showDefaultButtons" }, ngImport: i0, template: "<c8y-stepper \n  [customClasses]=\"['p-t-32', 'p-b-32', 'm-l-48', 'm-r-48']\" \n  class=\"d-flex d-col fit-h\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n>\n  <cdk-step\n    *ngFor=\"let step of steps\"\n    [label]=\"step.label\"\n    [state]=\"step.state\"\n    [completed]=\"step.completed\"\n    [optional]=\"!step.required\"\n  >\n    <ng-container *ngComponentOutlet=\"step.component; injector: step.injector\"></ng-container>\n    <c8y-stepper-buttons *ngIf=\"showDefaultButtons\"></c8y-stepper-buttons>\n    <ng-template c8yStepperIcon=\"error\">\n      <span c8yIcon=\"error\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"warning\">\n      <span c8yIcon=\"warning\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"done\">\n      <span c8yIcon=\"check\"></span>\n    </ng-template>\n  </cdk-step>\n</c8y-stepper>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "directive", type: C8yStepperIcon, selector: "ng-template[c8yStepperIcon]", inputs: ["c8yStepperIcon"] }, { kind: "component", type: C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }] });
+StepperOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: StepperOutletComponent, selector: "c8y-stepper-outlet", inputs: { steps: "steps", showDefaultButtons: "showDefaultButtons" }, ngImport: i0, template: "<c8y-stepper\n  [customClasses]=\"['p-t-32', 'p-b-32', 'm-l-48', 'm-r-48']\"\n  class=\"d-flex d-col fit-h\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n>\n  <cdk-step\n    *ngFor=\"let step of steps\"\n    [label]=\"step.label\"\n    [state]=\"step.state\"\n    [completed]=\"step.completed\"\n    [optional]=\"!step.required\"\n  >\n    <ng-container *c8yComponentOutlet=\"step.component; environmentInjector: step.injector\"></ng-container>\n    <c8y-stepper-buttons *ngIf=\"showDefaultButtons\"></c8y-stepper-buttons>\n    <ng-template c8yStepperIcon=\"error\">\n      <span c8yIcon=\"error\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"warning\">\n      <span c8yIcon=\"warning\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"done\">\n      <span c8yIcon=\"check\"></span>\n    </ng-template>\n  </cdk-step>\n</c8y-stepper>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "component", type: i2$3.CdkStep, selector: "cdk-step", inputs: ["stepControl", "label", "errorMessage", "aria-label", "aria-labelledby", "state", "editable", "optional", "completed", "hasError"], outputs: ["interacted"], exportAs: ["cdkStep"] }, { kind: "component", type: C8yStepper, selector: "c8y-stepper", inputs: ["disableDefaultIcons", "disableProgressButtons", "customClasses", "hideStepProgress", "useStepLabelsAsTitlesOnly"], outputs: ["onStepChange"] }, { kind: "directive", type: C8yStepperIcon, selector: "ng-template[c8yStepperIcon]", inputs: ["c8yStepperIcon"] }, { kind: "component", type: C8yStepperButtons, selector: "c8y-stepper-buttons", inputs: ["labels", "pending", "disabled", "showButtons"], outputs: ["onCancel", "onNext", "onBack", "onCustom"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: StepperOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-stepper-outlet', template: "<c8y-stepper \n  [customClasses]=\"['p-t-32', 'p-b-32', 'm-l-48', 'm-r-48']\" \n  class=\"d-flex d-col fit-h\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n>\n  <cdk-step\n    *ngFor=\"let step of steps\"\n    [label]=\"step.label\"\n    [state]=\"step.state\"\n    [completed]=\"step.completed\"\n    [optional]=\"!step.required\"\n  >\n    <ng-container *ngComponentOutlet=\"step.component; injector: step.injector\"></ng-container>\n    <c8y-stepper-buttons *ngIf=\"showDefaultButtons\"></c8y-stepper-buttons>\n    <ng-template c8yStepperIcon=\"error\">\n      <span c8yIcon=\"error\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"warning\">\n      <span c8yIcon=\"warning\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"done\">\n      <span c8yIcon=\"check\"></span>\n    </ng-template>\n  </cdk-step>\n</c8y-stepper>\n" }]
+            args: [{ selector: 'c8y-stepper-outlet', template: "<c8y-stepper\n  [customClasses]=\"['p-t-32', 'p-b-32', 'm-l-48', 'm-r-48']\"\n  class=\"d-flex d-col fit-h\"\n  [disableDefaultIcons]=\"{ edit: true, done: false }\"\n>\n  <cdk-step\n    *ngFor=\"let step of steps\"\n    [label]=\"step.label\"\n    [state]=\"step.state\"\n    [completed]=\"step.completed\"\n    [optional]=\"!step.required\"\n  >\n    <ng-container *c8yComponentOutlet=\"step.component; environmentInjector: step.injector\"></ng-container>\n    <c8y-stepper-buttons *ngIf=\"showDefaultButtons\"></c8y-stepper-buttons>\n    <ng-template c8yStepperIcon=\"error\">\n      <span c8yIcon=\"error\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"warning\">\n      <span c8yIcon=\"warning\"></span>\n    </ng-template>\n    <ng-template c8yStepperIcon=\"done\">\n      <span c8yIcon=\"check\"></span>\n    </ng-template>\n  </cdk-step>\n</c8y-stepper>\n" }]
         }], propDecorators: { steps: [{
                 type: Input
             }], showDefaultButtons: [{
@@ -16591,10 +16648,10 @@ class NavigatorNodeComponent {
     }
 }
 NavigatorNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavigatorNodeComponent, deps: [{ token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component });
-NavigatorNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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 }], ngImport: i0, template: "<ng-container *ngIf=\"node.component\">\n  <ng-container *ngComponentOutlet=\"node.component; injector: 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    style=\"{{ isRoot ? 'padding-left: 16px;' : null }}\"\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$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverConfirmComponent, selector: "c8y-popover-confirm", inputs: ["buttons", "message", "title", "isOpen", "containerClass", "placement", "outsideClick"] }, { kind: "component", type: NavigatorNodeComponent, selector: "c8y-navigator-node", inputs: ["node", "isRoot"], outputs: ["nodeClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
+NavigatorNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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 }], 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    style=\"{{ isRoot ? 'padding-left: 16px;' : null }}\"\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$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.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"] }, { kind: "component", type: NavigatorNodeComponent, selector: "c8y-navigator-node", inputs: ["node", "isRoot"], outputs: ["nodeClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: NavigatorNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-navigator-node', template: "<ng-container *ngIf=\"node.component\">\n  <ng-container *ngComponentOutlet=\"node.component; injector: 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    style=\"{{ isRoot ? 'padding-left: 16px;' : null }}\"\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" }]
+            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    style=\"{{ isRoot ? 'padding-left: 16px;' : null }}\"\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: function () { return [{ type: i1$7.Router }]; }, propDecorators: { iconSlot: [{
                 type: ViewChild,
                 args: ['icon', { read: ViewContainerRef, static: false }]
@@ -22188,10 +22245,10 @@ class HelpAndSupportOutletComponent {
     }
 }
 HelpAndSupportOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: HelpAndSupportOutletComponent, deps: [{ token: DocsService }, { token: AppStateService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component });
-HelpAndSupportOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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 *ngComponentOutlet=\"link.component; injector: 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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$b.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: i1$4.AsyncPipe, name: "async" }] });
+HelpAndSupportOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: i1$b.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: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: HelpAndSupportOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-help-and-support-outlet', 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 *ngComponentOutlet=\"link.component; injector: 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" }]
+            args: [{ selector: 'c8y-help-and-support-outlet', 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" }]
         }], ctorParameters: function () { return [{ type: DocsService }, { type: AppStateService }, { type: HeaderService }]; } });
 
 class SupportOutletComponent {
@@ -22362,10 +22419,10 @@ class LegalNoticesOutletComponent {
     }
 }
 LegalNoticesOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: LegalNoticesOutletComponent, deps: [{ token: DocsService }, { token: HeaderService }], target: i0.ɵɵFactoryTarget.Component });
-LegalNoticesOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: LegalNoticesOutletComponent, selector: "c8y-legal-notices-outlet", ngImport: i0, template: "<div class=\"separator-top p-t-8 m-t-auto\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container\n      *ngComponentOutlet=\"legalNotices.component; injector: legalNotices.injector\"\n    ></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.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: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
+LegalNoticesOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: LegalNoticesOutletComponent, selector: "c8y-legal-notices-outlet", ngImport: i0, template: "<div class=\"separator-top p-t-8 m-t-auto\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container *c8yComponentOutlet=\"legalNotices.component; environmentInjector: legalNotices.injector\"></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.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: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: LegalNoticesOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-legal-notices-outlet', template: "<div class=\"separator-top p-t-8 m-t-auto\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container\n      *ngComponentOutlet=\"legalNotices.component; injector: legalNotices.injector\"\n    ></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.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: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n" }]
+            args: [{ selector: 'c8y-legal-notices-outlet', template: "<div class=\"separator-top p-t-8 m-t-auto\" *ngIf=\"legalNotices$ | async as legalNotices\">\n  <ng-container *ngIf=\"legalNotices.component\">\n    <ng-container *c8yComponentOutlet=\"legalNotices.component; environmentInjector: legalNotices.injector\"></ng-container>\n  </ng-container>\n  <a\n    *ngIf=\"!legalNotices.component\"\n    title=\"{{ legalNotices.label | translate }}\"\n    type=\"button\"\n    class=\"c8y-right-drawer__link\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    [href]=\"legalNotices.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: legalNotices.label\n    }\"\n    [tabindex]=\"(drawerOpen$ | async) ? '0' : '-1'\"\n  >\n    <span title=\"{{ legalNotices.label | translate }}\" class=\"text-truncate text-12\">\n      {{ legalNotices.label | translate }}\n    </span>\n  </a>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: DocsService }, { type: HeaderService }]; } });
 
 class LegalNoticesOutletModule {
@@ -26759,10 +26816,10 @@ class CellRendererComponent {
     }
 }
 CellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CellRendererComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CellRendererComponent, selector: "c8y-cell-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    [ngComponentOutlet]=\"spec.renderer\"\n    [ngComponentOutletInjector]=\"rendererInjector\"\n  ></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!spec.renderer\">\n  <span title=\"{{ spec.context.value | stringifyObject }}\">\n    {{ spec.context.value | stringifyObject }}\n  </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: StringifyObjectPipe, name: "stringifyObject" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: CellRendererComponent, selector: "c8y-cell-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  <span title=\"{{ spec.context.value | stringifyObject }}\">\n    {{ spec.context.value | stringifyObject }}\n  </span>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "pipe", type: StringifyObjectPipe, name: "stringifyObject" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: CellRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-cell-renderer', changeDetection: ChangeDetectionStrategy.OnPush, 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    [ngComponentOutlet]=\"spec.renderer\"\n    [ngComponentOutletInjector]=\"rendererInjector\"\n  ></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!spec.renderer\">\n  <span title=\"{{ spec.context.value | stringifyObject }}\">\n    {{ spec.context.value | stringifyObject }}\n  </span>\n</ng-container>\n" }]
+            args: [{ selector: 'c8y-cell-renderer', changeDetection: ChangeDetectionStrategy.OnPush, 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  <span title=\"{{ spec.context.value | stringifyObject }}\">\n    {{ spec.context.value | stringifyObject }}\n  </span>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _spec: [{
                 type: Input,
                 args: ['spec']
@@ -26819,10 +26876,10 @@ class FilteringFormRendererComponent {
     }
 }
 FilteringFormRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: FilteringFormRendererComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FilteringFormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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    [ngComponentOutlet]=\"spec.renderer\"\n    [ngComponentOutletInjector]=\"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: i1$4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilteringFormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", 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: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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: "15.2.7", ngImport: i0, type: FilteringFormRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-filtering-form-renderer', changeDetection: ChangeDetectionStrategy.OnPush, 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    [ngComponentOutlet]=\"spec.renderer\"\n    [ngComponentOutletInjector]=\"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" }]
+            args: [{ selector: 'c8y-filtering-form-renderer', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _spec: [{
                 type: Input,
                 args: ['spec']
@@ -30967,5 +31024,5 @@ const HOOK_DEVICE_LIST_COLUMNS = new InjectionToken('HOOK_ALL_DEVICES_LIST_COLUM
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, ARRAY_VALIDATION_PREFIX, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, ApplicationModule, ApplicationOptions, ApplicationPluginStatus, AssetTypesModule, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, 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, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GenericFileIconPipe, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DEVICE_LIST_COLUMNS, 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$1 as I18nModule, INTERVALS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LOCALE_PATH, LegacyGridConfigMapperService, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, 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, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, 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, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchModule, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent$1 as SelectComponent, SelectFilterMapper, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, TimePickerComponent, TimePickerModule, TimeSpanInMs, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionDetailsModalComponent, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WebSDKVersionFactory, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookStepper, hookTab, hookVersion, 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, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements };
+export { ACTIONS, AGGREGATIONS, AGGREGATION_ICONS, AGGREGATION_LIMITS, AGGREGATION_TEXTS, ARRAY_VALIDATION_PREFIX, AbstractConfigurationStrategy, ActionBarComponent, ActionBarItemComponent, ActionBarModule, ActionBarService, ActionComponent, ActionModule, ActionOutletComponent, ActionService, AlarmRealtimeService, AlertComponent, AlertDetailsComponent, AlertModule, AlertOutletBase, AlertOutletComponent, AlertService, AlertTextComponent, AppIconComponent, AppStateService, AppSwitcherComponent, AppSwitcherService, ApplicationModule, ApplicationOptions, ApplicationPluginStatus, AssetTypesModule, AssetTypesService, AuditLogComponent, AuditLogModule, AuthenticationModule, BackendVersionFactory, BaseColumn, BaseFilteringFormRendererComponent, BooleanFilterMapper, BootstrapComponent, BootstrapModule, BottomDrawerComponent, BottomDrawerRef, BottomDrawerService, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbOutletComponent, BreadcrumbService, BytesPipe, C8yComponentOutlet, C8yJSONSchema, C8yStepper, C8yStepperButtons, C8yStepperIcon, C8yStepperProgress, C8yTranslateDirective, C8yTranslateModule, C8yTranslatePipe, C8yValidators, CachedLocaleDictionaryService, CellRendererComponent, CellRendererContext, CellRendererDefDirective, ChangePasswordComponent, ClipboardModule, ClipboardService, ColorService, ColumnDirective, CommonModule, ConditionalTabsOutletComponent, ConfigureCustomColumnComponent, ConfirmModalComponent, ContextRouteComponent, ContextRouteGuard, ContextRouteService, CookieBannerComponent, CoreModule, CredentialsComponent, CurrentPasswordModalComponent, CustomColumn, DATA_GRID_CONFIGURATION_CONTEXT, DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER, DATA_GRID_CONFIGURATION_STRATEGY, 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, DynamicComponentComponent, DynamicComponentErrorStrategy, DynamicComponentModule, DynamicComponentService, DynamicDatapointsResolver, DynamicFormsModule, DynamicManagedObjectResolver, DynamicResolverService, ES_MAX_TIME_MILLISECONDS, EmailsValidatorDirective, EmptyComponent, EmptyStateComponent, EventRealtimeService, ExtensionPointForPlugins, ExtensionPointWithoutStateForPlugins, ExtractArrayValidationErrorsPipe, FilePickerComponent, FilePickerFormControlComponent, FilePickerFormControlModule, FilePickerModule, FilesService, FilterInputComponent, FilterMapperFactory, FilterMapperModule, FilterMapperPipe, FilterMapperService, FilterNonArrayValidationErrorsPipe, FilteringActionType, FilteringFormRendererComponent, FilteringFormRendererContext, FilteringFormRendererDefDirective, ForOfDirective, FormGroupComponent, FormsModule, GENERIC_FILE_TYPE, GainsightService, GenericFileIconPipe, GetGroupIconPipe, GlobalConfigService, GridDataSource, GroupFragment, GroupService, GroupedFilterChips, GuideDocsComponent, GuideHrefDirective, HOOK_ACTION, HOOK_ACTION_BAR, HOOK_BREADCRUMB, HOOK_COMPONENTS, HOOK_DEVICE_LIST_COLUMNS, 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$1 as I18nModule, INTERVALS, IconDirective, IfAllowedDirective, InjectionType, InputGroupListComponent, InputGroupListContainerDirective, InventorySearchService, IpRangeInputListComponent, JsonValidationPrettifierDirective, LANGUAGES, LOCALE_PATH, LegacyGridConfigMapperService, ListDisplaySwitchComponent, ListDisplaySwitchModule, ListGroupComponent, ListGroupModule, ListItemActionComponent, ListItemBodyComponent, ListItemCheckboxComponent, ListItemCollapseComponent, ListItemComponent, ListItemDragHandleComponent, ListItemFooterComponent, ListItemIconComponent, ListItemRadioComponent, ListItemTimelineComponent, LoadMoreComponent, LoadingComponent, LoginComponent, LoginModule, LoginService, LoginViews, MAX_PAGE_SIZE, MESSAGES, ManagedObjectRealtimeService, ManagedObjectType, MapFunctionPipe, MarkdownToHtmlPipe, MaxValidationDirective, MeasurementRealtimeService, MessageDirective, MessagesComponent, MinValidationDirective, MissingTranslationCustomHandler, MoNamePipe, ModalComponent, ModalModule, ModalSelectionMode, ModalService, NEEDED_ROLE_FOR_SETUP, NUMBER_FORMAT_REGEXP, 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, PluginsModule, PluginsResolveService, PluginsService, PopoverConfirmComponent, ProductExperienceDirective, ProductExperienceModule, ProgressBarComponent, PropertiesListComponent, PropertiesListModule, 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, RequiredInputPlaceholderDirective, RouterModule, RouterService, RouterTabsResolver, SETUP_FINISHED_STEP_ID, SearchComponent, SearchFilters, SearchInputComponent, SearchModule, SearchOutletComponent, SearchResultEmptyComponent, SearchService, SelectComponent$1 as SelectComponent, SelectFilterMapper, SelectModalComponent, SelectModalFilterPipe, SelectModalModule, SelectModule, SendStatus, SendStatusLabels, SetupCompletedComponent, SetupComponent, SetupModule, SetupService, SetupState, SetupStepperFactory, ShortenUserNamePipe, ShouldShowMoPipe, ShowIfFilterPipe, SimpleJsonPathValidatorDirective, SkipLinkDirective, SmsChallengeComponent, StateService, Status, StepperModule, StepperOutletComponent, StepperService, Steppers, StrengthValidatorService, StringFilterMapper, StringifyObjectPipe, TabComponent, TabsModule, TabsOutletComponent, TabsService, TabsetAriaDirective, TenantUiService, TextAreaRowHeightDirective, TextareaAutoresizeDirective, TimePickerComponent, TimePickerModule, TimeSpanInMs, TitleComponent, TitleOutletComponent, TotpAuthComponent, TotpChallengeComponent, TotpSetupComponent, TranslateCustomLoader, TranslateParserCustom, TranslateService, TypeaheadComponent, TypeaheadFilterMapper, UiSettingsComponent, UiSettingsModule, UniqueInCollectionByPathValidationDirective, UserEditComponent, UserEditModalComponent, UserEngagementsService, UserMenuItemComponent, UserMenuOutletComponent, UserMenuService, UserModule, UserNameInitialsPipe, UserPreferencesConfigurationStrategy, UserPreferencesService, UserPreferencesStorageInventory, UserPreferencesStorageLocal, UserTotpRevokeComponent, UserTotpSetupComponent, VERSION_MODULE_CONFIG, ValidationPattern, VersionDetailsModalComponent, VersionListComponent, VersionModule, VersionService, ViewContext, ViewContextServices, VirtualScrollWindowDirective, VirtualScrollWindowStrategy, VirtualScrollerWrapperComponent, VisibleControlsPipe, WebSDKVersionFactory, WidgetTimeContextActionBarPriority, WidgetTimeContextComponent, WidgetsDashboardComponent, WizardBodyComponent, WizardComponent, WizardFooterComponent, WizardHeaderComponent, WizardModalService, WizardModule, WizardOutletComponent, WizardService, ZipService, _, _virtualScrollWindowStrategyFactory, alertOnError, allEntriesAreEqual, asyncValidateArrayElements, deviceAvailabilityIconMap, extraRoutes, fromFactories, fromTrigger, fromTriggerOnce, getActivatedRoute, getAngularLocalesLanguageString, getBasicInputArrayFormFieldConfig, getInjectedHooks, gettext, hookAction, hookActionBar, hookBreadcrumb, hookComponent, hookDocs, hookDrawer, hookDynamicProviderConfig, hookFilterMapper, hookGeneric, hookNavigator, hookOptions, hookPatternMessages, hookRoute, hookSearch, hookStepper, hookTab, hookVersion, 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, translateLoaderFactory, trimTranslationKey, uniqueInCollectionByPathValidator, validateArrayElements };
 //# sourceMappingURL=c8y-ngx-components.mjs.map