@rxap/layout 13.0.0 → 14.0.0

package/fesm2015/rxap-layout.mjs

@@ -1,56 +1,56 @@
 import * as i0 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 { InjectionToken, Component, ChangeDetectionStrategy, NgModule, Inject, Input, Optional, Injectable, 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';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/material/toolbar';
+import * as i2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 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 { map, filter, tap, switchMap, catchError, startWith, delay, skip, distinctUntilChanged } from 'rxjs/operators';
-import * as i6$1 from '@rxap/authentication';
+import * as i3 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 { __decorate, __metadata } from 'tslib';
-import * as i3$5 from '@angular/material/sidenav';
-import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import { Required, DebounceCall, coerceBoolean } from '@rxap/utilities';
+import * as i3$1 from '@angular/router';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, RouterModule, RouterLinkActive } from '@angular/router';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$1 from '@angular/material/icon';
+import * as i2$2 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$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 i3$3 from '@angular/cdk/overlay';
-import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import { isDefined } from '@rxap/utilities/rxjs';
-import * as i2$2 from '@angular/material/menu';
+import * as i1$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3$4 from '@rxap/directives';
+import * as i1$3 from '@angular/flex-layout/flex';
+import * as i5 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 * as i1$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { __decorate, __metadata } from 'tslib';
+import * as i2$4 from '@angular/material/sidenav';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { Required, DebounceCall, coerceBoolean } from '@rxap/utilities';
+import * as i5$1 from '@angular/flex-layout/extended';
+import * as i1$5 from '@rxap/config';
+import { ConfigService } from '@rxap/config';
+import * as i3$2 from '@angular/cdk/overlay';
+import { OverlayModule, Overlay } from '@angular/cdk/overlay';
+import * as i2$3 from '@angular/material/form-field';
+import * as i3$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4$1 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import * as i6 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i2$4 from '@angular/material/divider';
+import * as i3$4 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i6$2 from '@rxap/material-directives/icon';
+import * as i5$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';
+import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 const RXAP_NAVIGATION_CONFIG = new InjectionToken('rxap/layout/navigation-config');
@@ -108,11 +108,11 @@ FooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterCompo
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.footerService.portals$));
         }
-    }, directives: [i2.NgIf, i3.MatToolbar, i2.NgForOf, i3.MatToolbarRow, i4.CdkPortalOutlet], pipes: [i2.AsyncPipe], styles: [""], changeDetection: 0 });
+    }, dependencies: [i2.MatToolbar, i2.MatToolbarRow, i2$1.NgForOf, i2$1.NgIf, i4.CdkPortalOutlet, i2$1.AsyncPipe], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterComponent, [{
             type: Component,
-            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: [""] }]
+            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" }]
         }], function () { return [{ type: i1.FooterService }]; }, null);
 })();
 
@@ -120,11 +120,9 @@ class FooterModule {
 }
 FooterModule.ɵfac = function FooterModule_Factory(t) { return new (t || FooterModule)(); };
 FooterModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FooterModule });
-FooterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatToolbarModule,
-            CommonModule,
-            PortalModule
-        ]] });
+FooterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatToolbarModule,
+        CommonModule,
+        PortalModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterModule, [{
             type: NgModule,
@@ -145,164 +143,237 @@ FooterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
             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();
+class SignOutComponent {
+    constructor(router) {
+        this.router = router;
     }
-}
-function SidenavToggleButtonComponent_mat_icon_2_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "mat-icon");
-        i0.ɵɵtext(1, "menu_open");
-        i0.ɵɵelementEnd();
+    redirectToRoot() {
+        this.router.navigate(['/']);
     }
 }
-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) {
+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("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);
+            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, i2.NgIf, i3$1.MatIcon], styles: [""], changeDetection: 0 });
-__decorate([
-    Required,
-    __metadata("design:type", MatSidenav)
-], SidenavToggleButtonComponent.prototype, "sidenav", void 0);
+    }, dependencies: [i1$1.MatButton, i2$2.MatIcon, i3.SignOutDirective], changeDetection: 0 });
 (function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponent, [{
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SignOutComponent, [{
             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
-            }] });
+            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" }]
+        }], function () {
+        return [{ type: i3$1.Router, decorators: [{
+                        type: Inject,
+                        args: [Router]
+                    }] }];
+    }, null);
 })();
 
-function LanguageSelectorComponent_ng_template_0_mat_option_3_Template(rf, ctx) {
+function UserProfileIconComponent_ng_template_5_button_0_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "mat-option", 4);
-        i0.ɵɵtext(1);
+        i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
+        i0.ɵɵtext(2, "person");
         i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "span");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const item_r2 = ctx.$implicit;
-        i0.ɵɵproperty("value", item_r2.key);
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(item_r2.value);
+        const user_r2 = i0.ɵɵnextContext().$implicit;
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate2("", user_r2.firstname, " ", user_r2.lastname, "");
     }
 }
-function LanguageSelectorComponent_ng_template_0_Template(rf, ctx) {
+function UserProfileIconComponent_ng_template_5_button_1_Template(rf, ctx) {
     if (rf & 1) {
-        const _r4 = i0.ɵɵgetCurrentView();
-        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.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
+        i0.ɵɵtext(2, "person");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "span");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngModel", ctx_r0.language.selectedLanguage);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(4, 2, ctx_r0.language.languages));
+        const user_r2 = i0.ɵɵnextContext().$implicit;
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(user_r2.name);
     }
 }
