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

package/fesm2022/rxap-layout.mjs

@@ -1,57 +1,54 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, NgModule, Inject, Input, Optional, Injectable, TemplateRef, Directive, INJECTOR, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, ViewChild, HostBinding, HostListener, ChangeDetectorRef, ContentChild, EventEmitter, Output, Pipe } from '@angular/core';
+import { 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 * as i1 from '@rxap/services';
-import { HeaderService, ResetService, FooterService, WindowContainerSidenavService, VersionService } from '@rxap/services';
+import { HeaderService, ResetService, WindowContainerSidenavService, FooterService, VersionService } 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 * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/cdk/portal';
-import { PortalModule, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
-import { Subscription, BehaviorSubject, ReplaySubject, of, from, combineLatest } from 'rxjs';
-import { map, filter, tap, switchMap, catchError, startWith, delay, skip, distinctUntilChanged } from 'rxjs/operators';
-import * as i2$4 from '@angular/material/sidenav';
+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 i3 from '@rxap/authentication';
-import { UserService, SignOutDirectiveModule } from '@rxap/authentication';
-import * as i3$1 from '@angular/router';
-import { Router, NavigationStart, NavigationEnd, NavigationCancel, RouterModule, RouterLinkActive } from '@angular/router';
-import * as i1$1 from '@angular/material/legacy-button';
-import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+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 * as i1$2 from '@angular/material/legacy-menu';
-import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
+import { AvatarBackgroundImageDirective } from '@rxap/directives';
 import * as i1$3 from '@angular/flex-layout/flex';
-import * as i5 from '@rxap/directives';
-import { AvatarBackgroundImageDirectiveModule, StopPropagationDirectiveModule } from '@rxap/directives';
-import * as i1$4 from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { __decorate, __metadata } from 'tslib';
-import { Required, DebounceCall, coerceBoolean } from '@rxap/utilities';
-import * as i5$1 from '@angular/flex-layout/extended';
-import * as i1$5 from '@rxap/config';
+import { FlexModule } from '@angular/flex-layout/flex';
+import * as i1$4 from '@rxap/config';
 import { ConfigService } from '@rxap/config';
-import * as i3$2 from '@angular/cdk/overlay';
-import { OverlayModule, Overlay } from '@angular/cdk/overlay';
-import * as i2$3 from '@angular/material/legacy-form-field';
-import * as i3$3 from '@angular/material/legacy-select';
-import { MatLegacySelectModule } from '@angular/material/legacy-select';
-import * as i4$1 from '@angular/material/legacy-core';
-import * as i6 from '@angular/forms';
+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 i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatGridListModule } from '@angular/material/grid-list';
-import * as i3$4 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
+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 { trigger, transition, style, animate } from '@angular/animations';
-import * as i5$2 from '@rxap/material-directives/icon';
-import { IconDirectiveModule } from '@rxap/material-directives/icon';
-import * as i6$1 from '@angular/material/core';
-import { MatRippleModule } from '@angular/material/core';
-import * as i7 from '@angular/material/legacy-tooltip';
-import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
+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';
 
 const RXAP_NAVIGATION_CONFIG = new InjectionToken('rxap/layout/navigation-config');
 const RXAP_NAVIGATION_CONFIG_INSERTS = new InjectionToken('rxap/layout/navigation-config-inserts');
@@ -90,40 +87,43 @@ class FooterComponent {
         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"]], 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) {
+    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: [i2.MatToolbar, i2.MatToolbarRow, i2$1.NgForOf, i2$1.NgIf, i4.CdkPortalOutlet, i2$1.AsyncPipe], changeDetection: 0 }); }
+        } }, dependencies: [NgIf, MatToolbarModule, i2.MatToolbar, i2.MatToolbarRow, NgFor, PortalModule, i3.CdkPortalOutlet, AsyncPipe], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterComponent, [{
         type: Component,
-        args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngIf]=\"footerService.portals$ | async\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n" }]
+        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); })();
 
-class FooterModule {
-    static { this.ɵfac = function FooterModule_Factory(t) { return new (t || FooterModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FooterModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatToolbarModule,
-            CommonModule,
-            PortalModule] }); }
+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));
+    }
+    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(FooterModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [FooterComponent],
-                imports: [
-                    MatToolbarModule,
-                    CommonModule,
-                    PortalModule
-                ],
-                exports: [FooterComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(FooterModule, { declarations: [FooterComponent], imports: [MatToolbarModule,
-        CommonModule,
-        PortalModule], exports: [FooterComponent] }); })();
+(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) {
@@ -133,18 +133,18 @@ class SignOutComponent {
         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"], decls: 3, vars: 0, consts: [["rxapSignOut", "", "mat-icon-button", "", 3, "successful"]], template: function SignOutComponent_Template(rf, ctx) { if (rf & 1) {
+    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: [i1$1.MatLegacyButton, i2$2.MatIcon, i3.SignOutDirective], changeDetection: 0 }); }
+        } }, 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' }, template: "<button\n  rxapSignOut\n  (successful)=\"redirectToRoot()\"\n  mat-icon-button\n>\n  <mat-icon>login</mat-icon>\n</button>\n" }]
-    }], function () { return [{ type: i3$1.Router, decorators: [{
+        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); })();
@@ -223,7 +223,7 @@ class UserProfileIconComponent {
             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"], 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) {
+    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");
@@ -239,78 +239,25 @@ class UserProfileIconComponent {
             i0.ɵɵproperty("yPosition", "below");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 9, ctx.userService.user$));
-        } }, dependencies: [i1$2.MatLegacyMenu, i1$2.MatLegacyMenuItem, i1$2.MatLegacyMenuTrigger, i2$2.MatIcon, i2$1.NgIf, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i5.AvatarBackgroundImageDirective, i2$1.AsyncPipe], styles: [".profile-icon[_ngcontent-%COMP%]{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon[_ngcontent-%COMP%]:hover{cursor:pointer}.profile-icon[_ngcontent-%COMP%]:focus{outline:none}"], changeDetection: 0 }); }
+        } }, 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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserProfileIconComponent, [{
         type: Component,
-        args: [{ selector: 'rxap-user-profile-icon', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-user-profile-icon' }, template: "<button [matMenuTriggerFor]=\"menu\"\n        [rxapAvatarBackgroundImage]=\"userProfileUrl$ | async\"\n        [name]=\"(userName$ | async) ?? ''\"\n        class=\"profile-icon\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"center center\">\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\">\n  <ng-template [ngIf]=\"userService.user$ | async\" let-user>\n    <button *ngIf=\"user.firstname && user.lastname\" mat-menu-item>\n      <mat-icon>person</mat-icon>\n      <span>{{user.firstname}} {{user.lastname}}</span>\n    </button>\n    <button *ngIf=\"user.name\" mat-menu-item>\n      <mat-icon>person</mat-icon>\n      <span>{{user.name}}</span>\n    </button>\n    <button *ngIf=\"user.username\" mat-menu-item>\n      <mat-icon>account_circle</mat-icon>\n      <span>{{user.username}}</span>\n    </button>\n    <button *ngIf=\"user.email\" mat-menu-item>\n      <mat-icon>email</mat-icon>\n      <span>{{user.email}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"] }]
-    }], function () { return [{ type: i3.UserService, decorators: [{
+        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); })();
 
-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));
-    }
-    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"], decls: 2, vars: 3, consts: [["mode", "indeterminate", "color", "accent", 4, "ngIf"], ["mode", "indeterminate", "color", "accent"]], template: function NavigationProgressBarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, NavigationProgressBarComponent_mat_progress_bar_0_Template, 1, 0, "mat-progress-bar", 0);
-            i0.ɵɵpipe(1, "async");
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.navigating$));
-        } }, dependencies: [i1$4.MatLegacyProgressBar, i2$1.NgIf, i2$1.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' }, template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  mode=\"indeterminate\"\n  color=\"accent\"\n></mat-progress-bar>\n" }]
-    }], function () { return [{ type: i3$1.Router, decorators: [{
-                type: Inject,
-                args: [Router]
-            }] }]; }, null); })();
-
-function SidenavToggleButtonComponent_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "menu");
-    i0.ɵɵelementEnd();
-} }
-function SidenavToggleButtonComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "menu_open");
-    i0.ɵɵelementEnd();
-} }
-class SidenavToggleButtonComponent {
-    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" }, 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: [i2$2.MatIcon, i2$1.NgIf, i1$1.MatLegacyButton], changeDetection: 0 }); }
-}
-__decorate([
-    Required,
-    __metadata("design:type", MatSidenav)
-], SidenavToggleButtonComponent.prototype, "sidenav", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-sidenav-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-sidenav-toggle-button' }, template: "<button (click)=\"sidenav.toggle()\" mat-icon-button>\n  <mat-icon *ngIf=\"!sidenav.opened\">menu</mat-icon>\n  <mat-icon *ngIf=\"sidenav.opened\">menu_open</mat-icon>\n</button>\n" }]
-    }], null, { sidenav: [{
-            type: Input
-        }] }); })();
-
 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);
