@rxap/layout 16.0.0-dev.2 → 16.0.0-dev.21

package/fesm2022/rxap-layout.mjs

@@ -1,54 +1,57 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Optional, Injectable, Input, EventEmitter, Output, TemplateRef, Directive, INJECTOR, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, ViewChild, HostBinding, HostListener, ChangeDetectorRef, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, LOCALE_ID, Injectable, Inject, signal, Optional, isDevMode, Input, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, forwardRef, ViewChild, HostBinding, INJECTOR, ChangeDetectorRef, TemplateRef, Directive, ContentChild, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@rxap/services';
-import { HeaderService, ResetService, WindowContainerSidenavService, FooterService, VersionService } from '@rxap/services';
+import { HeaderService, ResetService, VersionService, WindowContainerSidenavService, FooterService } from '@rxap/services';
 import * as i3 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { NgIf, NgFor, AsyncPipe, NgStyle, NgClass, KeyValuePipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
-import { Subscription, BehaviorSubject, combineLatest, ReplaySubject, of, from } from 'rxjs';
-import { filter, map, tap, switchMap, catchError, startWith, delay, skip, distinctUntilChanged } from 'rxjs/operators';
-import * as i2$7 from '@angular/material/sidenav';
-import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import * as i4 from '@rxap/authentication';
-import { SignOutDirective, UserService } from '@rxap/authentication';
-import * as i2$3 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i2$1 from '@angular/router';
-import { NavigationStart, NavigationEnd, NavigationCancel, Router, RouterOutlet, RouterLinkActive, RouterLink } from '@angular/router';
-import * as i1$1 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i2$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i1$2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import { isDefined } from '@rxap/utilities/rxjs';
-import { AvatarBackgroundImageDirective } from '@rxap/directives';
-import * as i1$3 from '@angular/flex-layout/flex';
-import { FlexModule } from '@angular/flex-layout/flex';
-import * as i1$4 from '@rxap/config';
-import { ConfigService } from '@rxap/config';
-import * as i2$4 from '@angular/flex-layout/extended';
-import { ExtendedModule } from '@angular/flex-layout/extended';
-import * as i7 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';
-import * as i4$1 from '@angular/material/core';
-import { MatOptionModule, MatRippleModule } from '@angular/material/core';
+import * as i3$2 from '@angular/common';
+import { NgIf, NgFor, AsyncPipe, NgOptimizedImage, KeyValuePipe, CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i1$3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/core';
+import { MatOptionModule, MatRippleModule } from '@angular/material/core';
+import * as i2$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i2$5 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { __decorate, __metadata } from 'tslib';
-import { Required, DebounceCall, coerceBoolean } from '@rxap/utilities';
+import * as i3$4 from '@angular/material/sidenav';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { DataSourceCollectionDirective } from '@rxap/data-source/directive';
+import { StopPropagationDirective } from '@rxap/directives';
+import { StatusIndicatorComponent } from '@rxap/ngx-status-check';
+import { switchMap, filter as filter$1, Subscription, BehaviorSubject, debounceTime, ReplaySubject, of, from, combineLatest } from 'rxjs';
+import { filter, tap, map, switchMap as switchMap$1, startWith, catchError } from 'rxjs/operators';
+import * as i1$5 from '@angular/flex-layout/flex';
+import { FlexModule } from '@angular/flex-layout/flex';
+import * as i1$2 from '@rxap/authentication';
+import { ClickOnLink } from '@rxap/browser-utilities';
+import * as i1$1 from '@rxap/config';
+import { ConfigService } from '@rxap/config';
+import { JoinPath, coerceBoolean } from '@rxap/utilities';
+import * as i2$3 from '@angular/router';
+import { NavigationStart, NavigationEnd, NavigationCancel, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
+import * as i1$4 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { DetermineReleaseName, RXAP_ENVIRONMENT } from '@rxap/environment';
+import * as i2$4 from '@rxap/icon';
+import * as i3$3 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import { trigger, transition, style, animate } from '@angular/animations';
+import * as i6$1 from '@angular/cdk/overlay';
+import { Overlay } from '@angular/cdk/overlay';
 import { IconDirective } from '@rxap/material-directives/icon';
-import * as i2$6 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$5 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
+import * as i2$5 from '@angular/flex-layout/extended';
+import { ExtendedModule } from '@angular/flex-layout/extended';
 
 const RXAP_NAVIGATION_CONFIG = new InjectionToken('rxap/layout/navigation-config');
 const RXAP_NAVIGATION_CONFIG_INSERTS = new InjectionToken('rxap/layout/navigation-config-inserts');
@@ -57,509 +60,273 @@ const RXAP_HEADER_COMPONENT = new InjectionToken('rxap/layout/header-component')
 const RXAP_LOGO_CONFIG = new InjectionToken('rxap/layout/logo-config');
 const RXAP_LAYOUT_APPS_GRID = new InjectionToken('rxap/layout/apps-grid');
 
-function FooterComponent_ng_template_0_mat_toolbar_0_mat_toolbar_row_1_ng_template_1_Template(rf, ctx) { }
-function FooterComponent_ng_template_0_mat_toolbar_0_mat_toolbar_row_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-toolbar-row");
-    i0.ɵɵtemplate(1, FooterComponent_ng_template_0_mat_toolbar_0_mat_toolbar_row_1_ng_template_1_Template, 0, 0, "ng-template", 4);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const portal_r4 = ctx.$implicit;
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("cdkPortalOutlet", portal_r4);
-} }
-function FooterComponent_ng_template_0_mat_toolbar_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-toolbar", 2);
-    i0.ɵɵtemplate(1, FooterComponent_ng_template_0_mat_toolbar_0_mat_toolbar_row_1_Template, 2, 1, "mat-toolbar-row", 3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const portals_r1 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", portals_r1);
-} }
-function FooterComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, FooterComponent_ng_template_0_mat_toolbar_0_Template, 2, 1, "mat-toolbar", 1);
-} if (rf & 2) {
-    const portals_r1 = ctx.$implicit;
-    i0.ɵɵproperty("ngIf", portals_r1.length);
-} }
 class FooterComponent {
     constructor(footerService) {
         this.footerService = footerService;
     }
-    static { this.ɵfac = function FooterComponent_Factory(t) { return new (t || FooterComponent)(i0.ɵɵdirectiveInject(i1.FooterService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterComponent, selectors: [["rxap-footer"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 3, consts: [[3, "ngIf"], ["class", "footer mat-elevation-z1", 4, "ngIf"], [1, "footer", "mat-elevation-z1"], [4, "ngFor", "ngForOf"], [3, "cdkPortalOutlet"]], template: function FooterComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, FooterComponent_ng_template_0_Template, 1, 1, "ng-template", 0);
-            i0.ɵɵpipe(1, "async");
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.footerService.portals$));
-        } }, dependencies: [NgIf, MatToolbarModule, i2.MatToolbar, i2.MatToolbarRow, NgFor, PortalModule, i3.CdkPortalOutlet, AsyncPipe], changeDetection: 0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FooterComponent, deps: [{ token: i1.FooterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: FooterComponent, isStandalone: true, selector: "rxap-footer", ngImport: i0, 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: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, MatToolbarModule, NgFor, PortalModule, AsyncPipe], 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); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, MatToolbarModule, NgFor, PortalModule, AsyncPipe], 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" }]
+        }], ctorParameters: function () { return [{ type: i1.FooterService }]; } });
 
-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 AppUrlService {
+    constructor(config, localeId, userProfileService) {
+        this.config = config;
+        this.localeId = localeId;
+        this.userProfileService = userProfileService;
+        this._apps = this.config.get('navigation.apps', []);
+    }
+    getApp(appId) {
+        return this._apps.find(app => app.id === appId) ?? null;
+    }
+    getAppUrl(appId, path) {
+        const app = this.getApp(appId);
+        if (app) {
+            const prefix = this.getPathPrefix();
+            return JoinPath(app.href, prefix, path);
+        }
+        return null;
     }
-    static { this.ɵfac = function NavigationProgressBarComponent_Factory(t) { return new (t || NavigationProgressBarComponent)(i0.ɵɵdirectiveInject(Router)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationProgressBarComponent, selectors: [["rxap-navigation-progress-bar"]], hostAttrs: [1, "rxap-navigation-progress-bar"], standalone: true, features: [i0.ɵɵStandaloneFeature], 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: [NgIf, MatProgressBarModule, i1$1.MatProgressBar, AsyncPipe], changeDetection: 0 }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationProgressBarComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-navigation-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-navigation-progress-bar' }, standalone: true, imports: [NgIf, MatProgressBarModule, AsyncPipe], template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  mode=\"indeterminate\"\n  color=\"accent\"\n></mat-progress-bar>\n" }]
-    }], function () { return [{ type: i2$1.Router, decorators: [{
-                type: Inject,
-                args: [Router]
-            }] }]; }, null); })();
-
-class SignOutComponent {
-    constructor(router) {
-        this.router = router;
+    navigate(appId, path) {
+        const url = this.getAppUrl(appId, path);
+        if (url) {
+            ClickOnLink(url);
+        }
     }
-    redirectToRoot() {
-        this.router.navigate(['/']);
-    }
-    static { this.ɵfac = function SignOutComponent_Factory(t) { return new (t || SignOutComponent)(i0.ɵɵdirectiveInject(Router)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SignOutComponent, selectors: [["rxap-sign-out"]], hostAttrs: [1, "rxap-sign-out"], standalone: true, features: [i0.ɵɵStandaloneFeature], 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()();
-        } }, dependencies: [MatButtonModule, i1$2.MatIconButton, SignOutDirective, MatIconModule, i2$2.MatIcon], changeDetection: 0 }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SignOutComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-sign-out', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-sign-out' }, standalone: true, imports: [MatButtonModule, SignOutDirective, MatIconModule], template: "<button\n  rxapSignOut\n  (successful)=\"redirectToRoot()\"\n  mat-icon-button\n>\n  <mat-icon>login</mat-icon>\n</button>\n" }]
-    }], function () { return [{ type: i2$1.Router, decorators: [{
-                type: Inject,
-                args: [Router]
-            }] }]; }, 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) { 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()();
-} if (rf & 2) {
-    const user_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(user_r2.username);
-} }
-function UserProfileIconComponent_ng_template_5_button_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
-    i0.ɵɵtext(2, "email");
-    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.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) => user.photoURL ?? user.avatarUrl));
-        this.userName$ = this.userService.user$.pipe(isDefined(), map((user) => user.name ??
-            (user.firstname || user.lastname
-                ? [user.firstname, user.lastname].join(' ').trim()
-                : null) ??
-            user.username));
-    }
-    static { this.ɵfac = function UserProfileIconComponent_Factory(t) { return new (t || UserProfileIconComponent)(i0.ɵɵdirectiveInject(UserService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserProfileIconComponent, selectors: [["rxap-user-profile-icon"]], hostAttrs: [1, "rxap-user-profile-icon"], standalone: true, features: [i0.ɵɵStandaloneFeature], 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();
-        } 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: [FlexModule, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, MatMenuModule, i2$3.MatMenu, i2$3.MatMenuItem, i2$3.MatMenuTrigger, AvatarBackgroundImageDirective,
-            NgIf,
-            MatIconModule, i2$2.MatIcon, 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 }); }
+    async getAppList() {
+        const roles = await this.userProfileService.getRoleList();
+        return this._apps.filter(app => !app.hidden)
+            .map(app => ({
+            ...app,
+            href: JoinPath(app.href, this.getPathPrefix()),
+        }))
+            .filter(app => !app.permissions ||
+            !app.permissions.length ||
+            app.permissions.every(permission => roles.includes(permission)));
+    }
+    getPathPrefix() {
+        switch (this.localeId) {
+            case 'de-DE':
+                return 'de';
+            case 'en-US':
+                return 'en';
+            default:
+                return 'de';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AppUrlService, deps: [{ token: i1$1.ConfigService }, { token: LOCALE_ID }, { token: i1$2.RxapUserProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AppUrlService, providedIn: 'root' }); }
 }
-(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' }, standalone: true, imports: [
-                    FlexModule,
-                    MatMenuModule,
-                    AvatarBackgroundImageDirective,
-                    NgIf,
-                    MatIconModule,
-                    AsyncPipe
-                ], 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: i4.UserService, decorators: [{
-                type: Inject,
-                args: [UserService]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AppUrlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$1.ConfigService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i1$2.RxapUserProfileService }]; } });
 