-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.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.selectedLanguage =
-            (_d = localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY)) !== null && _d !== void 0 ? _d : this.defaultLanguage;
+function UserProfileIconComponent_ng_template_5_button_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
+        i0.ɵɵtext(2, "account_circle");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "span");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
     }
-    setLanguage(language) {
-        if (language !== this.selectedLanguage) {
-            this.redirect(language);
-        }
+    if (rf & 2) {
+        const user_r2 = i0.ɵɵnextContext().$implicit;
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(user_r2.username);
     }
-    autoRedirect() {
-        if (localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY)) {
-            this.redirect(localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY));
-        }
+}
+function UserProfileIconComponent_ng_template_5_button_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
+        i0.ɵɵtext(2, "email");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "span");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
     }
-    redirect(language) {
-        const currentUrl = location.origin + location.pathname + location.search;
-        const redirectUrl = location.origin +
-            `/${language}` +
-            location.pathname.replace(new RegExp(`^\/${this.selectedLanguage}`), '') +
-            location.search;
-        this.selectedLanguage = language;
-        localStorage.setItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY, language);
-        if (currentUrl !== redirectUrl) {
-            if (this.checkLastChange()) {
-                location.replace(redirectUrl);
-            }
+    if (rf & 2) {
+        const user_r2 = i0.ɵɵnextContext().$implicit;
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(user_r2.email);
+    }
+}
+function UserProfileIconComponent_ng_template_5_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵtemplate(0, UserProfileIconComponent_ng_template_5_button_0_Template, 5, 2, "button", 4);
+        i0.ɵɵtemplate(1, UserProfileIconComponent_ng_template_5_button_1_Template, 5, 1, "button", 4);
+        i0.ɵɵtemplate(2, UserProfileIconComponent_ng_template_5_button_2_Template, 5, 1, "button", 4);
+        i0.ɵɵtemplate(3, UserProfileIconComponent_ng_template_5_button_3_Template, 5, 1, "button", 4);
+    }
+    if (rf & 2) {
+        const user_r2 = ctx.$implicit;
+        i0.ɵɵproperty("ngIf", user_r2.firstname && user_r2.lastname);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", user_r2.name);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", user_r2.username);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", user_r2.email);
+    }
+}
+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
+                ? [user.firstname, user.lastname].join(' ').trim()
+                : null)) !== null && _b !== void 0 ? _b : user.username;
+        }));
+    }
+}
+UserProfileIconComponent.ɵfac = function UserProfileIconComponent_Factory(t) { return new (t || UserProfileIconComponent)(i0.ɵɵdirectiveInject(UserService)); };
+UserProfileIconComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserProfileIconComponent, selectors: [["rxap-user-profile-icon"]], hostAttrs: [1, "rxap-user-profile-icon"], decls: 7, vars: 11, consts: [["fxLayout", "row", "fxLayoutAlign", "center center", 1, "profile-icon", 3, "matMenuTriggerFor", "rxapAvatarBackgroundImage", "name"], [3, "yPosition"], ["menu", "matMenu"], [3, "ngIf"], ["mat-menu-item", "", 4, "ngIf"], ["mat-menu-item", ""]], template: function UserProfileIconComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelement(0, "button", 0);
+            i0.ɵɵpipe(1, "async");
+            i0.ɵɵpipe(2, "async");
+            i0.ɵɵelementStart(3, "mat-menu", 1, 2);
+            i0.ɵɵtemplate(5, UserProfileIconComponent_ng_template_5_Template, 4, 4, "ng-template", 3);
+            i0.ɵɵpipe(6, "async");
+            i0.ɵɵelementEnd();
         }
-        else {
-            console.log('Redirect not required');
+        if (rf & 2) {
+            const _r0 = i0.ɵɵreference(4);
+            let tmp_2_0;
+            i0.ɵɵproperty("matMenuTriggerFor", _r0)("rxapAvatarBackgroundImage", i0.ɵɵpipeBind1(1, 5, ctx.userProfileUrl$))("name", (tmp_2_0 = i0.ɵɵpipeBind1(2, 7, ctx.userName$)) !== null && tmp_2_0 !== undefined ? tmp_2_0 : "");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("yPosition", "below");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 9, ctx.userService.user$));
         }
+    }, dependencies: [i1$2.MatMenu, i1$2.MatMenuItem, i1$2.MatMenuTrigger, i2$2.MatIcon, i2$1.NgIf, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i5.AvatarBackgroundImageDirective, i2$1.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', 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: i3.UserService, decorators: [{
+                        type: Inject,
+                        args: [UserService]
+                    }] }];
+    }, null);
+})();
+
+function NavigationProgressBarComponent_mat_progress_bar_0_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "mat-progress-bar", 1);
     }
-    checkLastChange() {
-        const lastChangeString = localStorage.getItem(RXAP_SELECTED_LANGUAGE_CHANGE_LOCAL_STORAGE_KEY);
-        if (lastChangeString) {
-            if (Date.now() - parseInt(lastChangeString, 10) < 1000) {
-                return false;
-            }
-        }
-        localStorage.setItem(RXAP_SELECTED_LANGUAGE_CHANGE_LOCAL_STORAGE_KEY, Date.now().toFixed(0));
-        return true;
+}
+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));
     }
 }