@@ -387,21 +334,38 @@ class AppsButtonComponent {
         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"], 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) {
+    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: [i1$1.MatLegacyButton, i2$2.MatIcon, i3$2.CdkConnectedOverlay, i3$2.CdkOverlayOrigin, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i5$1.DefaultClassDirective, i5$1.DefaultStyleDirective, i2$1.NgClass, i2$1.NgForOf, i2$1.NgIf, i2$1.NgStyle], styles: [".grid-container[_ngcontent-%COMP%]{padding:8px;border:1px solid rgba(0,0,0,.2);border-radius:8px;box-shadow:0 1px 2px #3c40434d,0 2px 6px 2px #3c404326}.grid[_ngcontent-%COMP%]{list-style-type:none;margin:0;padding:0}.grid[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{border-radius:8px;padding:6px;height:84px;width:84px;transition-delay:0s;transition-duration:.2s;transition-property:tramsform;transition-timing-function:cubic-bezier(.333,0,0,1);position:relative}.grid[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{position:absolute;inset:6px;text-align:center;text-decoration:none;color:#000}"], changeDetection: 0 }); }
+        } }, 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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppsButtonComponent, [{
         type: Component,
-        args: [{ selector: 'rxap-apps-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-apps-button' }, template: "<ng-template [ngIf]=\"grid && grid.length\">\n  <button #trigger=\"cdkOverlayOrigin\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin mat-icon-button>\n    <mat-icon>apps</mat-icon>\n  </button>\n\n  <ng-template (overlayOutsideClick)=\"isOpen = false\"\n               [cdkConnectedOverlayOpen]=\"isOpen\"\n               [cdkConnectedOverlayOrigin]=\"trigger\"\n               cdkConnectedOverlay>\n\n    <div class=\"grid-container\">\n\n      <ul [ngStyle]=\"{ columns: columns }\" class=\"grid\">\n        <li *ngFor=\"let item of gridWithPadding\" [ngClass]=\"{ empty: item.empty }\">\n          <a *ngIf=\"!item.empty\" [href]=\"item.href\">\n\n        <span fxLayout=\"column\" fxLayoutAlign=\"start center\" fxLayoutGap=\"12px\">\n          <img [src]=\"item.image\" width=\"53px\">\n          <span>{{item.label}}</span>\n        </span>\n\n          </a>\n        </li>\n      </ul>\n\n    </div>\n\n  </ng-template>\n</ng-template>\n", styles: [".grid-container{padding:8px;border:1px solid rgba(0,0,0,.2);border-radius:8px;box-shadow:0 1px 2px #3c40434d,0 2px 6px 2px #3c404326}.grid{list-style-type:none;margin:0;padding:0}.grid li{border-radius:8px;padding:6px;height:84px;width:84px;transition-delay:0s;transition-duration:.2s;transition-property:tramsform;transition-timing-function:cubic-bezier(.333,0,0,1);position:relative}.grid li a{position:absolute;inset:6px;text-align:center;text-decoration:none;color:#000}\n"] }]
+        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$5.ConfigService, decorators: [{
+            }] }, { type: i1$4.ConfigService, decorators: [{
                 type: Inject,
                 args: [ConfigService]
             }] }]; }, null); })();
@@ -487,7 +451,7 @@ class LanguageSelectorService {
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorService, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1$5.ConfigService, decorators: [{
+    }], function () { return [{ type: i1$4.ConfigService, decorators: [{
                 type: Inject,
                 args: [ConfigService]
             }] }]; }, null); })();
@@ -496,18 +460,65 @@ class LanguageSelectorComponent {
         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"], 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) {
+    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: [i2$3.MatLegacyFormField, i3$3.MatLegacySelect, i4$1.MatLegacyOption, i2$1.NgForOf, i2$1.NgIf, i6.NgControlStatus, i6.NgModel, i2$1.KeyValuePipe], styles: [".language-selector[_ngcontent-%COMP%]{width:142px}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper{padding-bottom:0}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector[_ngcontent-%COMP%]     .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}"], changeDetection: 0 }); }
+        } }, 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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponent, [{
         type: Component,
-        args: [{ selector: 'rxap-language-selector', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-language-selector' }, template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\">\n      <mat-select (ngModelChange)=\"language.setLanguage($event)\" [ngModel]=\"language.selectedLanguage\">\n        <mat-option *ngFor=\"let item of language.languages | keyvalue\" [value]=\"item.key\">{{item.value}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".language-selector{width:142px}.language-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}\n"] }]
+        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); })();
 
+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 }); }
+}
+__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
+        }] }); })();
+
 function HeaderComponent_mat_toolbar_row_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -563,7 +574,7 @@ class HeaderComponent {
         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" }, 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) {
+    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);
@@ -589,17 +600,45 @@ class HeaderComponent {
             i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(10, 6, ctx.hasUser$));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.settingsMenuPanel);