-function AppsButtonComponent_ng_template_0_ng_template_4_li_2_a_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 9)(1, "span", 10);
-    i0.ɵɵelement(2, "img", 11);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const item_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("href", item_r4.href, i0.ɵɵsanitizeUrl);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("src", item_r4.image, i0.ɵɵsanitizeUrl);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r4.label);
-} }
-const _c0$5 = function (a0) { return { empty: a0 }; };
-function AppsButtonComponent_ng_template_0_ng_template_4_li_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 7);
-    i0.ɵɵtemplate(1, AppsButtonComponent_ng_template_0_ng_template_4_li_2_a_1_Template, 5, 3, "a", 8);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$5, item_r4.empty));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !item_r4.empty);
-} }
-const _c1$4 = function (a0) { return { columns: a0 }; };
-function AppsButtonComponent_ng_template_0_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4)(1, "ul", 5);
-    i0.ɵɵtemplate(2, AppsButtonComponent_ng_template_0_ng_template_4_li_2_Template, 2, 4, "li", 6);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c1$4, ctx_r2.columns));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r2.gridWithPadding);
-} }
-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 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 i0.ɵɵresetView(ctx_r9.isOpen = false); });
-} if (rf & 2) {
-    const _r1 = i0.ɵɵreference(1);
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("cdkConnectedOverlayOpen", ctx_r0.isOpen)("cdkConnectedOverlayOrigin", _r1);
-} }
 class AppsButtonComponent {
-    get gridWithPadding() {
-        const gridWithPadding = this.grid.slice();
-        while (gridWithPadding.length % this.columns !== 0) {
-            gridWithPadding.push({ empty: true });
-        }
-        return gridWithPadding;
+    constructor(grid, appUrlService, authenticationService) {
+        this.appUrlService = appUrlService;
+        this.authenticationService = authenticationService;
+        this.isOpen = false;
+        this.appList = signal([]);
     }
-    get columns() {
-        if (this.grid.length < 4) {
-            return 1;
-        }
-        if (this.grid.length < 6) {
-            return 2;
+    ngOnInit() {
+        this._subscription = this.authenticationService.isAuthenticated$.pipe(filter(Boolean), switchMap(() => this.appUrlService.getAppList()), tap((apps) => this.appList.set(apps))).subscribe();
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AppsButtonComponent, deps: [{ token: RXAP_LAYOUT_APPS_GRID, optional: true }, { token: AppUrlService }, { token: i1$2.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: AppsButtonComponent, isStandalone: true, selector: "rxap-apps-button", ngImport: i0, template: "<div *ngIf=\"appList()?.length\" class=\"flex flex-row items-center gap-8\">\n\n  <div *ngIf=\"isOpen\" class=\"flex flex-row items-center gap-6\">\n\n    <div *ngFor=\"let app of appList()\" class=\"h-10\">\n      <a [href]=\"app.href\" mat-stroked-button>\n        <span class=\"flex flex-row items-center gap-4\">\n          <img *ngIf=\"app.image\" [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n          <span class=\"label grow-0\">{{app.label}}</span>\n        </span>\n      </a>\n    </div>\n\n  </div>\n\n  <button (click)=\"isOpen = !isOpen\" mat-icon-button>\n    <mat-icon svgIcon=\"apps\"></mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AppsButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-apps-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        FlexModule,
+                        NgFor,
+                        MatButtonModule,
+                        MatIconModule,
+                        NgOptimizedImage,
+                    ], template: "<div *ngIf=\"appList()?.length\" class=\"flex flex-row items-center gap-8\">\n\n  <div *ngIf=\"isOpen\" class=\"flex flex-row items-center gap-6\">\n\n    <div *ngFor=\"let app of appList()\" class=\"h-10\">\n      <a [href]=\"app.href\" mat-stroked-button>\n        <span class=\"flex flex-row items-center gap-4\">\n          <img *ngIf=\"app.image\" [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n          <span class=\"label grow-0\">{{app.label}}</span>\n        </span>\n      </a>\n    </div>\n\n  </div>\n\n  <button (click)=\"isOpen = !isOpen\" mat-icon-button>\n    <mat-icon svgIcon=\"apps\"></mat-icon>\n  </button>\n\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RXAP_LAYOUT_APPS_GRID]
+                }] }, { type: AppUrlService }, { type: i1$2.RxapAuthenticationService }]; } });
+
+class I18nService {
+    constructor(localId, userProfileService) {
+        this.localId = localId;
+        this.userProfileService = userProfileService;
+        this.currentLanguage = this.localId.replace(/-[A-Z]+$/, '');
+    }
+    async setLanguage(language) {
+        await this.userProfileService.setLanguage(language);
+        this.redirect(language);
+    }
+    redirect(next, current = this.currentLanguage) {
+        if (current === next) {
+            console.warn('[I18nService] redirect not required - language unchanged');
+            return;
         }
-        return 3;
+        const redirectUrl = location.origin +
+            location.pathname.replace(new RegExp(`^/${current}`), `/${next}`) +
+            location.search;
+        console.log('[I18nService] redirect to: ' + redirectUrl);
+        location.replace(redirectUrl);
     }
-    constructor(grid, config) {
-        this.config = config;
-        this.isOpen = false;
-        this.grid = [];
-        this.grid = grid ?? this.config.get('navigation.apps') ?? [];
-    }
-    static { this.ɵfac = function AppsButtonComponent_Factory(t) { return new (t || AppsButtonComponent)(i0.ɵɵdirectiveInject(RXAP_LAYOUT_APPS_GRID, 8), i0.ɵɵdirectiveInject(ConfigService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppsButtonComponent, selectors: [["rxap-apps-button"]], hostAttrs: [1, "rxap-apps-button"], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 1, vars: 1, consts: [[3, "ngIf"], ["cdkOverlayOrigin", "", "mat-icon-button", "", 3, "click"], ["trigger", "cdkOverlayOrigin"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOpen", "cdkConnectedOverlayOrigin", "overlayOutsideClick"], [1, "grid-container"], [1, "grid", 3, "ngStyle"], [3, "ngClass", 4, "ngFor", "ngForOf"], [3, "ngClass"], [3, "href", 4, "ngIf"], [3, "href"], ["fxLayout", "column", "fxLayoutAlign", "start center", "fxLayoutGap", "12px"], ["width", "53px", 3, "src"]], template: function AppsButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, AppsButtonComponent_ng_template_0_Template, 5, 2, "ng-template", 0);
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.grid && ctx.grid.length);
-        } }, dependencies: [NgIf,
-            MatButtonModule, i1$2.MatIconButton, CdkOverlayOrigin,
-            MatIconModule, i2$2.MatIcon, CdkConnectedOverlay,
-            ExtendedModule, i2$4.DefaultClassDirective, i2$4.DefaultStyleDirective, NgStyle,
-            NgFor,
-            NgClass,
-            FlexModule, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective], 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nService, deps: [{ token: LOCALE_ID }, { token: i1$2.RxapUserProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nService, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppsButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-apps-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-apps-button' }, standalone: true, imports: [
-                    NgIf,
-                    MatButtonModule,
-                    CdkOverlayOrigin,
-                    MatIconModule,
-                    CdkConnectedOverlay,
-                    ExtendedModule,
-                    NgStyle,
-                    NgFor,
-                    NgClass,
-                    FlexModule
-                ], 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$4.ConfigService, decorators: [{
-                type: Inject,
-                args: [ConfigService]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i1$2.RxapUserProfileService }]; } });
 
-function LanguageSelectorComponent_ng_template_0_mat_option_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-option", 4);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    i0.ɵɵproperty("value", item_r2.key);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(item_r2.value);
-} }
-function LanguageSelectorComponent_ng_template_0_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 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 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 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) {
+    constructor(config, localId, i18nService) {
         this.config = config;
+        this.localId = localId;
+        this.i18nService = i18nService;
         this.languages = this.config.get('i18n.languages') ?? {};
         this.defaultLanguage =
             this.config.get('i18n.defaultLanguage') ??
                 Object.keys(this.languages)[0] ??
                 'en';
-        this.selectedLanguage =
-            localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY) ??
-                this.defaultLanguage;
+        this.selectedLanguage = this.i18nService.currentLanguage;
     }
-    setLanguage(language) {
-        if (language !== this.selectedLanguage) {
-            this.redirect(language);
+    async setLanguage(language) {
+        if (language !== this.i18nService.currentLanguage) {
+            await this.i18nService.setLanguage(language);
         }
     }
-    autoRedirect() {
-        if (localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY)) {
-            this.redirect(localStorage.getItem(RXAP_SELECTED_LANGUAGE_LOCAL_STORAGE_KEY));
-        }
-    }
-    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);
-            }
-        }
-        else {
-            console.log('Redirect not required');
-        }
-    }
-    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;
-    }
-    static { this.ɵfac = function LanguageSelectorService_Factory(t) { return new (t || LanguageSelectorService)(i0.ɵɵinject(ConfigService)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LanguageSelectorService, factory: LanguageSelectorService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LanguageSelectorService, deps: [{ token: i1$1.ConfigService }, { token: LOCALE_ID }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LanguageSelectorService, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1$4.ConfigService, decorators: [{
-                type: Inject,
-                args: [ConfigService]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LanguageSelectorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$1.ConfigService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: I18nService }]; } });
+
 class LanguageSelectorComponent {
     constructor(language) {
         this.language = language;
     }
-    static { this.ɵfac = function LanguageSelectorComponent_Factory(t) { return new (t || LanguageSelectorComponent)(i0.ɵɵdirectiveInject(LanguageSelectorService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LanguageSelectorComponent, selectors: [["rxap-language-selector"]], hostAttrs: [1, "rxap-language-selector"], standalone: true, features: [i0.ɵɵStandaloneFeature], 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, 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.language.languages).length);
-        } }, dependencies: [NgIf,
-            MatFormFieldModule, i2$5.MatFormField, MatSelectModule, i3$1.MatSelect, i4$1.MatOption, FormsModule, i5.NgControlStatus, i5.NgModel, NgFor,
-            MatOptionModule,
-            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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: LanguageSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: LanguageSelectorComponent, isStandalone: true, selector: "rxap-language-selector", ngImport: i0, template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\" rxapStopPropagation>\n      <mat-label i18n>Select Language</mat-label>\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:calc(100% - 32px);margin:0 16px}.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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: StopPropagationDirective, selector: "[rxapStopPropagation]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-language-selector', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-language-selector' }, standalone: true, imports: [
-                    NgIf,
-                    MatFormFieldModule,
-                    MatSelectModule,
-                    FormsModule,
-                    NgFor,
-                    MatOptionModule,
-                    KeyValuePipe
-                ], 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); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-language-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        MatFormFieldModule,
+                        StopPropagationDirective,
+                        MatSelectModule,
+                        FormsModule,
+                        NgFor,
+                        MatOptionModule,
+                        KeyValuePipe,
+                    ], template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\" rxapStopPropagation>\n      <mat-label i18n>Select Language</mat-label>\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:calc(100% - 32px);margin:0 16px}.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"] }]
+        }], ctorParameters: function () { return [{ type: LanguageSelectorService }]; } });
 