-LanguageSelectorService.ɵfac = function LanguageSelectorService_Factory(t) { return new (t || LanguageSelectorService)(i0.ɵɵinject(ConfigService)); };
-LanguageSelectorService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LanguageSelectorService, factory: LanguageSelectorService.ɵfac, providedIn: 'root' });
+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$));
+        }
+    }, dependencies: [i1$4.MatProgressBar, i2$1.NgIf, i2$1.AsyncPipe], changeDetection: 0 });
 (function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorService, [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+    (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" }]
         }], function () {
-        return [{ type: i1$2.ConfigService, decorators: [{
+        return [{ type: i3$1.Router, decorators: [{
                         type: Inject,
-                        args: [ConfigService]
+                        args: [Router]
                     }] }];
     }, null);
 })();
-class LanguageSelectorComponent {
-    constructor(language) {
-        this.language = language;
+
+function SidenavToggleButtonComponent_mat_icon_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-icon");
+        i0.ɵɵtext(1, "menu");
+        i0.ɵɵelementEnd();
     }
 }
-LanguageSelectorComponent.ɵfac = function LanguageSelectorComponent_Factory(t) { return new (t || LanguageSelectorComponent)(i0.ɵɵdirectiveInject(LanguageSelectorService)); };
-LanguageSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageSelectorComponent, selectors: [["rxap-language-selector"]], hostAttrs: [1, "rxap-language-selector"], decls: 2, vars: 3, consts: [[3, "ngIf"], ["appearance", "outline", 1, "language-selector"], [3, "ngModel", "ngModelChange"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"]], template: function LanguageSelectorComponent_Template(rf, ctx) {
+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.ɵɵtemplate(0, LanguageSelectorComponent_ng_template_0_Template, 5, 4, "ng-template", 0);
-            i0.ɵɵpipe(1, "keyvalue");
+            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.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.language.languages).length);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.sidenav.opened);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.sidenav.opened);
         }
-    }, 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 });
+    }, dependencies: [i2$2.MatIcon, i2$1.NgIf, i1$1.MatButton], changeDetection: 0 });
+__decorate([
+    Required,
+    __metadata("design:type", MatSidenav)
+], SidenavToggleButtonComponent.prototype, "sidenav", void 0);
 (function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponent, [{
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponent, [{
             type: Component,
-            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);
+            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" }]
+        }], null, { sidenav: [{
+                type: Input
+            }] });
 })();
 
 function AppsButtonComponent_ng_template_0_ng_template_4_li_2_a_1_Template(rf, ctx) {
@@ -355,12 +426,12 @@ function AppsButtonComponent_ng_template_0_Template(rf, ctx) {
     if (rf & 1) {
         const _r8 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "button", 1, 2);
-        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.ɵɵlistener("click", function AppsButtonComponent_ng_template_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.isOpen = !ctx_r7.isOpen); });
         i0.ɵɵelementStart(2, "mat-icon");
         i0.ɵɵtext(3, "apps");
         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; });
+        i0.ɵɵlistener("overlayOutsideClick", function AppsButtonComponent_ng_template_0_Template_ng_template_overlayOutsideClick_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.isOpen = false); });
     }
     if (rf & 2) {
         const _r1 = i0.ɵɵreference(1);
@@ -402,210 +473,137 @@ AppsButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppsBut
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.grid && ctx.grid.length);
         }
-    }, 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 });
+    }, dependencies: [i1$1.MatButton, i2$2.MatIcon, i3$2.CdkConnectedOverlay, i3$2.CdkOverlayOrigin, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i5$1.DefaultClassDirective, i5$1.DefaultStyleDirective, i2$1.NgClass, i2$1.NgForOf, i2$1.NgIf, i2$1.NgStyle], 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;inset: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', 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"] }]
+            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;inset: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$2.ConfigService, decorators: [{
+                    }] }, { type: i1$5.ConfigService, decorators: [{
                         type: Inject,
                         args: [ConfigService]
                     }] }];
     }, null);
 })();
 
-function UserProfileIconComponent_ng_template_5_button_0_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
-        i0.ɵɵtext(2, "person");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "span");
-        i0.ɵɵtext(4);
-        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)(1, "mat-icon");
-        i0.ɵɵtext(2, "person");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "span");
-        i0.ɵɵtext(4);
-        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) {
+function LanguageSelectorComponent_ng_template_0_mat_option_3_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
-        i0.ɵɵtext(2, "account_circle");
+        i0.ɵɵelementStart(0, "mat-option", 4);
+        i0.ɵɵtext(1);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "span");
-        i0.ɵɵtext(4);
-        i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const user_r2 = i0.ɵɵnextContext().$implicit;
-        i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(user_r2.username);
+        const item_r2 = ctx.$implicit;
+        i0.ɵɵproperty("value", item_r2.key);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(item_r2.value);
     }
 }
-function UserProfileIconComponent_ng_template_5_button_3_Template(rf, ctx) {
+function LanguageSelectorComponent_ng_template_0_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
-        i0.ɵɵtext(2, "email");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "span");
-        i0.ɵɵtext(4);
-        i0.ɵɵelementEnd()();
+        const _r4 = i0.ɵɵgetCurrentView();
+        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 i0.ɵɵresetView(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()()();
     }
     if (rf & 2) {
-        const user_r2 = i0.ɵɵnextContext().$implicit;
-        i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(user_r2.email);
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngModel", ctx_r0.language.selectedLanguage);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(4, 2, ctx_r0.language.languages));
     }
 }