-        } }, dependencies: [i2.MatToolbar, i2.MatToolbarRow, SignOutComponent, UserProfileIconComponent, NavigationProgressBarComponent, SidenavToggleButtonComponent, i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i5$1.DefaultClassDirective, i2$1.NgClass, i2$1.NgComponentOutlet, i2$1.NgForOf, i2$1.NgIf, i1$1.MatLegacyButton, i2$2.MatIcon, i1$2.MatLegacyMenuTrigger, AppsButtonComponent, LanguageSelectorComponent, i2$1.AsyncPipe], styles: [".content[_ngcontent-%COMP%]{width:100%;height:64px}"], changeDetection: 0 }); }
+        } }, 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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
         type: Component,
         args: [{ selector: 'rxap-header', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                    class: 'rxap-layout-header',
-                }, template: "<mat-toolbar [ngClass]=\"{ open: sidenav?.opened }\" [color]=\"color\" class=\"mat-elevation-z3\">\n  <mat-toolbar-row *ngFor=\"let headerComponent of components\">\n    <ng-container *ngComponentOutlet=\"headerComponent\"></ng-container>\n  </mat-toolbar-row>\n  <mat-toolbar-row>\n    <div\n      fxLayout=\"row\"\n      fxLayoutAlign=\"space-between center\"\n      fxLayoutGap=\"16px\"\n      class=\"content\"\n    >\n      <rxap-sidenav-toggle-button *ngIf=\"sidenav\" fxFlex=\"nogrow\" [sidenav]=\"sidenav\"></rxap-sidenav-toggle-button>\n      <div fxFlex=\"grow\">\n        <ng-content></ng-content>\n      </div>\n      <rxap-language-selector fxFlex=\"nogrow\"></rxap-language-selector>\n      <rxap-apps-button fxFlex=\"nogrow\"></rxap-apps-button>\n      <rxap-user-profile-icon *ngIf=\"hasUser$ | async\" fxFlex=\"nogrow\"></rxap-user-profile-icon>\n      <div fxFlex=\"nogrow\" *ngIf=\"settingsMenuPanel\">\n        <button mat-icon-button [matMenuTriggerFor]=\"settingsMenuPanel\">\n          <mat-icon>settings</mat-icon>\n        </button>\n      </div>\n      <rxap-sign-out fxFlex=\"nogrow\"></rxap-sign-out>\n    </div>\n  </mat-toolbar-row>\n</mat-toolbar>\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n", styles: [".content{width:100%;height:64px}\n"] }]
+                    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: i3.UserService, decorators: [{
+            }] }, { type: i4.UserService, decorators: [{
                 type: Inject,
                 args: [UserService]
             }] }, { type: undefined, decorators: [{
@@ -615,253 +654,27 @@ class HeaderComponent {
             type: Input
         }] }); })();
 