-function SidenavToggleButtonComponent_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "menu");
-    i0.ɵɵelementEnd();
-} }
-function SidenavToggleButtonComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "menu_open");
-    i0.ɵɵelementEnd();
-} }
-class SidenavToggleButtonComponent {
-    static { this.ɵfac = function SidenavToggleButtonComponent_Factory(t) { return new (t || SidenavToggleButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavToggleButtonComponent, selectors: [["rxap-sidenav-toggle-button"]], hostAttrs: [1, "rxap-sidenav-toggle-button"], inputs: { sidenav: "sidenav" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 3, vars: 2, consts: [["mat-icon-button", "", 3, "click"], [4, "ngIf"]], template: function SidenavToggleButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "button", 0);
-            i0.ɵɵlistener("click", function SidenavToggleButtonComponent_Template_button_click_0_listener() { return ctx.sidenav.toggle(); });
-            i0.ɵɵtemplate(1, SidenavToggleButtonComponent_mat_icon_1_Template, 2, 0, "mat-icon", 1);
-            i0.ɵɵtemplate(2, SidenavToggleButtonComponent_mat_icon_2_Template, 2, 0, "mat-icon", 1);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !ctx.sidenav.opened);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.sidenav.opened);
-        } }, dependencies: [MatButtonModule, i1$2.MatIconButton, NgIf, MatIconModule, i2$2.MatIcon], changeDetection: 0 }); }
+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));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationProgressBarComponent, deps: [{ token: Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: NavigationProgressBarComponent, isStandalone: true, selector: "rxap-navigation-progress-bar", ngImport: i0, template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  color=\"accent\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    Required,
-    __metadata("design:type", MatSidenav)
-], SidenavToggleButtonComponent.prototype, "sidenav", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-sidenav-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-sidenav-toggle-button' }, standalone: true, imports: [MatButtonModule, NgIf, MatIconModule], 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
-        }] }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-navigation-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        MatProgressBarModule,
+                        AsyncPipe,
+                    ], template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  color=\"accent\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n" }]
+        }], ctorParameters: function () { return [{ type: i2$3.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }]; } });
+
+class SettingsButtonComponent {
+    constructor(theme, route, injector) {
+        this.theme = theme;
+        this.route = route;
+        this.injector = injector;
+        this.isDevMode = isDevMode();
+        this.items = signal([]);
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    ngOnInit() {
+        this._subscription = this.route.data.pipe(map(data => this.getCustomMenuItems(data)), map(items => items.map(item => new ComponentPortal(item, undefined, this.injector))), tap(items => this.items.set(items))).subscribe();
+    }
+    getCustomMenuItems(data) {
+        if (data?.layout?.header?.menu?.items?.length) {
+            return data.layout.header.menu.items;
+        }
+        return [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SettingsButtonComponent, deps: [{ token: i1.ThemeService }, { token: i2$3.ActivatedRoute }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SettingsButtonComponent, isStandalone: true, selector: "rxap-settings-button", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <rxap-language-selector *ngIf=\"!isDevMode\"></rxap-language-selector>\n  <ng-container *ngFor=\"let item of items()\">\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  </ng-container>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LanguageSelectorComponent, selector: "rxap-language-selector" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SettingsButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-settings-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, LanguageSelectorComponent, MatMenuModule, PortalModule], template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <rxap-language-selector *ngIf=\"!isDevMode\"></rxap-language-selector>\n  <ng-container *ngFor=\"let item of items()\">\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  </ng-container>\n</mat-menu>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ThemeService }, { type: i2$3.ActivatedRoute }, { type: i0.Injector }]; } });
+
+class UserProfileIconComponent {
+    constructor(userProfileService, authenticationService) {
+        this.userProfileService = userProfileService;
+        this.authenticationService = authenticationService;
+        this.username = signal(null);
+    }
+    ngOnInit() {
+        this._subscription = this.authenticationService.isAuthenticated$.pipe(filter$1(Boolean), switchMap$1(() => this.userProfileService.getProfile()), filter$1(Boolean), tap((user) => this.username.set(user.username ?? null))).subscribe();
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    async logout() {
+        await this.authenticationService.signOut();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: UserProfileIconComponent, deps: [{ token: i1$2.RxapUserProfileService }, { token: i1$2.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: UserProfileIconComponent, isStandalone: true, selector: "rxap-user-profile-icon", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\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 .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: UserProfileIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-user-profile-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatMenuModule,
+                        MatIconModule,
+                        NgIf,
+                        AsyncPipe,
+                    ], template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\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 .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.RxapUserProfileService }, { type: i1$2.RxapAuthenticationService }]; } });
 
-function HeaderComponent_mat_toolbar_row_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function HeaderComponent_mat_toolbar_row_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-toolbar-row");
-    i0.ɵɵtemplate(1, HeaderComponent_mat_toolbar_row_1_ng_container_1_Template, 1, 0, "ng-container", 7);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const headerComponent_r4 = ctx.$implicit;
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngComponentOutlet", headerComponent_r4);
-} }
-function HeaderComponent_rxap_sidenav_toggle_button_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "rxap-sidenav-toggle-button", 8);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sidenav", ctx_r1.sidenav);
-} }
-function HeaderComponent_rxap_user_profile_icon_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "rxap-user-profile-icon", 5);
-} }
-function HeaderComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "button", 9)(2, "mat-icon");
-    i0.ɵɵtext(3, "settings");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("matMenuTriggerFor", ctx_r3.settingsMenuPanel);
-} }
-const _c0$4 = function (a0) { return { open: a0 }; };
-const _c1$3 = ["*"];
 class HeaderComponent {
-    constructor(headerComponentService, userService, headerComponent) {
+    constructor(headerComponentService, headerComponent) {
         this.headerComponentService = headerComponentService;
-        this.userService = userService;
         this.headerComponent = headerComponent;
         this.components = [];
         this.subscriptions = new Subscription();
-        this.color = 'primary';
-        this.hasUser$ = this.userService.user$.pipe(map(Boolean));
+        this.color = undefined;
     }
     ngOnInit() {
         this.updateComponents();
@@ -573,377 +340,266 @@ class HeaderComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = function HeaderComponent_Factory(t) { return new (t || HeaderComponent)(i0.ɵɵdirectiveInject(HeaderService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(RXAP_HEADER_COMPONENT, 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderComponent, selectors: [["rxap-header"]], hostAttrs: [1, "rxap-layout-header"], inputs: { sidenav: "sidenav", color: "color", settingsMenuPanel: "settingsMenuPanel" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c1$3, decls: 14, vars: 10, consts: [[1, "mat-elevation-z3", 3, "ngClass", "color"], [4, "ngFor", "ngForOf"], ["fxLayout", "row", "fxLayoutAlign", "space-between center", "fxLayoutGap", "16px", 1, "content"], ["fxFlex", "nogrow", 3, "sidenav", 4, "ngIf"], ["fxFlex", "grow"], ["fxFlex", "nogrow"], ["fxFlex", "nogrow", 4, "ngIf"], [4, "ngComponentOutlet"], ["fxFlex", "nogrow", 3, "sidenav"], ["mat-icon-button", "", 3, "matMenuTriggerFor"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "mat-toolbar", 0);
-            i0.ɵɵtemplate(1, HeaderComponent_mat_toolbar_row_1_Template, 2, 1, "mat-toolbar-row", 1);
-            i0.ɵɵelementStart(2, "mat-toolbar-row")(3, "div", 2);
-            i0.ɵɵtemplate(4, HeaderComponent_rxap_sidenav_toggle_button_4_Template, 1, 1, "rxap-sidenav-toggle-button", 3);
-            i0.ɵɵelementStart(5, "div", 4);
-            i0.ɵɵprojection(6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(7, "rxap-language-selector", 5)(8, "rxap-apps-button", 5);
-            i0.ɵɵtemplate(9, HeaderComponent_rxap_user_profile_icon_9_Template, 1, 0, "rxap-user-profile-icon", 6);
-            i0.ɵɵpipe(10, "async");
-            i0.ɵɵtemplate(11, HeaderComponent_div_11_Template, 4, 1, "div", 6);
-            i0.ɵɵelement(12, "rxap-sign-out", 5);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(13, "rxap-navigation-progress-bar");
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$4, ctx.sidenav == null ? null : ctx.sidenav.opened))("color", ctx.color);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.components);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.sidenav);
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(10, 6, ctx.hasUser$));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.settingsMenuPanel);
-        } }, dependencies: [MatToolbarModule, i2.MatToolbar, i2.MatToolbarRow, ExtendedModule, i2$4.DefaultClassDirective, NgClass,
-            NgFor,
-            NgComponentOutlet,
-            FlexModule, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, NgIf,
-            SidenavToggleButtonComponent,
-            LanguageSelectorComponent,
-            AppsButtonComponent,
-            UserProfileIconComponent,
-            MatButtonModule, i1$2.MatIconButton, MatMenuModule, i2$3.MatMenuTrigger, MatIconModule, i2$2.MatIcon, SignOutComponent,
-            NavigationProgressBarComponent,
-            AsyncPipe], styles: [".content[_ngcontent-%COMP%]{width:100%;height:64px}"], changeDetection: 0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: HeaderComponent, deps: [{ token: HeaderService }, { token: RXAP_HEADER_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: HeaderComponent, isStandalone: true, selector: "rxap-header", inputs: { sidenav: "sidenav", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\" [ngClass]=\"{ open: sidenav?.opened }\" class=\"mat-elevation-z3 header\">\n  <div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n    <rxap-status-indicator class=\"grow-0\"></rxap-status-indicator>\n    <div class=\"grow\">\n      <ng-content></ng-content>\n    </div>\n    <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n    <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n    <rxap-user-profile-icon class=\"grow-0\"></rxap-user-profile-icon>\n  </div>\n</mat-toolbar>\n\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: NavigationProgressBarComponent, selector: "rxap-navigation-progress-bar" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon" }, { kind: "component", type: AppsButtonComponent, selector: "rxap-apps-button" }, { kind: "component", type: SettingsButtonComponent, selector: "rxap-settings-button" }, { kind: "component", type: StatusIndicatorComponent, selector: "rxap-status-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatToolbarModule,
+                        NgClass,
+                        NgIf,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        LanguageSelectorComponent,
+                        MatFormFieldModule,
+                        StopPropagationDirective,
+                        MatSelectModule,
+                        FormsModule,
+                        MatOptionModule,
+                        DataSourceCollectionDirective,
+                        MatSlideToggleModule,
+                        AsyncPipe,
+                        NavigationProgressBarComponent,
+                        UserProfileIconComponent,
+                        AppsButtonComponent,
+                        SettingsButtonComponent,
+                        StatusIndicatorComponent,
+                    ], template: "<mat-toolbar [color]=\"color\" [ngClass]=\"{ open: sidenav?.opened }\" class=\"mat-elevation-z3 header\">\n  <div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n    <rxap-status-indicator class=\"grow-0\"></rxap-status-indicator>\n    <div class=\"grow\">\n      <ng-content></ng-content>\n    </div>\n    <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n    <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n    <rxap-user-profile-icon class=\"grow-0\"></rxap-user-profile-icon>\n  </div>\n</mat-toolbar>\n\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.HeaderService, decorators: [{
+                    type: Inject,
+                    args: [HeaderService]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RXAP_HEADER_COMPONENT]
+                }] }]; }, propDecorators: { sidenav: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class SignOutComponent {
+    constructor(authenticationService) {
+        this.authenticationService = authenticationService;
+    }
+    async logout() {
+        await this.authenticationService.signOut();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SignOutComponent, deps: [{ token: i1$2.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SignOutComponent, isStandalone: true, selector: "rxap-sign-out", ngImport: i0, template: "<button\n  mat-icon-button\n  (click)=\"logout()\"\n>\n  <mat-icon svgIcon=\"logout\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-header', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                    class: 'rxap-layout-header'
-                }, standalone: true, imports: [
-                    MatToolbarModule,
-                    ExtendedModule,
-                    NgClass,
-                    NgFor,
-                    NgComponentOutlet,
-                    FlexModule,
-                    NgIf,
-                    SidenavToggleButtonComponent,
-                    LanguageSelectorComponent,
-                    AppsButtonComponent,
-                    UserProfileIconComponent,
-                    MatButtonModule,
-                    MatMenuModule,
-                    MatIconModule,
-                    SignOutComponent,
-                    NavigationProgressBarComponent,
-                    AsyncPipe
-                ], template: "<mat-toolbar [ngClass]=\"{ open: sidenav?.opened }\" [color]=\"color\" class=\"mat-elevation-z3\">\n  <mat-toolbar-row *ngFor=\"let headerComponent of components\">\n    <ng-container *ngComponentOutlet=\"headerComponent\"></ng-container>\n  </mat-toolbar-row>\n  <mat-toolbar-row>\n    <div\n      fxLayout=\"row\"\n      fxLayoutAlign=\"space-between center\"\n      fxLayoutGap=\"16px\"\n      class=\"content\"\n    >\n      <rxap-sidenav-toggle-button *ngIf=\"sidenav\" fxFlex=\"nogrow\" [sidenav]=\"sidenav\"></rxap-sidenav-toggle-button>\n      <div fxFlex=\"grow\">\n        <ng-content></ng-content>\n      </div>\n      <rxap-language-selector fxFlex=\"nogrow\"></rxap-language-selector>\n      <rxap-apps-button fxFlex=\"nogrow\"></rxap-apps-button>\n      <rxap-user-profile-icon *ngIf=\"hasUser$ | async\" fxFlex=\"nogrow\"></rxap-user-profile-icon>\n      <div fxFlex=\"nogrow\" *ngIf=\"settingsMenuPanel\">\n        <button mat-icon-button [matMenuTriggerFor]=\"settingsMenuPanel\">\n          <mat-icon>settings</mat-icon>\n        </button>\n      </div>\n      <rxap-sign-out fxFlex=\"nogrow\"></rxap-sign-out>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n", styles: [".content{width:100%;height:64px}\n"] }]
-    }], function () { return [{ type: i1.HeaderService, decorators: [{
-                type: Inject,
-                args: [HeaderService]
-            }] }, { type: i4.UserService, decorators: [{
-                type: Inject,
-                args: [UserService]
-            }] }, { type: undefined, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [RXAP_HEADER_COMPONENT]
-            }] }]; }, { sidenav: [{
-            type: Input
-        }], color: [{
-            type: Input
-        }], settingsMenuPanel: [{
-            type: Input
-        }] }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SignOutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-sign-out', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<button\n  mat-icon-button\n  (click)=\"logout()\"\n>\n  <mat-icon svgIcon=\"logout\"></mat-icon>\n</button>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.RxapAuthenticationService }]; } });
 
 class ResetButtonComponent {
     constructor(resetService) {
         this.resetService = resetService;
     }
-    static { this.ɵfac = function ResetButtonComponent_Factory(t) { return new (t || ResetButtonComponent)(i0.ɵɵdirectiveInject(ResetService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResetButtonComponent, selectors: [["rxap-reset-button"]], hostAttrs: [1, "rxap-reset-button"], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 3, vars: 0, consts: [["mat-icon-button", "", 3, "click"]], template: function ResetButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "button", 0);
-            i0.ɵɵlistener("click", function ResetButtonComponent_Template_button_click_0_listener() { return ctx.resetService.resetAll(); });
-            i0.ɵɵelementStart(1, "mat-icon");
-            i0.ɵɵtext(2, "refresh");
-            i0.ɵɵelementEnd()();
-        } }, dependencies: [MatButtonModule, i1$2.MatIconButton, MatIconModule, i2$2.MatIcon], changeDetection: 0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ResetButtonComponent, deps: [{ token: ResetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ResetButtonComponent, isStandalone: true, selector: "rxap-reset-button", ngImport: i0, template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon svgIcon=\"refresh\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResetButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-reset-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-reset-button' }, standalone: true, imports: [MatButtonModule, MatIconModule], 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,
-                args: [ResetService]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ResetButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-reset-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon svgIcon=\"refresh\"></mat-icon>\n</button>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ResetService, decorators: [{
+                    type: Inject,
+                    args: [ResetService]
+                }] }]; } });
 