-function UserProfileIconComponent_ng_template_5_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵtemplate(0, UserProfileIconComponent_ng_template_5_button_0_Template, 5, 2, "button", 4);
-        i0.ɵɵtemplate(1, UserProfileIconComponent_ng_template_5_button_1_Template, 5, 1, "button", 4);
-        i0.ɵɵtemplate(2, UserProfileIconComponent_ng_template_5_button_2_Template, 5, 1, "button", 4);
-        i0.ɵɵtemplate(3, UserProfileIconComponent_ng_template_5_button_3_Template, 5, 1, "button", 4);
+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.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.selectedLanguage =
+            (_d = localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY)) !== null && _d !== void 0 ? _d : this.defaultLanguage;
     }
-    if (rf & 2) {
-        const user_r2 = ctx.$implicit;
-        i0.ɵɵproperty("ngIf", user_r2.firstname && user_r2.lastname);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", user_r2.name);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", user_r2.username);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", user_r2.email);
+    setLanguage(language) {
+        if (language !== this.selectedLanguage) {
+            this.redirect(language);
+        }
     }
-}
-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
-                ? [user.firstname, user.lastname].join(' ').trim()
-                : null)) !== null && _b !== void 0 ? _b : user.username;
-        }));
+    autoRedirect() {
+        if (localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY)) {
+            this.redirect(localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY));
+        }
     }
-}
-UserProfileIconComponent.ɵfac = function UserProfileIconComponent_Factory(t) { return new (t || UserProfileIconComponent)(i0.ɵɵdirectiveInject(UserService)); };
-UserProfileIconComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserProfileIconComponent, selectors: [["rxap-user-profile-icon"]], hostAttrs: [1, "rxap-user-profile-icon"], decls: 7, vars: 11, consts: [["fxLayout", "row", "fxLayoutAlign", "center center", 1, "profile-icon", 3, "matMenuTriggerFor", "rxapAvatarBackgroundImage", "name"], [3, "yPosition"], ["menu", "matMenu"], [3, "ngIf"], ["mat-menu-item", "", 4, "ngIf"], ["mat-menu-item", ""]], template: function UserProfileIconComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelement(0, "button", 0);
-            i0.ɵɵpipe(1, "async");
-            i0.ɵɵpipe(2, "async");
-            i0.ɵɵelementStart(3, "mat-menu", 1, 2);
-            i0.ɵɵtemplate(5, UserProfileIconComponent_ng_template_5_Template, 4, 4, "ng-template", 3);
-            i0.ɵɵpipe(6, "async");
-            i0.ɵɵelementEnd();
+    redirect(language) {
+        const currentUrl = location.origin + location.pathname + location.search;
+        const redirectUrl = location.origin +
+            `/${language}` +
+            location.pathname.replace(new RegExp(`^\/${this.selectedLanguage}`), '') +
+            location.search;
+        this.selectedLanguage = language;
+        localStorage.setItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY, language);
+        if (currentUrl !== redirectUrl) {
+            if (this.checkLastChange()) {
+                location.replace(redirectUrl);
+            }
         }
-        if (rf & 2) {
-            const _r0 = i0.ɵɵreference(4);
-            let tmp_2_0;
-            i0.ɵɵproperty("matMenuTriggerFor", _r0)("rxapAvatarBackgroundImage", i0.ɵɵpipeBind1(1, 5, ctx.userProfileUrl$))("name", (tmp_2_0 = i0.ɵɵpipeBind1(2, 7, ctx.userName$)) !== null && tmp_2_0 !== undefined ? tmp_2_0 : "");
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("yPosition", "below");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 9, ctx.userService.user$));
+        else {
+            console.log('Redirect not required');
         }
-    }, 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', 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(['/']);
+    checkLastChange() {
+        const lastChangeString = localStorage.getItem(RXAP_SELECTED_LANGUAGE_CHANGE_LOCAL_STORAGE_KEY);
+        if (lastChangeString) {
+            if (Date.now() - parseInt(lastChangeString, 10) < 1000) {
+                return false;
+            }
+        }
+        localStorage.setItem(RXAP_SELECTED_LANGUAGE_CHANGE_LOCAL_STORAGE_KEY, Date.now().toFixed(0));
+        return true;
     }
 }
-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 });
+LanguageSelectorService.ɵfac = function LanguageSelectorService_Factory(t) { return new (t || LanguageSelectorService)(i0.ɵɵinject(ConfigService)); };
+LanguageSelectorService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LanguageSelectorService, factory: LanguageSelectorService.ɵfac, providedIn: 'root' });
 (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: [""] }]
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorService, [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], function () {
-        return [{ type: i1$4.Router, decorators: [{
+        return [{ type: i1$5.ConfigService, decorators: [{
                         type: Inject,
-                        args: [Router]
+                        args: [ConfigService]
                     }] }];
     }, 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));
+class LanguageSelectorComponent {
+    constructor(language) {
+        this.language = language;
     }
 }
-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) {
+LanguageSelectorComponent.ɵfac = function LanguageSelectorComponent_Factory(t) { return new (t || LanguageSelectorComponent)(i0.ɵɵdirectiveInject(LanguageSelectorService)); };
+LanguageSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageSelectorComponent, selectors: [["rxap-language-selector"]], hostAttrs: [1, "rxap-language-selector"], decls: 2, vars: 3, consts: [[3, "ngIf"], ["appearance", "outline", 1, "language-selector"], [3, "ngModel", "ngModelChange"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"]], template: function LanguageSelectorComponent_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");
+            i0.ɵɵtemplate(0, LanguageSelectorComponent_ng_template_0_Template, 5, 4, "ng-template", 0);
+            i0.ɵɵpipe(1, "keyvalue");
         }
         if (rf & 2) {
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.navigating$));
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.language.languages).length);
         }