-class SignOutComponentModule {
-    static { this.ɵfac = function SignOutComponentModule_Factory(t) { return new (t || SignOutComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SignOutComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacyButtonModule,
-            MatIconModule,
-            SignOutDirectiveModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SignOutComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [SignOutComponent],
-                imports: [
-                    MatLegacyButtonModule,
-                    MatIconModule,
-                    SignOutDirectiveModule,
-                ],
-                exports: [SignOutComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SignOutComponentModule, { declarations: [SignOutComponent], imports: [MatLegacyButtonModule,
-        MatIconModule,
-        SignOutDirectiveModule], exports: [SignOutComponent] }); })();
-
-class UserProfileIconComponentModule {
-    static { this.ɵfac = function UserProfileIconComponentModule_Factory(t) { return new (t || UserProfileIconComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: UserProfileIconComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacyMenuModule,
-            MatIconModule,
-            CommonModule,
-            FlexLayoutModule,
-            AvatarBackgroundImageDirectiveModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserProfileIconComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [UserProfileIconComponent],
-                imports: [
-                    MatLegacyMenuModule,
-                    MatIconModule,
-                    CommonModule,
-                    FlexLayoutModule,
-                    AvatarBackgroundImageDirectiveModule,
-                ],
-                exports: [UserProfileIconComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(UserProfileIconComponentModule, { declarations: [UserProfileIconComponent], imports: [MatLegacyMenuModule,
-        MatIconModule,
-        CommonModule,
-        FlexLayoutModule,
-        AvatarBackgroundImageDirectiveModule], exports: [UserProfileIconComponent] }); })();
-
-class NavigationProgressBarComponentModule {
-    static { this.ɵfac = function NavigationProgressBarComponentModule_Factory(t) { return new (t || NavigationProgressBarComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NavigationProgressBarComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacyProgressBarModule,
-            CommonModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationProgressBarComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [NavigationProgressBarComponent],
-                imports: [
-                    MatLegacyProgressBarModule,
-                    CommonModule
-                ],
-                exports: [NavigationProgressBarComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NavigationProgressBarComponentModule, { declarations: [NavigationProgressBarComponent], imports: [MatLegacyProgressBarModule,
-        CommonModule], exports: [NavigationProgressBarComponent] }); })();
-
-class SidenavToggleButtonComponentModule {
-    static { this.ɵfac = function SidenavToggleButtonComponentModule_Factory(t) { return new (t || SidenavToggleButtonComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SidenavToggleButtonComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatIconModule,
-            CommonModule,
-            MatLegacyButtonModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavToggleButtonComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [SidenavToggleButtonComponent],
-                imports: [
-                    MatIconModule,
-                    CommonModule,
-                    MatLegacyButtonModule
-                ],
-                exports: [SidenavToggleButtonComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SidenavToggleButtonComponentModule, { declarations: [SidenavToggleButtonComponent], imports: [MatIconModule,
-        CommonModule,
-        MatLegacyButtonModule], exports: [SidenavToggleButtonComponent] }); })();
-
 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"], decls: 3, vars: 0, consts: [["mat-icon-button", "", 3, "click"]], template: function ResetButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    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: [i2$2.MatIcon, i1$1.MatLegacyButton], changeDetection: 0 }); }
+        } }, dependencies: [MatButtonModule, i1$2.MatIconButton, MatIconModule, i2$2.MatIcon], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResetButtonComponent, [{
         type: Component,
-        args: [{ selector: 'rxap-reset-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-reset-button' }, template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon>refresh</mat-icon>\n</button>\n" }]
+        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); })();
 
-class ResetButtonComponentModule {
-    static { this.ɵfac = function ResetButtonComponentModule_Factory(t) { return new (t || ResetButtonComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ResetButtonComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatIconModule,
-            MatLegacyButtonModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResetButtonComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [ResetButtonComponent],
-                imports: [
-                    MatIconModule,
-                    MatLegacyButtonModule
-                ],
-                exports: [ResetButtonComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ResetButtonComponentModule, { declarations: [ResetButtonComponent], imports: [MatIconModule,
-        MatLegacyButtonModule], exports: [ResetButtonComponent] }); })();
-
-class AppsButtonComponentModule {
-    static { this.ɵfac = function AppsButtonComponentModule_Factory(t) { return new (t || AppsButtonComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AppsButtonComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacyButtonModule,
-            MatIconModule,
-            MatGridListModule,
-            OverlayModule,
-            FlexLayoutModule,
-            CommonModule,
-            RouterModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppsButtonComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [AppsButtonComponent],
-                imports: [
-                    MatLegacyButtonModule,
-                    MatIconModule,
-                    MatGridListModule,
-                    OverlayModule,
-                    FlexLayoutModule,
-                    CommonModule,
-                    RouterModule
-                ],
-                exports: [AppsButtonComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppsButtonComponentModule, { declarations: [AppsButtonComponent], imports: [MatLegacyButtonModule,
-        MatIconModule,
-        MatGridListModule,
-        OverlayModule,
-        FlexLayoutModule,
-        CommonModule,
-        RouterModule], exports: [AppsButtonComponent] }); })();
-
-class LanguageSelectorComponentModule {
-    static { this.ɵfac = function LanguageSelectorComponentModule_Factory(t) { return new (t || LanguageSelectorComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LanguageSelectorComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacySelectModule,
-            CommonModule,
-            FormsModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LanguageSelectorComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [LanguageSelectorComponent],
-                imports: [
-                    MatLegacySelectModule,
-                    CommonModule,
-                    FormsModule
-                ],
-                exports: [LanguageSelectorComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LanguageSelectorComponentModule, { declarations: [LanguageSelectorComponent], imports: [MatLegacySelectModule,
-        CommonModule,
-        FormsModule], exports: [LanguageSelectorComponent] }); })();
-
-class HeaderModule {
-    static { this.ɵfac = function HeaderModule_Factory(t) { return new (t || HeaderModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: HeaderModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatToolbarModule,
-            SignOutComponentModule,
-            UserProfileIconComponentModule,
-            NavigationProgressBarComponentModule,
-            SidenavToggleButtonComponentModule,
-            ResetButtonComponentModule,
-            FlexLayoutModule,
-            CommonModule,
-            MatLegacyButtonModule,
-            MatIconModule,
-            MatLegacyMenuModule,
-            AppsButtonComponentModule,
-            LanguageSelectorComponentModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [HeaderComponent],
-                imports: [
-                    MatToolbarModule,
-                    SignOutComponentModule,
-                    UserProfileIconComponentModule,
-                    NavigationProgressBarComponentModule,
-                    SidenavToggleButtonComponentModule,
-                    ResetButtonComponentModule,
-                    FlexLayoutModule,
-                    CommonModule,
-                    MatLegacyButtonModule,
-                    MatIconModule,
-                    MatLegacyMenuModule,
-                    AppsButtonComponentModule,
-                    LanguageSelectorComponentModule
-                ],
-                exports: [HeaderComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(HeaderModule, { declarations: [HeaderComponent], imports: [MatToolbarModule,
-        SignOutComponentModule,
-        UserProfileIconComponentModule,
-        NavigationProgressBarComponentModule,
-        SidenavToggleButtonComponentModule,
-        ResetButtonComponentModule,
-        FlexLayoutModule,
-        CommonModule,
-        MatLegacyButtonModule,
-        MatIconModule,
-        MatLegacyMenuModule,
-        AppsButtonComponentModule,
-        LanguageSelectorComponentModule], exports: [HeaderComponent] }); })();
-
 class LayoutComponentService {
     constructor(footerComponentService, headerComponentService, logoConfig = null, config) {
         this.footerComponentService = footerComponentService;
@@ -891,61 +704,237 @@ class LayoutComponentService {
             }, {
                 type: Inject,
                 args: [RXAP_LOGO_CONFIG]
-            }] }, { type: i1$5.ConfigService, decorators: [{
+            }] }, { type: i1$4.ConfigService, decorators: [{
                 type: Inject,
                 args: [ConfigService]
             }] }]; }, null); })();
 
-class SidenavFooterDirective {
-    constructor(template) {
-        this.template = template;
+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();
     }
-    static { this.ɵfac = function SidenavFooterDirective_Factory(t) { return new (t || SidenavFooterDirective)(i0.ɵɵdirectiveInject(TemplateRef)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SidenavFooterDirective, selectors: [["", "rxapSidenavFooter", ""]] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavFooterDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[rxapSidenavFooter]',
-            }]
-    }], function () { return [{ type: i0.TemplateRef, decorators: [{
-                type: Inject,
-                args: [TemplateRef]
-            }] }]; }, null); })();
-
-class SidenavHeaderDirective {
-    constructor(template) {
-        this.template = template;
+    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());
     }
-    static { this.ɵfac = function SidenavHeaderDirective_Factory(t) { return new (t || SidenavHeaderDirective)(i0.ɵɵdirectiveInject(TemplateRef)); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SidenavHeaderDirective, selectors: [["", "rxapSidenavHeader", ""]] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavHeaderDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[rxapSidenavHeader]',
-            }]
-    }], 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));
+    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 = 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 }); }
+}
+(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); })();
+
+function ToggleWindowSidenavButtonComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "keyboard_arrow_left");
+    i0.ɵɵelementEnd();
+} }
+function ToggleWindowSidenavButtonComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "keyboard_arrow_right");
+    i0.ɵɵelementEnd();
+} }
+class ToggleWindowSidenavButtonComponent {
+    constructor() {
+        this.openWindowSidenav = false;
+        this.openWindowSidenavChange = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    toggle() {
+        this.openWindowSidenav = !this.openWindowSidenav;
+        this.openWindowSidenavChange.emit(this.openWindowSidenav);
+    }
+    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;
+    }
+    ngOnInit() {
+    }
+    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;
+    }
+    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;
+    }
+    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));
     }
     toggleNavigationCollapse() {
         this.collapsed$.next(!this.collapsed$.value);
     }
-    static { this.ɵfac = function SidenavComponentService_Factory(t) { return new (t || SidenavComponentService)(i0.ɵɵinject(i1$5.ConfigService)); }; }
+    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' }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavComponentService, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], function () { return [{ type: i1$5.ConfigService }]; }, null); })();
+    }], function () { return [{ type: i1$4.ConfigService }]; }, null); })();
 
 function IsNavigationDividerItem(item) {
     return item && item.hasOwnProperty('divider') && item.divider;
@@ -1094,8 +1083,8 @@ class NavigationService {
                 args: [RXAP_NAVIGATION_CONFIG_INSERTS]
             }] }]; }, null); })();
 
-const _c0$3 = ["navigationOverlay"];
-const _c1$2 = ["rxap-navigation-item", ""];
+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) {
@@ -1258,7 +1247,7 @@ class NavigationItemComponent {
     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$3, 5);
+            i0.ɵɵviewQuery(_c0$2, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.routerLinkActive = _t.first);
@@ -1267,7 +1256,7 @@ class NavigationItemComponent {
             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" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c1$2, 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-body-2 mat-body-strong", "matRipple", "", 3, "routerLink", 4, "ngIf"], ["matRipple", "", 1, "navigation-link", "mat-body-2", "mat-body-strong", 3, "routerLink"]], template: function NavigationItemComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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);
