@rxap/layout 12.2.3 → 13.0.0-next.2

package/{fesm2015/rxap-layout.js → fesm2020/rxap-layout.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, NgModule, Injectable, Inject, Optional, Input, TemplateRef, Directive, INJECTOR, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, ViewChild, HostBinding, HostListener, ChangeDetectorRef, ContentChild, EventEmitter, Output, Pipe } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, NgModule, Input, Injectable, Inject, Optional, TemplateRef, Directive, INJECTOR, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, ViewChild, HostBinding, HostListener, ChangeDetectorRef, ContentChild, EventEmitter, Output, Pipe } from '@angular/core';
 import * as i1 from '@rxap/services';
 import { HeaderService, ResetService, FooterService, WindowContainerSidenavService, VersionService } from '@rxap/services';
 import * as i2 from '@angular/common';
@@ -9,45 +9,45 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i4 from '@angular/cdk/portal';
 import { PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { Subscription, BehaviorSubject, ReplaySubject, of, from, combineLatest } from 'rxjs';
-import { filter, map, tap, switchMap, catchError, startWith, delay, skip, distinctUntilChanged } from 'rxjs/operators';
+import { map, filter, tap, switchMap, catchError, startWith, delay, skip, distinctUntilChanged } from 'rxjs/operators';
 import * as i3$5 from '@angular/material/sidenav';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$2 from '@rxap/authentication';
+import * as i6$1 from '@rxap/authentication';
 import { UserService, SignOutDirectiveModule } from '@rxap/authentication';
 import * as i2$1 from '@angular/flex-layout/extended';
 import * as i1$3 from '@angular/flex-layout/flex';
-import * as i1$1 from '@rxap/config';
+import { __decorate, __metadata } from 'tslib';
+import { Required, DebounceCall, coerceBoolean } from '@rxap/utilities';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$2 from '@rxap/config';
 import { ConfigService } from '@rxap/config';
-import * as i3$1 from '@angular/material/form-field';
+import * as i3$2 from '@angular/material/form-field';
 import * as i4$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i6 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
-import * as i1$2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3$2 from '@angular/cdk/overlay';
+import * as i3$3 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
-import * as i3$3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i1$4 from '@angular/router';
-import { Router, NavigationStart, NavigationEnd, NavigationCancel, RouterModule, RouterLinkActive } from '@angular/router';
-import * as i2$3 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { __decorate, __metadata } from 'tslib';
-import { Required, DebounceCall, coerceBoolean } from '@rxap/utilities';
 import { isDefined } from '@rxap/utilities/rxjs';
-import * as i2$4 from '@angular/material/menu';
+import * as i2$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i3$4 from '@rxap/directives';
 import { AvatarBackgroundImageDirectiveModule, StopPropagationDirectiveModule } from '@rxap/directives';
+import * as i1$4 from '@angular/router';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, RouterModule, RouterLinkActive } from '@angular/router';
+import * as i2$3 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i2$5 from '@angular/material/divider';
+import * as i2$4 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i6$1 from '@rxap/material-directives/icon';
+import * as i6$2 from '@rxap/material-directives/icon';
 import { IconDirectiveModule } from '@rxap/material-directives/icon';
 import { ButtonComponentModule } from '@rxap/components';
 import * as i3$6 from '@angular/material/tooltip';
@@ -99,12 +99,7 @@ FooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterCompo
     } }, directives: [i2.NgIf, i3.MatToolbar, i2.NgForOf, i3.MatToolbarRow, i4.CdkPortalOutlet], pipes: [i2.AsyncPipe], styles: [""], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-footer',
-                templateUrl: './footer.component.html',
-                styleUrls: ['./footer.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush
-            }]
+        args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngIf]=\"footerService.portals$ | async\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n", styles: [""] }]
     }], function () { return [{ type: i1.FooterService }]; }, null); })();
 
 class FooterModule {
@@ -132,6 +127,42 @@ FooterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
         CommonModule,
         PortalModule], exports: [FooterComponent] }); })();
 
+function SidenavToggleButtonComponent_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "menu");
+    i0.ɵɵelementEnd();
+} }
+function SidenavToggleButtonComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "menu_open");
+    i0.ɵɵelementEnd();
+} }
+class SidenavToggleButtonComponent {
+}
+SidenavToggleButtonComponent.ɵfac = function SidenavToggleButtonComponent_Factory(t) { return new (t || SidenavToggleButtonComponent)(); };
+SidenavToggleButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavToggleButtonComponent, selectors: [["rxap-sidenav-toggle-button"]], hostAttrs: [1, "rxap-sidenav-toggle-button"], inputs: { sidenav: "sidenav" }, decls: 3, vars: 2, consts: [["mat-icon-button", "", 3, "click"], [4, "ngIf"]], template: function SidenavToggleButtonComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "button", 0);
+        i0.ɵɵlistener("click", function SidenavToggleButtonComponent_Template_button_click_0_listener() { return ctx.sidenav.toggle(); });
+        i0.ɵɵtemplate(1, SidenavToggleButtonComponent_mat_icon_1_Template, 2, 0, "mat-icon", 1);
+        i0.ɵɵtemplate(2, SidenavToggleButtonComponent_mat_icon_2_Template, 2, 0, "mat-icon", 1);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx.sidenav.opened);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.sidenav.opened);
+    } }, directives: [i1$1.MatButton, i2.NgIf, i3$1.MatIcon], styles: [""], changeDetection: 0 });
+__decorate([
+    Required,
+    __metadata("design:type", MatSidenav)
+], SidenavToggleButtonComponent.prototype, "sidenav", void 0);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'rxap-sidenav-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-sidenav-toggle-button' }, template: "<button (click)=\"sidenav.toggle()\" mat-icon-button>\n  <mat-icon *ngIf=\"!sidenav.opened\">menu</mat-icon>\n  <mat-icon *ngIf=\"sidenav.opened\">menu_open</mat-icon>\n</button>\n", styles: [""] }]
+    }], null, { sidenav: [{
+            type: Input
+        }] }); })();
+
 function LanguageSelectorComponent_ng_template_0_mat_option_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 4);
     i0.ɵɵtext(1);
@@ -144,15 +175,11 @@ function LanguageSelectorComponent_ng_template_0_mat_option_3_Template(rf, ctx)
 } }
 function LanguageSelectorComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelementStart(1, "mat-form-field", 1);
-    i0.ɵɵelementStart(2, "mat-select", 2);
+    i0.ɵɵelementStart(0, "div")(1, "mat-form-field", 1)(2, "mat-select", 2);
     i0.ɵɵlistener("ngModelChange", function LanguageSelectorComponent_ng_template_0_Template_mat_select_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return ctx_r3.language.setLanguage($event); });
     i0.ɵɵtemplate(3, LanguageSelectorComponent_ng_template_0_mat_option_3_Template, 2, 2, "mat-option", 3);
     i0.ɵɵpipe(4, "keyvalue");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
@@ -164,13 +191,15 @@ const RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY = 'rxap__selected_language';
 const RXAP_SELECTED_LANGUAGE_CHANGE_LOCAL_STORAGE_KEY = 'rxap__selected_language_last_change';
 class LanguageSelectorService {
     constructor(config) {
-        var _a, _b, _c, _d;
         this.config = config;
-        this.languages = (_a = this.config.get('i18n.languages')) !== null && _a !== void 0 ? _a : {};
+        this.languages = this.config.get('i18n.languages') ?? {};
         this.defaultLanguage =
-            (_c = (_b = this.config.get('i18n.defaultLanguage')) !== null && _b !== void 0 ? _b : Object.keys(this.languages)[0]) !== null && _c !== void 0 ? _c : 'en';
+            this.config.get('i18n.defaultLanguage') ??
+                Object.keys(this.languages)[0] ??
+                'en';
         this.selectedLanguage =
-            (_d = localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY)) !== null && _d !== void 0 ? _d : this.defaultLanguage;
+            localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY) ??
+                this.defaultLanguage;
     }
     setLanguage(language) {
         if (language !== this.selectedLanguage) {
@@ -215,7 +244,7 @@ LanguageSelectorService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token:
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorService, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1$1.ConfigService, decorators: [{
+    }], function () { return [{ type: i1$2.ConfigService, decorators: [{
                 type: Inject,
                 args: [ConfigService]
             }] }]; }, null); })();
@@ -230,27 +259,18 @@ LanguageSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: L
         i0.ɵɵpipe(1, "keyvalue");
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.language.languages).length);
-    } }, directives: [i2.NgIf, i3$1.MatFormField, i4$1.MatSelect, i5.NgControlStatus, i5.NgModel, i2.NgForOf, i6.MatOption], pipes: [i2.KeyValuePipe], styles: [".language-selector[_ngcontent-%COMP%]{width:142px}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper{padding-bottom:0}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}"], changeDetection: 0 });
+    } }, directives: [i2.NgIf, i3$2.MatFormField, i4$1.MatSelect, i5.NgControlStatus, i5.NgModel, i2.NgForOf, i6.MatOption], pipes: [i2.KeyValuePipe], styles: [".language-selector[_ngcontent-%COMP%]{width:142px}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper{padding-bottom:0}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-language-selector',
-                templateUrl: './language-selector.component.html',
-                styleUrls: ['./language-selector.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: { class: 'rxap-language-selector' },
-            }]
+        args: [{ selector: 'rxap-language-selector', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-language-selector' }, template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\">\n      <mat-select (ngModelChange)=\"language.setLanguage($event)\" [ngModel]=\"language.selectedLanguage\">\n        <mat-option *ngFor=\"let item of language.languages | keyvalue\" [value]=\"item.key\">{{item.value}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".language-selector{width:142px}.language-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}\n"] }]
     }], function () { return [{ type: LanguageSelectorService }]; }, null); })();
 
 function AppsButtonComponent_ng_template_0_ng_template_4_li_2_a_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 9);