-class LayoutComponentService {
-    constructor(footerComponentService, headerComponentService, logoConfig = null, config) {
-        this.footerComponentService = footerComponentService;
-        this.headerComponentService = headerComponentService;
-        this.config = config;
-        this.opened$ = new BehaviorSubject(true);
-        this.mode$ = new BehaviorSubject('side');
-        this.fixedTopGap$ = new BehaviorSubject(64);
-        this.mode$.next(this.config.get('navigation.mode', this.mode$.value));
-        this.opened$.next(this.config.get('navigation.open', this.opened$.value));
-        this.fixedBottomGap$ = this.footerComponentService.portalCount$.pipe(map(count => count * 64));
-        this.fixedTopGap$.next(this.headerComponentService.countComponent * 64);
-        this.headerComponentService.update$.pipe(tap(() => this.fixedTopGap$.next(this.headerComponentService.countComponent * 64))).subscribe();
-        this.logo = logoConfig ?? {
-            src: '/assets/logo.png',
-            width: '192'
-        };
-    }
-    static { this.ɵfac = function LayoutComponentService_Factory(t) { return new (t || LayoutComponentService)(i0.ɵɵinject(i1.FooterService), i0.ɵɵinject(i1.HeaderService), i0.ɵɵinject(RXAP_LOGO_CONFIG, 8), i0.ɵɵinject(ConfigService)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: LayoutComponentService, factory: LayoutComponentService.ɵfac, providedIn: 'root' }); }
+class SidenavToggleButtonComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SidenavToggleButtonComponent, isStandalone: true, selector: "rxap-sidenav-toggle-button", inputs: { sidenav: "sidenav" }, ngImport: i0, 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: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutComponentService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1.FooterService }, { type: i1.HeaderService }, { type: undefined, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [RXAP_LOGO_CONFIG]
-            }] }, { type: i1$4.ConfigService, decorators: [{
-                type: Inject,
-                args: [ConfigService]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-sidenav-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatButtonModule,
+                        NgIf,
+                        MatIconModule,
+                    ], 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" }]
+        }], propDecorators: { sidenav: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
-function WindowContainerSidenavComponent_div_1_ng_template_1_Template(rf, ctx) { }
-function WindowContainerSidenavComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, WindowContainerSidenavComponent_div_1_ng_template_1_Template, 0, 0, "ng-template", 3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const portalId_r1 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("cdkPortalOutlet", ctx_r0.portals.get(portalId_r1));
-} }
-class WindowContainerSidenavComponent {
-    constructor(service) {
-        this.service = service;
-        this.portals = new Map();
-        this.subscription = new Subscription();
-    }
-    ngOnInit() {
-        const components = this.service.getAll();
-        for (const component of components) {
-            this.add(component);
-        }
-        this.subscription.add(this.service.add$.pipe(tap(component => this.add(component))).subscribe());
-        this.subscription.add(this.service.remove$.pipe(tap(component => this.remove(component))).subscribe());
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    trackBy(index, id) {
-        return id;
-    }
-    add(component) {
-        if (this.portals.has(component.id)) {
-            throw new Error(`Component portal with id ${component.id} already exists`);
-        }
-        const portal = new ComponentPortal(component.component, component.viewContainerRef, component.injector, component.componentFactoryResolver);
-        this.portals.set(component.id, portal);
+class SidenavComponentService {
+    constructor(config) {
+        this.config = config;
+        this.collapsed$ = new BehaviorSubject(true);
+        this.collapsed$.next(this.config.get('navigation.collapsed', this.collapsed$.value));
     }
-    remove(component) {
-        if (this.portals.has(component.id)) {
-            const portal = this.portals.get(component.id);
-            this.portals.delete(component.id);
-            portal.detach();
-        }
+    toggleNavigationCollapse() {
+        this.collapsed$.next(!this.collapsed$.value);
     }
-    static { this.ɵfac = function WindowContainerSidenavComponent_Factory(t) { return new (t || WindowContainerSidenavComponent)(i0.ɵɵdirectiveInject(WindowContainerSidenavService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WindowContainerSidenavComponent, selectors: [["rxap-window-container-sidenav"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 2, consts: [["fxLayout", "column", "fxLayoutGap", "16px", 1, "container"], ["fxFlex", "nogrow", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["fxFlex", "nogrow"], [3, "cdkPortalOutlet"]], template: function WindowContainerSidenavComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, WindowContainerSidenavComponent_div_1_Template, 2, 1, "div", 1);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.portals.keys())("ngForTrackBy", ctx.trackBy);
-        } }, dependencies: [FlexModule, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultFlexDirective, NgFor, PortalModule, i3.CdkPortalOutlet], styles: [".container[_ngcontent-%COMP%]{padding:8px}"], changeDetection: 0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavComponentService, deps: [{ token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavComponentService, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WindowContainerSidenavComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-window-container-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FlexModule, NgFor, PortalModule], template: "<div fxLayout=\"column\" fxLayoutGap=\"16px\" class=\"container\">\n\n  <div fxFlex=\"nogrow\" *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n", styles: [".container{padding:8px}\n"] }]
-    }], function () { return [{ type: i1.WindowContainerSidenavService, decorators: [{
-                type: Inject,
-                args: [WindowContainerSidenavService]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavComponentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$1.ConfigService }]; } });
 
-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();
+class NavigationItemComponent {
+    get isActive() {
+        return this._isActive;
     }
-    ngOnInit() {
+    set isActive(value) {
+        this._isActive = value;
+        this.active.set(value);
     }
-    toggle() {
-        this.openWindowSidenav = !this.openWindowSidenav;
-        this.openWindowSidenavChange.emit(this.openWindowSidenav);
+    constructor(router, sidenav, elementRef, renderer, overlay, viewContainerRef) {
+        this.router = router;
+        this.sidenav = sidenav;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.level = 0;
+        this._isActive = false;
+        this.children = null;
+        this.active = signal(false);
+        this._subscription = new Subscription();
     }
-    static { this.ɵfac = function ToggleWindowSidenavButtonComponent_Factory(t) { return new (t || ToggleWindowSidenavButtonComponent)(); }; }
-    static { this.ɵ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" }, standalone: true, features: [i0.ɵɵStandaloneFeature], 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: [MatButtonModule, i1$2.MatIconButton, NgIf, MatIconModule, i2$2.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'
-                }, standalone: true, imports: [MatButtonModule, NgIf, MatIconModule], 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
-        }] }); })();
-
-class SidenavContentComponentService {
-    constructor(footerComponentService, headerComponentService) {
-        this.footerComponentService = footerComponentService;
-        this.headerComponentService = headerComponentService;
-        this.headerRows$ = new BehaviorSubject(1);
-        this.headerRows$.next(this.headerComponentService.countComponent);
-        this.footerComponentService.portalCount$.pipe().subscribe();
-        this.footerRows$ = this.footerComponentService.portalCount$;
-        this.headerComponentService.update$.pipe(tap(() => this.headerRows$.next(this.headerComponentService.countComponent))).subscribe();
-        this.innerHeight$ = combineLatest([
-            this.headerRows$,
-            this.footerRows$
-        ]).pipe(map(([headerRows, footerRows]) => `calc(100% - ${64 * (headerRows + footerRows)}px)`));
-        this.marginTop$ = this.headerRows$.pipe(map(headerRows => `${headerRows * 64}px`));
-        this.marginBottom$ = this.footerRows$.pipe(map(footerRows => `${footerRows * 64}px`));
-    }
-    static { this.ɵfac = function SidenavContentComponentService_Factory(t) { return new (t || SidenavContentComponentService)(i0.ɵɵinject(FooterService), i0.ɵɵinject(HeaderService)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SidenavContentComponentService, factory: SidenavContentComponentService.ɵfac, providedIn: 'root' }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavContentComponentService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1.FooterService, decorators: [{
-                type: Inject,
-                args: [FooterService]
-            }] }, { type: i1.HeaderService, decorators: [{
-                type: Inject,
-                args: [HeaderService]
-            }] }]; }, null); })();
-
-const _c0$3 = function (a0) { return { "open": a0 }; };
-const _c1$2 = function (a0, a1, a2) { return { height: a0, marginTop: a1, marginBottom: a2 }; };
-const _c2$1 = ["*"];
-class SidenavContentComponent {
-    constructor(sccs) {
-        this.sccs = sccs;
+    ngOnChanges(changes) {
+        if (changes['item']) {
+            const item = changes['item'].currentValue;
+            this.children =
+                item.children && item.children.length ? item.children : null;
+        }
     }
-    ngOnInit() {
+    ngAfterViewInit() {
+        this._subscription.add(this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), debounceTime(100), startWith(true), tap(() => {
+            let isActive = true;
+            const urlParts = this.router.url.split('/');
+            if (urlParts[0] === '') {
+                urlParts[0] = '/';
+            }
+            for (let i = 0; i < this.item.routerLink.length; i++) {
+                if (urlParts[i] !== this.item.routerLink[i]) {
+                    isActive = false;
+                    break;
+                }
+            }
+            this.isActive = isActive;
+            if (isActive) {
+                this.renderer.addClass(this.elementRef.nativeElement, 'active');
+            }
+            else {
+                this.renderer.removeClass(this.elementRef.nativeElement, 'active');
+            }
+        }))
+            .subscribe());
     }
-    static { this.ɵfac = function SidenavContentComponent_Factory(t) { return new (t || SidenavContentComponent)(i0.ɵɵdirectiveInject(SidenavContentComponentService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavContentComponent, selectors: [["rxap-sidenav-content"]], inputs: { sidenav: "sidenav" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c2$1, decls: 8, vars: 16, consts: [[1, "container", 3, "ngClass", "ngStyle"], [1, "inner"]], template: function SidenavContentComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵpipe(1, "async");
-            i0.ɵɵpipe(2, "async");
-            i0.ɵɵpipe(3, "async");
-            i0.ɵɵpipe(4, "async");
-            i0.ɵɵelementStart(5, "div", 1);
-            i0.ɵɵelement(6, "router-outlet");
-            i0.ɵɵprojection(7);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$3, i0.ɵɵpipeBind1(1, 2, ctx.sidenav.openedChange)))("ngStyle", i0.ɵɵpureFunction3(12, _c1$2, i0.ɵɵpipeBind1(2, 4, ctx.sccs.innerHeight$), i0.ɵɵpipeBind1(3, 6, ctx.sccs.marginTop$), i0.ɵɵpipeBind1(4, 8, ctx.sccs.marginBottom$)));
-        } }, dependencies: [NgClass, NgStyle, RouterOutlet, AsyncPipe], styles: [".container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]{padding:0;overflow:auto;height:100%}"], changeDetection: 0 }); }
-}
-__decorate([
-    Required,
-    __metadata("design:type", MatSidenav)
-], SidenavContentComponent.prototype, "sidenav", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavContentComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-sidenav-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgStyle, RouterOutlet, AsyncPipe], template: "<div [ngClass]=\"{ 'open': (sidenav.openedChange | async) }\" [ngStyle]=\"{\n  height: sccs.innerHeight$ | async,\n  marginTop: sccs.marginTop$ | async,\n  marginBottom: sccs.marginBottom$ | async\n}\" class=\"container\">\n  <!--  <dx-breadcrumb></dx-breadcrumb>-->\n  <div class=\"inner\">\n    <router-outlet></router-outlet>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".container .inner{padding:0;overflow:auto;height:100%}\n"] }]
-    }], function () { return [{ type: SidenavContentComponentService }]; }, { sidenav: [{
-            type: Input
-        }] }); })();
-
-class SidenavHeaderDirective {
-    constructor(template) {
-        this.template = template;
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
     }
-    static { this.ɵfac = function SidenavHeaderDirective_Factory(t) { return new (t || SidenavHeaderDirective)(i0.ɵɵdirectiveInject(TemplateRef)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SidenavHeaderDirective, selectors: [["", "rxapSidenavHeader", ""]], standalone: true }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavHeaderDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[rxapSidenavHeader]',
-                standalone: true
-            }]
-    }], function () { return [{ type: i0.TemplateRef, decorators: [{
-                type: Inject,
-                args: [TemplateRef]
-            }] }]; }, null); })();
-
-class SidenavFooterDirective {
-    constructor(template) {
-        this.template = template;
+    // region type save item property
+    // required to check the type of the item property in the ngFor loop
+    isNavigationDividerItem(item) {
+        return item['divider'];
     }
-    static { this.ɵfac = function SidenavFooterDirective_Factory(t) { return new (t || SidenavFooterDirective)(i0.ɵɵdirectiveInject(TemplateRef)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SidenavFooterDirective, selectors: [["", "rxapSidenavFooter", ""]], standalone: true }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavFooterDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[rxapSidenavFooter]',
-                standalone: true
-            }]
-    }], function () { return [{ type: i0.TemplateRef, decorators: [{
-                type: Inject,
-                args: [TemplateRef]
-            }] }]; }, null); })();
-
-class SidenavComponentService {
-    constructor(config) {
-        this.config = config;
-        this.collapsed$ = new BehaviorSubject(true);
-        this.collapsed$.next(this.config.get('navigation.collapsed', this.collapsed$.value));
+    isNavigationItem(item) {
+        return !this.isNavigationDividerItem(item);
     }
-    toggleNavigationCollapse() {
-        this.collapsed$.next(!this.collapsed$.value);
+    asNavigationItem(item) {
+        if (!this.isNavigationItem(item)) {
+            throw new Error('The item is not a NavigationItem');
+        }
+        return item;
     }
-    static { this.ɵfac = function SidenavComponentService_Factory(t) { return new (t || SidenavComponentService)(i0.ɵɵinject(i1$4.ConfigService)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SidenavComponentService, factory: SidenavComponentService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationItemComponent, deps: [{ token: Router }, { token: SidenavComponentService }, { token: ElementRef }, { token: Renderer2 }, { token: Overlay }, { token: ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: "level", item: "item" }, host: { properties: { "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item.routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"{\n        'pl-0': level === 0,\n        'pl-4': level === 1,\n        'pl-8': level === 2,\n        'pl-12': level === 3\n      }\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item.label }}\n    </span>\n    <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item.children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRippleModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i2$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i0.forwardRef(function () { return IconDirective; }), selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDividerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(function () { return NavigationComponent; }), selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+            trigger('sub-nav', [
+                transition(':enter', [
+                    style({
+                        display: 'block',
+                        height: '0',
+                        overflow: 'hidden',
+                    }),
+                    animate(150, style({ height: '*' })),
+                ]),
+                transition(':leave', [
+                    style({ overflow: 'hidden' }),
+                    animate(300, style({ height: '0' })),
+                    style({ display: 'none' }),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavComponentService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1$4.ConfigService }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[rxap-navigation-item]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
+                        trigger('sub-nav', [
+                            transition(':enter', [
+                                style({
+                                    display: 'block',
+                                    height: '0',
+                                    overflow: 'hidden',
+                                }),
+                                animate(150, style({ height: '*' })),
+                            ]),
+                            transition(':leave', [
+                                style({ overflow: 'hidden' }),
+                                animate(300, style({ height: '0' })),
+                                style({ display: 'none' }),
+                            ]),
+                        ]),
+                    ], standalone: true, imports: [
+                        RouterLinkActive,
+                        RouterLink,
+                        NgIf,
+                        MatRippleModule,
+                        MatIconModule,
+                        IconDirective,
+                        MatDividerModule,
+                        forwardRef(() => NavigationComponent),
+                        NgClass,
+                    ], template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item.routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"{\n        'pl-0': level === 0,\n        'pl-4': level === 1,\n        'pl-8': level === 2,\n        'pl-12': level === 3\n      }\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item.label }}\n    </span>\n    <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item.children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i2$3.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }, { type: SidenavComponentService, decorators: [{
+                    type: Inject,
+                    args: [SidenavComponentService]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }, { type: i6$1.Overlay, decorators: [{
+                    type: Inject,
+                    args: [Overlay]
+                }] }, { type: i0.ViewContainerRef, decorators: [{
+                    type: Inject,
+                    args: [ViewContainerRef]
+                }] }]; }, propDecorators: { level: [{
+                type: Input
+            }], routerLinkActive: [{
+                type: ViewChild,
+                args: [RouterLinkActive, { static: true }]
+            }], item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isActive: [{
+                type: HostBinding,
+                args: ['class.active']
+            }] } });
 
 function IsNavigationDividerItem(item) {
-    return item && item.hasOwnProperty('divider') && item.divider;
+    return !!item && !!item['divider'];
 }
 function IsNavigationInsertItem(item) {
-    return item && item.hasOwnProperty('insert');
+    return !!item && !!item['insert'];
 }
 function IsNavigationItem(item) {
-    return (item && item.hasOwnProperty('routerLink') && item.hasOwnProperty('label'));
+    return (!!item && !!item['routerLink'] && !!item['label']);
 }
 
 class NavigationService {
@@ -961,7 +617,7 @@ class NavigationService {
             Object.entries(inserts).forEach(([id, insert]) => this.insert(id, insert, false));
         }
         this.updateNavigation();
-        this.config$ = this.navigation$.pipe(switchMap((navigationWithoutStatusCheck) => this.checkNavigationStatusProviders(navigationWithoutStatusCheck)));
+        this.config$ = this.navigation$.pipe(switchMap$1((navigationWithoutStatusCheck) => this.checkNavigationStatusProviders(navigationWithoutStatusCheck)));
     }
     /**
      * @deprecated use add instead
@@ -1011,12 +667,14 @@ class NavigationService {
             else {
                 return from(isVisible);
             }
-        }).map(isVisible$ => isVisible$.pipe(catchError(e => {
-            console.error('isVisible method failed: ' + e.message);
+        })
+            .map(isVisible$ => isVisible$.pipe(catchError(e => {
+            console.error('isVisible method failed: ' +
+                e.message);
             return of(false);
         })));
         // TODO : dont wait for all status services to complete, but cancel waiting if one returns false
-        return combineLatest(isVisibleArray$).pipe(map((isVisibleArray) => isVisibleArray.reduce((acc, isVisible) => acc && isVisible, true)), map((isVisible) => (isVisible ? navigationItem : null)), switchMap((navigationItemOrNull) => {
+        return combineLatest(isVisibleArray$).pipe(map((isVisibleArray) => isVisibleArray.reduce((acc, isVisible) => acc && isVisible, true)), map((isVisible) => (isVisible ? navigationItem : null)), switchMap$1((navigationItemOrNull) => {
             if (navigationItemOrNull) {
                 if (navigationItemOrNull.children?.length) {
                     return this.checkNavigationStatusProviders(navigationItemOrNull.children).pipe(map((children) => ({
@@ -1064,370 +722,35 @@ class NavigationService {
         }
         return navigation;
     }
-    static { this.ɵfac = function NavigationService_Factory(t) { return new (t || NavigationService)(i0.ɵɵinject(RXAP_NAVIGATION_CONFIG), i0.ɵɵinject(INJECTOR), i0.ɵɵinject(RXAP_NAVIGATION_CONFIG_INSERTS, 8)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: NavigationService, factory: NavigationService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationService, deps: [{ token: RXAP_NAVIGATION_CONFIG }, { token: INJECTOR }, { token: RXAP_NAVIGATION_CONFIG_INSERTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: undefined, decorators: [{
-                type: Inject,
-                args: [RXAP_NAVIGATION_CONFIG]
-            }] }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [INJECTOR]
-            }] }, { type: undefined, decorators: [{
-                type: Optional
-            }, {
-                type: Inject,
-                args: [RXAP_NAVIGATION_CONFIG_INSERTS]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [RXAP_NAVIGATION_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [INJECTOR]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RXAP_NAVIGATION_CONFIG_INSERTS]
+                }] }]; } });
 
-const _c0$2 = ["navigationOverlay"];
-const _c1$1 = ["rxap-navigation-item", ""];
-function NavigationItemComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 5);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("rxapIcon", ctx_r0.item.icon);
-} }
-function NavigationItemComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r1.item.label);
-} }
-function NavigationItemComponent_ul_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ul", 7);
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("@sub-nav", undefined)("items", ctx_r2.children)("level", ctx_r2.level + 1);
-} }
-function NavigationItemComponent_ng_template_7_li_2_a_1_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 5);
-} if (rf & 2) {
-    const child_r6 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r8 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("rxapIcon", ctx_r8.asNavigationItem(child_r6).icon);
-} }
-function NavigationItemComponent_ng_template_7_li_2_a_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 11);
-    i0.ɵɵtemplate(1, NavigationItemComponent_ng_template_7_li_2_a_1_mat_icon_1_Template, 1, 1, "mat-icon", 1);
-    i0.ɵɵelementStart(2, "span", 6);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const child_r6 = i0.ɵɵnextContext().$implicit;
-    const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("routerLink", ctx_r7.asNavigationItem(child_r6).routerLink);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r7.asNavigationItem(child_r6).icon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r7.asNavigationItem(child_r6).label);
-} }
-function NavigationItemComponent_ng_template_7_li_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li");
-    i0.ɵɵtemplate(1, NavigationItemComponent_ng_template_7_li_2_a_1_Template, 4, 3, "a", 10);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const child_r6 = ctx.$implicit;
-    const ctx_r5 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r5.isNavigationItem(child_r6));
-} }
-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 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()();
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r4.children);
-} }
-class NavigationItemComponent {
-    constructor(router, sidenav, elementRef, renderer, overlay, viewContainerRef) {
-        this.router = router;
-        this.sidenav = sidenav;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.children = null;
-        this.level = 0;
-        this.isActive = false;
-        this._subscription = new Subscription();
-        /**
-         * indicates the mouse is over the
-         */
-        this.lockeOverlay = false;
-    }
-    ngOnChanges(changes) {
-        if (changes.item) {
-            const item = changes.item.currentValue;
-            this.children =
-                item.children && item.children.length ? item.children : null;
-        }
-    }
-    ngAfterViewInit() {
-        this._subscription.add(this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), startWith(true), delay(100), tap(() => {
-            if (this.routerLinkActive.isActive) {
-                if (!this.sidenav.collapsed$.value) {
-                    // only close the overlay if sidenav collapsed
-                    this._overlayRef?.detach();
-                }
-                this.renderer.addClass(this.elementRef.nativeElement, 'active');
-            }
-            else {
-                this.renderer.removeClass(this.elementRef.nativeElement, 'active');
-            }
-        }))
-            .subscribe());
-    }
-    ngOnInit() {
-        // detach the navigation overlay if the sidenav collapsed
-        // state is changed
-        this._subscription.add(this.sidenav.collapsed$
-            .pipe(skip(1), distinctUntilChanged(), tap(() => this._overlayRef?.detach()))
-            .subscribe());
-    }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
-        this._overlayRef?.dispose();
-    }
-    onMouseenter() {
-        if (this.children) {
-            if (!this.routerLinkActive.isActive || this.sidenav.collapsed$.value) {
-                if (!this._overlayRef) {
-                    this._overlayRef = this.overlay.create({
-                        positionStrategy: this.overlay
-                            .position()
-                            .flexibleConnectedTo(this.elementRef)
-                            .withPositions([
-                            {
-                                originY: 'top',
-                                originX: 'end',
-                                overlayY: 'top',
-                                overlayX: 'start',
-                            },
-                        ]),
-                    });
-                }
-                if (!this._overlayRef.hasAttached()) {
-                    this._embeddedViewRef = this._overlayRef.attach(new TemplatePortal(this._navigationOverlay, this.viewContainerRef));
-                }
-            }
-        }
-    }
-    onMouseleave() {
-        if (!this.lockeOverlay) {
-            this._overlayRef?.detach();
-        }
-    }
-    // region type save item property
-    // required to check the type of the item property in the ngFor loop
-    isNavigationDividerItem(item) {
-        return item['divider'];
-    }
-    isNavigationItem(item) {
-        return !this.isNavigationDividerItem(item);
-    }
-    asNavigationItem(item) {
-        if (!this.isNavigationItem(item)) {
-            throw new Error('The item is not a NavigationItem');
-        }
-        return item;
-    }
-    static { this.ɵfac = function NavigationItemComponent_Factory(t) { return new (t || NavigationItemComponent)(i0.ɵɵdirectiveInject(Router), i0.ɵɵdirectiveInject(SidenavComponentService), i0.ɵɵdirectiveInject(ElementRef), i0.ɵɵdirectiveInject(Renderer2), i0.ɵɵdirectiveInject(Overlay), i0.ɵɵdirectiveInject(ViewContainerRef)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationItemComponent, selectors: [["li", "rxap-navigation-item", ""]], viewQuery: function NavigationItemComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(RouterLinkActive, 7);
-            i0.ɵɵviewQuery(_c0$2, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.routerLinkActive = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._navigationOverlay = _t.first);
-        } }, hostAttrs: [1, "rxap-navigation-item"], hostVars: 2, hostBindings: function NavigationItemComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("mouseenter", function NavigationItemComponent_mouseenter_HostBindingHandler() { return ctx.onMouseenter(); })("mouseleave", function NavigationItemComponent_mouseleave_HostBindingHandler() { return ctx.onMouseleave(); });
-        } if (rf & 2) {
-            i0.ɵɵclassProp("active", ctx.isActive);
-        } }, inputs: { item: "item", level: "level" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], attrs: _c1$1, decls: 9, vars: 15, consts: [["routerLinkActive", "link-active", "matRipple", "", 3, "routerLink", "matTooltipDisabled", "matTooltip"], ["class", "icon", 3, "rxapIcon", 4, "ngIf"], [3, "ngIf"], ["rxap-navigation", "", "class", "sub-items", "fxFlex", "nogrow", 3, "items", "level", 4, "ngIf"], ["navigationOverlay", ""], [1, "icon", 3, "rxapIcon"], [1, "label"], ["rxap-navigation", "", "fxFlex", "nogrow", 1, "sub-items", 3, "items", "level"], [1, "navigation-overlay-container", "mat-elevation-z1", 3, "mouseenter", "mouseleave"], [4, "ngFor", "ngForOf"], ["class", "navigation-link mat-subtitle-2 mat-body-strong", "matRipple", "", 3, "routerLink", 4, "ngIf"], ["matRipple", "", 1, "navigation-link", "mat-subtitle-2", "mat-body-strong", 3, "routerLink"]], template: function NavigationItemComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "a", 0);
-            i0.ɵɵpipe(1, "async");
-            i0.ɵɵtemplate(2, NavigationItemComponent_mat_icon_2_Template, 1, 1, "mat-icon", 1);
-            i0.ɵɵtemplate(3, NavigationItemComponent_ng_template_3_Template, 2, 1, "ng-template", 2);
-            i0.ɵɵpipe(4, "async");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, NavigationItemComponent_ul_5_Template, 1, 3, "ul", 3);
-            i0.ɵɵpipe(6, "async");
-            i0.ɵɵtemplate(7, NavigationItemComponent_ng_template_7_Template, 3, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
-        } if (rf & 2) {
-            i0.ɵɵclassMapInterpolate1("navigation-link mat-body-2 mat-body-strong navigation-level-", ctx.level, "");
-            i0.ɵɵproperty("routerLink", ctx.item.routerLink)("matTooltipDisabled", !i0.ɵɵpipeBind1(1, 9, ctx.sidenav.collapsed$))("matTooltip", ctx.item.label);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.item.icon);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(4, 11, ctx.sidenav.collapsed$));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.routerLinkActive.isActive && !i0.ɵɵpipeBind1(6, 13, ctx.sidenav.collapsed$) && ctx.children);
-        } }, dependencies: [RouterLinkActive,
-            MatRippleModule, i4$1.MatRipple, RouterLink,
-            MatTooltipModule, i2$6.MatTooltip, NgIf,
-            MatIconModule, i2$2.MatIcon, IconDirective,
-            NavigationComponent,
-            FlexModule, i1$3.DefaultFlexDirective, NgFor,
-            AsyncPipe], styles: [".rxap-navigation-item,.navigation-overlay-container{display:flex;flex-direction:column;min-height:48px}.rxap-navigation-item .navigation-link,.navigation-overlay-container .navigation-link{display:flex;flex-direction:row;align-items:center;text-decoration:none;height:48px}.rxap-navigation-item .navigation-link .icon,.navigation-overlay-container .navigation-link .icon{margin:0 16px}.rxap-navigation-item .navigation-link .label,.navigation-overlay-container .navigation-link .label{padding-right:12px}.rxap-navigation-item .navigation-link.navigation-level-1,.navigation-overlay-container .navigation-link.navigation-level-1{padding-left:52px}.rxap-navigation-item .navigation-link.navigation-level-1 .icon,.navigation-overlay-container .navigation-link.navigation-level-1 .icon{padding-left:0}.rxap-navigation-item .navigation-link.navigation-level-2,.navigation-overlay-container .navigation-link.navigation-level-2{padding-left:88px}.rxap-navigation-item .navigation-link.navigation-level-2 .icon,.navigation-overlay-container .navigation-link.navigation-level-2 .icon{padding-left:0}.navigation-overlay-container{padding:0 16px}.navigation-overlay-container ul{list-style-type:none;margin:0;padding:0}.navigation-overlay-container ul .navigation-link .label{padding-right:0}.navigation-overlay-container ul .navigation-link .icon{margin-left:0}\n"], encapsulation: 2, data: { animation: [
-                trigger('sub-nav', [
-                    transition(':enter', [
-                        style({ display: 'block', height: '0', overflow: 'hidden' }),
-                        animate(150, style({ height: '*' }))
-                    ]),
-                    transition(':leave', [
-                        style({ overflow: 'hidden' }),
-                        animate(300, style({ height: '0' })),
-                        style({ display: 'none' })
-                    ])
-                ])
-            ] }, changeDetection: 0 }); }
-}
-__decorate([
-    Required,
-    __metadata("design:type", Object)
-], NavigationItemComponent.prototype, "item", void 0);
-__decorate([
-    DebounceCall(100),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], NavigationItemComponent.prototype, "onMouseleave", null);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationItemComponent, [{
-        type: Component,
-        args: [{ selector: 'li[rxap-navigation-item]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                    class: 'rxap-navigation-item'
-                }, animations: [
-                    trigger('sub-nav', [
-                        transition(':enter', [
-                            style({ display: 'block', height: '0', overflow: 'hidden' }),
-                            animate(150, style({ height: '*' }))
-                        ]),
-                        transition(':leave', [
-                            style({ overflow: 'hidden' }),
-                            animate(300, style({ height: '0' })),
-                            style({ display: 'none' })
-                        ])
-                    ])
-                ], standalone: true, imports: [
-                    RouterLinkActive,
-                    MatRippleModule,
-                    RouterLink,
-                    MatTooltipModule,
-                    NgIf,
-                    MatIconModule,
-                    IconDirective,
-                    NavigationComponent,
-                    FlexModule,
-                    NgFor,
-                    AsyncPipe
-                ], 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-subtitle-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: i2$1.Router, decorators: [{
-                type: Inject,
-                args: [Router]
-            }] }, { type: SidenavComponentService, decorators: [{
-                type: Inject,
-                args: [SidenavComponentService]
-            }] }, { type: i0.ElementRef, decorators: [{
-                type: Inject,
-                args: [ElementRef]
-            }] }, { type: i0.Renderer2, decorators: [{
-                type: Inject,
-                args: [Renderer2]
-            }] }, { type: i7.Overlay, decorators: [{
-                type: Inject,
-                args: [Overlay]
-            }] }, { type: i0.ViewContainerRef, decorators: [{
-                type: Inject,
-                args: [ViewContainerRef]
-            }] }]; }, { routerLinkActive: [{
-            type: ViewChild,
-            args: [RouterLinkActive, { static: true }]
-        }], item: [{
-            type: Input
-        }], level: [{
-            type: Input
-        }], isActive: [{
-            type: HostBinding,
-            args: ['class.active']
-        }], _navigationOverlay: [{
-            type: ViewChild,
-            args: ['navigationOverlay']
-        }], onMouseenter: [{
-            type: HostListener,
-            args: ['mouseenter']
-        }], onMouseleave: [{
-            type: HostListener,
-            args: ['mouseleave']
-        }] }); })();
-
-const _c0$1 = ["rxap-navigation", ""];
-function NavigationComponent_ng_template_0_ng_template_0_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 2);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r1 = i0.ɵɵnextContext(3).$implicit;
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(item_r1.title);
-} }
-function NavigationComponent_ng_template_0_ng_template_0_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵtemplate(1, NavigationComponent_ng_template_0_ng_template_0_div_1_span_1_Template, 2, 1, "span", 5);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r1 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", item_r1.title);
-} }
-function NavigationComponent_ng_template_0_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-divider", 2);
-    i0.ɵɵtemplate(1, NavigationComponent_ng_template_0_ng_template_0_div_1_Template, 2, 1, "div", 3);
-    i0.ɵɵpipe(2, "async");
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(2, 1, ctx_r2.sidenav.collapsed$));
-} }
-function NavigationComponent_ng_template_0_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "li", 6);
-} if (rf & 2) {
-    const item_r1 = i0.ɵɵnextContext().$implicit;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("level", ctx_r3.level)("item", ctx_r3.asNavigationItem(item_r1));
-} }
-function NavigationComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, NavigationComponent_ng_template_0_ng_template_0_Template, 3, 3, "ng-template", 1);
-    i0.ɵɵtemplate(1, NavigationComponent_ng_template_0_ng_template_1_Template, 1, 2, "ng-template", 1);
-} if (rf & 2) {
-    const item_r1 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", ctx_r0.isNavigationDividerItem(item_r1));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.isNavigationItem(item_r1));
-} }
 class NavigationComponent {
-    set root(value) {
-        this._root = coerceBoolean(value);
-    }
     constructor(navigationService, cdr, sidenav) {
         this.navigationService = navigationService;
         this.cdr = cdr;
         this.sidenav = sidenav;
-        this._root = false;
         this.level = 0;
+        this._root = false;
+    }
+    set root(value) {
+        this._root = coerceBoolean(value);
     }
     ngOnInit() {
         if (this._root) {
@@ -1436,6 +759,7 @@ class NavigationComponent {
                 .pipe(tap((navigation) => (this.items = navigation)), tap(() => this.cdr.detectChanges()))
                 .subscribe();
         }
+        this.items ??= [];
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
@@ -1454,314 +778,200 @@ class NavigationComponent {
         }
         return item;
     }
-    static { this.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(i0.ɵɵdirectiveInject(NavigationService), i0.ɵɵdirectiveInject(ChangeDetectorRef), i0.ɵɵdirectiveInject(SidenavComponentService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["ul", "rxap-navigation", ""]], hostAttrs: [1, "rxap-navigation"], hostVars: 2, hostBindings: function NavigationComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵclassProp("rxap-root-navigation", ctx._root);
-        } }, inputs: { root: "root", items: "items", level: "level" }, standalone: true, features: [i0.ɵɵStandaloneFeature], attrs: _c0$1, decls: 1, vars: 1, consts: [["ngFor", "", 3, "ngForOf"], [3, "ngIf"], ["fxFlex", "nogrow"], ["class", "divider-title", "fxFlex", "nogrow", "fxLayout", "row", "fxLayoutAlign", "start end", 4, "ngIf"], ["fxFlex", "nogrow", "fxLayout", "row", "fxLayoutAlign", "start end", 1, "divider-title"], ["fxFlex", "nogrow", 4, "ngIf"], ["rxap-navigation-item", "", 1, "item", 3, "level", "item"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, NavigationComponent_ng_template_0_Template, 2, 2, "ng-template", 0);
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, dependencies: [NgFor,
-            NgIf,
-            MatDividerModule, i1$5.MatDivider, FlexModule, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, NavigationItemComponent,
-            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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationComponent, deps: [{ token: NavigationService }, { token: ChangeDetectorRef }, { token: SidenavComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: NavigationComponent, isStandalone: true, selector: "ul[rxap-navigation]", inputs: { items: "items", level: "level", root: "root" }, host: { properties: { "class.rxap-root-navigation": "this._root" }, classAttribute: "list-none dark:text-neutral-400 text-neutral-700" }, ngImport: i0, template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"(sidenav.collapsed$ | async) === false\" class=\"pl-5 h-6\">\n      <span *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\" [level]=\"level\" class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item></li>\n  </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDividerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(function () { return NavigationItemComponent; }), selector: "li[rxap-navigation-item]", inputs: ["level", "item"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    Required,
-    __metadata("design:type", Array)
-], NavigationComponent.prototype, "items", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponent, [{
-        type: Component,
-        args: [{ selector: 'ul[rxap-navigation]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'rxap-navigation' }, standalone: true, imports: [
-                    NgFor,
-                    NgIf,
-                    MatDividerModule,
-                    FlexModule,
-                    NavigationItemComponent,
-                    AsyncPipe
-                ], template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider fxFlex=\"nogrow\"></mat-divider>\n    <div *ngIf=\"!(sidenav.collapsed$ | async)\" class=\"divider-title\" fxFlex=\"nogrow\" fxLayout=\"row\" fxLayoutAlign=\"start end\">\n      <span fxFlex=\"nogrow\" *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li class=\"item\" rxap-navigation-item [level]=\"level\" [item]=\"asNavigationItem(item)\"></li>\n  </ng-template>\n</ng-template>\n", styles: [".rxap-navigation{list-style-type:none;padding:0}.rxap-navigation .divider-title{padding-left:18px;height:28px;align-content:center}\n"] }]
-    }], function () { return [{ type: NavigationService, decorators: [{
-                type: Inject,
-                args: [NavigationService]
-            }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                type: Inject,
-                args: [ChangeDetectorRef]
-            }] }, { type: SidenavComponentService, decorators: [{
-                type: Inject,
-                args: [SidenavComponentService]
-            }] }]; }, { _root: [{
-            type: HostBinding,
-            args: ['class.rxap-root-navigation']
-        }], root: [{
-            type: Input
-        }], items: [{
-            type: Input
-        }], level: [{
-            type: Input
-        }] }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: NavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[rxap-navigation]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, host: {
+                        class: 'list-none dark:text-neutral-400 text-neutral-700',
+                    }, imports: [
+                        NgFor,
+                        NgIf,
+                        MatDividerModule,
+                        forwardRef(() => NavigationItemComponent),
+                        AsyncPipe,
+                    ], template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"(sidenav.collapsed$ | async) === false\" class=\"pl-5 h-6\">\n      <span *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\" [level]=\"level\" class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item></li>\n  </ng-template>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: NavigationService, decorators: [{
+                    type: Inject,
+                    args: [NavigationService]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: SidenavComponentService, decorators: [{
+                    type: Inject,
+                    args: [SidenavComponentService]
+                }] }]; }, propDecorators: { items: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], _root: [{
+                type: HostBinding,
+                args: ['class.rxap-root-navigation']
+            }], root: [{
+                type: Input
+            }] } });
 