@@ -1286,18 +1275,24 @@ class NavigationItemComponent {
             i0.ɵɵproperty("ngIf", !i0.ɵɵpipeBind1(4, 11, ctx.sidenav.collapsed$));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.routerLinkActive.isActive && !i0.ɵɵpipeBind1(6, 13, ctx.sidenav.collapsed$) && ctx.children);
-        } }, styles: [".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: [
+        } }, 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: '*' })),
+                        animate(150, style({ height: '*' }))
                     ]),
                     transition(':leave', [
                         style({ overflow: 'hidden' }),
                         animate(300, style({ height: '0' })),
-                        style({ display: 'none' }),
-                    ]),
-                ]),
+                        style({ display: 'none' })
+                    ])
+                ])
             ] }, changeDetection: 0 }); }
 }
 __decorate([
@@ -1313,21 +1308,33 @@ __decorate([
 (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',
+                    class: 'rxap-navigation-item'
                 }, animations: [
                     trigger('sub-nav', [
                         transition(':enter', [
                             style({ display: 'block', height: '0', overflow: 'hidden' }),
-                            animate(150, style({ height: '*' })),
+                            animate(150, style({ height: '*' }))
                         ]),
                         transition(':leave', [
                             style({ overflow: 'hidden' }),
                             animate(300, style({ height: '0' })),
-                            style({ display: 'none' }),
-                        ]),
-                    ]),
-                ], template: "<a [routerLink]=\"item.routerLink\"\n   routerLinkActive=\"link-active\"\n   [matTooltipDisabled]=\"!(sidenav.collapsed$ | async)\"\n   [matTooltip]=\"item.label\"\n   class=\"navigation-link mat-body-2 mat-body-strong navigation-level-{{level}}\" matRipple>\n  <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\" class=\"icon\"></mat-icon>\n  <ng-template [ngIf]=\"!(sidenav.collapsed$ | async)\">\n    <span class=\"label\">{{ item.label }}</span>\n  </ng-template>\n</a>\n\n<ul rxap-navigation\n    *ngIf=\"routerLinkActive.isActive && !(sidenav.collapsed$ | async) && children\"\n    [@sub-nav]\n    [items]=\"children\"\n    [level]=\"level + 1\"\n    class=\"sub-items\"\n    fxFlex=\"nogrow\"\n>\n</ul>\n\n<ng-template #navigationOverlay>\n  <div class=\"navigation-overlay-container mat-elevation-z1\"\n       (mouseenter)=\"lockeOverlay = true\" (mouseleave)=\"lockeOverlay = false; onMouseleave()\">\n    <ul>\n      <li *ngFor=\"let child of children\">\n        <a *ngIf=\"isNavigationItem(child)\" [routerLink]=\"asNavigationItem(child).routerLink\"\n           class=\"navigation-link mat-body-2 mat-body-strong\" matRipple>\n          <mat-icon *ngIf=\"asNavigationItem(child).icon\" [rxapIcon]=\"asNavigationItem(child).icon\" class=\"icon\"></mat-icon>\n          <span class=\"label\">{{ asNavigationItem(child).label }}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n</ng-template>\n", styles: [".rxap-navigation-item,.navigation-overlay-container{display:flex;flex-direction:column;min-height:48px}.rxap-navigation-item .navigation-link,.navigation-overlay-container .navigation-link{display:flex;flex-direction:row;align-items:center;text-decoration:none;height:48px}.rxap-navigation-item .navigation-link .icon,.navigation-overlay-container .navigation-link .icon{margin:0 16px}.rxap-navigation-item .navigation-link .label,.navigation-overlay-container .navigation-link .label{padding-right:12px}.rxap-navigation-item .navigation-link.navigation-level-1,.navigation-overlay-container .navigation-link.navigation-level-1{padding-left:52px}.rxap-navigation-item .navigation-link.navigation-level-1 .icon,.navigation-overlay-container .navigation-link.navigation-level-1 .icon{padding-left:0}.rxap-navigation-item .navigation-link.navigation-level-2,.navigation-overlay-container .navigation-link.navigation-level-2{padding-left:88px}.rxap-navigation-item .navigation-link.navigation-level-2 .icon,.navigation-overlay-container .navigation-link.navigation-level-2 .icon{padding-left:0}.navigation-overlay-container{padding:0 16px}.navigation-overlay-container ul{list-style-type:none;margin:0;padding:0}.navigation-overlay-container ul .navigation-link .label{padding-right:0}.navigation-overlay-container ul .navigation-link .icon{margin-left:0}\n"] }]
-    }], function () { return [{ type: i3$1.Router, decorators: [{
+                            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: [{
@@ -1339,7 +1346,7 @@ __decorate([
             }] }, { type: i0.Renderer2, decorators: [{
                 type: Inject,
                 args: [Renderer2]
-            }] }, { type: i3$2.Overlay, decorators: [{
+            }] }, { type: i7.Overlay, decorators: [{
                 type: Inject,
                 args: [Overlay]
             }] }, { type: i0.ViewContainerRef, decorators: [{
@@ -1366,7 +1373,7 @@ __decorate([
             args: ['mouseleave']
         }] }); })();
 
-const _c0$2 = ["rxap-navigation", ""];
+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);
@@ -1450,11 +1457,14 @@ class NavigationComponent {
     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" }, attrs: _c0$2, 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) {
+        } }, 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: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i2$1.NgForOf, i2$1.NgIf, i3$4.MatDivider, NavigationItemComponent, i2$1.AsyncPipe], styles: [".rxap-navigation{list-style-type:none;padding:0}.rxap-navigation .divider-title{padding-left:18px;height:28px;align-content:center}\n"], encapsulation: 2, changeDetection: 0 }); }
+        } }, 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 }); }
 }
 __decorate([
     Required,
@@ -1462,7 +1472,14 @@ __decorate([
 ], 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' }, 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"] }]
+        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]
@@ -1521,7 +1538,7 @@ function SidenavComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
     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$1 = function (a0) { return { "collapsed": a0 }; };
+const _c2 = function (a0) { return { "collapsed": a0 }; };
 class SidenavComponent {
     constructor(sidenav) {
         this.sidenav = sidenav;
@@ -1534,7 +1551,7 @@ class SidenavComponent {
             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"], decls: 16, vars: 15, consts: function () { let i18n_0; if (typeof ngI18nClosureMode !== "undefined" && ngI18nClosureMode) {
+        } }, 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}
              */
@@ -1566,22 +1583,37 @@ class SidenavComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             let tmp_4_0;
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c2$1, i0.ɵɵpipeBind1(1, 5, ctx.sidenav.collapsed$)));
+            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$1, i0.ɵɵpipeBind1(8, 7, ctx.sidenav.collapsed$)));
+            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: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i5$1.DefaultShowHideDirective, i5$1.DefaultClassDirective, NavigationComponent, i2$1.NgClass, i2$1.NgIf, i2$1.NgTemplateOutlet, i3$4.MatDivider, i2$2.MatIcon, i1$1.MatLegacyButton, i2$1.AsyncPipe], styles: [".container[_ngcontent-%COMP%], .container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]{height:100%}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]{padding-bottom:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .footer[_ngcontent-%COMP%]{padding-top:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]{overflow-y:scroll;padding-top:12px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:6px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar-track{border-radius:2px}.container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]   .nav-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border-radius:10px}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]{min-height:48px}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]   .sidebar-toggle-inner[_ngcontent-%COMP%]{padding:0}.container[_ngcontent-%COMP%]   .sidebar-toggle[_ngcontent-%COMP%]   .arrow[_ngcontent-%COMP%]{transform:rotate(180deg)}.container[_ngcontent-%COMP%]   .sidebar-toggle.collapsed[_ngcontent-%COMP%]   .arrow[_ngcontent-%COMP%]{transform:initial}.container[_ngcontent-%COMP%]   .sidebar-toggle.collapsed[_ngcontent-%COMP%]   .sidebar-toggle-inner[_ngcontent-%COMP%]{justify-content:space-around!important}"], changeDetection: 0 }); }
+        } }, 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 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavComponent, [{
         type: Component,
         args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                     class: 'rxap-layout-sidenav'
-                }, template: "<div class=\"container\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\">\n  <div class=\"inner\"\n       fxLayout=\"column\"\n       fxLayoutAlign=\"space-between stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div fxFlex=\"nogrow\" class=\"header\" [fxHide]=\"sidenav.collapsed$ | async\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider fxFlex=\"nogrow\" [fxHide]=\"sidenav.collapsed$ | async\"></mat-divider>\n    </ng-template>\n    <div fxFlex=\"grow\" class=\"nav-container\">\n      <ul fxLayout=\"column\" root rxap-navigation></ul>\n    </div>\n    <mat-divider fxFlex=\"nogrow\"></mat-divider>\n    <button mat-button class=\"sidebar-toggle\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" fxFlex=\"nogrow\"\n            (click)=\"sidenav.toggleNavigationCollapse()\">\n      <span class=\"sidebar-toggle-inner\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\">\n        <mat-icon fxFlex=\"nogrow\" class=\"arrow\">double_arrow</mat-icon>\n        <span [fxHide]=\"sidenav.collapsed$ | async\" class=\"label\" fxFlex=\"grow\" i18n>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"] }]
+                }, 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]
@@ -1590,180 +1622,6 @@ class SidenavComponent {
             args: [SidenavHeaderDirective]
         }] }); })();
 