-    i0.ɵɵelementStart(1, "span", 10);
+    i0.ɵɵelementStart(0, "a", 9)(1, "span", 10);
     i0.ɵɵelement(2, "img", 11);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("href", item_r4.href, i0.ɵɵsanitizeUrl);
@@ -272,11 +292,9 @@ function AppsButtonComponent_ng_template_0_ng_template_4_li_2_Template(rf, ctx)
 } }
 const _c1$4 = function (a0) { return { columns: a0 }; };
 function AppsButtonComponent_ng_template_0_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelementStart(1, "ul", 5);
+    i0.ɵɵelementStart(0, "div", 4)(1, "ul", 5);
     i0.ɵɵtemplate(2, AppsButtonComponent_ng_template_0_ng_template_4_li_2_Template, 2, 4, "li", 6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
@@ -290,8 +308,7 @@ function AppsButtonComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function AppsButtonComponent_ng_template_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.isOpen = !ctx_r7.isOpen; });
     i0.ɵɵelementStart(2, "mat-icon");
     i0.ɵɵtext(3, "apps");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
     i0.ɵɵtemplate(4, AppsButtonComponent_ng_template_0_ng_template_4_Template, 3, 4, "ng-template", 3);
     i0.ɵɵlistener("overlayOutsideClick", function AppsButtonComponent_ng_template_0_Template_ng_template_overlayOutsideClick_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return ctx_r9.isOpen = false; });
 } if (rf & 2) {
@@ -302,11 +319,10 @@ function AppsButtonComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
 } }
 class AppsButtonComponent {
     constructor(grid, config) {
-        var _a;
         this.config = config;
         this.isOpen = false;
         this.grid = [];
-        this.grid = (_a = grid !== null && grid !== void 0 ? grid : this.config.get('navigation.apps')) !== null && _a !== void 0 ? _a : [];
+        this.grid = grid ?? this.config.get('navigation.apps') ?? [];
     }
     get gridWithPadding() {
         const gridWithPadding = this.grid.slice();
@@ -330,182 +346,63 @@ AppsButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppsBut
         i0.ɵɵtemplate(0, AppsButtonComponent_ng_template_0_Template, 5, 2, "ng-template", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.grid && ctx.grid.length);
-    } }, directives: [i2.NgIf, i1$2.MatButton, i3$2.CdkOverlayOrigin, i3$3.MatIcon, i3$2.CdkConnectedOverlay, i2$1.DefaultStyleDirective, i2.NgStyle, i2.NgForOf, i2$1.DefaultClassDirective, i2.NgClass, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultLayoutGapDirective], styles: [".grid-container[_ngcontent-%COMP%]{padding:8px;border:1px solid rgba(0,0,0,.2);border-radius:8px;box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15)}.grid[_ngcontent-%COMP%]{list-style-type:none;margin:0;padding:0}.grid[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{border-radius:8px;padding:6px;height:84px;width:84px;transition-delay:0s;transition-duration:.2s;transition-property:tramsform;transition-timing-function:cubic-bezier(.333,0,0,1);position:relative}.grid[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{position:absolute;top:6px;right:6px;left:6px;bottom:6px;text-align:center;text-decoration:none;color:#000}"], changeDetection: 0 });
+    } }, directives: [i2.NgIf, i1$1.MatButton, i3$3.CdkOverlayOrigin, i3$1.MatIcon, i3$3.CdkConnectedOverlay, i2$1.DefaultStyleDirective, i2.NgStyle, i2.NgForOf, i2$1.DefaultClassDirective, i2.NgClass, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultLayoutGapDirective], styles: [".grid-container[_ngcontent-%COMP%]{padding:8px;border:1px solid rgba(0,0,0,.2);border-radius:8px;box-shadow:0 1px 2px #3c40434d,0 2px 6px 2px #3c404326}.grid[_ngcontent-%COMP%]{list-style-type:none;margin:0;padding:0}.grid[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{border-radius:8px;padding:6px;height:84px;width:84px;transition-delay:0s;transition-duration:.2s;transition-property:tramsform;transition-timing-function:cubic-bezier(.333,0,0,1);position:relative}.grid[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{position:absolute;top:6px;right:6px;left:6px;bottom:6px;text-align:center;text-decoration:none;color:#000}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppsButtonComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-apps-button',
-                templateUrl: './apps-button.component.html',
-                styleUrls: ['./apps-button.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: { class: 'rxap-apps-button' },
-            }]
+        args: [{ selector: 'rxap-apps-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-apps-button' }, template: "<ng-template [ngIf]=\"grid && grid.length\">\n  <button #trigger=\"cdkOverlayOrigin\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin mat-icon-button>\n    <mat-icon>apps</mat-icon>\n  </button>\n\n  <ng-template (overlayOutsideClick)=\"isOpen = false\"\n               [cdkConnectedOverlayOpen]=\"isOpen\"\n               [cdkConnectedOverlayOrigin]=\"trigger\"\n               cdkConnectedOverlay>\n\n    <div class=\"grid-container\">\n\n      <ul [ngStyle]=\"{ columns: columns }\" class=\"grid\">\n        <li *ngFor=\"let item of gridWithPadding\" [ngClass]=\"{ empty: item.empty }\">\n          <a *ngIf=\"!item.empty\" [href]=\"item.href\">\n\n        <span fxLayout=\"column\" fxLayoutAlign=\"start center\" fxLayoutGap=\"12px\">\n          <img [src]=\"item.image\" width=\"53px\">\n          <span>{{item.label}}</span>\n        </span>\n\n          </a>\n        </li>\n      </ul>\n\n    </div>\n\n  </ng-template>\n</ng-template>\n", styles: [".grid-container{padding:8px;border:1px solid rgba(0,0,0,.2);border-radius:8px;box-shadow:0 1px 2px #3c40434d,0 2px 6px 2px #3c404326}.grid{list-style-type:none;margin:0;padding:0}.grid li{border-radius:8px;padding:6px;height:84px;width:84px;transition-delay:0s;transition-duration:.2s;transition-property:tramsform;transition-timing-function:cubic-bezier(.333,0,0,1);position:relative}.grid li a{position:absolute;top:6px;right:6px;left:6px;bottom:6px;text-align:center;text-decoration:none;color:#000}\n"] }]
     }], function () { return [{ type: undefined, decorators: [{
                 type: Optional
             }, {
                 type: Inject,
                 args: [RXAP_LAYOUT_APPS_GRID]
-            }] }, { type: i1$1.ConfigService, decorators: [{
+            }] }, { type: i1$2.ConfigService, decorators: [{
                 type: Inject,
                 args: [ConfigService]
             }] }]; }, null); })();
 
-class SignOutComponent {
-    constructor(router) {
-        this.router = router;
-    }
-    redirectToRoot() {
-        this.router.navigate(['/']);
-    }
-}
-SignOutComponent.ɵfac = function SignOutComponent_Factory(t) { return new (t || SignOutComponent)(i0.ɵɵdirectiveInject(Router)); };
-SignOutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SignOutComponent, selectors: [["rxap-sign-out"]], hostAttrs: [1, "rxap-sign-out"], decls: 3, vars: 0, consts: [["rxapSignOut", "", "mat-icon-button", "", 3, "successful"]], template: function SignOutComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "button", 0);
-        i0.ɵɵlistener("successful", function SignOutComponent_Template_button_successful_0_listener() { return ctx.redirectToRoot(); });
-        i0.ɵɵelementStart(1, "mat-icon");
-        i0.ɵɵtext(2, "login");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    } }, directives: [i1$2.MatButton, i2$2.SignOutDirective, i3$3.MatIcon], styles: [""], changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SignOutComponent, [{
-        type: Component,
-        args: [{
-                selector: 'rxap-sign-out',
-                templateUrl: './sign-out.component.html',
-                styleUrls: ['./sign-out.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: { class: 'rxap-sign-out' }
-            }]
-    }], function () { return [{ type: i1$4.Router, decorators: [{
-                type: Inject,
-                args: [Router]
-            }] }]; }, null); })();
-
-function NavigationProgressBarComponent_mat_progress_bar_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-progress-bar", 1);
-} }
-class NavigationProgressBarComponent {
-    constructor(router) {
-        this.router = router;
-        this.navigating$ = this.router.events.pipe(filter(event => event instanceof NavigationStart ||
-            event instanceof NavigationEnd ||
-            event instanceof NavigationCancel), map(event => event instanceof NavigationStart));
-    }
-}
-NavigationProgressBarComponent.ɵfac = function NavigationProgressBarComponent_Factory(t) { return new (t || NavigationProgressBarComponent)(i0.ɵɵdirectiveInject(Router)); };
-NavigationProgressBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationProgressBarComponent, selectors: [["rxap-navigation-progress-bar"]], hostAttrs: [1, "rxap-navigation-progress-bar"], decls: 2, vars: 3, consts: [["mode", "indeterminate", "color", "accent", 4, "ngIf"], ["mode", "indeterminate", "color", "accent"]], template: function NavigationProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, NavigationProgressBarComponent_mat_progress_bar_0_Template, 1, 0, "mat-progress-bar", 0);
-        i0.ɵɵpipe(1, "async");
-    } if (rf & 2) {
-        i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.navigating$));
-    } }, directives: [i2.NgIf, i2$3.MatProgressBar], pipes: [i2.AsyncPipe], styles: [""], changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationProgressBarComponent, [{
-        type: Component,
-        args: [{
-                selector: 'rxap-navigation-progress-bar',
-                templateUrl: './navigation-progress-bar.component.html',
-                styleUrls: ['./navigation-progress-bar.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: { class: 'rxap-navigation-progress-bar' }
-            }]
-    }], function () { return [{ type: i1$4.Router, decorators: [{
-                type: Inject,
-                args: [Router]
-            }] }]; }, null); })();
-
-function SidenavToggleButtonComponent_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "menu");
-    i0.ɵɵelementEnd();
-} }
-function SidenavToggleButtonComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "menu_open");
-    i0.ɵɵelementEnd();
-} }
-class SidenavToggleButtonComponent {
-}
-SidenavToggleButtonComponent.ɵfac = function SidenavToggleButtonComponent_Factory(t) { return new (t || SidenavToggleButtonComponent)(); };
-SidenavToggleButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavToggleButtonComponent, selectors: [["rxap-sidenav-toggle-button"]], hostAttrs: [1, "rxap-sidenav-toggle-button"], inputs: { sidenav: "sidenav" }, decls: 3, vars: 2, consts: [["mat-icon-button", "", 3, "click"], [4, "ngIf"]], template: function SidenavToggleButtonComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "button", 0);
-        i0.ɵɵlistener("click", function SidenavToggleButtonComponent_Template_button_click_0_listener() { return ctx.sidenav.toggle(); });
-        i0.ɵɵtemplate(1, SidenavToggleButtonComponent_mat_icon_1_Template, 2, 0, "mat-icon", 1);
-        i0.ɵɵtemplate(2, SidenavToggleButtonComponent_mat_icon_2_Template, 2, 0, "mat-icon", 1);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx.sidenav.opened);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.sidenav.opened);
-    } }, directives: [i1$2.MatButton, i2.NgIf, i3$3.MatIcon], styles: [""], changeDetection: 0 });
-__decorate([
-    Required,
-    __metadata("design:type", MatSidenav)
-], SidenavToggleButtonComponent.prototype, "sidenav", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponent, [{
-        type: Component,
-        args: [{
-                selector: 'rxap-sidenav-toggle-button',
-                templateUrl: './sidenav-toggle-button.component.html',
-                styleUrls: ['./sidenav-toggle-button.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: { class: 'rxap-sidenav-toggle-button' }
-            }]
-    }], null, { sidenav: [{
-            type: Input
-        }] }); })();
-
 function UserProfileIconComponent_ng_template_5_button_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 5);