-function SidenavComponent_ng_template_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function SidenavComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵpipe(1, "async");
-    i0.ɵɵtemplate(2, SidenavComponent_ng_template_3_ng_container_2_Template, 1, 0, "ng-container", 12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "mat-divider", 13);
-    i0.ɵɵpipe(4, "async");
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    let tmp_1_0;
-    i0.ɵɵproperty("fxHide", i0.ɵɵpipeBind1(1, 3, ctx_r0.sidenav.collapsed$));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", (tmp_1_0 = ctx_r0.sidenavHeaderDirective == null ? null : ctx_r0.sidenavHeaderDirective.template) !== null && tmp_1_0 !== undefined ? tmp_1_0 : null);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("fxHide", i0.ɵɵpipeBind1(4, 5, ctx_r0.sidenav.collapsed$));
-} }
-function SidenavComponent_ng_template_15_ng_container_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function SidenavComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-divider", 13);
-    i0.ɵɵpipe(1, "async");
-    i0.ɵɵelementStart(2, "div", 14);
-    i0.ɵɵpipe(3, "async");
-    i0.ɵɵtemplate(4, SidenavComponent_ng_template_15_ng_container_4_Template, 1, 0, "ng-container", 12);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    let tmp_2_0;
-    i0.ɵɵproperty("fxHide", i0.ɵɵpipeBind1(1, 3, ctx_r1.sidenav.collapsed$));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("fxHide", i0.ɵɵpipeBind1(3, 5, ctx_r1.sidenav.collapsed$));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", (tmp_2_0 = ctx_r1.sidenavFooterDirective == null ? null : ctx_r1.sidenavFooterDirective.template) !== null && tmp_2_0 !== undefined ? tmp_2_0 : null);
-} }
-const _c2 = function (a0) { return { "collapsed": a0 }; };
-class SidenavComponent {
-    constructor(sidenav) {
-        this.sidenav = sidenav;
+class LayoutComponentService {
+    constructor(footerComponentService, headerComponentService, logoConfig = null, config) {
+        this.footerComponentService = footerComponentService;
+        this.headerComponentService = headerComponentService;
+        this.config = config;
+        this.opened$ = new BehaviorSubject(true);
+        this.mode$ = new BehaviorSubject('side');
+        this.fixedTopGap$ = new BehaviorSubject(64);
+        this.mode$.next(this.config.get('navigation.mode', this.mode$.value));
+        this.opened$.next(this.config.get('navigation.open', this.opened$.value));
+        this.fixedBottomGap$ = this.footerComponentService.portalCount$.pipe(map(count => count * 64));
+        this.fixedTopGap$.next(this.headerComponentService.countComponent * 64);
+        this.headerComponentService.update$.pipe(tap(() => this.fixedTopGap$.next(this.headerComponentService.countComponent * 64))).subscribe();
+        this.logo = logoConfig ?? {
+            src: '/assets/logo.png',
+            width: 192,
+        };
     }
-    static { this.ɵfac = function SidenavComponent_Factory(t) { return new (t || SidenavComponent)(i0.ɵɵdirectiveInject(SidenavComponentService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SidenavComponent, selectors: [["rxap-sidenav"]], contentQueries: function SidenavComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, SidenavFooterDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, SidenavHeaderDirective, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenavFooterDirective = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenavHeaderDirective = _t.first);
-        } }, hostAttrs: [1, "rxap-layout-sidenav"], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 16, vars: 15, consts: function () { let i18n_0; if (typeof ngI18nClosureMode !== "undefined" && ngI18nClosureMode) {
-            /**
-             * @suppress {msgDescriptions}
-             */
-            const MSG_EXTERNAL_1144722711335201698$$LIB_SIDENAV_SIDENAV_COMPONENT_TS_1 = goog.getMsg("Collapse sidebar");
-            i18n_0 = MSG_EXTERNAL_1144722711335201698$$LIB_SIDENAV_SIDENAV_COMPONENT_TS_1;
-        }
-        else {
-            i18n_0 = $localize `:␟98effe6eb558f87ab061ab608a31b44adec4e2ae␟1144722711335201698:Collapse sidebar`;
-        } return [[1, "container", 3, "ngClass"], ["fxLayout", "column", "fxLayoutAlign", "space-between stretch", 1, "inner"], [3, "ngIf"], ["fxFlex", "grow", 1, "nav-container"], ["fxLayout", "column", "root", "", "rxap-navigation", ""], ["fxFlex", "nogrow"], ["mat-button", "", "fxFlex", "nogrow", 1, "sidebar-toggle", 3, "ngClass", "click"], ["fxLayout", "row", "fxLayoutAlign", "start center", "fxLayoutGap", "16px", 1, "sidebar-toggle-inner"], ["fxFlex", "nogrow", 1, "arrow"], ["fxFlex", "grow", 1, "label", 3, "fxHide"], i18n_0, ["fxFlex", "nogrow", 1, "header", 3, "fxHide"], [4, "ngTemplateOutlet"], ["fxFlex", "nogrow", 3, "fxHide"], ["fxFlex", "nogrow", 1, "footer", 3, "fxHide"]]; }, template: function SidenavComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵpipe(1, "async");
-            i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵtemplate(3, SidenavComponent_ng_template_3_Template, 5, 7, "ng-template", 2);
-            i0.ɵɵelementStart(4, "div", 3);
-            i0.ɵɵelement(5, "ul", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(6, "mat-divider", 5);
-            i0.ɵɵelementStart(7, "button", 6);
-            i0.ɵɵlistener("click", function SidenavComponent_Template_button_click_7_listener() { return ctx.sidenav.toggleNavigationCollapse(); });
-            i0.ɵɵpipe(8, "async");
-            i0.ɵɵelementStart(9, "span", 7)(10, "mat-icon", 8);
-            i0.ɵɵtext(11, "double_arrow");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "span", 9);
-            i0.ɵɵi18n(13, 10);
-            i0.ɵɵpipe(14, "async");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(15, SidenavComponent_ng_template_15_Template, 5, 7, "ng-template", 2);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            let tmp_4_0;
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c2, i0.ɵɵpipeBind1(1, 5, ctx.sidenav.collapsed$)));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.sidenavHeaderDirective == null ? null : ctx.sidenavHeaderDirective.template);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c2, i0.ɵɵpipeBind1(8, 7, ctx.sidenav.collapsed$)));
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("fxHide", i0.ɵɵpipeBind1(14, 9, ctx.sidenav.collapsed$));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", (tmp_4_0 = ctx.sidenavFooterDirective == null ? null : ctx.sidenavFooterDirective.template) !== null && tmp_4_0 !== undefined ? tmp_4_0 : null);
-        } }, dependencies: [ExtendedModule, i2$4.DefaultShowHideDirective, i2$4.DefaultClassDirective, NgClass,
-            FlexModule, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, NgIf,
-            NgTemplateOutlet,
-            MatDividerModule, i1$5.MatDivider, NavigationComponent,
-            MatButtonModule, i1$2.MatButton, MatIconModule, i2$2.MatIcon, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponentService, deps: [{ token: i1.FooterService }, { token: i1.HeaderService }, { token: RXAP_LOGO_CONFIG, optional: true }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponentService, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                    class: 'rxap-layout-sidenav'
-                }, standalone: true, imports: [
-                    ExtendedModule,
-                    NgClass,
-                    FlexModule,
-                    NgIf,
-                    NgTemplateOutlet,
-                    MatDividerModule,
-                    NavigationComponent,
-                    MatButtonModule,
-                    MatIconModule,
-                    AsyncPipe
-                ], template: "<div class=\"container\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\">\n  <div class=\"inner\"\n       fxLayout=\"column\"\n       fxLayoutAlign=\"space-between stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div fxFlex=\"nogrow\" class=\"header\" [fxHide]=\"sidenav.collapsed$ | async\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider fxFlex=\"nogrow\" [fxHide]=\"sidenav.collapsed$ | async\"></mat-divider>\n    </ng-template>\n    <div fxFlex=\"grow\" class=\"nav-container\">\n      <ul fxLayout=\"column\" root rxap-navigation></ul>\n    </div>\n    <mat-divider fxFlex=\"nogrow\"></mat-divider>\n    <button mat-button class=\"sidebar-toggle\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" fxFlex=\"nogrow\"\n            (click)=\"sidenav.toggleNavigationCollapse()\">\n      <span class=\"sidebar-toggle-inner\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\">\n        <mat-icon fxFlex=\"nogrow\" class=\"arrow\">double_arrow</mat-icon>\n        <span [fxHide]=\"sidenav.collapsed$ | async\" class=\"label\" fxFlex=\"grow\" i18n>Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider fxFlex=\"nogrow\" [fxHide]=\"sidenav.collapsed$ | async\"></mat-divider>\n      <div fxFlex=\"nogrow\" class=\"footer\" [fxHide]=\"sidenav.collapsed$ | async\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".container,.container .inner{height:100%}.container .inner .header{padding-bottom:12px}.container .inner .footer{padding-top:12px}.container .inner .nav-container{overflow-y:scroll;padding-top:12px}.container .inner .nav-container::-webkit-scrollbar{width:6px}.container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.container .sidebar-toggle{min-height:48px}.container .sidebar-toggle .sidebar-toggle-inner{padding:0}.container .sidebar-toggle .arrow{transform:rotate(180deg)}.container .sidebar-toggle.collapsed .arrow{transform:initial}.container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"] }]
-    }], function () { return [{ type: SidenavComponentService }]; }, { sidenavFooterDirective: [{
-            type: ContentChild,
-            args: [SidenavFooterDirective]
-        }], sidenavHeaderDirective: [{
-            type: ContentChild,
-            args: [SidenavHeaderDirective]
-        }] }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.FooterService }, { type: i1.HeaderService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RXAP_LOGO_CONFIG]
+                }] }, { type: i1$1.ConfigService, decorators: [{
+                    type: Inject,
+                    args: [ConfigService]
+                }] }]; } });
 