-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$1 = function (a0) { return { "open": a0 }; };
-const _c1$1 = function (a0, a1, a2) { return { height: a0, marginTop: a1, marginBottom: a2 }; };
-const _c2 = ["*"];
-class SidenavContentComponent {
-    constructor(sccs) {
-        this.sccs = sccs;
-    }
-    ngOnInit() {
-    }
-    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" }, ngContentSelectors: _c2, 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$1, i0.ɵɵpipeBind1(1, 2, ctx.sidenav.openedChange)))("ngStyle", i0.ɵɵpureFunction3(12, _c1$1, i0.ɵɵpipeBind1(2, 4, ctx.sccs.innerHeight$), i0.ɵɵpipeBind1(3, 6, ctx.sccs.marginTop$), i0.ɵɵpipeBind1(4, 8, ctx.sccs.marginBottom$)));
-        } }, dependencies: [i2$1.NgClass, i2$1.NgStyle, i3$1.RouterOutlet, i2$1.AsyncPipe], styles: [".container[_ngcontent-%COMP%]   .inner[_ngcontent-%COMP%]{padding:0;overflow:auto;height:100%}"], changeDetection: 0 }); }
-}
-__decorate([
-    Required,
-    __metadata("design:type", MatSidenav)
-], SidenavContentComponent.prototype, "sidenav", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavContentComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-sidenav-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"{ 'open': (sidenav.openedChange | async) }\" [ngStyle]=\"{\n  height: sccs.innerHeight$ | async,\n  marginTop: sccs.marginTop$ | async,\n  marginBottom: sccs.marginBottom$ | async\n}\" class=\"container\">\n  <!--  <dx-breadcrumb></dx-breadcrumb>-->\n  <div class=\"inner\">\n    <router-outlet></router-outlet>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".container .inner{padding:0;overflow:auto;height:100%}\n"] }]
-    }], function () { return [{ type: SidenavContentComponentService }]; }, { sidenav: [{
-            type: Input
-        }] }); })();
-
-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);
-    }
-    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 = function WindowContainerSidenavComponent_Factory(t) { return new (t || WindowContainerSidenavComponent)(i0.ɵɵdirectiveInject(WindowContainerSidenavService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WindowContainerSidenavComponent, selectors: [["rxap-window-container-sidenav"]], 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: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultFlexDirective, i2$1.NgForOf, i4.CdkPortalOutlet], styles: [".container[_ngcontent-%COMP%]{padding:8px}"], changeDetection: 0 }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WindowContainerSidenavComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-window-container-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxLayoutGap=\"16px\" class=\"container\">\n\n  <div fxFlex=\"nogrow\" *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n", styles: [".container{padding:8px}\n"] }]
-    }], function () { return [{ type: i1.WindowContainerSidenavService, decorators: [{
-                type: Inject,
-                args: [WindowContainerSidenavService]
-            }] }]; }, null); })();
-
-function ToggleWindowSidenavButtonComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "keyboard_arrow_left");
-    i0.ɵɵelementEnd();
-} }
-function ToggleWindowSidenavButtonComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1, "keyboard_arrow_right");
-    i0.ɵɵelementEnd();
-} }
-class ToggleWindowSidenavButtonComponent {
-    constructor() {
-        this.openWindowSidenav = false;
-        this.openWindowSidenavChange = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    toggle() {
-        this.openWindowSidenav = !this.openWindowSidenav;
-        this.openWindowSidenavChange.emit(this.openWindowSidenav);
-    }
-    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" }, decls: 5, vars: 2, consts: [[1, "toggle-button"], ["mat-icon-button", "", 3, "click"], [3, "ngIfElse", "ngIf"], ["hide", ""]], template: function ToggleWindowSidenavButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
-            i0.ɵɵlistener("click", function ToggleWindowSidenavButtonComponent_Template_button_click_1_listener() { return ctx.toggle(); });
-            i0.ɵɵtemplate(2, ToggleWindowSidenavButtonComponent_ng_template_2_Template, 2, 0, "ng-template", 2);
-            i0.ɵɵtemplate(3, ToggleWindowSidenavButtonComponent_ng_template_3_Template, 2, 0, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            const _r1 = i0.ɵɵreference(4);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIfElse", _r1)("ngIf", !ctx.openWindowSidenav);
-        } }, dependencies: [i1$1.MatLegacyButton, i2$2.MatIcon, i2$1.NgIf], styles: [".toggle-button[_ngcontent-%COMP%]{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:black}"], changeDetection: 0 }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleWindowSidenavButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'rxap-toggle-window-sidenav-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                    class: 'rxap-toggle-window-sidenav-button'
-                }, template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon>keyboard_arrow_left</mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon>keyboard_arrow_right</mat-icon>\n    </ng-template>\n  </button>\n</div>\n", styles: [".toggle-button{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:black}\n"] }]
-    }], function () { return []; }, { openWindowSidenav: [{
-            type: Input
-        }], openWindowSidenavChange: [{
-            type: Output
-        }] }); })();
-
 const _c0 = function () { return ["/"]; };
 function LayoutComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 9);