-    i0.ɵɵelementStart(1, "mat-icon");
+    i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
     i0.ɵɵtext(2, "person");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const user_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", user_r2.firstname, " ", user_r2.lastname, "");
 } }
 function UserProfileIconComponent_ng_template_5_button_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 5);
-    i0.ɵɵelementStart(1, "mat-icon");
+    i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
     i0.ɵɵtext(2, "person");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const user_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(user_r2.name);
 } }
 function UserProfileIconComponent_ng_template_5_button_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 5);
-    i0.ɵɵelementStart(1, "mat-icon");
+    i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
     i0.ɵɵtext(2, "account_circle");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const user_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(user_r2.username);
 } }
 function UserProfileIconComponent_ng_template_5_button_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 5);
-    i0.ɵɵelementStart(1, "mat-icon");
+    i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
     i0.ɵɵtext(2, "email");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const user_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
@@ -529,13 +426,12 @@ function UserProfileIconComponent_ng_template_5_Template(rf, ctx) { if (rf & 1)
 class UserProfileIconComponent {
     constructor(userService) {
         this.userService = userService;
-        this.userProfileUrl$ = this.userService.user$.pipe(isDefined(), map((user) => { var _a; return (_a = user.photoURL) !== null && _a !== void 0 ? _a : user.avatarUrl; }));
-        this.userName$ = this.userService.user$.pipe(isDefined(), map((user) => {
-            var _a, _b;
-            return (_b = (_a = user.name) !== null && _a !== void 0 ? _a : (user.firstname || user.lastname
+        this.userProfileUrl$ = this.userService.user$.pipe(isDefined(), map((user) => user.photoURL ?? user.avatarUrl));
+        this.userName$ = this.userService.user$.pipe(isDefined(), map((user) => user.name ??
+            (user.firstname || user.lastname
                 ? [user.firstname, user.lastname].join(' ').trim()
-                : null)) !== null && _b !== void 0 ? _b : user.username;
-        }));
+                : null) ??
+            user.username));
     }
 }
 UserProfileIconComponent.ɵfac = function UserProfileIconComponent_Factory(t) { return new (t || UserProfileIconComponent)(i0.ɵɵdirectiveInject(UserService)); };
@@ -555,21 +451,65 @@ UserProfileIconComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Us
         i0.ɵɵproperty("yPosition", "below");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 9, ctx.userService.user$));
-    } }, directives: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i2$4.MatMenuTrigger, i3$4.AvatarBackgroundImageDirective, i2$4.MatMenu, i2.NgIf, i2$4.MatMenuItem, i3$3.MatIcon], pipes: [i2.AsyncPipe], styles: [".profile-icon[_ngcontent-%COMP%]{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:50%;background-repeat:no-repeat;background-size:cover}.profile-icon[_ngcontent-%COMP%]:hover{cursor:pointer}.profile-icon[_ngcontent-%COMP%]:focus{outline:none}"], changeDetection: 0 });
+    } }, directives: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i2$2.MatMenuTrigger, i3$4.AvatarBackgroundImageDirective, i2$2.MatMenu, i2.NgIf, i2$2.MatMenuItem, i3$1.MatIcon], pipes: [i2.AsyncPipe], styles: [".profile-icon[_ngcontent-%COMP%]{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon[_ngcontent-%COMP%]:hover{cursor:pointer}.profile-icon[_ngcontent-%COMP%]:focus{outline:none}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserProfileIconComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-user-profile-icon',
-                templateUrl: './user-profile-icon.component.html',
-                styleUrls: ['./user-profile-icon.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: { class: 'rxap-user-profile-icon' },
-            }]
-    }], function () { return [{ type: i2$2.UserService, decorators: [{
+        args: [{ selector: 'rxap-user-profile-icon', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-user-profile-icon' }, template: "<button [matMenuTriggerFor]=\"menu\"\n        [rxapAvatarBackgroundImage]=\"userProfileUrl$ | async\"\n        [name]=\"(userName$ | async) ?? ''\"\n        class=\"profile-icon\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"center center\">\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\">\n  <ng-template [ngIf]=\"userService.user$ | async\" let-user>\n    <button *ngIf=\"user.firstname && user.lastname\" mat-menu-item>\n      <mat-icon>person</mat-icon>\n      <span>{{user.firstname}} {{user.lastname}}</span>\n    </button>\n    <button *ngIf=\"user.name\" mat-menu-item>\n      <mat-icon>person</mat-icon>\n      <span>{{user.name}}</span>\n    </button>\n    <button *ngIf=\"user.username\" mat-menu-item>\n      <mat-icon>account_circle</mat-icon>\n      <span>{{user.username}}</span>\n    </button>\n    <button *ngIf=\"user.email\" mat-menu-item>\n      <mat-icon>email</mat-icon>\n      <span>{{user.email}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"] }]
+    }], function () { return [{ type: i6$1.UserService, decorators: [{
                 type: Inject,
                 args: [UserService]
             }] }]; }, null); })();
 
+class SignOutComponent {
+    constructor(router) {
+        this.router = router;
+    }
+    redirectToRoot() {
+        this.router.navigate(['/']);
+    }
+}
+SignOutComponent.ɵfac = function SignOutComponent_Factory(t) { return new (t || SignOutComponent)(i0.ɵɵdirectiveInject(Router)); };
+SignOutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SignOutComponent, selectors: [["rxap-sign-out"]], hostAttrs: [1, "rxap-sign-out"], decls: 3, vars: 0, consts: [["rxapSignOut", "", "mat-icon-button", "", 3, "successful"]], template: function SignOutComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "button", 0);
+        i0.ɵɵlistener("successful", function SignOutComponent_Template_button_successful_0_listener() { return ctx.redirectToRoot(); });
+        i0.ɵɵelementStart(1, "mat-icon");
+        i0.ɵɵtext(2, "login");
+        i0.ɵɵelementEnd()();
+    } }, directives: [i1$1.MatButton, i6$1.SignOutDirective, i3$1.MatIcon], styles: [""], changeDetection: 0 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SignOutComponent, [{
+        type: Component,
+        args: [{ selector: 'rxap-sign-out', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-sign-out' }, template: "<button\n  rxapSignOut\n  (successful)=\"redirectToRoot()\"\n  mat-icon-button\n>\n  <mat-icon>login</mat-icon>\n</button>\n", styles: [""] }]
+    }], function () { return [{ type: i1$4.Router, decorators: [{
+                type: Inject,
+                args: [Router]
+            }] }]; }, null); })();
+
+function NavigationProgressBarComponent_mat_progress_bar_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mat-progress-bar", 1);
+} }
+class NavigationProgressBarComponent {
+    constructor(router) {
+        this.router = router;
+        this.navigating$ = this.router.events.pipe(filter(event => event instanceof NavigationStart ||
+            event instanceof NavigationEnd ||
+            event instanceof NavigationCancel), map(event => event instanceof NavigationStart));
+    }
+}
+NavigationProgressBarComponent.ɵfac = function NavigationProgressBarComponent_Factory(t) { return new (t || NavigationProgressBarComponent)(i0.ɵɵdirectiveInject(Router)); };
+NavigationProgressBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationProgressBarComponent, selectors: [["rxap-navigation-progress-bar"]], hostAttrs: [1, "rxap-navigation-progress-bar"], decls: 2, vars: 3, consts: [["mode", "indeterminate", "color", "accent", 4, "ngIf"], ["mode", "indeterminate", "color", "accent"]], template: function NavigationProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, NavigationProgressBarComponent_mat_progress_bar_0_Template, 1, 0, "mat-progress-bar", 0);
+        i0.ɵɵpipe(1, "async");
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.navigating$));
+    } }, directives: [i2.NgIf, i2$3.MatProgressBar], pipes: [i2.AsyncPipe], styles: [""], changeDetection: 0 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationProgressBarComponent, [{
+        type: Component,
+        args: [{ selector: 'rxap-navigation-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-navigation-progress-bar' }, template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  mode=\"indeterminate\"\n  color=\"accent\"\n></mat-progress-bar>\n", styles: [""] }]
+    }], function () { return [{ type: i1$4.Router, decorators: [{
+                type: Inject,
+                args: [Router]
+            }] }]; }, null); })();
+
 function HeaderComponent_mat_toolbar_row_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -592,13 +532,9 @@ function HeaderComponent_rxap_user_profile_icon_9_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelement(0, "rxap-user-profile-icon", 5);
 } }
 function HeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵelementStart(1, "button", 9);