-    }, directives: [i2.NgIf, i2$3.MatProgressBar], pipes: [i2.AsyncPipe], styles: [""], changeDetection: 0 });
+    }, dependencies: [i2$3.MatFormField, i3$3.MatSelect, i4$1.MatOption, i2$1.NgForOf, i2$1.NgIf, i6.NgControlStatus, i6.NgModel, i2$1.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(NavigationProgressBarComponent, [{
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponent, [{
             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);
+            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 HeaderComponent_mat_toolbar_row_1_ng_container_1_Template(rf, ctx) {
@@ -706,7 +704,7 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.settingsMenuPanel);
         }
-    }, 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 });
+    }, dependencies: [i2.MatToolbar, i2.MatToolbarRow, SignOutComponent, UserProfileIconComponent, NavigationProgressBarComponent, SidenavToggleButtonComponent, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i5$1.DefaultClassDirective, i2$1.NgClass, i2$1.NgComponentOutlet, i2$1.NgForOf, i2$1.NgIf, i1$1.MatButton, i2$2.MatIcon, i1$2.MatMenuTrigger, AppsButtonComponent, LanguageSelectorComponent, i2$1.AsyncPipe], styles: [".content[_ngcontent-%COMP%]{width:100%;height:64px}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
             type: Component,
@@ -717,7 +715,7 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
         return [{ type: i1.HeaderService, decorators: [{
                         type: Inject,
                         args: [HeaderService]
-                    }] }, { type: i6$1.UserService, decorators: [{
+                    }] }, { type: i3.UserService, decorators: [{
                         type: Inject,
                         args: [UserService]
                     }] }, { type: undefined, decorators: [{
@@ -739,11 +737,9 @@ class SignOutComponentModule {
 }
 SignOutComponentModule.ɵfac = function SignOutComponentModule_Factory(t) { return new (t || SignOutComponentModule)(); };
 SignOutComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SignOutComponentModule });
-SignOutComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatButtonModule,
-            MatIconModule,
-            SignOutDirectiveModule,
-        ]] });
+SignOutComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatButtonModule,
+        MatIconModule,
+        SignOutDirectiveModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SignOutComponentModule, [{
             type: NgModule,
@@ -768,13 +764,11 @@ class UserProfileIconComponentModule {
 }
 UserProfileIconComponentModule.ɵfac = function UserProfileIconComponentModule_Factory(t) { return new (t || UserProfileIconComponentModule)(); };
 UserProfileIconComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: UserProfileIconComponentModule });
-UserProfileIconComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatMenuModule,
-            MatIconModule,
-            CommonModule,
-            FlexLayoutModule,
-            AvatarBackgroundImageDirectiveModule,
-        ]] });
+UserProfileIconComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatMenuModule,
+        MatIconModule,
+        CommonModule,
+        FlexLayoutModule,
+        AvatarBackgroundImageDirectiveModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserProfileIconComponentModule, [{
             type: NgModule,
@@ -803,10 +797,8 @@ class NavigationProgressBarComponentModule {
 }
 NavigationProgressBarComponentModule.ɵfac = function NavigationProgressBarComponentModule_Factory(t) { return new (t || NavigationProgressBarComponentModule)(); };
 NavigationProgressBarComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NavigationProgressBarComponentModule });
-NavigationProgressBarComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatProgressBarModule,
-            CommonModule
-        ]] });
+NavigationProgressBarComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatProgressBarModule,
+        CommonModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationProgressBarComponentModule, [{
             type: NgModule,
@@ -829,11 +821,9 @@ class SidenavToggleButtonComponentModule {
 }
 SidenavToggleButtonComponentModule.ɵfac = function SidenavToggleButtonComponentModule_Factory(t) { return new (t || SidenavToggleButtonComponentModule)(); };
 SidenavToggleButtonComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SidenavToggleButtonComponentModule });
-SidenavToggleButtonComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatIconModule,
-            CommonModule,
-            MatButtonModule
-        ]] });
+SidenavToggleButtonComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatIconModule,
+        CommonModule,
+        MatButtonModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponentModule, [{
             type: NgModule,
@@ -868,11 +858,11 @@ ResetButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResetB
             i0.ɵɵtext(2, "refresh");
             i0.ɵɵelementEnd()();
         }
-    }, directives: [i1$1.MatButton, i3$1.MatIcon], styles: [""], changeDetection: 0 });
+    }, dependencies: [i2$2.MatIcon, i1$1.MatButton], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResetButtonComponent, [{
             type: Component,
-            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: [""] }]
+            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" }]
         }], function () {
         return [{ type: i1.ResetService, decorators: [{
                         type: Inject,
@@ -885,10 +875,8 @@ class ResetButtonComponentModule {
 }
 ResetButtonComponentModule.ɵfac = function ResetButtonComponentModule_Factory(t) { return new (t || ResetButtonComponentModule)(); };
 ResetButtonComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ResetButtonComponentModule });
-ResetButtonComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatIconModule,
-            MatButtonModule
-        ]] });
+ResetButtonComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatIconModule,
+        MatButtonModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResetButtonComponentModule, [{
             type: NgModule,
@@ -911,15 +899,13 @@ class AppsButtonComponentModule {
 }
 AppsButtonComponentModule.ɵfac = function AppsButtonComponentModule_Factory(t) { return new (t || AppsButtonComponentModule)(); };
 AppsButtonComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AppsButtonComponentModule });
-AppsButtonComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatButtonModule,
-            MatIconModule,
-            MatGridListModule,
-            OverlayModule,
-            FlexLayoutModule,
-            CommonModule,
-            RouterModule
-        ]] });
+AppsButtonComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatButtonModule,
+        MatIconModule,
+        MatGridListModule,
+        OverlayModule,
+        FlexLayoutModule,
+        CommonModule,
+        RouterModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppsButtonComponentModule, [{
             type: NgModule,
@@ -952,11 +938,9 @@ class LanguageSelectorComponentModule {
 }
 LanguageSelectorComponentModule.ɵfac = function LanguageSelectorComponentModule_Factory(t) { return new (t || LanguageSelectorComponentModule)(); };
 LanguageSelectorComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LanguageSelectorComponentModule });
-LanguageSelectorComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatSelectModule,
-            CommonModule,
-            FormsModule
-        ]] });
+LanguageSelectorComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatSelectModule,
+        CommonModule,
+        FormsModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponentModule, [{
             type: NgModule,
@@ -981,21 +965,19 @@ class HeaderModule {
 }
 HeaderModule.ɵfac = function HeaderModule_Factory(t) { return new (t || HeaderModule)(); };
 HeaderModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: HeaderModule });
-HeaderModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatToolbarModule,
-            SignOutComponentModule,
-            UserProfileIconComponentModule,
-            NavigationProgressBarComponentModule,
-            SidenavToggleButtonComponentModule,
-            ResetButtonComponentModule,
-            FlexLayoutModule,
-            CommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatMenuModule,
-            AppsButtonComponentModule,
-            LanguageSelectorComponentModule
-        ]] });
+HeaderModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatToolbarModule,
+        SignOutComponentModule,
+        UserProfileIconComponentModule,
+        NavigationProgressBarComponentModule,
+        SidenavToggleButtonComponentModule,
+        ResetButtonComponentModule,
+        FlexLayoutModule,
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        AppsButtonComponentModule,
+        LanguageSelectorComponentModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderModule, [{
             type: NgModule,
@@ -1067,7 +1049,7 @@ LayoutComponentService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: L
                     }, {
                         type: Inject,
                         args: [RXAP_LOGO_CONFIG]
-                    }] }, { type: i1$2.ConfigService, decorators: [{
+                    }] }, { type: i1$5.ConfigService, decorators: [{
                         type: Inject,
                         args: [ConfigService]
                     }] }];
@@ -1126,13 +1108,13 @@ class SidenavComponentService {
         this.collapsed$.next(!this.collapsed$.value);
     }
 }
-SidenavComponentService.ɵfac = function SidenavComponentService_Factory(t) { return new (t || SidenavComponentService)(i0.ɵɵinject(i1$2.ConfigService)); };
+SidenavComponentService.ɵfac = function SidenavComponentService_Factory(t) { return new (t || SidenavComponentService)(i0.ɵɵinject(i1$5.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$2.ConfigService }]; }, null);
+        }], function () { return [{ type: i1$5.ConfigService }]; }, null);
 })();
 
 function IsNavigationDividerItem(item) {
@@ -1359,7 +1341,7 @@ function NavigationItemComponent_ng_template_7_Template(rf, ctx) {
     if (rf & 1) {
         const _r12 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 8);
-        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.ɵɵlistener("mouseenter", function NavigationItemComponent_ng_template_7_Template_div_mouseenter_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(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 i0.ɵɵresetView(ctx_r13.onMouseleave()); });
         i0.ɵɵelementStart(1, "ul");
         i0.ɵɵtemplate(2, NavigationItemComponent_ng_template_7_li_2_Template, 2, 1, "li", 9);
         i0.ɵɵelementEnd()();
@@ -1550,7 +1532,7 @@ __decorate([
                         ]),
                     ], 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: [{
+        return [{ type: i3$1.Router, decorators: [{
                         type: Inject,
                         args: [Router]
                     }] }, { type: SidenavComponentService, decorators: [{
@@ -1562,7 +1544,7 @@ __decorate([
                     }] }, { type: i0.Renderer2, decorators: [{
                         type: Inject,
                         args: [Renderer2]
-                    }] }, { type: i3$3.Overlay, decorators: [{
+                    }] }, { type: i3$2.Overlay, decorators: [{
                         type: Inject,
                         args: [Overlay]
                     }] }, { type: i0.ViewContainerRef, decorators: [{
@@ -1701,7 +1683,7 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
         if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.items);
         }
-    }, 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 });
+    }, dependencies: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i2$1.NgForOf, i2$1.NgIf, i3$4.MatDivider, NavigationItemComponent, i2$1.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)
@@ -1846,7 +1828,7 @@ SidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavCom
             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, 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 });