@@ -1783,7 +1641,7 @@ class LayoutComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sidenav = _t.first);
-        } }, 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) {
+        } }, 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);
@@ -1817,204 +1675,35 @@ class LayoutComponent {
             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: [i2$4.MatSidenav, i2$4.MatSidenavContainer, i2$4.MatSidenavContent, FooterComponent, HeaderComponent, SidenavComponent, SidenavHeaderDirective, SidenavContentComponent, WindowContainerSidenavComponent, ToggleWindowSidenavButtonComponent, i3$1.RouterLink, i2$1.AsyncPipe], styles: [".container[_ngcontent-%COMP%], .content[_ngcontent-%COMP%]{height:100%}.sidenav[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:auto}.sidenav[_ngcontent-%COMP%]   .logo[_ngcontent-%COMP%]{padding:16px}.footer[_ngcontent-%COMP%]{position:fixed;bottom:0;left:0;right:0;z-index:100}.header[_ngcontent-%COMP%]{position:fixed;top:0;left:0;right:0;z-index:100}"], changeDetection: 0 }); }
+        } }, 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, 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"] }]
+        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 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' }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReplaceRouterPathsService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
-
-class ReplaceRouterPathsPipe {
-    constructor(rrp) {
-        this.rrp = rrp;
-    }
-    transform(routerLink) {
-        return this.rrp.transform(routerLink);
-    }
-    static { this.ɵfac = function ReplaceRouterPathsPipe_Factory(t) { return new (t || ReplaceRouterPathsPipe)(i0.ɵɵdirectiveInject(ReplaceRouterPathsService, 16)); }; }
-    static { this.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "replaceRouterPaths", type: ReplaceRouterPathsPipe, pure: true }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReplaceRouterPathsPipe, [{
-        type: Pipe,
-        args: [{
-                name: 'replaceRouterPaths'
-            }]
-    }], function () { return [{ type: ReplaceRouterPathsService }]; }, null); })();
-class ReplaceRouterPathsPipeModule {
-    static { this.ɵfac = function ReplaceRouterPathsPipeModule_Factory(t) { return new (t || ReplaceRouterPathsPipeModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ReplaceRouterPathsPipeModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({}); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReplaceRouterPathsPipeModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [ReplaceRouterPathsPipe],
-                exports: [ReplaceRouterPathsPipe]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ReplaceRouterPathsPipeModule, { declarations: [ReplaceRouterPathsPipe], exports: [ReplaceRouterPathsPipe] }); })();
-
-class NavigationComponentModule {
-    static { this.ɵfac = function NavigationComponentModule_Factory(t) { return new (t || NavigationComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NavigationComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatIconModule,
-            MatLegacyButtonModule,
-            FlexLayoutModule,
-            RouterModule,
-            CommonModule,
-            IconDirectiveModule,
-            MatRippleModule,
-            MatDividerModule,
-            StopPropagationDirectiveModule,
-            MatLegacyTooltipModule,
-            ReplaceRouterPathsPipeModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [NavigationComponent, NavigationItemComponent],
-                imports: [
-                    MatIconModule,
-                    MatLegacyButtonModule,
-                    FlexLayoutModule,
-                    RouterModule,
-                    CommonModule,
-                    IconDirectiveModule,
-                    MatRippleModule,
-                    MatDividerModule,
-                    StopPropagationDirectiveModule,
-                    MatLegacyTooltipModule,
-                    ReplaceRouterPathsPipeModule
-                ],
-                exports: [NavigationComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NavigationComponentModule, { declarations: [NavigationComponent, NavigationItemComponent], imports: [MatIconModule,
-        MatLegacyButtonModule,
-        FlexLayoutModule,
-        RouterModule,
-        CommonModule,
-        IconDirectiveModule,
-        MatRippleModule,
-        MatDividerModule,
-        StopPropagationDirectiveModule,
-        MatLegacyTooltipModule,
-        ReplaceRouterPathsPipeModule], exports: [NavigationComponent] }); })();
-i0.ɵɵsetComponentScope(NavigationItemComponent, [i2$2.MatIcon, i1$3.DefaultFlexDirective, i3$1.RouterLink, i3$1.RouterLinkActive, i2$1.NgForOf, i2$1.NgIf, i5$2.IconDirective, i6$1.MatRipple, i7.MatLegacyTooltip, NavigationComponent], [i2$1.AsyncPipe]);
-
-class SidenavModule {
-    static { this.ɵfac = function SidenavModule_Factory(t) { return new (t || SidenavModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SidenavModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FlexLayoutModule,
-            NavigationComponentModule,
-            CommonModule,
-            MatDividerModule,
-            MatIconModule,
-            MatLegacyButtonModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [SidenavComponent, SidenavHeaderDirective, SidenavFooterDirective],
-                imports: [
-                    FlexLayoutModule,
-                    NavigationComponentModule,
-                    CommonModule,
-                    MatDividerModule,
-                    MatIconModule,
-                    MatLegacyButtonModule
-                ],
-                exports: [SidenavComponent, SidenavHeaderDirective, SidenavFooterDirective],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SidenavModule, { declarations: [SidenavComponent, SidenavHeaderDirective, SidenavFooterDirective], imports: [FlexLayoutModule,
-        NavigationComponentModule,
-        CommonModule,
-        MatDividerModule,
-        MatIconModule,
-        MatLegacyButtonModule], exports: [SidenavComponent, SidenavHeaderDirective, SidenavFooterDirective] }); })();
-
-class SidenavContentModule {
-    static { this.ɵfac = function SidenavContentModule_Factory(t) { return new (t || SidenavContentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SidenavContentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
-            RouterModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SidenavContentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [SidenavContentComponent],
-                imports: [
-                    CommonModule,
-                    RouterModule
-                ],
-                exports: [SidenavContentComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SidenavContentModule, { declarations: [SidenavContentComponent], imports: [CommonModule,
-        RouterModule], exports: [SidenavContentComponent] }); })();
-
-class WindowContainerSidenavModule {
-    static { this.ɵfac = function WindowContainerSidenavModule_Factory(t) { return new (t || WindowContainerSidenavModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: WindowContainerSidenavModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FlexLayoutModule,
-            CommonModule,
-            PortalModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WindowContainerSidenavModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [WindowContainerSidenavComponent],
-                imports: [
-                    FlexLayoutModule,
-                    CommonModule,
-                    PortalModule,
-                ],
-                exports: [WindowContainerSidenavComponent],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(WindowContainerSidenavModule, { declarations: [WindowContainerSidenavComponent], imports: [FlexLayoutModule,
-        CommonModule,
-        PortalModule], exports: [WindowContainerSidenavComponent] }); })();
-
-class ToggleWindowSidenavButtonModule {
-    static { this.ɵfac = function ToggleWindowSidenavButtonModule_Factory(t) { return new (t || ToggleWindowSidenavButtonModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ToggleWindowSidenavButtonModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatLegacyButtonModule,
-            MatIconModule,
-            CommonModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleWindowSidenavButtonModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [ToggleWindowSidenavButtonComponent],
-                imports: [
-                    MatLegacyButtonModule,
-                    MatIconModule,
-                    CommonModule,
-                ],
-                exports: [ToggleWindowSidenavButtonComponent],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ToggleWindowSidenavButtonModule, { declarations: [ToggleWindowSidenavButtonComponent], imports: [MatLegacyButtonModule,
-        MatIconModule,
-        CommonModule], exports: [ToggleWindowSidenavButtonComponent] }); })();
-
 class LayoutModule {
     static withNavigation(navigation) {
         return {
@@ -2029,46 +1718,30 @@ class LayoutModule {
     }
     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: [MatSidenavModule,
-            FooterModule,
-            HeaderModule,
-            CommonModule,
-            SidenavModule,
-            SidenavContentModule,
-            WindowContainerSidenavModule,
-            ToggleWindowSidenavButtonModule,
-            FlexLayoutModule,
-            RouterModule] }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [LayoutComponent] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutModule, [{
         type: NgModule,
         args: [{
-                declarations: [LayoutComponent],
                 imports: [
-                    MatSidenavModule,
-                    FooterModule,
-                    HeaderModule,
-                    CommonModule,
-                    SidenavModule,
-                    SidenavContentModule,
-                    WindowContainerSidenavModule,
-                    ToggleWindowSidenavButtonModule,
-                    FlexLayoutModule,
-                    RouterModule
+                    LayoutComponent
                 ],
                 exports: [LayoutComponent]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LayoutModule, { declarations: [LayoutComponent], imports: [MatSidenavModule,
-        FooterModule,
-        HeaderModule,
-        CommonModule,
-        SidenavModule,
-        SidenavContentModule,
-        WindowContainerSidenavModule,
-        ToggleWindowSidenavButtonModule,
-        FlexLayoutModule,
-        RouterModule], exports: [LayoutComponent] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LayoutModule, { imports: [LayoutComponent], exports: [LayoutComponent] }); })();
+
+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' }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReplaceRouterPathsService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
 
 function VersionComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "span", 3);
@@ -2101,7 +1774,7 @@ class VersionComponent {
         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"]], 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) {
+    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");
@@ -2109,7 +1782,7 @@ class VersionComponent {
         } if (rf & 2) {
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, ctx.modules));
-        } }, dependencies: [i1$3.DefaultLayoutDirective, i1$3.DefaultLayoutGapDirective, i1$3.DefaultLayoutAlignDirective, i1$3.DefaultFlexDirective, i2$1.NgForOf, i2$1.KeyValuePipe], styles: [".version[_ngcontent-%COMP%]{width:100%;font-size:9px;padding:8px}.version[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%]{padding-bottom:12px;font-size:10px}"], changeDetection: 0 }); }
+        } }, 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 }); }
 }
 __decorate([
     Required,
@@ -2117,32 +1790,12 @@ __decorate([
 ], VersionComponent.prototype, "modules", void 0);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VersionComponent, [{
         type: Component,
-        args: [{ selector: 'rxap-version', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"version\" fxFlex=\"nogrow\" fxLayout=\"column\" fxLayoutAlign=\"start start\" fxLayoutGap=\"8px\">\n  <div *ngFor=\"let module of modules | keyvalue\" fxFlex=\"nogrow\" fxLayout=\"column\">\n    <span class=\"name\" fxFlex=\"nogrow\">{{module.value.name}}</span>\n    <span class=\"semantic\" fxFlex=\"nogrow\">{{module.value.semantic}}</span>\n    <span class=\"hash\" fxFlex=\"nogrow\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"] }]
+        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: [] }); })();
 