-    i0.ɵɵelementStart(2, "mat-icon");
+    i0.ɵɵelementStart(0, "div", 5)(1, "button", 9)(2, "mat-icon");
     i0.ɵɵtext(3, "settings");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
@@ -634,21 +570,17 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "mat-toolbar", 0);
         i0.ɵɵtemplate(1, HeaderComponent_mat_toolbar_row_1_Template, 2, 1, "mat-toolbar-row", 1);
-        i0.ɵɵelementStart(2, "mat-toolbar-row");
-        i0.ɵɵelementStart(3, "div", 2);
+        i0.ɵɵelementStart(2, "mat-toolbar-row")(3, "div", 2);
         i0.ɵɵtemplate(4, HeaderComponent_rxap_sidenav_toggle_button_4_Template, 1, 1, "rxap-sidenav-toggle-button", 3);
         i0.ɵɵelementStart(5, "div", 4);
         i0.ɵɵprojection(6);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(7, "rxap-language-selector", 5);
-        i0.ɵɵelement(8, "rxap-apps-button", 5);
+        i0.ɵɵelement(7, "rxap-language-selector", 5)(8, "rxap-apps-button", 5);
         i0.ɵɵtemplate(9, HeaderComponent_rxap_user_profile_icon_9_Template, 1, 0, "rxap-user-profile-icon", 6);
         i0.ɵɵpipe(10, "async");
         i0.ɵɵtemplate(11, HeaderComponent_div_11_Template, 4, 1, "div", 6);
         i0.ɵɵelement(12, "rxap-sign-out", 5);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd()()();
         i0.ɵɵelement(13, "rxap-navigation-progress-bar");
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$4, ctx.sidenav == null ? null : ctx.sidenav.opened))("color", ctx.color);
@@ -660,22 +592,16 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(10, 6, ctx.hasUser$));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.settingsMenuPanel);
-    } }, directives: [i3.MatToolbar, i2$1.DefaultClassDirective, i2.NgClass, i2.NgForOf, i3.MatToolbarRow, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultLayoutGapDirective, i2.NgIf, i1$3.DefaultFlexDirective, LanguageSelectorComponent, AppsButtonComponent, SignOutComponent, NavigationProgressBarComponent, i2.NgComponentOutlet, SidenavToggleButtonComponent, UserProfileIconComponent, i1$2.MatButton, i2$4.MatMenuTrigger, i3$3.MatIcon], pipes: [i2.AsyncPipe], styles: [".content[_ngcontent-%COMP%]{width:100%;height:64px}"], changeDetection: 0 });
+    } }, directives: [i3.MatToolbar, i2$1.DefaultClassDirective, i2.NgClass, i2.NgForOf, i3.MatToolbarRow, i2.NgComponentOutlet, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultLayoutGapDirective, i2.NgIf, SidenavToggleButtonComponent, i1$3.DefaultFlexDirective, LanguageSelectorComponent, AppsButtonComponent, UserProfileIconComponent, i1$1.MatButton, i2$2.MatMenuTrigger, i3$1.MatIcon, SignOutComponent, NavigationProgressBarComponent], pipes: [i2.AsyncPipe], styles: [".content[_ngcontent-%COMP%]{width:100%;height:64px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-header',
-                templateUrl: './header.component.html',
-                styleUrls: ['./header.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: {
+        args: [{ selector: 'rxap-header', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                     class: 'rxap-layout-header',
-                },
-            }]
+                }, template: "<mat-toolbar [ngClass]=\"{ open: sidenav?.opened }\" [color]=\"color\" class=\"mat-elevation-z3\">\n  <mat-toolbar-row *ngFor=\"let headerComponent of components\">\n    <ng-container *ngComponentOutlet=\"headerComponent\"></ng-container>\n  </mat-toolbar-row>\n  <mat-toolbar-row>\n    <div\n      fxLayout=\"row\"\n      fxLayoutAlign=\"space-between center\"\n      fxLayoutGap=\"16px\"\n      class=\"content\"\n    >\n      <rxap-sidenav-toggle-button *ngIf=\"sidenav\" fxFlex=\"nogrow\" [sidenav]=\"sidenav\"></rxap-sidenav-toggle-button>\n      <div fxFlex=\"grow\">\n        <ng-content></ng-content>\n      </div>\n      <rxap-language-selector fxFlex=\"nogrow\"></rxap-language-selector>\n      <rxap-apps-button fxFlex=\"nogrow\"></rxap-apps-button>\n      <rxap-user-profile-icon *ngIf=\"hasUser$ | async\" fxFlex=\"nogrow\"></rxap-user-profile-icon>\n      <div fxFlex=\"nogrow\" *ngIf=\"settingsMenuPanel\">\n        <button mat-icon-button [matMenuTriggerFor]=\"settingsMenuPanel\">\n          <mat-icon>settings</mat-icon>\n        </button>\n      </div>\n      <rxap-sign-out fxFlex=\"nogrow\"></rxap-sign-out>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n", styles: [".content{width:100%;height:64px}\n"] }]
     }], function () { return [{ type: i1.HeaderService, decorators: [{
                 type: Inject,
                 args: [HeaderService]
-            }] }, { type: i2$2.UserService, decorators: [{
+            }] }, { type: i6$1.UserService, decorators: [{
                 type: Inject,
                 args: [UserService]
             }] }, { type: undefined, decorators: [{
@@ -805,18 +731,11 @@ ResetButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResetB
         i0.ɵɵlistener("click", function ResetButtonComponent_Template_button_click_0_listener() { return ctx.resetService.resetAll(); });
         i0.ɵɵelementStart(1, "mat-icon");
         i0.ɵɵtext(2, "refresh");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    } }, directives: [i1$2.MatButton, i3$3.MatIcon], styles: [""], changeDetection: 0 });
+        i0.ɵɵelementEnd()();
+    } }, directives: [i1$1.MatButton, i3$1.MatIcon], styles: [""], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResetButtonComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-reset-button',
-                templateUrl: './reset-button.component.html',
-                styleUrls: ['./reset-button.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: { class: 'rxap-reset-button' },
-            }]
+        args: [{ selector: 'rxap-reset-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-reset-button' }, template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon>refresh</mat-icon>\n</button>\n", styles: [""] }]
     }], function () { return [{ type: i1.ResetService, decorators: [{
                 type: Inject,
                 args: [ResetService]
@@ -974,7 +893,7 @@ class LayoutComponentService {
         this.fixedBottomGap$ = this.footerComponentService.portalCount$.pipe(map(count => count * 64));
         this.fixedTopGap$.next(this.headerComponentService.countComponent * 64);
         this.headerComponentService.update$.pipe(tap(() => this.fixedTopGap$.next(this.headerComponentService.countComponent * 64))).subscribe();
-        this.logo = logoConfig !== null && logoConfig !== void 0 ? logoConfig : {
+        this.logo = logoConfig ?? {
             src: '/assets/logo.png',
             width: '192'
         };
@@ -990,7 +909,7 @@ LayoutComponentService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: L
             }, {
                 type: Inject,
                 args: [RXAP_LOGO_CONFIG]
-            }] }, { type: i1$1.ConfigService, decorators: [{
+            }] }, { type: i1$2.ConfigService, decorators: [{
                 type: Inject,
                 args: [ConfigService]
             }] }]; }, null); })();
@@ -1039,12 +958,12 @@ class SidenavComponentService {
         this.collapsed$.next(!this.collapsed$.value);
     }
 }
-SidenavComponentService.ɵfac = function SidenavComponentService_Factory(t) { return new (t || SidenavComponentService)(i0.ɵɵinject(i1$1.ConfigService)); };
+SidenavComponentService.ɵfac = function SidenavComponentService_Factory(t) { return new (t || SidenavComponentService)(i0.ɵɵinject(i1$2.ConfigService)); };
 SidenavComponentService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SidenavComponentService, factory: SidenavComponentService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavComponentService, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1$1.ConfigService }]; }, null); })();