+    }, dependencies: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i5$1.DefaultShowHideDirective, i5$1.DefaultClassDirective, NavigationComponent, i2$1.NgClass, i2$1.NgIf, i2$1.NgTemplateOutlet, i3$4.MatDivider, i2$2.MatIcon, i1$1.MatButton, i2$1.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,
@@ -1923,7 +1905,7 @@ SidenavContentComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sid
         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 });
+    }, dependencies: [i2$1.NgClass, i2$1.NgStyle, i3$1.RouterOutlet, i2$1.AsyncPipe], styles: [".container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]{padding:0;overflow:auto;height:100%}"], changeDetection: 0 });
 __decorate([
     Required,
     __metadata("design:type", MatSidenav)
@@ -1937,60 +1919,6 @@ __decorate([
             }] });
 })();
 
-function ToggleWindowSidenavButtonComponent_ng_template_2_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "mat-icon");
-        i0.ɵɵtext(1, "keyboard_arrow_left");
-        i0.ɵɵelementEnd();
-    }
-}
-function ToggleWindowSidenavButtonComponent_ng_template_3_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "mat-icon");
-        i0.ɵɵtext(1, "keyboard_arrow_right");
-        i0.ɵɵelementEnd();
-    }
-}
-class ToggleWindowSidenavButtonComponent {
-    constructor() {
-        this.openWindowSidenav = false;
-        this.openWindowSidenavChange = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    toggle() {
-        this.openWindowSidenav = !this.openWindowSidenav;
-        this.openWindowSidenavChange.emit(this.openWindowSidenav);
-    }
-}
-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)(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()();
-        }
-        if (rf & 2) {
-            const _r1 = i0.ɵɵreference(4);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIfElse", _r1)("ngIf", !ctx.openWindowSidenav);
-        }
-    }, 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', 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: [{
-                type: Output
-            }] });
-})();
-
 function WindowContainerSidenavComponent_div_1_ng_template_1_Template(rf, ctx) { }
 function WindowContainerSidenavComponent_div_1_Template(rf, ctx) {
     if (rf & 1) {
@@ -2051,7 +1979,7 @@ WindowContainerSidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.portals.keys())("ngForTrackBy", ctx.trackBy);
         }
-    }, directives: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i2.NgForOf, i1$3.DefaultFlexDirective, i4.CdkPortalOutlet], styles: [".container[_ngcontent-%COMP%]{padding:8px}"], changeDetection: 0 });
+    }, dependencies: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultFlexDirective, i2$1.NgForOf, i4.CdkPortalOutlet], styles: [".container[_ngcontent-%COMP%]{padding:8px}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WindowContainerSidenavComponent, [{
             type: Component,
@@ -2064,6 +1992,60 @@ WindowContainerSidenavComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
     }, null);
 })();
 
+function ToggleWindowSidenavButtonComponent_ng_template_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-icon");
+        i0.ɵɵtext(1, "keyboard_arrow_left");
+        i0.ɵɵelementEnd();
+    }
+}
+function ToggleWindowSidenavButtonComponent_ng_template_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-icon");
+        i0.ɵɵtext(1, "keyboard_arrow_right");
+        i0.ɵɵelementEnd();
+    }
+}
+class ToggleWindowSidenavButtonComponent {
+    constructor() {
+        this.openWindowSidenav = false;
+        this.openWindowSidenavChange = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    toggle() {
+        this.openWindowSidenav = !this.openWindowSidenav;
+        this.openWindowSidenavChange.emit(this.openWindowSidenav);
+    }
+}
+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)(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()();
+        }
+        if (rf & 2) {
+            const _r1 = i0.ɵɵreference(4);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIfElse", _r1)("ngIf", !ctx.openWindowSidenav);
+        }
+    }, dependencies: [i1$1.MatButton, i2$2.MatIcon, i2$1.NgIf], 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', 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: [{
+                type: Output
+            }] });
+})();
+
 const _c0 = function () { return ["/"]; };
 function LayoutComponent_ng_template_8_Template(rf, ctx) {
     if (rf & 1) {
@@ -2127,7 +2109,7 @@ LayoutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutCompo
             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, 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 });
+    }, dependencies: [i2$4.MatSidenav, i2$4.MatSidenavContainer, i2$4.MatSidenavContent, FooterComponent, HeaderComponent, SidenavComponent, SidenavHeaderDirective, SidenavContentComponent, WindowContainerSidenavComponent, ToggleWindowSidenavButtonComponent, i3$1.RouterLink, i2$1.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,
@@ -2190,20 +2172,18 @@ class NavigationComponentModule {
 }
 NavigationComponentModule.ɵfac = function NavigationComponentModule_Factory(t) { return new (t || NavigationComponentModule)(); };
 NavigationComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NavigationComponentModule });
-NavigationComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatIconModule,
-            MatButtonModule,
-            FlexLayoutModule,
-            RouterModule,
-            CommonModule,
-            IconDirectiveModule,
-            ButtonComponentModule,
-            MatRippleModule,
-            MatDividerModule,
-            StopPropagationDirectiveModule,
-            MatTooltipModule,
-            ReplaceRouterPathsPipeModule
-        ]] });
+NavigationComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatIconModule,
+        MatButtonModule,
+        FlexLayoutModule,
+        RouterModule,
+        CommonModule,
+        IconDirectiveModule,
+        ButtonComponentModule,
+        MatRippleModule,
+        MatDividerModule,
+        StopPropagationDirectiveModule,
+        MatTooltipModule,
+        ReplaceRouterPathsPipeModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponentModule, [{
             type: NgModule,
@@ -2241,20 +2221,18 @@ NavigationComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports:
             MatTooltipModule,
             ReplaceRouterPathsPipeModule], exports: [NavigationComponent] });
 })();