-const _c0 = function () { return ["/"]; };
-function LayoutComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 9);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction0(3, _c0))("width", ctx_r0.layoutComponentService.logo.width)("src", ctx_r0.layoutComponentService.logo.src, i0.ɵɵsanitizeUrl);
-} }
-const _c1 = ["*"];
 class LayoutComponent {
-    constructor(layoutComponentService) {
+    constructor(layoutComponentService, environment, iconLoaderService) {
         this.layoutComponentService = layoutComponentService;
-        this.openWindowSidenav = false;
+        this.environment = environment;
+        this.sidenavMode = 'over';
+        iconLoaderService.load();
     }
-    static { this.ɵfac = function LayoutComponent_Factory(t) { return new (t || LayoutComponent)(i0.ɵɵdirectiveInject(LayoutComponentService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutComponent, selectors: [["rxap-layout"]], viewQuery: function LayoutComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(MatSidenav, 7);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c1, decls: 18, vars: 24, consts: [[1, "header", 3, "sidenav"], ["autosize", "", 1, "container"], [1, "sidenav", 3, "fixedBottomGap", "fixedInViewport", "fixedTopGap", "mode", "opened"], ["rxapSidenavHeader", ""], [1, "content"], [3, "sidenav"], [3, "openWindowSidenav", "openWindowSidenavChange"], ["mode", "side", "position", "end", 1, "window-container-sidenav", 3, "fixedBottomGap", "fixedInViewport", "fixedTopGap", "opened"], [1, "footer"], ["alt", "logo", 1, "logo", 3, "routerLink", "width", "src"]], template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelement(0, "rxap-header", 0);
-            i0.ɵɵelementStart(1, "mat-sidenav-container", 1)(2, "mat-sidenav", 2);
-            i0.ɵɵpipe(3, "async");
-            i0.ɵɵpipe(4, "async");
-            i0.ɵɵpipe(5, "async");
-            i0.ɵɵpipe(6, "async");
-            i0.ɵɵelementStart(7, "rxap-sidenav");
-            i0.ɵɵtemplate(8, LayoutComponent_ng_template_8_Template, 1, 4, "ng-template", 3);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "mat-sidenav-content", 4)(10, "rxap-sidenav-content", 5);
-            i0.ɵɵprojection(11);
-            i0.ɵɵelementStart(12, "rxap-toggle-window-sidenav-button", 6);
-            i0.ɵɵlistener("openWindowSidenavChange", function LayoutComponent_Template_rxap_toggle_window_sidenav_button_openWindowSidenavChange_12_listener($event) { return ctx.openWindowSidenav = $event; });
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(13, "mat-sidenav", 7);
-            i0.ɵɵpipe(14, "async");
-            i0.ɵɵpipe(15, "async");
-            i0.ɵɵelement(16, "rxap-window-container-sidenav");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(17, "rxap-footer", 8);
-        } if (rf & 2) {
-            let tmp_4_0;
-            let tmp_5_0;
-            i0.ɵɵproperty("sidenav", ctx.sidenav);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("fixedBottomGap", i0.ɵɵpipeBind1(3, 12, ctx.layoutComponentService.fixedBottomGap$))("fixedInViewport", true)("fixedTopGap", i0.ɵɵpipeBind1(4, 14, ctx.layoutComponentService.fixedTopGap$))("mode", (tmp_4_0 = i0.ɵɵpipeBind1(5, 16, ctx.layoutComponentService.mode$)) !== null && tmp_4_0 !== undefined ? tmp_4_0 : "side")("opened", (tmp_5_0 = i0.ɵɵpipeBind1(6, 18, ctx.layoutComponentService.opened$)) !== null && tmp_5_0 !== undefined ? tmp_5_0 : true);
-            i0.ɵɵadvance(8);
-            i0.ɵɵproperty("sidenav", ctx.sidenav);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("openWindowSidenav", ctx.openWindowSidenav);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("fixedBottomGap", i0.ɵɵpipeBind1(14, 20, ctx.layoutComponentService.fixedBottomGap$))("fixedInViewport", true)("fixedTopGap", i0.ɵɵpipeBind1(15, 22, ctx.layoutComponentService.fixedTopGap$))("opened", ctx.openWindowSidenav);
-        } }, dependencies: [HeaderComponent,
-            MatSidenavModule, i2$7.MatSidenav, i2$7.MatSidenavContainer, i2$7.MatSidenavContent, SidenavComponent,
-            SidenavHeaderDirective,
-            RouterLink,
-            SidenavContentComponent,
-            ToggleWindowSidenavButtonComponent,
-            WindowContainerSidenavComponent,
-            FooterComponent,
-            AsyncPipe], styles: [".container[_ngcontent-%COMP%], .content[_ngcontent-%COMP%]{height:100%}.sidenav[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:auto}.sidenav[_ngcontent-%COMP%]   .logo[_ngcontent-%COMP%]{padding:16px}.footer[_ngcontent-%COMP%]{position:fixed;bottom:0;left:0;right:0;z-index:100}.header[_ngcontent-%COMP%]{position:fixed;top:0;left:0;right:0;z-index:100}"], changeDetection: 0 }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-layout', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                    HeaderComponent,
-                    MatSidenavModule,
-                    SidenavComponent,
-                    SidenavHeaderDirective,
-                    RouterLink,
-                    SidenavContentComponent,
-                    ToggleWindowSidenavButtonComponent,
-                    WindowContainerSidenavComponent,
-                    FooterComponent,
-                    AsyncPipe
-                ], template: "<rxap-header [sidenav]=\"sidenav\" class=\"header\"></rxap-header>\n<mat-sidenav-container autosize class=\"container\">\n  <mat-sidenav\n    [fixedBottomGap]=\"layoutComponentService.fixedBottomGap$ | async\"\n    [fixedInViewport]=\"true\"\n    [fixedTopGap]=\"layoutComponentService.fixedTopGap$ | async\"\n    [mode]=\"(layoutComponentService.mode$ | async) ?? 'side'\"\n    [opened]=\"(layoutComponentService.opened$ | async) ?? true\"\n    class=\"sidenav\"\n  >\n    <rxap-sidenav>\n      <ng-template rxapSidenavHeader>\n        <img\n          [routerLink]=\"['/']\"\n          alt=\"logo\"\n          class=\"logo\"\n          [width]=\"layoutComponentService.logo.width\"\n          [src]=\"layoutComponentService.logo.src\"\n        />\n      </ng-template>\n    </rxap-sidenav>\n  </mat-sidenav>\n  <mat-sidenav-content class=\"content\">\n    <rxap-sidenav-content [sidenav]=\"sidenav\">\n      <ng-content></ng-content>\n      <rxap-toggle-window-sidenav-button [(openWindowSidenav)]=\"openWindowSidenav\"></rxap-toggle-window-sidenav-button>\n    </rxap-sidenav-content>\n  </mat-sidenav-content>\n  <mat-sidenav\n    [fixedBottomGap]=\"layoutComponentService.fixedBottomGap$ | async\"\n    [fixedInViewport]=\"true\"\n    [fixedTopGap]=\"layoutComponentService.fixedTopGap$ | async\"\n    [opened]=\"openWindowSidenav\"\n    mode=\"side\"\n    class=\"window-container-sidenav\"\n    position=\"end\"\n  >\n    <rxap-window-container-sidenav></rxap-window-container-sidenav>\n  </mat-sidenav>\n</mat-sidenav-container>\n<rxap-footer class=\"footer\"></rxap-footer>\n", styles: [".container,.content{height:100%}.sidenav{display:flex;align-items:center;justify-content:center;width:auto}.sidenav .logo{padding:16px}.footer{position:fixed;bottom:0;left:0;right:0;z-index:100}.header{position:fixed;top:0;left:0;right:0;z-index:100}\n"] }]
-    }], function () { return [{ type: LayoutComponentService }]; }, { sidenav: [{
-            type: ViewChild,
-            args: [MatSidenav, { static: true }]
-        }] }); })();
-
-class LayoutModule {
-    static withNavigation(navigation) {
-        return {
-            ngModule: LayoutModule,
-            providers: [
-                {
-                    provide: RXAP_NAVIGATION_CONFIG,
-                    useValue: navigation
-                }
-            ]
-        };
+    get release() {
+        return DetermineReleaseName(this.environment);
     }
-    static { this.ɵfac = function LayoutModule_Factory(t) { return new (t || LayoutModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LayoutModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [LayoutComponent] }); }
+    toggleSidenavMode() {
+        if (this.sidenavMode === 'over') {
+            this.sidenavMode = 'side';
+            this.sidenav.open();
+        }
+        else {
+            this.sidenavMode = 'over';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutComponentService }, { token: RXAP_ENVIRONMENT }, { token: i2$4.IconLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: LayoutComponent, isStandalone: true, selector: "rxap-layout", viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"flex flex-col h-screen justify-between\">\n  <rxap-header [sidenav]=\"sidenav\" class=\"z-10 w-full fixed top-0\"></rxap-header>\n  <mat-sidenav-container [ngClass]=\"{\n    'mb-16': (layoutComponentService.fixedBottomGap$ | async) === 64,\n    'mb-32': (layoutComponentService.fixedBottomGap$ | async) === 128,\n  }\" class=\"grow mt-16\">\n    <mat-sidenav\n      #matSidenav=\"matSidenav\"\n      (mouseenter)=\"sidenavMode === 'over' && matSidenav.open()\"\n      (mouseleave)=\"sidenavMode === 'over' && matSidenav.close()\"\n      [fixedBottomGap]=\"layoutComponentService.fixedBottomGap$ | async\"\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"layoutComponentService.fixedTopGap$ | async\"\n      [mode]=\"sidenavMode\"\n      [opened]=\"false\"\n      class=\"sidenav\"\n    >\n      <div class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n        <div (click)=\"toggleSidenavMode()\"\n             class=\"pl-2 pr-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n          <span class=\"text-lg\" i18n>Navigation</span>\n          <button mat-icon-button>\n            <mat-icon *ngIf=\"sidenavMode === 'over'\">radio_button_unchecked</mat-icon>\n            <mat-icon *ngIf=\"sidenavMode === 'side'\">radio_button_checked</mat-icon>\n          </button>\n        </div>\n\n        <ul class=\"grow self-stretch\" root rxap-navigation></ul>\n\n        <img\n          [src]=\"layoutComponentService.logo.src ?? 'https://via.placeholder.com/256x128px'\"\n          [routerLink]=\"['/']\"\n          [width]=\"layoutComponentService.logo.width ?? 256\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content class=\"ml-16 p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "rxap-header", inputs: ["sidenav", "color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2$5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutModule, [{
-        type: NgModule,
-        args: [{
-                imports: [
-                    LayoutComponent
-                ],
-                exports: [LayoutComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LayoutModule, { imports: [LayoutComponent], exports: [LayoutComponent] }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-layout', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        HeaderComponent,
+                        MatSidenavModule,
+                        AsyncPipe,
+                        FlexLayoutModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        RouterLink,
+                        NgIf,
+                        FooterComponent,
+                        MatMenuModule,
+                        NgOptimizedImage,
+                        NavigationComponent,
+                        RouterOutlet,
+                    ], template: "<div class=\"flex flex-col h-screen justify-between\">\n  <rxap-header [sidenav]=\"sidenav\" class=\"z-10 w-full fixed top-0\"></rxap-header>\n  <mat-sidenav-container [ngClass]=\"{\n    'mb-16': (layoutComponentService.fixedBottomGap$ | async) === 64,\n    'mb-32': (layoutComponentService.fixedBottomGap$ | async) === 128,\n  }\" class=\"grow mt-16\">\n    <mat-sidenav\n      #matSidenav=\"matSidenav\"\n      (mouseenter)=\"sidenavMode === 'over' && matSidenav.open()\"\n      (mouseleave)=\"sidenavMode === 'over' && matSidenav.close()\"\n      [fixedBottomGap]=\"layoutComponentService.fixedBottomGap$ | async\"\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"layoutComponentService.fixedTopGap$ | async\"\n      [mode]=\"sidenavMode\"\n      [opened]=\"false\"\n      class=\"sidenav\"\n    >\n      <div class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n        <div (click)=\"toggleSidenavMode()\"\n             class=\"pl-2 pr-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n          <span class=\"text-lg\" i18n>Navigation</span>\n          <button mat-icon-button>\n            <mat-icon *ngIf=\"sidenavMode === 'over'\">radio_button_unchecked</mat-icon>\n            <mat-icon *ngIf=\"sidenavMode === 'side'\">radio_button_checked</mat-icon>\n          </button>\n        </div>\n\n        <ul class=\"grow self-stretch\" root rxap-navigation></ul>\n\n        <img\n          [src]=\"layoutComponentService.logo.src ?? 'https://via.placeholder.com/256x128px'\"\n          [routerLink]=\"['/']\"\n          [width]=\"layoutComponentService.logo.width ?? 256\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content class=\"ml-16 p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: LayoutComponentService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [RXAP_ENVIRONMENT]
+                }] }, { type: i2$4.IconLoaderService }]; }, propDecorators: { sidenav: [{
+                type: ViewChild,
+                args: [MatSidenav, { static: true }]
+            }] } });
 
 class ReplaceRouterPathsService {
     transform(routerLink) {
         return of(routerLink);
     }
-    static { this.ɵfac = function ReplaceRouterPathsService_Factory(t) { return new (t || ReplaceRouterPathsService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ReplaceRouterPathsService, factory: ReplaceRouterPathsService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ReplaceRouterPathsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ReplaceRouterPathsService, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReplaceRouterPathsService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ReplaceRouterPathsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SidenavFooterDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavFooterDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: SidenavFooterDirective, isStandalone: true, selector: "[rxapSidenavFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rxapSidenavFooter]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }]; } });
+
+class SidenavHeaderDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavHeaderDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: SidenavHeaderDirective, isStandalone: true, selector: "[rxapSidenavHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rxapSidenavHeader]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }]; } });
+
+class SidenavComponent {
+    constructor(sidenav) {
+        this.sidenav = sidenav;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavComponent, deps: [{ token: SidenavComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SidenavComponent, isStandalone: true, selector: "rxap-sidenav", host: { classAttribute: "rxap-layout-sidenav" }, queries: [{ propertyName: "sidenavFooterDirective", first: true, predicate: SidenavFooterDirective, descendants: true }, { propertyName: "sidenavHeaderDirective", first: true, predicate: SidenavHeaderDirective, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" class=\"container\">\n  <div class=\"inner\"\n       fxLayout=\"column\"\n       fxLayoutAlign=\"space-between stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div [fxHide]=\"sidenav.collapsed$ | async\" class=\"header\" fxFlex=\"nogrow\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider [fxHide]=\"sidenav.collapsed$ | async\" fxFlex=\"nogrow\"></mat-divider>\n    </ng-template>\n    <div class=\"nav-container\" fxFlex=\"grow\">\n      <ul fxLayout=\"column\" root rxap-navigation></ul>\n    </div>\n    <mat-divider fxFlex=\"nogrow\"></mat-divider>\n    <button (click)=\"sidenav.toggleNavigationCollapse()\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\"\n            class=\"sidebar-toggle\"\n            fxFlex=\"nogrow\"\n            mat-button>\n      <span class=\"sidebar-toggle-inner\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\">\n        <mat-icon class=\"arrow\" fxFlex=\"nogrow\">double_arrow</mat-icon>\n        <span [fxHide]=\"sidenav.collapsed$ | async\" class=\"label\" fxFlex=\"grow\" i18n>Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider [fxHide]=\"sidenav.collapsed$ | async\" fxFlex=\"nogrow\"></mat-divider>\n      <div [fxHide]=\"sidenav.collapsed$ | async\" class=\"footer\" fxFlex=\"nogrow\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".container,.container .inner{height:100%}.container .inner .header{padding-bottom:12px}.container .inner .footer{padding-top:12px}.container .inner .nav-container{overflow-y:scroll;padding-top:12px}.container .inner .nav-container::-webkit-scrollbar{width:6px}.container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.container .sidebar-toggle{min-height:48px}.container .sidebar-toggle .sidebar-toggle-inner{padding:0}.container .sidebar-toggle .arrow{transform:rotate(180deg)}.container .sidebar-toggle.collapsed .arrow{transform:initial}.container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"], dependencies: [{ kind: "ngmodule", type: ExtendedModule }, { kind: "directive", type: i2$5.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i2$5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1$5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'rxap-layout-sidenav',
+                    }, standalone: true, imports: [
+                        ExtendedModule,
+                        NgClass,
+                        FlexModule,
+                        NgIf,
+                        NgTemplateOutlet,
+                        MatDividerModule,
+                        NavigationComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        AsyncPipe,
+                    ], template: "<div [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" class=\"container\">\n  <div class=\"inner\"\n       fxLayout=\"column\"\n       fxLayoutAlign=\"space-between stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div [fxHide]=\"sidenav.collapsed$ | async\" class=\"header\" fxFlex=\"nogrow\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider [fxHide]=\"sidenav.collapsed$ | async\" fxFlex=\"nogrow\"></mat-divider>\n    </ng-template>\n    <div class=\"nav-container\" fxFlex=\"grow\">\n      <ul fxLayout=\"column\" root rxap-navigation></ul>\n    </div>\n    <mat-divider fxFlex=\"nogrow\"></mat-divider>\n    <button (click)=\"sidenav.toggleNavigationCollapse()\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\"\n            class=\"sidebar-toggle\"\n            fxFlex=\"nogrow\"\n            mat-button>\n      <span class=\"sidebar-toggle-inner\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\">\n        <mat-icon class=\"arrow\" fxFlex=\"nogrow\">double_arrow</mat-icon>\n        <span [fxHide]=\"sidenav.collapsed$ | async\" class=\"label\" fxFlex=\"grow\" i18n>Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider [fxHide]=\"sidenav.collapsed$ | async\" fxFlex=\"nogrow\"></mat-divider>\n      <div [fxHide]=\"sidenav.collapsed$ | async\" class=\"footer\" fxFlex=\"nogrow\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".container,.container .inner{height:100%}.container .inner .header{padding-bottom:12px}.container .inner .footer{padding-top:12px}.container .inner .nav-container{overflow-y:scroll;padding-top:12px}.container .inner .nav-container::-webkit-scrollbar{width:6px}.container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.container .sidebar-toggle{min-height:48px}.container .sidebar-toggle .sidebar-toggle-inner{padding:0}.container .sidebar-toggle .arrow{transform:rotate(180deg)}.container .sidebar-toggle.collapsed .arrow{transform:initial}.container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: SidenavComponentService }]; }, propDecorators: { sidenavFooterDirective: [{
+                type: ContentChild,
+                args: [SidenavFooterDirective]
+            }], sidenavHeaderDirective: [{
+                type: ContentChild,
+                args: [SidenavHeaderDirective]
+            }] } });
 
-function VersionComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "span", 3);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 4);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 5);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const module_r1 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(module_r1.value.name);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(module_r1.value.semantic);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(module_r1.value.hash);
-} }
 class VersionComponent {
     constructor(version) {
         this.version = version;
@@ -1773,28 +983,84 @@ class VersionComponent {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
-    static { this.ɵfac = function VersionComponent_Factory(t) { return new (t || VersionComponent)(i0.ɵɵdirectiveInject(VersionService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VersionComponent, selectors: [["rxap-version"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 3, vars: 3, consts: [["fxFlex", "nogrow", "fxLayout", "column", "fxLayoutAlign", "start start", "fxLayoutGap", "8px", 1, "version"], ["fxFlex", "nogrow", "fxLayout", "column", 4, "ngFor", "ngForOf"], ["fxFlex", "nogrow", "fxLayout", "column"], ["fxFlex", "nogrow", 1, "name"], ["fxFlex", "nogrow", 1, "semantic"], ["fxFlex", "nogrow", 1, "hash"]], template: function VersionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, VersionComponent_div_1_Template, 7, 3, "div", 1);
-            i0.ɵɵpipe(2, "keyvalue");
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, ctx.modules));
-        } }, dependencies: [FlexModule, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, NgFor, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: VersionComponent, deps: [{ token: VersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: VersionComponent, isStandalone: true, selector: "rxap-version", ngImport: i0, template: "<div class=\"version\" fxFlex=\"nogrow\" fxLayout=\"column\" fxLayoutAlign=\"start start\" fxLayoutGap=\"8px\">\n  <div *ngFor=\"let module of modules | keyvalue\" fxFlex=\"nogrow\" fxLayout=\"column\">\n    <span class=\"name\" fxFlex=\"nogrow\">{{module.value.name}}</span>\n    <span class=\"semantic\" fxFlex=\"nogrow\">{{module.value.semantic}}</span>\n    <span class=\"hash\" fxFlex=\"nogrow\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"], dependencies: [{ kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1$5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    Required,
-    __metadata("design:type", Object)
-], VersionComponent.prototype, "modules", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VersionComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-version', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FlexModule, NgFor, KeyValuePipe], template: "<div class=\"version\" fxFlex=\"nogrow\" fxLayout=\"column\" fxLayoutAlign=\"start start\" fxLayoutGap=\"8px\">\n  <div *ngFor=\"let module of modules | keyvalue\" fxFlex=\"nogrow\" fxLayout=\"column\">\n    <span class=\"name\" fxFlex=\"nogrow\">{{module.value.name}}</span>\n    <span class=\"semantic\" fxFlex=\"nogrow\">{{module.value.semantic}}</span>\n    <span class=\"hash\" fxFlex=\"nogrow\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"] }]
-    }], function () { return [{ type: i1.VersionService, decorators: [{
-                type: Inject,
-                args: [VersionService]
-            }] }]; }, { modules: [] }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: VersionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-version', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FlexModule, NgFor, KeyValuePipe], template: "<div class=\"version\" fxFlex=\"nogrow\" fxLayout=\"column\" fxLayoutAlign=\"start start\" fxLayoutGap=\"8px\">\n  <div *ngFor=\"let module of modules | keyvalue\" fxFlex=\"nogrow\" fxLayout=\"column\">\n    <span class=\"name\" fxFlex=\"nogrow\">{{module.value.name}}</span>\n    <span class=\"semantic\" fxFlex=\"nogrow\">{{module.value.semantic}}</span>\n    <span class=\"hash\" fxFlex=\"nogrow\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.VersionService, decorators: [{
+                    type: Inject,
+                    args: [VersionService]
+                }] }]; } });
+
+class ToggleWindowSidenavButtonComponent {
+    constructor() {
+        this.openWindowSidenav = false;
+        this.openWindowSidenavChange = new EventEmitter();
+    }
+    toggle() {
+        this.openWindowSidenav = !this.openWindowSidenav;
+        this.openWindowSidenavChange.emit(this.openWindowSidenav);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ToggleWindowSidenavButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ToggleWindowSidenavButtonComponent, isStandalone: true, selector: "rxap-toggle-window-sidenav-button", inputs: { openWindowSidenav: "openWindowSidenav" }, outputs: { openWindowSidenavChange: "openWindowSidenavChange" }, host: { classAttribute: "rxap-toggle-window-sidenav-button" }, ngImport: i0, template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon svgIcon=\"arrow-left-bold\"></mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon svgIcon=\"arrow-right-bold\"></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"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ToggleWindowSidenavButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-toggle-window-sidenav-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'rxap-toggle-window-sidenav-button',
+                    }, standalone: true, imports: [MatButtonModule, NgIf, MatIconModule], template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon svgIcon=\"arrow-left-bold\"></mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon svgIcon=\"arrow-right-bold\"></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"] }]
+        }], propDecorators: { openWindowSidenav: [{
+                type: Input
+            }], openWindowSidenavChange: [{
+                type: Output
+            }] } });
+
+class WindowContainerSidenavComponent {
+    constructor(service) {
+        this.service = service;
+        this.portals = new Map();
+        this.subscription = new Subscription();
+    }
+    ngOnInit() {
+        const components = this.service.getAll();
+        for (const component of components) {
+            this.add(component);
+        }
+        this.subscription.add(this.service.add$.pipe(tap(component => this.add(component))).subscribe());
+        this.subscription.add(this.service.remove$.pipe(tap(component => this.remove(component))).subscribe());
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    trackBy(index, id) {
+        return id;
+    }
+    add(component) {
+        if (this.portals.has(component.id)) {
+            throw new Error(`Component portal with id ${component.id} already exists`);
+        }
+        const portal = new ComponentPortal(component.component, component.viewContainerRef, component.injector, component.componentFactoryResolver);
+        this.portals.set(component.id, portal);
+    }
+    remove(component) {
+        if (this.portals.has(component.id)) {
+            const portal = this.portals.get(component.id);
+            this.portals.delete(component.id);
+            portal.detach();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: WindowContainerSidenavComponent, deps: [{ token: WindowContainerSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: WindowContainerSidenavComponent, isStandalone: true, selector: "rxap-window-container-sidenav", ngImport: i0, template: "<div class=\"container\" fxLayout=\"column\" fxLayoutGap=\"16px\">\n\n  <div *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\" fxFlex=\"nogrow\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n", styles: [".container{padding:8px}\n"], dependencies: [{ kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1$5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: WindowContainerSidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-window-container-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FlexModule, NgFor, PortalModule], template: "<div class=\"container\" fxLayout=\"column\" fxLayoutGap=\"16px\">\n\n  <div *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\" fxFlex=\"nogrow\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n", styles: [".container{padding:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.WindowContainerSidenavService, decorators: [{
+                    type: Inject,
+                    args: [WindowContainerSidenavService]
+                }] }]; } });
 
 class FooterDirective {
     constructor(footerService, template, viewContainerRef) {
@@ -1811,29 +1077,53 @@ class FooterDirective {
             this.footerService.removePortal(this._portal);
         }
     }
-    static { this.ɵfac = function FooterDirective_Factory(t) { return new (t || FooterDirective)(i0.ɵɵdirectiveInject(FooterService), i0.ɵɵdirectiveInject(TemplateRef), i0.ɵɵdirectiveInject(ViewContainerRef)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FooterDirective, selectors: [["", "rxapFooter", ""]], standalone: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FooterDirective, deps: [{ token: FooterService }, { token: TemplateRef }, { token: ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: FooterDirective, isStandalone: true, selector: "[rxapFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rxapFooter]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FooterService, decorators: [{
+                    type: Inject,
+                    args: [FooterService]
+                }] }, { type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }, { type: i0.ViewContainerRef, decorators: [{
+                    type: Inject,
+                    args: [ViewContainerRef]
+                }] }]; } });
+
+class I18nCheckGuard {
+    constructor(i18nService, userProfileService) {
+        this.i18nService = i18nService;
+        this.userProfileService = userProfileService;
+    }
+    async canActivate() {
+        if (isDevMode()) {
+            return true;
+        }
+        const selectedLanguage = (await this.userProfileService.getLanguage()) ?? 'en';
+        if (this.i18nService.currentLanguage !== selectedLanguage) {
+            this.i18nService.redirect(selectedLanguage);
+            return false;
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nCheckGuard, deps: [{ token: I18nService }, { token: i1$2.RxapUserProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nCheckGuard, providedIn: 'root' }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[rxapFooter]',
-                standalone: true
-            }]
-    }], function () { return [{ type: i1.FooterService, decorators: [{
-                type: Inject,
-                args: [FooterService]
-            }] }, { type: i0.TemplateRef, decorators: [{
-                type: Inject,
-                args: [TemplateRef]
-            }] }, { type: i0.ViewContainerRef, decorators: [{
-                type: Inject,
-                args: [ViewContainerRef]
-            }] }]; }, null); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: I18nCheckGuard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: I18nService }, { type: i1$2.RxapUserProfileService }]; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppsButtonComponent, FooterComponent, FooterDirective, HeaderComponent, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LayoutComponent, LayoutComponentService, LayoutModule, NavigationComponent, NavigationItemComponent, NavigationProgressBarComponent, NavigationService, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, ReplaceRouterPathsService, ResetButtonComponent, SidenavComponent, SidenavComponentService, SidenavContentComponent, SidenavContentComponentService, SidenavFooterDirective, SidenavHeaderDirective, SidenavToggleButtonComponent, SignOutComponent, ToggleWindowSidenavButtonComponent, UserProfileIconComponent, VersionComponent, WindowContainerSidenavComponent };
+export { AppUrlService, AppsButtonComponent, FooterComponent, FooterDirective, HeaderComponent, I18nCheckGuard, I18nService, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LanguageSelectorService, LayoutComponent, LayoutComponentService, NavigationComponent, NavigationItemComponent, NavigationProgressBarComponent, NavigationService, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, ReplaceRouterPathsService, ResetButtonComponent, SidenavComponent, SidenavComponentService, SidenavFooterDirective, SidenavHeaderDirective, SidenavToggleButtonComponent, SignOutComponent, ToggleWindowSidenavButtonComponent, UserProfileIconComponent, VersionComponent, WindowContainerSidenavComponent };
 //# sourceMappingURL=rxap-layout.mjs.map