+    }], function () { return [{ type: i1$2.ConfigService }]; }, null); })();
 
 function IsNavigationDividerItem(item) {
     return item && item.hasOwnProperty('divider') && item.divider;
@@ -1127,10 +1046,12 @@ class NavigationService {
         })));
         // TODO : dont wait for all status services to complete, but cancel waiting if one returns false
         return combineLatest(isVisibleArray$).pipe(map((isVisibleArray) => isVisibleArray.reduce((acc, isVisible) => acc && isVisible, true)), map((isVisible) => (isVisible ? navigationItem : null)), switchMap((navigationItemOrNull) => {
-            var _a;
             if (navigationItemOrNull) {
-                if ((_a = navigationItemOrNull.children) === null || _a === void 0 ? void 0 : _a.length) {
-                    return this.checkNavigationStatusProviders(navigationItemOrNull.children).pipe(map((children) => (Object.assign(Object.assign({}, navigationItemOrNull), { children }))));
+                if (navigationItemOrNull.children?.length) {
+                    return this.checkNavigationStatusProviders(navigationItemOrNull.children).pipe(map((children) => ({
+                        ...navigationItemOrNull,
+                        children,
+                    })));
                 }
                 return of(navigationItemOrNull);
             }
@@ -1153,7 +1074,6 @@ class NavigationService {
         }));
     }
     replaceInserts(navigationWithInserts) {
-        var _a;
         const navigation = [];
         for (const navigationItem of navigationWithInserts) {
             if (IsNavigationInsertItem(navigationItem)) {
@@ -1162,7 +1082,10 @@ class NavigationService {
                 }
             }
             else if (IsNavigationItem(navigationItem)) {
-                navigation.push(Object.assign(Object.assign({}, navigationItem), { children: this.replaceInserts((_a = navigationItem.children) !== null && _a !== void 0 ? _a : []) }));
+                navigation.push({
+                    ...navigationItem,
+                    children: this.replaceInserts(navigationItem.children ?? []),
+                });
             }
             else if (IsNavigationDividerItem(navigationItem)) {
                 navigation.push(navigationItem);
@@ -1224,8 +1147,7 @@ function NavigationItemComponent_ng_template_7_li_2_a_1_Template(rf, ctx) { if (
     i0.ɵɵtemplate(1, NavigationItemComponent_ng_template_7_li_2_a_1_mat_icon_1_Template, 1, 1, "mat-icon", 1);
     i0.ɵɵelementStart(2, "span", 6);
     i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const child_r6 = i0.ɵɵnextContext().$implicit;
     const ctx_r7 = i0.ɵɵnextContext(2);
@@ -1251,8 +1173,7 @@ function NavigationItemComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("mouseenter", function NavigationItemComponent_ng_template_7_Template_div_mouseenter_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return ctx_r11.lockeOverlay = true; })("mouseleave", function NavigationItemComponent_ng_template_7_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r13 = i0.ɵɵnextContext(); ctx_r13.lockeOverlay = false; return ctx_r13.onMouseleave(); });
     i0.ɵɵelementStart(1, "ul");
     i0.ɵɵtemplate(2, NavigationItemComponent_ng_template_7_li_2_Template, 2, 1, "li", 9);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
@@ -1285,11 +1206,10 @@ class NavigationItemComponent {
     ngAfterViewInit() {
         this._subscription.add(this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd), startWith(true), delay(100), tap(() => {
-            var _a;
             if (this.routerLinkActive.isActive) {
                 if (!this.sidenav.collapsed$.value) {
                     // only close the overlay if sidenav collapsed
-                    (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+                    this._overlayRef?.detach();
                 }
                 this.renderer.addClass(this.elementRef.nativeElement, 'active');
             }
@@ -1303,13 +1223,12 @@ class NavigationItemComponent {
         // detach the navigation overlay if the sidenav collapsed
         // state is changed
         this._subscription.add(this.sidenav.collapsed$
-            .pipe(skip(1), distinctUntilChanged(), tap(() => { var _a; return (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach(); }))
+            .pipe(skip(1), distinctUntilChanged(), tap(() => this._overlayRef?.detach()))
             .subscribe());
     }
     ngOnDestroy() {
-        var _a, _b;
-        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        (_b = this._overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
+        this._subscription?.unsubscribe();
+        this._overlayRef?.dispose();
     }
     onMouseenter() {
         if (this.children) {
@@ -1336,9 +1255,8 @@ class NavigationItemComponent {
         }
     }
     onMouseleave() {
-        var _a;
         if (!this.lockeOverlay) {
-            (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+            this._overlayRef?.detach();
         }
     }
     // region type save item property
@@ -1387,7 +1305,7 @@ NavigationItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Nav
         i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(4, 11, ctx.sidenav.collapsed$));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.routerLinkActive.isActive && !i0.ɵɵpipeBind1(6, 13, ctx.sidenav.collapsed$) && ctx.children);
-    } }, styles: [".navigation-overlay-container,.rxap-navigation-item{display:flex;flex-direction:column;min-height:48px}.navigation-overlay-container .navigation-link,.rxap-navigation-item .navigation-link{display:flex;flex-direction:row;align-items:center;text-decoration:none;height:48px}.navigation-overlay-container .navigation-link .icon,.rxap-navigation-item .navigation-link .icon{margin:0 16px}.navigation-overlay-container .navigation-link .label,.rxap-navigation-item .navigation-link .label{padding-right:12px}.navigation-overlay-container .navigation-link.navigation-level-1,.rxap-navigation-item .navigation-link.navigation-level-1{padding-left:52px}.navigation-overlay-container .navigation-link.navigation-level-1 .icon,.rxap-navigation-item .navigation-link.navigation-level-1 .icon{padding-left:0}.navigation-overlay-container .navigation-link.navigation-level-2,.rxap-navigation-item .navigation-link.navigation-level-2{padding-left:88px}.navigation-overlay-container .navigation-link.navigation-level-2 .icon,.rxap-navigation-item .navigation-link.navigation-level-2 .icon{padding-left:0}.navigation-overlay-container{padding:0 16px}.navigation-overlay-container ul{list-style-type:none;margin:0;padding:0}.navigation-overlay-container ul .navigation-link .label{padding-right:0}.navigation-overlay-container ul .navigation-link .icon{margin-left:0}"], encapsulation: 2, data: { animation: [
+    } }, styles: [".rxap-navigation-item,.navigation-overlay-container{display:flex;flex-direction:column;min-height:48px}.rxap-navigation-item .navigation-link,.navigation-overlay-container .navigation-link{display:flex;flex-direction:row;align-items:center;text-decoration:none;height:48px}.rxap-navigation-item .navigation-link .icon,.navigation-overlay-container .navigation-link .icon{margin:0 16px}.rxap-navigation-item .navigation-link .label,.navigation-overlay-container .navigation-link .label{padding-right:12px}.rxap-navigation-item .navigation-link.navigation-level-1,.navigation-overlay-container .navigation-link.navigation-level-1{padding-left:52px}.rxap-navigation-item .navigation-link.navigation-level-1 .icon,.navigation-overlay-container .navigation-link.navigation-level-1 .icon{padding-left:0}.rxap-navigation-item .navigation-link.navigation-level-2,.navigation-overlay-container .navigation-link.navigation-level-2{padding-left:88px}.rxap-navigation-item .navigation-link.navigation-level-2 .icon,.navigation-overlay-container .navigation-link.navigation-level-2 .icon{padding-left:0}.navigation-overlay-container{padding:0 16px}.navigation-overlay-container ul{list-style-type:none;margin:0;padding:0}.navigation-overlay-container ul .navigation-link .label{padding-right:0}.navigation-overlay-container ul .navigation-link .icon{margin-left:0}\n"], encapsulation: 2, data: { animation: [
             trigger('sub-nav', [
                 transition(':enter', [
                     style({ display: 'block', height: '0', overflow: 'hidden' }),
@@ -1412,16 +1330,9 @@ __decorate([
 ], NavigationItemComponent.prototype, "onMouseleave", null);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationItemComponent, [{
         type: Component,
-        args: [{
-                selector: 'li[rxap-navigation-item]',
-                templateUrl: './navigation-item.component.html',
-                styleUrls: ['./navigation-item.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                host: {
+        args: [{ selector: 'li[rxap-navigation-item]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                     class: 'rxap-navigation-item',
-                },
-                animations: [
+                }, animations: [
                     trigger('sub-nav', [
                         transition(':enter', [
                             style({ display: 'block', height: '0', overflow: 'hidden' }),
@@ -1433,8 +1344,7 @@ __decorate([
                             style({ display: 'none' }),
                         ]),
                     ]),
-                ],
-            }]
+                ], template: "<a [routerLink]=\"item.routerLink\"\n   routerLinkActive=\"link-active\"\n   [matTooltipDisabled]=\"!(sidenav.collapsed$ | async)\"\n   [matTooltip]=\"item.label\"\n   class=\"navigation-link mat-body-2 mat-body-strong navigation-level-{{level}}\" matRipple>\n  <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\" class=\"icon\"></mat-icon>\n  <ng-template [ngIf]=\"!(sidenav.collapsed$ | async)\">\n    <span class=\"label\">{{ item.label }}</span>\n  </ng-template>\n</a>\n\n<ul rxap-navigation\n    *ngIf=\"routerLinkActive.isActive && !(sidenav.collapsed$ | async) && children\"\n    [@sub-nav]\n    [items]=\"children\"\n    [level]=\"level + 1\"\n    class=\"sub-items\"\n    fxFlex=\"nogrow\"\n>\n</ul>\n\n<ng-template #navigationOverlay>\n  <div class=\"navigation-overlay-container mat-elevation-z1\"\n       (mouseenter)=\"lockeOverlay = true\" (mouseleave)=\"lockeOverlay = false; onMouseleave()\">\n    <ul>\n      <li *ngFor=\"let child of children\">\n        <a *ngIf=\"isNavigationItem(child)\" [routerLink]=\"asNavigationItem(child).routerLink\"\n           class=\"navigation-link mat-body-2 mat-body-strong\" matRipple>\n          <mat-icon *ngIf=\"asNavigationItem(child).icon\" [rxapIcon]=\"asNavigationItem(child).icon\" class=\"icon\"></mat-icon>\n          <span class=\"label\">{{ asNavigationItem(child).label }}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n", styles: [".rxap-navigation-item,.navigation-overlay-container{display:flex;flex-direction:column;min-height:48px}.rxap-navigation-item .navigation-link,.navigation-overlay-container .navigation-link{display:flex;flex-direction:row;align-items:center;text-decoration:none;height:48px}.rxap-navigation-item .navigation-link .icon,.navigation-overlay-container .navigation-link .icon{margin:0 16px}.rxap-navigation-item .navigation-link .label,.navigation-overlay-container .navigation-link .label{padding-right:12px}.rxap-navigation-item .navigation-link.navigation-level-1,.navigation-overlay-container .navigation-link.navigation-level-1{padding-left:52px}.rxap-navigation-item .navigation-link.navigation-level-1 .icon,.navigation-overlay-container .navigation-link.navigation-level-1 .icon{padding-left:0}.rxap-navigation-item .navigation-link.navigation-level-2,.navigation-overlay-container .navigation-link.navigation-level-2{padding-left:88px}.rxap-navigation-item .navigation-link.navigation-level-2 .icon,.navigation-overlay-container .navigation-link.navigation-level-2 .icon{padding-left:0}.navigation-overlay-container{padding:0 16px}.navigation-overlay-container ul{list-style-type:none;margin:0;padding:0}.navigation-overlay-container ul .navigation-link .label{padding-right:0}.navigation-overlay-container ul .navigation-link .icon{margin-left:0}\n"] }]
     }], function () { return [{ type: i1$4.Router, decorators: [{
                 type: Inject,
                 args: [Router]
@@ -1447,7 +1357,7 @@ __decorate([
             }] }, { type: i0.Renderer2, decorators: [{
                 type: Inject,
                 args: [Renderer2]
-            }] }, { type: i3$2.Overlay, decorators: [{
+            }] }, { type: i3$3.Overlay, decorators: [{
                 type: Inject,
                 args: [Overlay]
             }] }, { type: i0.ViewContainerRef, decorators: [{
@@ -1539,8 +1449,7 @@ class NavigationComponent {
         }
     }
     ngOnDestroy() {
-        var _a;
-        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.subscription?.unsubscribe();
     }
     // region type save item property
     // required to check the type of the item property in the ngFor loop
@@ -1564,21 +1473,14 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
         i0.ɵɵtemplate(0, NavigationComponent_ng_template_0_Template, 2, 2, "ng-template", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngForOf", ctx.items);
-    } }, directives: [i2.NgForOf, i2.NgIf, i2$5.MatDivider, i1$3.DefaultFlexDirective, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, NavigationItemComponent], pipes: [i2.AsyncPipe], styles: [".rxap-navigation{list-style-type:none;padding:0}.rxap-navigation .divider-title{padding-left:18px;height:28px;align-content:center}"], encapsulation: 2, changeDetection: 0 });
+    } }, directives: [i2.NgForOf, i2.NgIf, i2$4.MatDivider, i1$3.DefaultFlexDirective, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, NavigationItemComponent], pipes: [i2.AsyncPipe], styles: [".rxap-navigation{list-style-type:none;padding:0}.rxap-navigation .divider-title{padding-left:18px;height:28px;align-content:center}\n"], encapsulation: 2, changeDetection: 0 });
 __decorate([
     Required,
     __metadata("design:type", Array)
 ], NavigationComponent.prototype, "items", void 0);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponent, [{
         type: Component,
-        args: [{
-                selector: 'ul[rxap-navigation]',
-                templateUrl: './navigation.component.html',
-                styleUrls: ['./navigation.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                host: { class: 'rxap-navigation' },
-            }]
+        args: [{ selector: 'ul[rxap-navigation]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'rxap-navigation' }, template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider fxFlex=\"nogrow\"></mat-divider>\n    <div *ngIf=\"!(sidenav.collapsed$ | async)\" class=\"divider-title\" fxFlex=\"nogrow\" fxLayout=\"row\" fxLayoutAlign=\"start end\">\n      <span fxFlex=\"nogrow\" *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li class=\"item\" rxap-navigation-item [level]=\"level\" [item]=\"asNavigationItem(item)\"></li>\n  </ng-template>\n</ng-template>\n", styles: [".rxap-navigation{list-style-type:none;padding:0}.rxap-navigation .divider-title{padding-left:18px;height:28px;align-content:center}\n"] }]
     }], function () { return [{ type: NavigationService, decorators: [{
                 type: Inject,
                 args: [NavigationService]
@@ -1652,6 +1554,9 @@ SidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavCom
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenavFooterDirective = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenavHeaderDirective = _t.first);
     } }, hostAttrs: [1, "rxap-layout-sidenav"], decls: 16, vars: 15, consts: function () { let i18n_0; if (typeof ngI18nClosureMode !== "undefined" && ngI18nClosureMode) {
+        /**
+         * @suppress {msgDescriptions}
+         */
         const MSG_EXTERNAL_rxap_layout_navigation_collapse_sidebar$$LIB_SIDENAV_SIDENAV_COMPONENT_TS_1 = goog.getMsg("Collapse sidebar");
         i18n_0 = MSG_EXTERNAL_rxap_layout_navigation_collapse_sidebar$$LIB_SIDENAV_SIDENAV_COMPONENT_TS_1;
     }
@@ -1669,19 +1574,15 @@ SidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavCom
         i0.ɵɵelementStart(7, "button", 6);
         i0.ɵɵlistener("click", function SidenavComponent_Template_button_click_7_listener() { return ctx.sidenav.toggleNavigationCollapse(); });
         i0.ɵɵpipe(8, "async");
-        i0.ɵɵelementStart(9, "span", 7);
-        i0.ɵɵelementStart(10, "mat-icon", 8);
+        i0.ɵɵelementStart(9, "span", 7)(10, "mat-icon", 8);
         i0.ɵɵtext(11, "double_arrow");
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(12, "span", 9);
         i0.ɵɵi18n(13, 10);
         i0.ɵɵpipe(14, "async");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd()()();
         i0.ɵɵtemplate(15, SidenavComponent_ng_template_15_Template, 5, 7, "ng-template", 2);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd()();
     } if (rf & 2) {
         let tmp_4_0;
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c2$1, i0.ɵɵpipeBind1(1, 5, ctx.sidenav.collapsed$)));
@@ -1693,18 +1594,12 @@ SidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavCom
         i0.ɵɵproperty("fxHide", i0.ɵɵpipeBind1(14, 9, ctx.sidenav.collapsed$));
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", (tmp_4_0 = ctx.sidenavFooterDirective == null ? null : ctx.sidenavFooterDirective.template) !== null && tmp_4_0 !== undefined ? tmp_4_0 : null);
-    } }, directives: [i2$1.DefaultClassDirective, i2.NgClass, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i2.NgIf, i1$3.DefaultFlexDirective, NavigationComponent, i2$5.MatDivider, i1$2.MatButton, i1$3.DefaultLayoutGapDirective, i3$3.MatIcon, i2$1.DefaultShowHideDirective, i2.NgTemplateOutlet], pipes: [i2.AsyncPipe], styles: [".container[_ngcontent-%COMP%], .container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]{height:100%}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]{padding-bottom:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .footer[_ngcontent-%COMP%]{padding-top:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]{overflow-y:scroll;padding-top:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:6px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar-track{border-radius:2px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border-radius:10px}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]{min-height:48px}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]   .sidebar-toggle-inner[_ngcontent-%COMP%]{padding:0}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]   .arrow[_ngcontent-%COMP%]{transform:rotate(180deg)}.container[_ngcontent-%COMP%]   .sidebar-toggle.collapsed[_ngcontent-%COMP%]   .arrow[_ngcontent-%COMP%]{transform:none}.container[_ngcontent-%COMP%]   .sidebar-toggle.collapsed[_ngcontent-%COMP%]   .sidebar-toggle-inner[_ngcontent-%COMP%]{justify-content:space-around!important}"], changeDetection: 0 });
+    } }, directives: [i2$1.DefaultClassDirective, i2.NgClass, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i2.NgIf, i1$3.DefaultFlexDirective, i2$1.DefaultShowHideDirective, i2.NgTemplateOutlet, i2$4.MatDivider, NavigationComponent, i1$1.MatButton, i1$3.DefaultLayoutGapDirective, i3$1.MatIcon], pipes: [i2.AsyncPipe], styles: [".container[_ngcontent-%COMP%], .container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]{height:100%}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]{padding-bottom:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .footer[_ngcontent-%COMP%]{padding-top:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]{overflow-y:scroll;padding-top:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:6px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar-track{border-radius:2px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border-radius:10px}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]{min-height:48px}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]   .sidebar-toggle-inner[_ngcontent-%COMP%]{padding:0}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]   .arrow[_ngcontent-%COMP%]{transform:rotate(180deg)}.container[_ngcontent-%COMP%]   .sidebar-toggle.collapsed[_ngcontent-%COMP%]   .arrow[_ngcontent-%COMP%]{transform:initial}.container[_ngcontent-%COMP%]   .sidebar-toggle.collapsed[_ngcontent-%COMP%]   .sidebar-toggle-inner[_ngcontent-%COMP%]{justify-content:space-around!important}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-sidenav',
-                templateUrl: './sidenav.component.html',
-                styleUrls: ['./sidenav.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: {
+        args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                     class: 'rxap-layout-sidenav'
-                }
-            }]
+                }, template: "<div class=\"container\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\">\n  <div class=\"inner\"\n       fxLayout=\"column\"\n       fxLayoutAlign=\"space-between stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div fxFlex=\"nogrow\" class=\"header\" [fxHide]=\"sidenav.collapsed$ | async\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider fxFlex=\"nogrow\" [fxHide]=\"sidenav.collapsed$ | async\"></mat-divider>\n    </ng-template>\n    <div fxFlex=\"grow\" class=\"nav-container\">\n      <ul fxLayout=\"column\" root rxap-navigation></ul>\n    </div>\n    <mat-divider fxFlex=\"nogrow\"></mat-divider>\n    <button mat-button class=\"sidebar-toggle\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" fxFlex=\"nogrow\"\n            (click)=\"sidenav.toggleNavigationCollapse()\">\n      <span class=\"sidebar-toggle-inner\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\">\n        <mat-icon fxFlex=\"nogrow\" class=\"arrow\">double_arrow</mat-icon>\n        <span [fxHide]=\"sidenav.collapsed$ | async\" class=\"label\" fxFlex=\"grow\" i18n=\"@@rxap.layout.navigation.collapse-sidebar\">Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider fxFlex=\"nogrow\" [fxHide]=\"sidenav.collapsed$ | async\"></mat-divider>\n      <div fxFlex=\"nogrow\" class=\"footer\" [fxHide]=\"sidenav.collapsed$ | async\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".container,.container .inner{height:100%}.container .inner .header{padding-bottom:12px}.container .inner .footer{padding-top:12px}.container .inner .nav-container{overflow-y:scroll;padding-top:12px}.container .inner .nav-container::-webkit-scrollbar{width:6px}.container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.container .sidebar-toggle{min-height:48px}.container .sidebar-toggle .sidebar-toggle-inner{padding:0}.container .sidebar-toggle .arrow{transform:rotate(180deg)}.container .sidebar-toggle.collapsed .arrow{transform:initial}.container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"] }]
     }], function () { return [{ type: SidenavComponentService }]; }, { sidenavFooterDirective: [{
             type: ContentChild,
             args: [SidenavFooterDirective]
@@ -1764,8 +1659,7 @@ SidenavContentComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sid
         i0.ɵɵelementStart(5, "div", 1);
         i0.ɵɵelement(6, "router-outlet");
         i0.ɵɵprojection(7);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd()();
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$1, i0.ɵɵpipeBind1(1, 2, ctx.sidenav.openedChange)))("ngStyle", i0.ɵɵpureFunction3(12, _c1$1, i0.ɵɵpipeBind1(2, 4, ctx.sccs.innerHeight$), i0.ɵɵpipeBind1(3, 6, ctx.sccs.marginTop$), i0.ɵɵpipeBind1(4, 8, ctx.sccs.marginBottom$)));
     } }, directives: [i2.NgClass, i2.NgStyle, i1$4.RouterOutlet], pipes: [i2.AsyncPipe], styles: [".container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]{padding:0;overflow:auto;height:100%}"], changeDetection: 0 });
@@ -1775,12 +1669,7 @@ __decorate([
 ], SidenavContentComponent.prototype, "sidenav", void 0);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavContentComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-sidenav-content',
-                templateUrl: './sidenav-content.component.html',
-                styleUrls: ['./sidenav-content.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush
-            }]
+        args: [{ selector: 'rxap-sidenav-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"{ 'open': (sidenav.openedChange | async) }\" [ngStyle]=\"{\n  height: sccs.innerHeight$ | async,\n  marginTop: sccs.marginTop$ | async,\n  marginBottom: sccs.marginBottom$ | async\n}\" class=\"container\">\n  <!--  <dx-breadcrumb></dx-breadcrumb>-->\n  <div class=\"inner\">\n    <router-outlet></router-outlet>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".container .inner{padding:0;overflow:auto;height:100%}\n"] }]
     }], function () { return [{ type: SidenavContentComponentService }]; }, { sidenav: [{
             type: Input
         }] }); })();
@@ -1809,29 +1698,21 @@ class ToggleWindowSidenavButtonComponent {
 }
 ToggleWindowSidenavButtonComponent.ɵfac = function ToggleWindowSidenavButtonComponent_Factory(t) { return new (t || ToggleWindowSidenavButtonComponent)(); };
 ToggleWindowSidenavButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToggleWindowSidenavButtonComponent, selectors: [["rxap-toggle-window-sidenav-button"]], hostAttrs: [1, "rxap-toggle-window-sidenav-button"], inputs: { openWindowSidenav: "openWindowSidenav" }, outputs: { openWindowSidenavChange: "openWindowSidenavChange" }, decls: 5, vars: 2, consts: [[1, "toggle-button"], ["mat-icon-button", "", 3, "click"], [3, "ngIfElse", "ngIf"], ["hide", ""]], template: function ToggleWindowSidenavButtonComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "button", 1);
+        i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
         i0.ɵɵlistener("click", function ToggleWindowSidenavButtonComponent_Template_button_click_1_listener() { return ctx.toggle(); });
         i0.ɵɵtemplate(2, ToggleWindowSidenavButtonComponent_ng_template_2_Template, 2, 0, "ng-template", 2);
         i0.ɵɵtemplate(3, ToggleWindowSidenavButtonComponent_ng_template_3_Template, 2, 0, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd()();
     } if (rf & 2) {
         const _r1 = i0.ɵɵreference(4);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIfElse", _r1)("ngIf", !ctx.openWindowSidenav);
-    } }, directives: [i1$2.MatButton, i2.NgIf, i3$3.MatIcon], styles: [".toggle-button[_ngcontent-%COMP%]{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid #000;background:#000}"], changeDetection: 0 });
+    } }, directives: [i1$1.MatButton, i2.NgIf, i3$1.MatIcon], styles: [".toggle-button[_ngcontent-%COMP%]{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:black}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleWindowSidenavButtonComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-toggle-window-sidenav-button',
-                templateUrl: './toggle-window-sidenav-button.component.html',
-                styleUrls: ['./toggle-window-sidenav-button.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                host: {
+        args: [{ selector: 'rxap-toggle-window-sidenav-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                     class: 'rxap-toggle-window-sidenav-button'
-                }
-            }]
+                }, template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon>keyboard_arrow_left</mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon>keyboard_arrow_right</mat-icon>\n    </ng-template>\n  </button>\n</div>\n", styles: [".toggle-button{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:black}\n"] }]
     }], function () { return []; }, { openWindowSidenav: [{
             type: Input
         }], openWindowSidenavChange: [{
@@ -1895,12 +1776,7 @@ WindowContainerSidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
     } }, directives: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i2.NgForOf, i1$3.DefaultFlexDirective, i4.CdkPortalOutlet], styles: [".container[_ngcontent-%COMP%]{padding:8px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WindowContainerSidenavComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-window-container-sidenav',
-                templateUrl: './window-container-sidenav.component.html',
-                styleUrls: ['./window-container-sidenav.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush
-            }]
+        args: [{ selector: 'rxap-window-container-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxLayoutGap=\"16px\" class=\"container\">\n\n  <div fxFlex=\"nogrow\" *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n", styles: [".container{padding:8px}\n"] }]
     }], function () { return [{ type: i1.WindowContainerSidenavService, decorators: [{
                 type: Inject,
                 args: [WindowContainerSidenavService]
@@ -1929,30 +1805,24 @@ LayoutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutCompo
     } }, ngContentSelectors: _c1, decls: 18, vars: 24, consts: [[1, "header", 3, "sidenav"], ["autosize", "", 1, "container"], [1, "sidenav", 3, "fixedBottomGap", "fixedInViewport", "fixedTopGap", "mode", "opened"], ["rxapSidenavHeader", ""], [1, "content"], [3, "sidenav"], [3, "openWindowSidenav", "openWindowSidenavChange"], ["mode", "side", "position", "end", 1, "window-container-sidenav", 3, "fixedBottomGap", "fixedInViewport", "fixedTopGap", "opened"], [1, "footer"], ["alt", "logo", 1, "logo", 3, "routerLink", "width", "src"]], template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelement(0, "rxap-header", 0);
-        i0.ɵɵelementStart(1, "mat-sidenav-container", 1);
-        i0.ɵɵelementStart(2, "mat-sidenav", 2);
+        i0.ɵɵelementStart(1, "mat-sidenav-container", 1)(2, "mat-sidenav", 2);
         i0.ɵɵpipe(3, "async");
         i0.ɵɵpipe(4, "async");
         i0.ɵɵpipe(5, "async");
         i0.ɵɵpipe(6, "async");
         i0.ɵɵelementStart(7, "rxap-sidenav");
         i0.ɵɵtemplate(8, LayoutComponent_ng_template_8_Template, 1, 4, "ng-template", 3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(9, "mat-sidenav-content", 4);
-        i0.ɵɵelementStart(10, "rxap-sidenav-content", 5);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(9, "mat-sidenav-content", 4)(10, "rxap-sidenav-content", 5);
         i0.ɵɵprojection(11);
         i0.ɵɵelementStart(12, "rxap-toggle-window-sidenav-button", 6);
         i0.ɵɵlistener("openWindowSidenavChange", function LayoutComponent_Template_rxap_toggle_window_sidenav_button_openWindowSidenavChange_12_listener($event) { return ctx.openWindowSidenav = $event; });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd()()();
         i0.ɵɵelementStart(13, "mat-sidenav", 7);
         i0.ɵɵpipe(14, "async");
         i0.ɵɵpipe(15, "async");
         i0.ɵɵelement(16, "rxap-window-container-sidenav");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd()();
         i0.ɵɵelement(17, "rxap-footer", 8);
     } if (rf & 2) {
         let tmp_4_0;
@@ -1966,15 +1836,10 @@ LayoutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutCompo
         i0.ɵɵproperty("openWindowSidenav", ctx.openWindowSidenav);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("fixedBottomGap", i0.ɵɵpipeBind1(14, 20, ctx.layoutComponentService.fixedBottomGap$))("fixedInViewport", true)("fixedTopGap", i0.ɵɵpipeBind1(15, 22, ctx.layoutComponentService.fixedTopGap$))("opened", ctx.openWindowSidenav);
-    } }, directives: [HeaderComponent, i3$5.MatSidenavContainer, i3$5.MatSidenav, SidenavComponent, SidenavHeaderDirective, i3$5.MatSidenavContent, SidenavContentComponent, ToggleWindowSidenavButtonComponent, WindowContainerSidenavComponent, FooterComponent, i1$4.RouterLink], pipes: [i2.AsyncPipe], styles: [".container[_ngcontent-%COMP%], .content[_ngcontent-%COMP%]{height:100%}.sidenav[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:auto}.sidenav[_ngcontent-%COMP%]   .logo[_ngcontent-%COMP%]{padding:16px}.footer[_ngcontent-%COMP%]{bottom:0}.footer[_ngcontent-%COMP%], .header[_ngcontent-%COMP%]{position:fixed;left:0;right:0;z-index:100}.header[_ngcontent-%COMP%]{top:0}"], changeDetection: 0 });
+    } }, directives: [HeaderComponent, i3$5.MatSidenavContainer, i3$5.MatSidenav, SidenavComponent, SidenavHeaderDirective, i1$4.RouterLink, i3$5.MatSidenavContent, SidenavContentComponent, ToggleWindowSidenavButtonComponent, WindowContainerSidenavComponent, FooterComponent], pipes: [i2.AsyncPipe], styles: [".container[_ngcontent-%COMP%], .content[_ngcontent-%COMP%]{height:100%}.sidenav[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:auto}.sidenav[_ngcontent-%COMP%]   .logo[_ngcontent-%COMP%]{padding:16px}.footer[_ngcontent-%COMP%]{position:fixed;bottom:0;left:0;right:0;z-index:100}.header[_ngcontent-%COMP%]{position:fixed;top:0;left:0;right:0;z-index:100}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-layout',
-                templateUrl: './layout.component.html',
-                styleUrls: ['./layout.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-            }]
+        args: [{ selector: 'rxap-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<rxap-header [sidenav]=\"sidenav\" class=\"header\"></rxap-header>\n<mat-sidenav-container autosize class=\"container\">\n  <mat-sidenav\n    [fixedBottomGap]=\"layoutComponentService.fixedBottomGap$ | async\"\n    [fixedInViewport]=\"true\"\n    [fixedTopGap]=\"layoutComponentService.fixedTopGap$ | async\"\n    [mode]=\"(layoutComponentService.mode$ | async) ?? 'side'\"\n    [opened]=\"(layoutComponentService.opened$ | async) ?? true\"\n    class=\"sidenav\"\n  >\n    <rxap-sidenav>\n      <ng-template rxapSidenavHeader>\n        <img\n          [routerLink]=\"['/']\"\n          alt=\"logo\"\n          class=\"logo\"\n          [width]=\"layoutComponentService.logo.width\"\n          [src]=\"layoutComponentService.logo.src\"\n        />\n      </ng-template>\n    </rxap-sidenav>\n  </mat-sidenav>\n  <mat-sidenav-content class=\"content\">\n    <rxap-sidenav-content [sidenav]=\"sidenav\">\n      <ng-content></ng-content>\n      <rxap-toggle-window-sidenav-button [(openWindowSidenav)]=\"openWindowSidenav\"></rxap-toggle-window-sidenav-button>\n    </rxap-sidenav-content>\n  </mat-sidenav-content>\n  <mat-sidenav\n    [fixedBottomGap]=\"layoutComponentService.fixedBottomGap$ | async\"\n    [fixedInViewport]=\"true\"\n    [fixedTopGap]=\"layoutComponentService.fixedTopGap$ | async\"\n    [opened]=\"openWindowSidenav\"\n    mode=\"side\"\n    class=\"window-container-sidenav\"\n    position=\"end\"\n  >\n    <rxap-window-container-sidenav></rxap-window-container-sidenav>\n  </mat-sidenav>\n</mat-sidenav-container>\n<rxap-footer class=\"footer\"></rxap-footer>\n", styles: [".container,.content{height:100%}.sidenav{display:flex;align-items:center;justify-content:center;width:auto}.sidenav .logo{padding:16px}.footer{position:fixed;bottom:0;left:0;right:0;z-index:100}.header{position:fixed;top:0;left:0;right:0;z-index:100}\n"] }]
     }], function () { return [{ type: LayoutComponentService }]; }, { sidenav: [{
             type: ViewChild,
             args: [MatSidenav, { static: true }]
@@ -2073,7 +1938,7 @@ NavigationComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports:
         StopPropagationDirectiveModule,
         MatTooltipModule,
         ReplaceRouterPathsPipeModule], exports: [NavigationComponent] }); })();