-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]);
+i0.ɵɵsetComponentScope(NavigationItemComponent, [i2$2.MatIcon, i1$3.DefaultFlexDirective, i3$1.RouterLinkWithHref, i3$1.RouterLinkActive, i2$1.NgForOf, i2$1.NgIf, i5$2.IconDirective, i4$1.MatRipple, i7.MatTooltip, NavigationComponent], [i2$1.AsyncPipe]);
 
 class SidenavModule {
 }
 SidenavModule.ɵfac = function SidenavModule_Factory(t) { return new (t || SidenavModule)(); };
 SidenavModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SidenavModule });
-SidenavModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            FlexLayoutModule,
-            NavigationComponentModule,
-            CommonModule,
-            MatDividerModule,
-            MatIconModule,
-            MatButtonModule
-        ]] });
+SidenavModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FlexLayoutModule,
+        NavigationComponentModule,
+        CommonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatButtonModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavModule, [{
             type: NgModule,
@@ -2285,10 +2263,8 @@ class SidenavContentModule {
 }
 SidenavContentModule.ɵfac = function SidenavContentModule_Factory(t) { return new (t || SidenavContentModule)(); };
 SidenavContentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SidenavContentModule });
-SidenavContentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            CommonModule,
-            RouterModule
-        ]] });
+SidenavContentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        RouterModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavContentModule, [{
             type: NgModule,
@@ -2311,11 +2287,9 @@ class WindowContainerSidenavModule {
 }
 WindowContainerSidenavModule.ɵfac = function WindowContainerSidenavModule_Factory(t) { return new (t || WindowContainerSidenavModule)(); };
 WindowContainerSidenavModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: WindowContainerSidenavModule });
-WindowContainerSidenavModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            FlexLayoutModule,
-            CommonModule,
-            PortalModule,
-        ]] });
+WindowContainerSidenavModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FlexLayoutModule,
+        CommonModule,
+        PortalModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WindowContainerSidenavModule, [{
             type: NgModule,
@@ -2340,11 +2314,9 @@ class ToggleWindowSidenavButtonModule {
 }
 ToggleWindowSidenavButtonModule.ɵfac = function ToggleWindowSidenavButtonModule_Factory(t) { return new (t || ToggleWindowSidenavButtonModule)(); };
 ToggleWindowSidenavButtonModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ToggleWindowSidenavButtonModule });
-ToggleWindowSidenavButtonModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatButtonModule,
-            MatIconModule,
-            CommonModule,
-        ]] });
+ToggleWindowSidenavButtonModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatButtonModule,
+        MatIconModule,
+        CommonModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleWindowSidenavButtonModule, [{
             type: NgModule,
@@ -2380,18 +2352,16 @@ class LayoutModule {
 }
 LayoutModule.ɵfac = function LayoutModule_Factory(t) { return new (t || LayoutModule)(); };
 LayoutModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LayoutModule });
-LayoutModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            MatSidenavModule,
-            FooterModule,
-            HeaderModule,
-            CommonModule,
-            SidenavModule,
-            SidenavContentModule,
-            WindowContainerSidenavModule,
-            ToggleWindowSidenavButtonModule,
-            FlexLayoutModule,
-            RouterModule
-        ]] });
+LayoutModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatSidenavModule,
+        FooterModule,
+        HeaderModule,
+        CommonModule,
+        SidenavModule,
+        SidenavContentModule,
+        WindowContainerSidenavModule,
+        ToggleWindowSidenavButtonModule,
+        FlexLayoutModule,
+        RouterModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutModule, [{
             type: NgModule,
@@ -2473,7 +2443,7 @@ VersionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VersionCom
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, ctx.modules));
         }
-    }, directives: [i1$3.DefaultFlexDirective, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultLayoutGapDirective, i2.NgForOf], pipes: [i2.KeyValuePipe], styles: [".version[_ngcontent-%COMP%]{width:100%;font-size:9px;padding:8px}.version[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%]{padding-bottom:12px;font-size:10px}"], changeDetection: 0 });
+    }, dependencies: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i2$1.NgForOf, i2$1.KeyValuePipe], styles: [".version[_ngcontent-%COMP%]{width:100%;font-size:9px;padding:8px}.version[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%]{padding-bottom:12px;font-size:10px}"], changeDetection: 0 });
 __decorate([
     Required,
     __metadata("design:type", Object)
@@ -2494,10 +2464,8 @@ class VersionComponentModule {
 }
 VersionComponentModule.ɵfac = function VersionComponentModule_Factory(t) { return new (t || VersionComponentModule)(); };
 VersionComponentModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: VersionComponentModule });
-VersionComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
-            FlexLayoutModule,
-            CommonModule
-        ]] });
+VersionComponentModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FlexLayoutModule,
+        CommonModule] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VersionComponentModule, [{
             type: NgModule,