-class VersionComponentModule {
-    static { this.ɵfac = function VersionComponentModule_Factory(t) { return new (t || VersionComponentModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: VersionComponentModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FlexLayoutModule,
-            CommonModule] }); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VersionComponentModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [VersionComponent],
-                imports: [
-                    FlexLayoutModule,
-                    CommonModule
-                ],
-                exports: [VersionComponent]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(VersionComponentModule, { declarations: [VersionComponent], imports: [FlexLayoutModule,
-        CommonModule], exports: [VersionComponent] }); })();
-
 class FooterDirective {
     constructor(footerService, template, viewContainerRef) {
         this.footerService = footerService;
@@ -2159,12 +1812,13 @@ class FooterDirective {
         }
     }
     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", ""]] }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FooterDirective, selectors: [["", "rxapFooter", ""]], standalone: true }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterDirective, [{
         type: Directive,
         args: [{
                 selector: '[rxapFooter]',
+                standalone: true
             }]
     }], function () { return [{ type: i1.FooterService, decorators: [{
                 type: Inject,
@@ -2176,23 +1830,10 @@ class FooterDirective {
                 type: Inject,
                 args: [ViewContainerRef]
             }] }]; }, null); })();
-class FooterDirectiveModule {
-    static { this.ɵfac = function FooterDirectiveModule_Factory(t) { return new (t || FooterDirectiveModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FooterDirectiveModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({}); }
-}
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FooterDirectiveModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [FooterDirective],
-                exports: [FooterDirective],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(FooterDirectiveModule, { declarations: [FooterDirective], exports: [FooterDirective] }); })();
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppsButtonComponent, AppsButtonComponentModule, FooterComponent, FooterDirective, FooterDirectiveModule, FooterModule, HeaderComponent, HeaderModule, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LayoutComponent, LayoutComponentService, LayoutModule, NavigationComponent, NavigationComponentModule, NavigationItemComponent, NavigationProgressBarComponent, NavigationProgressBarComponentModule, NavigationService, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, ReplaceRouterPathsService, ResetButtonComponent, ResetButtonComponentModule, SidenavComponent, SidenavComponentService, SidenavContentComponent, SidenavContentComponentService, SidenavContentModule, SidenavFooterDirective, SidenavHeaderDirective, SidenavModule, SidenavToggleButtonComponent, SidenavToggleButtonComponentModule, SignOutComponent, SignOutComponentModule, ToggleWindowSidenavButtonComponent, ToggleWindowSidenavButtonModule, UserProfileIconComponent, UserProfileIconComponentModule, VersionComponent, VersionComponentModule, WindowContainerSidenavComponent, WindowContainerSidenavModule };
+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 };
 //# sourceMappingURL=rxap-layout.mjs.map