-i0.ɵɵsetComponentScope(NavigationItemComponent, [i1$4.RouterLinkWithHref, i1$4.RouterLinkActive, i6.MatRipple, i3$6.MatTooltip, i2.NgIf, i3$3.MatIcon, i6$1.IconDirective, NavigationComponent, i1$3.DefaultFlexDirective, i2.NgForOf], [i2.AsyncPipe]);
+i0.ɵɵsetComponentScope(NavigationItemComponent, [i1$4.RouterLinkWithHref, i1$4.RouterLinkActive, i6.MatRipple, i3$6.MatTooltip, i2.NgIf, i3$1.MatIcon, i6$2.IconDirective, NavigationComponent, i1$3.DefaultFlexDirective, i2.NgForOf], [i2.AsyncPipe]);
 
 class SidenavModule {
 }
@@ -2239,8 +2104,7 @@ LayoutModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
         RouterModule], exports: [LayoutComponent] }); })();
 
 function VersionComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵelementStart(1, "span", 3);
+    i0.ɵɵelementStart(0, "div", 2)(1, "span", 3);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span", 4);
@@ -2248,8 +2112,7 @@ function VersionComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span", 5);
     i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const module_r1 = ctx.$implicit;
     i0.ɵɵadvance(2);
@@ -2268,8 +2131,7 @@ class VersionComponent {
         this.subscription = this.version.update$.pipe(tap(() => this.modules = this.version.get())).subscribe();
     }
     ngOnDestroy() {
-        var _a;
-        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.subscription?.unsubscribe();
     }
 }
 VersionComponent.ɵfac = function VersionComponent_Factory(t) { return new (t || VersionComponent)(i0.ɵɵdirectiveInject(VersionService)); };
@@ -2288,12 +2150,7 @@ __decorate([
 ], VersionComponent.prototype, "modules", void 0);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VersionComponent, [{
         type: Component,
-        args: [{
-                selector: 'rxap-version',
-                templateUrl: './version.component.html',
-                styleUrls: ['./version.component.scss'],
-                changeDetection: ChangeDetectionStrategy.OnPush
-            }]
+        args: [{ selector: 'rxap-version', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"version\" fxFlex=\"nogrow\" fxLayout=\"column\" fxLayoutAlign=\"start start\" fxLayoutGap=\"8px\">\n  <div *ngFor=\"let module of modules | keyvalue\" fxFlex=\"nogrow\" fxLayout=\"column\">\n    <span class=\"name\" fxFlex=\"nogrow\">{{module.value.name}}</span>\n    <span class=\"semantic\" fxFlex=\"nogrow\">{{module.value.semantic}}</span>\n    <span class=\"hash\" fxFlex=\"nogrow\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"] }]
     }], function () { return [{ type: i1.VersionService, decorators: [{
                 type: Inject,
                 args: [VersionService]
@@ -2373,4 +2230,4 @@ FooterDirectiveModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
  */
 
 export { AppsButtonComponent, AppsButtonComponentModule, FooterComponent, FooterDirective, FooterDirectiveModule, FooterModule, HeaderComponent, HeaderModule, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LayoutComponent, LayoutComponentService, LayoutModule, NavigationComponent, NavigationComponentModule, NavigationItemComponent, NavigationProgressBarComponent, NavigationProgressBarComponentModule, NavigationService, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, ReplaceRouterPathsService, ResetButtonComponent, ResetButtonComponentModule, SidenavComponent, SidenavComponentService, SidenavContentComponent, SidenavContentComponentService, SidenavContentModule, SidenavFooterDirective, SidenavHeaderDirective, SidenavModule, SidenavToggleButtonComponent, SidenavToggleButtonComponentModule, SignOutComponent, SignOutComponentModule, ToggleWindowSidenavButtonComponent, ToggleWindowSidenavButtonModule, UserProfileIconComponent, UserProfileIconComponentModule, VersionComponent, VersionComponentModule, WindowContainerSidenavComponent, WindowContainerSidenavModule };
-//# sourceMappingURL=rxap-layout.js.map
+//# sourceMappingURL=rxap-layout.mjs.map