@rxap/layout 16.0.3 → 17.0.1-dev.0

package/fesm2022/rxap-layout.mjs

@@ -1,480 +1,187 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, signal, computed, effect, Injectable, Optional, Inject, LOCALE_ID, isDevMode, Input, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, forwardRef, ViewChild, HostBinding, INJECTOR, ChangeDetectorRef, inject, TemplateRef, Directive, ContentChild, EventEmitter, Output } from '@angular/core';
-import * as i1 from '@rxap/services';
-import { HeaderService, ResetService, VersionService, WindowContainerSidenavService, FooterService } from '@rxap/services';
-import * as i3 from '@angular/cdk/portal';
-import { PortalModule, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
-import * as i2 from '@angular/material/toolbar';
+import { Component, ChangeDetectionStrategy, Inject, EventEmitter, Input, Output, TemplateRef, Directive, Injectable, signal, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, forwardRef, ViewChild, HostBinding, InjectionToken, INJECTOR, Optional, ChangeDetectorRef, ContentChild, Pipe, computed, effect, LOCALE_ID, isDevMode, inject } from '@angular/core';
+import * as i1$1 from '@rxap/services';
+import { WindowContainerSidenavService, VersionService, HeaderService, ResetService, FooterService } from '@rxap/services';
+import * as i1 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import { tap, filter, startWith, switchMap, catchError, map } from 'rxjs/operators';
+import { Subscription, BehaviorSubject, debounceTime, ReplaySubject, of, from, combineLatest, firstValueFrom, switchMap as switchMap$1, filter as filter$1, skip, distinctUntilChanged } from 'rxjs';
+import * as i4$1 from '@angular/common';
+import { NgFor, NgIf, KeyValuePipe, NgClass, AsyncPipe, NgTemplateOutlet, NgOptimizedImage, CommonModule, NgStyle } from '@angular/common';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$2 from '@rxap/config';
+import { ConfigService } from '@rxap/config';
+import * as i3$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { coerceBoolean, JoinPath } from '@rxap/utilities';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i2 from '@angular/router';
+import { NavigationEnd, Router, RouterLinkActive, RouterLink, NavigationStart, NavigationCancel, RouterOutlet } from '@angular/router';
+import * as i6 from '@angular/cdk/overlay';
+import { Overlay } from '@angular/cdk/overlay';
+import { IconDirective } from '@rxap/material-directives/icon';
+import * as i1$3 from '@angular/material/core';
+import { MatRippleModule, MatOptionModule } from '@angular/material/core';
+import * as i2$1 from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1$6 from '@rxap/ngx-theme';
+import { ObserveCurrentThemeDensity, ThemeService } from '@rxap/ngx-theme';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i3$4 from '@angular/material/sidenav';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { RXAP_ENVIRONMENT, DetermineReleaseName } from '@rxap/environment';
+import * as i2$6 from '@rxap/icon';
+import { StatusIndicatorComponent } from '@rxap/ngx-status-check';
+import * as i1$7 from '@rxap/ngx-user';
+import { UserSettingsThemeService, IsThemeDensity, ThemeDensity } from '@rxap/ngx-user';
+import * as i2$2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4$2 from '@angular/common';
-import { NgIf, NgFor, AsyncPipe, NgOptimizedImage, KeyValuePipe, CommonModule, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/material/core';
-import { MatOptionModule, MatRippleModule } from '@angular/material/core';
 import * as i2$5 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
 import * as i3$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { DataSourceCollectionDirective } from '@rxap/data-source/directive';
 import { StopPropagationDirective } from '@rxap/directives';
-import * as i2$1 from '@angular/cdk/layout';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@rxap/config';
-import { ConfigService } from '@rxap/config';
-import * as i1$4 from '@rxap/ngx-theme';
-import { ObserveCurrentThemeDensity, ThemeService } from '@rxap/ngx-theme';
-import * as i2$2 from '@rxap/authorization';
+import * as i2$3 from '@rxap/authorization';
 import { ClickOnLink } from '@rxap/browser-utilities';
-import { RXAP_ENVIRONMENT, DetermineReleaseName } from '@rxap/environment';
-import { JoinPath, coerceBoolean } from '@rxap/utilities';
-import { firstValueFrom, switchMap, filter as filter$1, skip, distinctUntilChanged, BehaviorSubject, Subscription, debounceTime, ReplaySubject, of, from, combineLatest } from 'rxjs';
-import * as i2$3 from '@rxap/authentication';
-import { filter, tap, map, switchMap as switchMap$1, startWith, catchError } from 'rxjs/operators';
-import * as i2$4 from '@angular/router';
-import { NavigationStart, NavigationEnd, NavigationCancel, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
-import * as i1$2 from '@angular/material/progress-bar';
+import * as i2$4 from '@rxap/authentication';
+import * as i1$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i3$3 from '@rxap/ngx-changelog';
-import * as i1$3 from '@rxap/ngx-localize';
-import * as i1$5 from '@rxap/ngx-user';
-import { UserSettingsThemeService, IsThemeDensity, ThemeDensity } from '@rxap/ngx-user';
-import * as i3$5 from '@angular/material/sidenav';
-import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$6 from '@rxap/icon';
-import { StatusIndicatorComponent } from '@rxap/ngx-status-check';
-import * as i3$4 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import { trigger, transition, style, animate } from '@angular/animations';
-import * as i6 from '@angular/cdk/overlay';
-import { Overlay } from '@angular/cdk/overlay';
-import { IconDirective } from '@rxap/material-directives/icon';
-
-const RXAP_NAVIGATION_CONFIG = new InjectionToken('rxap/layout/navigation-config');
-const RXAP_NAVIGATION_CONFIG_INSERTS = new InjectionToken('rxap/layout/navigation-config-inserts');
-const RXAP_FOOTER_COMPONENT = new InjectionToken('rxap/layout/footer-component');
-const RXAP_HEADER_COMPONENT = new InjectionToken('rxap/layout/header-component');
-const RXAP_LOGO_CONFIG = new InjectionToken('rxap/layout/logo-config');
-const RXAP_LAYOUT_APPS_GRID = new InjectionToken('rxap/layout/apps-grid');
-
-class FooterComponent {
-    constructor(footerService) {
-        this.footerService = footerService;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.FooterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "rxap-footer", ngImport: i0, template: "<ng-template [ngIf]=\"footerService.portals()\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, MatToolbarModule, NgFor, PortalModule, AsyncPipe], template: "<ng-template [ngIf]=\"footerService.portals()\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.FooterService }]; } });
-
-class LayoutComponentService {
-    constructor(footerComponentService, headerComponentService, logoConfig = null, config, mediaMatcher) {
-        this.footerComponentService = footerComponentService;
-        this.headerComponentService = headerComponentService;
-        this.config = config;
-        this.currentThemeDensity = toSignal(ObserveCurrentThemeDensity());
-        const mobileQuery = mediaMatcher.matchMedia('(max-width: 959px)');
-        const mobile = mobileQuery.matches;
-        const initialCollapsable = this.config.get('navigation.collapsable', true);
-        const collapsable = initialCollapsable && !mobile;
-        const pinned = this.config.get('navigation.pinned', false);
-        const mode = this.config.get('navigation.mode', pinned || !collapsable ? 'side' : 'over');
-        const opened = this.config.get('navigation.opened', (!collapsable || pinned) && !mobile);
-        this.opened = signal(opened);
-        this.mode = signal(mode);
-        this.pinned = signal(pinned);
-        this.collapsable = signal(collapsable);
-        this.fixedBottomGap = computed(() => this.footerComponentService.portalCount() * (64 + (this.currentThemeDensity() ?? 0) * 4));
-        this.fixedTopGap = computed(() => this.headerComponentService.componentCount() * (64 + (this.currentThemeDensity() ?? 0) * 4));
-        this.logo = logoConfig ?? {
-            src: 'assets/logo.png',
-            width: 192,
-        };
-        mobileQuery.addEventListener('change', (event) => {
-            if (initialCollapsable) {
-                this.collapsable.set(!event.matches);
-                if (this.collapsable()) {
-                    if (!this.pinned()) {
-                        this.opened.set(false);
-                    }
-                }
-            }
-        });
-        effect(() => {
-            if (this.pinned()) {
-                this.mode.set('side');
-                this.opened.set(true);
-            }
-            else {
-                this.mode.set('over');
-                this.opened.set(false);
-            }
-        }, { allowSignalWrites: true });
-    }
-    toggleOpened() {
-        this.opened.set(!this.opened());
-    }
-    togglePinned() {
-        this.pinned.set(!this.pinned());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutComponentService, deps: [{ token: i1.FooterService }, { token: i1.HeaderService }, { token: RXAP_LOGO_CONFIG, optional: true }, { token: ConfigService }, { token: i2$1.MediaMatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutComponentService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutComponentService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.FooterService }, { type: i1.HeaderService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [RXAP_LOGO_CONFIG]
-                }] }, { type: i1$1.ConfigService, decorators: [{
-                    type: Inject,
-                    args: [ConfigService]
-                }] }, { type: i2$1.MediaMatcher }]; } });
+import * as i1$5 from '@rxap/ngx-localize';
 
-class AppUrlService {
-    constructor(config, localeId, authorizationService, environment) {
-        this.config = config;
-        this.localeId = localeId;
-        this.authorizationService = authorizationService;
-        this.environment = environment;
-        this._apps = this.config.get('navigation.apps', []);
-    }
-    getApp(appId) {
-        return this._apps.find(app => app.id === appId) ?? null;
+class WindowContainerSidenavComponent {
+    constructor(service) {
+        this.service = service;
+        this.portals = new Map();
+        this.subscription = new Subscription();
     }
-    getAppUrl(appId, path, infix = this.getPathPrefix()) {
-        const app = this.getApp(appId);
-        if (app) {
-            return JoinPath(app.href, infix, path);
+    ngOnInit() {
+        const components = this.service.getAll();
+        for (const component of components) {
+            this.add(component);
         }
-        return null;
+        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());
     }
-    getAppUrlOrThrow(appId, path) {
-        const url = this.getAppUrl(appId, path);
-        if (url) {
-            return url;
-        }
-        throw new Error(`Could not find app with id "${appId}"`);
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
-    navigate(appId, path) {
-        const url = this.getAppUrl(appId, path);
-        if (url) {
-            ClickOnLink(url);
-        }
+    trackBy(index, id) {
+        return id;
     }
-    async getAppList() {
-        const appList = this
-            ._apps
-            .filter(app => !app.hidden)
-            .map(app => ({
-            ...app,
-            href: JoinPath(app.href, this.getPathPrefix()),
-        }));
-        const filteredAppList = [];
-        for (const app of appList) {
-            if (await firstValueFrom(this.authorizationService.hasPermission$(app.permissions))) {
-                filteredAppList.push(app);
-            }
+    add(component) {
+        if (this.portals.has(component.id)) {
+            throw new Error(`Component portal with id ${component.id} already exists`);
         }
-        return filteredAppList;
+        const portal = new ComponentPortal(component.component, component.viewContainerRef, component.injector, component.componentFactoryResolver);
+        this.portals.set(component.id, portal);
     }
-    getPathPrefix() {
-        if (this.environment.production && this.localeId) {
-            return this.localeId.replace(/-.+$/, '');
+    remove(component) {
+        if (this.portals.has(component.id)) {
+            const portal = this.portals.get(component.id);
+            this.portals.delete(component.id);
+            portal.detach();
         }
-        return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppUrlService, deps: [{ token: i1$1.ConfigService }, { token: LOCALE_ID }, { token: i2$2.AuthorizationService }, { token: RXAP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppUrlService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WindowContainerSidenavComponent, deps: [{ token: WindowContainerSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: WindowContainerSidenavComponent, isStandalone: true, selector: "rxap-window-container-sidenav", ngImport: i0, template: "<div class=\"flex flex-col gap-4 p-2\">\n\n  <div *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\" class=\"grow-0\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppUrlService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$1.ConfigService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i2$2.AuthorizationService }, { type: undefined, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WindowContainerSidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-window-container-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, PortalModule], template: "<div class=\"flex flex-col gap-4 p-2\">\n\n  <div *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\" class=\"grow-0\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.WindowContainerSidenavService, decorators: [{
                     type: Inject,
-                    args: [RXAP_ENVIRONMENT]
-                }] }]; } });
+                    args: [WindowContainerSidenavService]
+                }] }] });
 
-class AppsButtonComponent {
-    constructor(grid, appUrlService, authenticationService) {
-        this.appUrlService = appUrlService;
-        this.authenticationService = authenticationService;
-        this.isOpen = false;
-        this.appList = signal([]);
-    }
-    ngOnInit() {
-        this._subscription = this.authenticationService.isAuthenticated$.pipe(filter(Boolean), switchMap(() => this.appUrlService.getAppList()), tap((apps) => this.appList.set(apps))).subscribe();
+class ToggleWindowSidenavButtonComponent {
+    constructor() {
+        this.openWindowSidenav = false;
+        this.openWindowSidenavChange = new EventEmitter();
     }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
+    toggle() {
+        this.openWindowSidenav = !this.openWindowSidenav;
+        this.openWindowSidenavChange.emit(this.openWindowSidenav);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppsButtonComponent, deps: [{ token: RXAP_LAYOUT_APPS_GRID, optional: true }, { token: AppUrlService }, { token: i2$3.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppsButtonComponent, isStandalone: true, selector: "rxap-apps-button", ngImport: i0, template: "<div *ngIf=\"appList()?.length\" class=\"flex flex-row items-center gap-8\">\n\n  <div *ngIf=\"isOpen\" class=\"flex flex-row items-center gap-6\">\n\n    <div *ngFor=\"let app of appList()\" class=\"h-10\">\n      <a [href]=\"app.href\" mat-stroked-button>\n        <span class=\"flex flex-row items-center gap-4\">\n          <img *ngIf=\"app.image\" [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n          <span class=\"label grow-0\">{{app.label}}</span>\n        </span>\n      </a>\n    </div>\n\n  </div>\n\n  <button (click)=\"isOpen = !isOpen\" mat-icon-button>\n    <mat-icon svgIcon=\"apps\"></mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ToggleWindowSidenavButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ToggleWindowSidenavButtonComponent, isStandalone: true, selector: "rxap-toggle-window-sidenav-button", inputs: { openWindowSidenav: "openWindowSidenav" }, outputs: { openWindowSidenavChange: "openWindowSidenavChange" }, host: { classAttribute: "rxap-toggle-window-sidenav-button" }, ngImport: i0, template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon svgIcon=\"arrow-left-bold\"></mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon svgIcon=\"arrow-right-bold\"></mat-icon>\n    </ng-template>\n  </button>\n</div>\n", styles: [".toggle-button{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppsButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ToggleWindowSidenavButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxap-apps-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgIf,
-                        NgFor,
-                        MatButtonModule,
-                        MatIconModule,
-                        NgOptimizedImage,
-                    ], template: "<div *ngIf=\"appList()?.length\" class=\"flex flex-row items-center gap-8\">\n\n  <div *ngIf=\"isOpen\" class=\"flex flex-row items-center gap-6\">\n\n    <div *ngFor=\"let app of appList()\" class=\"h-10\">\n      <a [href]=\"app.href\" mat-stroked-button>\n        <span class=\"flex flex-row items-center gap-4\">\n          <img *ngIf=\"app.image\" [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n          <span class=\"label grow-0\">{{app.label}}</span>\n        </span>\n      </a>\n    </div>\n\n  </div>\n\n  <button (click)=\"isOpen = !isOpen\" mat-icon-button>\n    <mat-icon svgIcon=\"apps\"></mat-icon>\n  </button>\n\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [RXAP_LAYOUT_APPS_GRID]
-                }] }, { type: AppUrlService }, { type: i2$3.RxapAuthenticationService }]; } });
+            args: [{ selector: 'rxap-toggle-window-sidenav-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'rxap-toggle-window-sidenav-button',
+                    }, standalone: true, imports: [MatButtonModule, NgIf, MatIconModule], template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon svgIcon=\"arrow-left-bold\"></mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon svgIcon=\"arrow-right-bold\"></mat-icon>\n    </ng-template>\n  </button>\n</div>\n", styles: [".toggle-button{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:#000}\n"] }]
+        }], propDecorators: { openWindowSidenav: [{
+                type: Input
+            }], openWindowSidenavChange: [{
+                type: Output
+            }] } });
 
-class NavigationProgressBarComponent {
-    constructor(router) {
-        this.router = router;
-        this.navigating$ = this.router.events.pipe(filter(event => event instanceof NavigationStart ||
-            event instanceof NavigationEnd ||
-            event instanceof NavigationCancel), map(event => event instanceof NavigationStart));
+class VersionComponent {
+    constructor(version) {
+        this.version = version;
+    }
+    ngOnInit() {
+        this.modules = this.version.get();
+        this.subscription = this.version.update$.pipe(tap(() => this.modules = this.version.get())).subscribe();
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationProgressBarComponent, deps: [{ token: Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationProgressBarComponent, isStandalone: true, selector: "rxap-navigation-progress-bar", ngImport: i0, template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  color=\"accent\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: VersionComponent, deps: [{ token: VersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: VersionComponent, isStandalone: true, selector: "rxap-version", ngImport: i0, template: "<div class=\"version flex flex-col gap-2\">\n  <div *ngFor=\"let module of modules | keyvalue\" class=\"flex flex-col\">\n    <span class=\"name grow-0\">{{module.value.name}}</span>\n    <span class=\"semantic grow-0\">{{module.value.semantic}}</span>\n    <span class=\"hash grow-0\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: VersionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxap-navigation-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgIf,
-                        MatProgressBarModule,
-                        AsyncPipe,
-                    ], template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  color=\"accent\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$4.Router, decorators: [{
+            args: [{ selector: 'rxap-version', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, KeyValuePipe], template: "<div class=\"version flex flex-col gap-2\">\n  <div *ngFor=\"let module of modules | keyvalue\" class=\"flex flex-col\">\n    <span class=\"name grow-0\">{{module.value.name}}</span>\n    <span class=\"semantic grow-0\">{{module.value.semantic}}</span>\n    <span class=\"hash grow-0\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.VersionService, decorators: [{
                     type: Inject,
-                    args: [Router]
-                }] }]; } });
+                    args: [VersionService]
+                }] }] });
 
-class LanguageSelectorComponent {
-    constructor(language) {
-        this.language = language;
+class SidenavFooterDirective {
+    constructor(template) {
+        this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: i1$3.LanguageSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LanguageSelectorComponent, isStandalone: true, selector: "rxap-language-selector", ngImport: i0, template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\" rxapStopPropagation>\n      <mat-label i18n>Select Language</mat-label>\n      <mat-select (ngModelChange)=\"language.setLanguage($event)\" [ngModel]=\"language.selectedLanguage\">\n        <mat-option *ngFor=\"let item of language.languages | keyvalue\" [value]=\"item.key\">{{item.value}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".language-selector{width:calc(100% - 32px);margin:0 16px}.language-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: StopPropagationDirective, selector: "[rxapStopPropagation]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavFooterDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: SidenavFooterDirective, isStandalone: true, selector: "[rxapSidenavFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-language-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgIf,
-                        MatFormFieldModule,
-                        StopPropagationDirective,
-                        MatSelectModule,
-                        FormsModule,
-                        NgFor,
-                        MatOptionModule,
-                        KeyValuePipe,
-                    ], template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\" rxapStopPropagation>\n      <mat-label i18n>Select Language</mat-label>\n      <mat-select (ngModelChange)=\"language.setLanguage($event)\" [ngModel]=\"language.selectedLanguage\">\n        <mat-option *ngFor=\"let item of language.languages | keyvalue\" [value]=\"item.key\">{{item.value}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".language-selector{width:calc(100% - 32px);margin:0 16px}.language-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.LanguageSelectorService }]; } });
-
-class SettingsButtonComponent {
-    constructor(theme, route, injector, changelogService) {
-        this.theme = theme;
-        this.route = route;
-        this.injector = injector;
-        this.changelogService = changelogService;
-        this.isDevMode = isDevMode();
-        this.items = signal([]);
-        this.savePreviewDensityValue = false;
-        this.currentDensityValue = null;
-        this.savePreviewTypographyValue = false;
-        this.currentTypographyValue = null;
-        this.savePreviewThemeValue = false;
-        this.currentThemeValue = null;
-        this.availableThemes = this.theme.getAvailableThemes();
-        this.availableTypographies = this.theme.getAvailableTypographies();
-    }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
-    }
-    ngOnInit() {
-        this._subscription = this.route.data.pipe(map(data => this.getCustomMenuItems(data)), map(items => items.map(item => new ComponentPortal(item, undefined, this.injector))), tap(items => this.items.set(items))).subscribe();
-    }
-    getCustomMenuItems(data) {
-        if (data?.layout?.header?.menu?.items?.length) {
-            return data.layout.header.menu.items;
-        }
-        return [];
-    }
-    openChangelogDialog() {
-        this.changelogService.showChangelogDialog();
-    }
-    previewDensity(density) {
-        this.theme.applyDensity(density);
-    }
-    restoreDensity() {
-        this.theme.applyDensity(this.theme.density());
-    }
-    setDensity(density) {
-        this.theme.setDensity(density);
-    }
-    previewTypography(typography) {
-        this.theme.applyTypography(typography);
-    }
-    restoreTypography() {
-        this.theme.applyTypography(this.theme.typography());
-    }
-    setTypography(typography) {
-        this.theme.setTypography(typography);
-    }
-    previewTheme(theme) {
-        this.theme.applyTheme(theme);
-    }
-    restoreTheme() {
-        this.theme.applyTheme(this.theme.themeName());
-    }
-    setTheme(theme) {
-        this.theme.setTheme(theme);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsButtonComponent, deps: [{ token: i1$4.ThemeService }, { token: i2$4.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.ChangelogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SettingsButtonComponent, isStandalone: true, selector: "rxap-settings-button", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode()\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode()\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"compare\"></mat-icon>\n    <span i18n>Theme</span>\n  </button>\n  <rxap-language-selector></rxap-language-selector>\n  <button (click)=\"openChangelogDialog()\" mat-menu-item>\n    <mat-icon svgIcon=\"format-list-numbered\"></mat-icon>\n    <span i18n>What's new</span>\n  </button>\n  <ng-container *ngFor=\"let item of items()\">\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  </ng-container>\n</mat-menu>\n\n<mat-menu #themeMenu=\"matMenu\" xPosition=\"before\">\n  <button [matMenuTriggerFor]=\"themeDensityMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"move-resize\"></mat-icon>\n    <span i18n>Density</span>\n  </button>\n  <button *ngIf=\"availableTypographies?.length\" [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button *ngIf=\"availableThemes?.length\" [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n    <span i18n>Preset</span>\n  </button>\n</mat-menu>\n\n<mat-menu #themeDensityMenu=\"matMenu\" xPosition=\"before\">\n  <button (click)=\"setDensity(0)\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-l\"></mat-icon>\n    <span i18n>Normal</span>\n  </button>\n  <button (click)=\"setDensity(-1)\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-m\"></mat-icon>\n    <span i18n>Dense</span>\n  </button>\n  <button (click)=\"setDensity(-2)\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-s\"></mat-icon>\n    <span i18n>Very Dense</span>\n  </button>\n  <button (click)=\"setDensity(-3)\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-xs\"></mat-icon>\n    <span i18n>Extreme Dense</span>\n  </button>\n</mat-menu>\n<mat-menu #themeFontMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableTypographies?.length\">\n    <button (click)=\"setTypography(typographyName)\"\n            (mouseenter)=\"previewTypography(typographyName)\"\n            (mouseleave)=\"restoreTypography()\"\n            *ngFor=\"let typographyName of availableTypographies\"\n            mat-menu-item>\n      {{ typographyName }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableThemes?.length\">\n    <button (click)=\"setTheme(themeName)\"\n            (mouseenter)=\"previewTheme(themeName)\"\n            (mouseleave)=\"restoreTheme()\"\n            *ngFor=\"let themeName of availableThemes\"\n            mat-menu-item>\n      {{ themeName }}\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LanguageSelectorComponent, selector: "rxap-language-selector" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-settings-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, LanguageSelectorComponent, MatMenuModule, PortalModule], template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode()\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode()\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"compare\"></mat-icon>\n    <span i18n>Theme</span>\n  </button>\n  <rxap-language-selector></rxap-language-selector>\n  <button (click)=\"openChangelogDialog()\" mat-menu-item>\n    <mat-icon svgIcon=\"format-list-numbered\"></mat-icon>\n    <span i18n>What's new</span>\n  </button>\n  <ng-container *ngFor=\"let item of items()\">\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  </ng-container>\n</mat-menu>\n\n<mat-menu #themeMenu=\"matMenu\" xPosition=\"before\">\n  <button [matMenuTriggerFor]=\"themeDensityMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"move-resize\"></mat-icon>\n    <span i18n>Density</span>\n  </button>\n  <button *ngIf=\"availableTypographies?.length\" [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button *ngIf=\"availableThemes?.length\" [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n    <span i18n>Preset</span>\n  </button>\n</mat-menu>\n\n<mat-menu #themeDensityMenu=\"matMenu\" xPosition=\"before\">\n  <button (click)=\"setDensity(0)\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-l\"></mat-icon>\n    <span i18n>Normal</span>\n  </button>\n  <button (click)=\"setDensity(-1)\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-m\"></mat-icon>\n    <span i18n>Dense</span>\n  </button>\n  <button (click)=\"setDensity(-2)\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-s\"></mat-icon>\n    <span i18n>Very Dense</span>\n  </button>\n  <button (click)=\"setDensity(-3)\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-xs\"></mat-icon>\n    <span i18n>Extreme Dense</span>\n  </button>\n</mat-menu>\n<mat-menu #themeFontMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableTypographies?.length\">\n    <button (click)=\"setTypography(typographyName)\"\n            (mouseenter)=\"previewTypography(typographyName)\"\n            (mouseleave)=\"restoreTypography()\"\n            *ngFor=\"let typographyName of availableTypographies\"\n            mat-menu-item>\n      {{ typographyName }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableThemes?.length\">\n    <button (click)=\"setTheme(themeName)\"\n            (mouseenter)=\"previewTheme(themeName)\"\n            (mouseleave)=\"restoreTheme()\"\n            *ngFor=\"let themeName of availableThemes\"\n            mat-menu-item>\n      {{ themeName }}\n    </button>\n  </ng-template>\n</mat-menu>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$4.ThemeService }, { type: i2$4.ActivatedRoute }, { type: i0.Injector }, { type: i3$3.ChangelogService }]; } });
-
-class SidenavToggleButtonComponent {
-    constructor(layoutComponentService) {
-        this.layoutComponentService = layoutComponentService;
-        this.opened = layoutComponentService.opened;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavToggleButtonComponent, deps: [{ token: LayoutComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidenavToggleButtonComponent, isStandalone: true, selector: "rxap-sidenav-toggle-button", ngImport: i0, template: "<button (click)=\"layoutComponentService.toggleOpened()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavToggleButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-sidenav-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatButtonModule,
-                        NgIf,
-                        MatIconModule,
-                    ], template: "<button (click)=\"layoutComponentService.toggleOpened()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: LayoutComponentService }]; } });
-
-const EXTRACT_USERNAME_FROM_PROFILE = new InjectionToken('extract-username-from-profile', {
-    providedIn: 'root',
-    factory: () => (profile) => (profile ? profile.username ?? profile.email ?? profile.name : null) ?? null,
-});
-class UserProfileIconComponent {
-    constructor(userProfileService, authenticationService, extractUsernameFromProfile) {
-        this.userProfileService = userProfileService;
-        this.authenticationService = authenticationService;
-        this.username = toSignal(this.authenticationService.isAuthenticated$.pipe(filter$1(Boolean), switchMap$1(() => this.userProfileService.connect({
-            viewChange: this.authenticationService.isAuthenticated$.pipe(skip(1), filter$1(Boolean), distinctUntilChanged()),
-        })), filter$1(Boolean), map(extractUsernameFromProfile)), { initialValue: null });
-    }
-    async logout() {
-        await this.authenticationService.signOut();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserProfileIconComponent, deps: [{ token: i1$5.UserProfileDataSource }, { token: i2$3.RxapAuthenticationService }, { token: EXTRACT_USERNAME_FROM_PROFILE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserProfileIconComponent, isStandalone: true, selector: "rxap-user-profile-icon", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserProfileIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-user-profile-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatMenuModule,
-                        MatIconModule,
-                        NgIf,
-                        AsyncPipe,
-                    ], template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$5.UserProfileDataSource }, { type: i2$3.RxapAuthenticationService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [EXTRACT_USERNAME_FROM_PROFILE]
-                }] }]; } });
-
-class HeaderComponent {
-    constructor(headerComponentService, layoutComponentService, headerComponent) {
-        this.headerComponentService = headerComponentService;
-        this.layoutComponentService = layoutComponentService;
-        this.headerComponent = headerComponent;
-        this.color = undefined;
-        this.collapsable = layoutComponentService.collapsable;
-        this.opened = layoutComponentService.opened;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [{ token: HeaderService }, { token: LayoutComponentService }, { token: RXAP_HEADER_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "rxap-header", inputs: { color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\" [ngClass]=\"{ open: opened() }\" class=\"mat-elevation-z3 header\">\n  <div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n    <rxap-sidenav-toggle-button *ngIf=\"!collapsable()\"></rxap-sidenav-toggle-button>\n    <div class=\"grow\">\n      <ng-content></ng-content>\n    </div>\n    <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n    <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n    <rxap-user-profile-icon class=\"grow-0\"></rxap-user-profile-icon>\n  </div>\n</mat-toolbar>\n\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: NavigationProgressBarComponent, selector: "rxap-navigation-progress-bar" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon" }, { kind: "component", type: AppsButtonComponent, selector: "rxap-apps-button" }, { kind: "component", type: SettingsButtonComponent, selector: "rxap-settings-button" }, { kind: "component", type: SidenavToggleButtonComponent, selector: "rxap-sidenav-toggle-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatToolbarModule,
-                        NgClass,
-                        NgIf,
-                        MatButtonModule,
-                        MatMenuModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        StopPropagationDirective,
-                        MatSelectModule,
-                        FormsModule,
-                        MatOptionModule,
-                        DataSourceCollectionDirective,
-                        MatSlideToggleModule,
-                        AsyncPipe,
-                        NavigationProgressBarComponent,
-                        UserProfileIconComponent,
-                        AppsButtonComponent,
-                        SettingsButtonComponent,
-                        SidenavToggleButtonComponent,
-                    ], template: "<mat-toolbar [color]=\"color\" [ngClass]=\"{ open: opened() }\" class=\"mat-elevation-z3 header\">\n  <div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n    <rxap-sidenav-toggle-button *ngIf=\"!collapsable()\"></rxap-sidenav-toggle-button>\n    <div class=\"grow\">\n      <ng-content></ng-content>\n    </div>\n    <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n    <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n    <rxap-user-profile-icon class=\"grow-0\"></rxap-user-profile-icon>\n  </div>\n</mat-toolbar>\n\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.HeaderService, decorators: [{
-                    type: Inject,
-                    args: [HeaderService]
-                }] }, { type: LayoutComponentService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rxapSidenavFooter]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
                     type: Inject,
-                    args: [RXAP_HEADER_COMPONENT]
-                }] }]; }, propDecorators: { color: [{
-                type: Input
-            }] } });
-
-class SignOutComponent {
-    constructor(authenticationService) {
-        this.authenticationService = authenticationService;
-    }
-    async logout() {
-        await this.authenticationService.signOut();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignOutComponent, deps: [{ token: i2$3.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignOutComponent, isStandalone: true, selector: "rxap-sign-out", ngImport: i0, template: "<button\n  mat-icon-button\n  (click)=\"logout()\"\n>\n  <mat-icon svgIcon=\"logout\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignOutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-sign-out', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<button\n  mat-icon-button\n  (click)=\"logout()\"\n>\n  <mat-icon svgIcon=\"logout\"></mat-icon>\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$3.RxapAuthenticationService }]; } });
+                    args: [TemplateRef]
+                }] }] });
 
-class ResetButtonComponent {
-    constructor(resetService) {
-        this.resetService = resetService;
+class SidenavHeaderDirective {
+    constructor(template) {
+        this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResetButtonComponent, deps: [{ token: ResetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResetButtonComponent, isStandalone: true, selector: "rxap-reset-button", ngImport: i0, template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon svgIcon=\"refresh\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavHeaderDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: SidenavHeaderDirective, isStandalone: true, selector: "[rxapSidenavHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResetButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-reset-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon svgIcon=\"refresh\"></mat-icon>\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ResetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rxapSidenavHeader]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
                     type: Inject,
-                    args: [ResetService]
-                }] }]; } });
+                    args: [TemplateRef]
+                }] }] });
 
 class SidenavComponentService {
     constructor(config) {
@@ -485,13 +192,13 @@ class SidenavComponentService {
     toggleNavigationCollapse() {
         this.collapsed$.next(!this.collapsed$.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavComponentService, deps: [{ token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavComponentService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavComponentService, deps: [{ token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavComponentService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavComponentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavComponentService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$1.ConfigService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.ConfigService }] });
 
 class NavigationItemComponent {
     get isActive() {
@@ -562,8 +269,8 @@ class NavigationItemComponent {
         }
         return item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationItemComponent, deps: [{ token: Router }, { token: SidenavComponentService }, { token: ElementRef }, { token: Renderer2 }, { token: Overlay }, { token: ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: "level", item: "item" }, host: { properties: { "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item.routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"{\n        'pl-0': level === 0,\n        'pl-4': level === 1,\n        'pl-8': level === 2,\n        'pl-12': level === 3\n      }\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item.label }}\n    </span>\n    <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item.children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatRippleModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4$1.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatIconModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i0.forwardRef(function () { return IconDirective; }), selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDividerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$4.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(function () { return NavigationComponent; }), selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationItemComponent, deps: [{ token: Router }, { token: SidenavComponentService }, { token: ElementRef }, { token: Renderer2 }, { token: Overlay }, { token: ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: "level", item: "item" }, host: { properties: { "class.active": "this.isActive" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item.routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"{\n        'pl-0': level === 0,\n        'pl-4': level === 1,\n        'pl-8': level === 2,\n        'pl-12': level === 3\n      }\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item.label }}\n    </span>\n    <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item.children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(() => RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(() => RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRippleModule) }, { kind: "directive", type: i0.forwardRef(() => i1$3.MatRipple), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i4.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDividerModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => NavigationComponent), selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('sub-nav', [
                 transition(':enter', [
                     style({
@@ -581,7 +288,7 @@ class NavigationItemComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[rxap-navigation-item]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
                         trigger('sub-nav', [
@@ -610,7 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         forwardRef(() => NavigationComponent),
                         NgClass,
                     ], template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item.routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"{\n        'pl-0': level === 0,\n        'pl-4': level === 1,\n        'pl-8': level === 2,\n        'pl-12': level === 3\n      }\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item.label }}\n    </span>\n    <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item.children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$4.Router, decorators: [{
+        }], ctorParameters: () => [{ type: i2.Router, decorators: [{
                     type: Inject,
                     args: [Router]
                 }] }, { type: SidenavComponentService, decorators: [{
@@ -628,7 +335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: i0.ViewContainerRef, decorators: [{
                     type: Inject,
                     args: [ViewContainerRef]
-                }] }]; }, propDecorators: { level: [{
+                }] }], propDecorators: { level: [{
                 type: Input
             }], routerLinkActive: [{
                 type: ViewChild,
@@ -651,6 +358,13 @@ function IsNavigationItem(item) {
     return (!!item && !!item['routerLink'] && !!item['label']);
 }
 
+const RXAP_NAVIGATION_CONFIG = new InjectionToken('rxap/layout/navigation-config');
+const RXAP_NAVIGATION_CONFIG_INSERTS = new InjectionToken('rxap/layout/navigation-config-inserts');
+const RXAP_FOOTER_COMPONENT = new InjectionToken('rxap/layout/footer-component');
+const RXAP_HEADER_COMPONENT = new InjectionToken('rxap/layout/header-component');
+const RXAP_LOGO_CONFIG = new InjectionToken('rxap/layout/logo-config');
+const RXAP_LAYOUT_APPS_GRID = new InjectionToken('rxap/layout/apps-grid');
+
 class NavigationService {
     constructor(navigation, injector, inserts = null) {
         this.injector = injector;
@@ -666,7 +380,7 @@ class NavigationService {
             Object.entries(inserts).forEach(([id, insert]) => this.insert(id, insert, false));
         }
         this.updateNavigation();
-        this.config$ = this.navigation$.pipe(switchMap$1((navigationWithoutStatusCheck) => this.checkNavigationStatusProviders(navigationWithoutStatusCheck)));
+        this.config$ = this.navigation$.pipe(switchMap((navigationWithoutStatusCheck) => this.checkNavigationStatusProviders(navigationWithoutStatusCheck)));
     }
     /**
      * @deprecated use add instead
@@ -723,7 +437,7 @@ class NavigationService {
             return of(false);
         })));
         // TODO : dont wait for all status services to complete, but cancel waiting if one returns false
-        return combineLatest(isVisibleArray$).pipe(map((isVisibleArray) => isVisibleArray.reduce((acc, isVisible) => acc && isVisible, true)), map((isVisible) => (isVisible ? navigationItem : null)), switchMap$1((navigationItemOrNull) => {
+        return combineLatest(isVisibleArray$).pipe(map((isVisibleArray) => isVisibleArray.reduce((acc, isVisible) => acc && isVisible, true)), map((isVisible) => (isVisible ? navigationItem : null)), switchMap((navigationItemOrNull) => {
             if (navigationItemOrNull) {
                 if (navigationItemOrNull.children?.length) {
                     return this.checkNavigationStatusProviders(navigationItemOrNull.children).pipe(map((children) => ({
@@ -771,13 +485,13 @@ class NavigationService {
         }
         return navigation;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: RXAP_NAVIGATION_CONFIG }, { token: INJECTOR }, { token: RXAP_NAVIGATION_CONFIG_INSERTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationService, deps: [{ token: RXAP_NAVIGATION_CONFIG }, { token: INJECTOR }, { token: RXAP_NAVIGATION_CONFIG_INSERTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [RXAP_NAVIGATION_CONFIG]
                 }] }, { type: undefined, decorators: [{
@@ -788,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }, {
                     type: Inject,
                     args: [RXAP_NAVIGATION_CONFIG_INSERTS]
-                }] }]; } });
+                }] }] });
 
 class NavigationComponent {
     constructor(navigationService, cdr, sidenav) {
@@ -798,66 +512,507 @@ class NavigationComponent {
         this.level = 0;
         this._root = false;
     }
-    set root(value) {
-        this._root = coerceBoolean(value);
+    set root(value) {
+        this._root = coerceBoolean(value);
+    }
+    ngOnInit() {
+        if (this._root) {
+            this.items = [];
+            this.subscription = this.navigationService.config$
+                .pipe(tap((navigation) => (this.items = navigation)), tap(() => this.cdr.detectChanges()))
+                .subscribe();
+        }
+        this.items ??= [];
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    // region type save item property
+    // required to check the type of the item property in the ngFor loop
+    isNavigationDividerItem(item) {
+        return item['divider'];
+    }
+    isNavigationItem(item) {
+        return !this.isNavigationDividerItem(item);
+    }
+    asNavigationItem(item) {
+        if (!this.isNavigationItem(item)) {
+            throw new Error('The item is not a NavigationItem');
+        }
+        return item;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationComponent, deps: [{ token: NavigationService }, { token: ChangeDetectorRef }, { token: SidenavComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: NavigationComponent, isStandalone: true, selector: "ul[rxap-navigation]", inputs: { items: "items", level: "level", root: "root" }, host: { properties: { "class.rxap-root-navigation": "this._root" }, classAttribute: "list-none dark:text-neutral-400 text-neutral-700" }, ngImport: i0, template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"(sidenav.collapsed$ | async) === false\" class=\"pl-5 h-6\">\n      <span *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\" [level]=\"level\" class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item></li>\n  </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDividerModule) }, { kind: "component", type: i0.forwardRef(() => i3$1.MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => NavigationItemComponent), selector: "li[rxap-navigation-item]", inputs: ["level", "item"] }, { kind: "pipe", type: i0.forwardRef(() => AsyncPipe), name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[rxap-navigation]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, host: {
+                        class: 'list-none dark:text-neutral-400 text-neutral-700',
+                    }, imports: [
+                        NgFor,
+                        NgIf,
+                        MatDividerModule,
+                        forwardRef(() => NavigationItemComponent),
+                        AsyncPipe,
+                    ], template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"(sidenav.collapsed$ | async) === false\" class=\"pl-5 h-6\">\n      <span *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\" [level]=\"level\" class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item></li>\n  </ng-template>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: NavigationService, decorators: [{
+                    type: Inject,
+                    args: [NavigationService]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: SidenavComponentService, decorators: [{
+                    type: Inject,
+                    args: [SidenavComponentService]
+                }] }], propDecorators: { items: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], _root: [{
+                type: HostBinding,
+                args: ['class.rxap-root-navigation']
+            }], root: [{
+                type: Input
+            }] } });
+
+class SidenavComponent {
+    constructor(sidenav) {
+        this.sidenav = sidenav;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavComponent, deps: [{ token: SidenavComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SidenavComponent, isStandalone: true, selector: "rxap-sidenav", host: { classAttribute: "rxap-layout-sidenav" }, queries: [{ propertyName: "sidenavFooterDirective", first: true, predicate: SidenavFooterDirective, descendants: true }, { propertyName: "sidenavHeaderDirective", first: true, predicate: SidenavHeaderDirective, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" class=\"rxap-container\">\n  <div class=\"inner flex flex-col justify-between items-stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"header grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n    </ng-template>\n    <div class=\"nav-container grow\">\n      <ul class=\"flex flex-col\" root rxap-navigation></ul>\n    </div>\n    <mat-divider class=\"grow-0\"></mat-divider>\n    <button (click)=\"sidenav.toggleNavigationCollapse()\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\"\n            class=\"sidebar-toggle grow-0\"\n            mat-button>\n      <span class=\"sidebar-toggle-inner flex flex-row items-center gap-4\">\n        <mat-icon class=\"arrow grow-0\">double_arrow</mat-icon>\n        <span [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"label grow-0\" i18n>Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"footer grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".rxap-container,.rxap-container .inner{height:100%}.rxap-container .inner .header{padding-bottom:12px}.rxap-container .inner .footer{padding-top:12px}.rxap-container .inner .nav-container{overflow-y:scroll;padding-top:12px}.rxap-container .inner .nav-container::-webkit-scrollbar{width:6px}.rxap-container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.rxap-container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.rxap-container .sidebar-toggle{min-height:48px}.rxap-container .sidebar-toggle .sidebar-toggle-inner{padding:0}.rxap-container .sidebar-toggle .arrow{transform:rotate(180deg)}.rxap-container .sidebar-toggle.collapsed .arrow{transform:initial}.rxap-container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'rxap-layout-sidenav',
+                    }, standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        NgTemplateOutlet,
+                        MatDividerModule,
+                        NavigationComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        AsyncPipe,
+                    ], template: "<div [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" class=\"rxap-container\">\n  <div class=\"inner flex flex-col justify-between items-stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"header grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n    </ng-template>\n    <div class=\"nav-container grow\">\n      <ul class=\"flex flex-col\" root rxap-navigation></ul>\n    </div>\n    <mat-divider class=\"grow-0\"></mat-divider>\n    <button (click)=\"sidenav.toggleNavigationCollapse()\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\"\n            class=\"sidebar-toggle grow-0\"\n            mat-button>\n      <span class=\"sidebar-toggle-inner flex flex-row items-center gap-4\">\n        <mat-icon class=\"arrow grow-0\">double_arrow</mat-icon>\n        <span [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"label grow-0\" i18n>Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"footer grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".rxap-container,.rxap-container .inner{height:100%}.rxap-container .inner .header{padding-bottom:12px}.rxap-container .inner .footer{padding-top:12px}.rxap-container .inner .nav-container{overflow-y:scroll;padding-top:12px}.rxap-container .inner .nav-container::-webkit-scrollbar{width:6px}.rxap-container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.rxap-container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.rxap-container .sidebar-toggle{min-height:48px}.rxap-container .sidebar-toggle .sidebar-toggle-inner{padding:0}.rxap-container .sidebar-toggle .arrow{transform:rotate(180deg)}.rxap-container .sidebar-toggle.collapsed .arrow{transform:initial}.rxap-container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"] }]
+        }], ctorParameters: () => [{ type: SidenavComponentService }], propDecorators: { sidenavFooterDirective: [{
+                type: ContentChild,
+                args: [SidenavFooterDirective]
+            }], sidenavHeaderDirective: [{
+                type: ContentChild,
+                args: [SidenavHeaderDirective]
+            }] } });
+
+class ReplaceRouterPathsService {
+    transform(routerLink) {
+        return of(routerLink);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ReplaceRouterPathsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ReplaceRouterPathsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ReplaceRouterPathsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ReplaceRouterPathsPipe {
+    constructor(rrp) {
+        this.rrp = rrp;
+    }
+    transform(routerLink) {
+        return this.rrp.transform(routerLink);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ReplaceRouterPathsPipe, deps: [{ token: ReplaceRouterPathsService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: ReplaceRouterPathsPipe, isStandalone: true, name: "replaceRouterPaths" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ReplaceRouterPathsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'replaceRouterPaths',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: ReplaceRouterPathsService }] });
+
+class LayoutComponentService {
+    constructor(footerComponentService, headerComponentService, logoConfig = null, config, mediaMatcher) {
+        this.footerComponentService = footerComponentService;
+        this.headerComponentService = headerComponentService;
+        this.config = config;
+        this.currentThemeDensity = toSignal(ObserveCurrentThemeDensity());
+        const mobileQuery = mediaMatcher.matchMedia('(max-width: 959px)');
+        const mobile = mobileQuery.matches;
+        const initialCollapsable = this.config.get('navigation.collapsable', true);
+        const collapsable = initialCollapsable && !mobile;
+        const pinned = this.config.get('navigation.pinned', false);
+        const mode = this.config.get('navigation.mode', pinned || !collapsable ? 'side' : 'over');
+        const opened = this.config.get('navigation.opened', (!collapsable || pinned) && !mobile);
+        this.opened = signal(opened);
+        this.mode = signal(mode);
+        this.pinned = signal(pinned);
+        this.collapsable = signal(collapsable);
+        this.fixedBottomGap = computed(() => this.footerComponentService.portalCount() * (64 + (this.currentThemeDensity() ?? 0) * 4));
+        this.fixedTopGap = computed(() => this.headerComponentService.componentCount() * (64 + (this.currentThemeDensity() ?? 0) * 4));
+        this.logo = logoConfig ?? {
+            src: 'assets/logo.png',
+            width: 192,
+        };
+        mobileQuery.addEventListener('change', (event) => {
+            if (initialCollapsable) {
+                this.collapsable.set(!event.matches);
+                if (this.collapsable()) {
+                    if (!this.pinned()) {
+                        this.opened.set(false);
+                    }
+                }
+            }
+        });
+        effect(() => {
+            if (this.pinned()) {
+                this.mode.set('side');
+                this.opened.set(true);
+            }
+            else {
+                this.mode.set('over');
+                this.opened.set(false);
+            }
+        }, { allowSignalWrites: true });
+    }
+    toggleOpened() {
+        this.opened.set(!this.opened());
+    }
+    togglePinned() {
+        this.pinned.set(!this.pinned());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LayoutComponentService, deps: [{ token: i1$1.FooterService }, { token: i1$1.HeaderService }, { token: RXAP_LOGO_CONFIG, optional: true }, { token: ConfigService }, { token: i2$1.MediaMatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LayoutComponentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LayoutComponentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$1.FooterService }, { type: i1$1.HeaderService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RXAP_LOGO_CONFIG]
+                }] }, { type: i1$2.ConfigService, decorators: [{
+                    type: Inject,
+                    args: [ConfigService]
+                }] }, { type: i2$1.MediaMatcher }] });
+
+class FooterComponent {
+    constructor(footerService) {
+        this.footerService = footerService;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FooterComponent, deps: [{ token: i1$1.FooterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: FooterComponent, isStandalone: true, selector: "rxap-footer", ngImport: i0, template: "<ng-template [ngIf]=\"footerService.portals()\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, MatToolbarModule, NgFor, PortalModule, AsyncPipe], template: "<ng-template [ngIf]=\"footerService.portals()\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.FooterService }] });
+
+class AppUrlService {
+    constructor(config, localeId, authorizationService, environment) {
+        this.config = config;
+        this.localeId = localeId;
+        this.authorizationService = authorizationService;
+        this.environment = environment;
+        this._apps = this.config.get('navigation.apps', []);
+    }
+    getApp(appId) {
+        return this._apps.find(app => app.id === appId) ?? null;
+    }
+    getAppUrl(appId, path, infix = this.getPathPrefix()) {
+        const app = this.getApp(appId);
+        if (app) {
+            return JoinPath(app.href, infix, path);
+        }
+        return null;
+    }
+    getAppUrlOrThrow(appId, path) {
+        const url = this.getAppUrl(appId, path);
+        if (url) {
+            return url;
+        }
+        throw new Error(`Could not find app with id "${appId}"`);
+    }
+    navigate(appId, path) {
+        const url = this.getAppUrl(appId, path);
+        if (url) {
+            ClickOnLink(url);
+        }
+    }
+    async getAppList() {
+        const appList = this
+            ._apps
+            .filter(app => !app.hidden)
+            .map(app => ({
+            ...app,
+            href: JoinPath(app.href, this.getPathPrefix()),
+        }));
+        const filteredAppList = [];
+        for (const app of appList) {
+            if (await firstValueFrom(this.authorizationService.hasPermission$(app.permissions))) {
+                filteredAppList.push(app);
+            }
+        }
+        return filteredAppList;
+    }
+    getPathPrefix() {
+        if (this.environment.production && this.localeId) {
+            return this.localeId.replace(/-.+$/, '');
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppUrlService, deps: [{ token: i1$2.ConfigService }, { token: LOCALE_ID }, { token: i2$3.AuthorizationService }, { token: RXAP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppUrlService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppUrlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$2.ConfigService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i2$3.AuthorizationService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [RXAP_ENVIRONMENT]
+                }] }] });
+
+class AppsButtonComponent {
+    constructor(grid, appUrlService, authenticationService) {
+        this.appUrlService = appUrlService;
+        this.authenticationService = authenticationService;
+        this.isOpen = false;
+        this.appList = signal([]);
+    }
+    ngOnInit() {
+        this._subscription = this.authenticationService.isAuthenticated$.pipe(filter(Boolean), switchMap$1(() => this.appUrlService.getAppList()), tap((apps) => this.appList.set(apps))).subscribe();
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppsButtonComponent, deps: [{ token: RXAP_LAYOUT_APPS_GRID, optional: true }, { token: AppUrlService }, { token: i2$4.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AppsButtonComponent, isStandalone: true, selector: "rxap-apps-button", ngImport: i0, template: "<div *ngIf=\"appList()?.length\" class=\"flex flex-row items-center gap-8\">\n\n  <div *ngIf=\"isOpen\" class=\"flex flex-row items-center gap-6\">\n\n    <div *ngFor=\"let app of appList()\" class=\"h-10\">\n      <a [href]=\"app.href\" mat-stroked-button>\n        <span class=\"flex flex-row items-center gap-4\">\n          <img *ngIf=\"app.image\" [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n          <span class=\"label grow-0\">{{app.label}}</span>\n        </span>\n      </a>\n    </div>\n\n  </div>\n\n  <button (click)=\"isOpen = !isOpen\" mat-icon-button>\n    <mat-icon svgIcon=\"apps\"></mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AppsButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-apps-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        MatButtonModule,
+                        MatIconModule,
+                        NgOptimizedImage,
+                    ], template: "<div *ngIf=\"appList()?.length\" class=\"flex flex-row items-center gap-8\">\n\n  <div *ngIf=\"isOpen\" class=\"flex flex-row items-center gap-6\">\n\n    <div *ngFor=\"let app of appList()\" class=\"h-10\">\n      <a [href]=\"app.href\" mat-stroked-button>\n        <span class=\"flex flex-row items-center gap-4\">\n          <img *ngIf=\"app.image\" [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n          <span class=\"label grow-0\">{{app.label}}</span>\n        </span>\n      </a>\n    </div>\n\n  </div>\n\n  <button (click)=\"isOpen = !isOpen\" mat-icon-button>\n    <mat-icon svgIcon=\"apps\"></mat-icon>\n  </button>\n\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RXAP_LAYOUT_APPS_GRID]
+                }] }, { type: AppUrlService }, { type: i2$4.RxapAuthenticationService }] });
+
+class NavigationProgressBarComponent {
+    constructor(router) {
+        this.router = router;
+        this.navigating$ = this.router.events.pipe(filter(event => event instanceof NavigationStart ||
+            event instanceof NavigationEnd ||
+            event instanceof NavigationCancel), map(event => event instanceof NavigationStart));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationProgressBarComponent, deps: [{ token: Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: NavigationProgressBarComponent, isStandalone: true, selector: "rxap-navigation-progress-bar", ngImport: i0, template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  color=\"accent\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NavigationProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-navigation-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        MatProgressBarModule,
+                        AsyncPipe,
+                    ], template: "<mat-progress-bar\n  *ngIf=\"navigating$ | async\"\n  color=\"accent\"\n  mode=\"indeterminate\"\n></mat-progress-bar>\n" }]
+        }], ctorParameters: () => [{ type: i2.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }] });
+
+class LanguageSelectorComponent {
+    constructor(language) {
+        this.language = language;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: i1$5.LanguageSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: LanguageSelectorComponent, isStandalone: true, selector: "rxap-language-selector", ngImport: i0, template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\" rxapStopPropagation>\n      <mat-label i18n>Select Language</mat-label>\n      <mat-select (ngModelChange)=\"language.setLanguage($event)\" [ngModel]=\"language.selectedLanguage\">\n        <mat-option *ngFor=\"let item of language.languages | keyvalue\" [value]=\"item.key\">{{item.value}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".language-selector{width:calc(100% - 32px);margin:0 16px}.language-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: StopPropagationDirective, selector: "[rxapStopPropagation]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-language-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgIf,
+                        MatFormFieldModule,
+                        StopPropagationDirective,
+                        MatSelectModule,
+                        FormsModule,
+                        NgFor,
+                        MatOptionModule,
+                        KeyValuePipe,
+                    ], template: "<ng-template [ngIf]=\"(language.languages | keyvalue).length\">\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"language-selector\" rxapStopPropagation>\n      <mat-label i18n>Select Language</mat-label>\n      <mat-select (ngModelChange)=\"language.setLanguage($event)\" [ngModel]=\"language.selectedLanguage\">\n        <mat-option *ngFor=\"let item of language.languages | keyvalue\" [value]=\"item.key\">{{item.value}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [".language-selector{width:calc(100% - 32px);margin:0 16px}.language-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:12px 0;border-width:6px}.language-selector ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-select-arrow-wrapper{transform:translateY(0)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.LanguageSelectorService }] });
+
+class SettingsButtonComponent {
+    constructor(theme, route, injector, changelogService) {
+        this.theme = theme;
+        this.route = route;
+        this.injector = injector;
+        this.changelogService = changelogService;
+        this.isDevMode = isDevMode();
+        this.items = signal([]);
+        this.savePreviewDensityValue = false;
+        this.currentDensityValue = null;
+        this.savePreviewTypographyValue = false;
+        this.currentTypographyValue = null;
+        this.savePreviewThemeValue = false;
+        this.currentThemeValue = null;
+        this.availableThemes = this.theme.getAvailableThemes();
+        this.availableTypographies = this.theme.getAvailableTypographies();
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    ngOnInit() {
+        this._subscription = this.route.data.pipe(map(data => this.getCustomMenuItems(data)), map(items => items.map(item => new ComponentPortal(item, undefined, this.injector))), tap(items => this.items.set(items))).subscribe();
+    }
+    getCustomMenuItems(data) {
+        if (data?.layout?.header?.menu?.items?.length) {
+            return data.layout.header.menu.items;
+        }
+        return [];
+    }
+    openChangelogDialog() {
+        this.changelogService.showChangelogDialog();
+    }
+    previewDensity(density) {
+        this.theme.applyDensity(density);
+    }
+    restoreDensity() {
+        this.theme.applyDensity(this.theme.density());
+    }
+    setDensity(density) {
+        this.theme.setDensity(density);
+    }
+    previewTypography(typography) {
+        this.theme.applyTypography(typography);
+    }
+    restoreTypography() {
+        this.theme.applyTypography(this.theme.typography());
+    }
+    setTypography(typography) {
+        this.theme.setTypography(typography);
+    }
+    previewTheme(theme) {
+        this.theme.applyTheme(theme);
     }
-    ngOnInit() {
-        if (this._root) {
-            this.items = [];
-            this.subscription = this.navigationService.config$
-                .pipe(tap((navigation) => (this.items = navigation)), tap(() => this.cdr.detectChanges()))
-                .subscribe();
-        }
-        this.items ??= [];
+    restoreTheme() {
+        this.theme.applyTheme(this.theme.themeName());
     }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
+    setTheme(theme) {
+        this.theme.setTheme(theme);
     }
-    // region type save item property
-    // required to check the type of the item property in the ngFor loop
-    isNavigationDividerItem(item) {
-        return item['divider'];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingsButtonComponent, deps: [{ token: i1$6.ThemeService }, { token: i2.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.ChangelogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SettingsButtonComponent, isStandalone: true, selector: "rxap-settings-button", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode()\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode()\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"compare\"></mat-icon>\n    <span i18n>Theme</span>\n  </button>\n  <rxap-language-selector></rxap-language-selector>\n  <button (click)=\"openChangelogDialog()\" mat-menu-item>\n    <mat-icon svgIcon=\"format-list-numbered\"></mat-icon>\n    <span i18n>What's new</span>\n  </button>\n  <ng-container *ngFor=\"let item of items()\">\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  </ng-container>\n</mat-menu>\n\n<mat-menu #themeMenu=\"matMenu\" xPosition=\"before\">\n  <button [matMenuTriggerFor]=\"themeDensityMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"move-resize\"></mat-icon>\n    <span i18n>Density</span>\n  </button>\n  <button *ngIf=\"availableTypographies?.length\" [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button *ngIf=\"availableThemes?.length\" [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n    <span i18n>Preset</span>\n  </button>\n</mat-menu>\n\n<mat-menu #themeDensityMenu=\"matMenu\" xPosition=\"before\">\n  <button (click)=\"setDensity(0)\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-l\"></mat-icon>\n    <span i18n>Normal</span>\n  </button>\n  <button (click)=\"setDensity(-1)\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-m\"></mat-icon>\n    <span i18n>Dense</span>\n  </button>\n  <button (click)=\"setDensity(-2)\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-s\"></mat-icon>\n    <span i18n>Very Dense</span>\n  </button>\n  <button (click)=\"setDensity(-3)\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-xs\"></mat-icon>\n    <span i18n>Extreme Dense</span>\n  </button>\n</mat-menu>\n<mat-menu #themeFontMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableTypographies?.length\">\n    <button (click)=\"setTypography(typographyName)\"\n            (mouseenter)=\"previewTypography(typographyName)\"\n            (mouseleave)=\"restoreTypography()\"\n            *ngFor=\"let typographyName of availableTypographies\"\n            mat-menu-item>\n      {{ typographyName }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableThemes?.length\">\n    <button (click)=\"setTheme(themeName)\"\n            (mouseenter)=\"previewTheme(themeName)\"\n            (mouseleave)=\"restoreTheme()\"\n            *ngFor=\"let themeName of availableThemes\"\n            mat-menu-item>\n      {{ themeName }}\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LanguageSelectorComponent, selector: "rxap-language-selector" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SettingsButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-settings-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, LanguageSelectorComponent, MatMenuModule, PortalModule], template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode()\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode()\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"compare\"></mat-icon>\n    <span i18n>Theme</span>\n  </button>\n  <rxap-language-selector></rxap-language-selector>\n  <button (click)=\"openChangelogDialog()\" mat-menu-item>\n    <mat-icon svgIcon=\"format-list-numbered\"></mat-icon>\n    <span i18n>What's new</span>\n  </button>\n  <ng-container *ngFor=\"let item of items()\">\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  </ng-container>\n</mat-menu>\n\n<mat-menu #themeMenu=\"matMenu\" xPosition=\"before\">\n  <button [matMenuTriggerFor]=\"themeDensityMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"move-resize\"></mat-icon>\n    <span i18n>Density</span>\n  </button>\n  <button *ngIf=\"availableTypographies?.length\" [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button *ngIf=\"availableThemes?.length\" [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n    <span i18n>Preset</span>\n  </button>\n</mat-menu>\n\n<mat-menu #themeDensityMenu=\"matMenu\" xPosition=\"before\">\n  <button (click)=\"setDensity(0)\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-l\"></mat-icon>\n    <span i18n>Normal</span>\n  </button>\n  <button (click)=\"setDensity(-1)\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-m\"></mat-icon>\n    <span i18n>Dense</span>\n  </button>\n  <button (click)=\"setDensity(-2)\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-s\"></mat-icon>\n    <span i18n>Very Dense</span>\n  </button>\n  <button (click)=\"setDensity(-3)\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"restoreDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-xs\"></mat-icon>\n    <span i18n>Extreme Dense</span>\n  </button>\n</mat-menu>\n<mat-menu #themeFontMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableTypographies?.length\">\n    <button (click)=\"setTypography(typographyName)\"\n            (mouseenter)=\"previewTypography(typographyName)\"\n            (mouseleave)=\"restoreTypography()\"\n            *ngFor=\"let typographyName of availableTypographies\"\n            mat-menu-item>\n      {{ typographyName }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  <ng-template [ngIf]=\"availableThemes?.length\">\n    <button (click)=\"setTheme(themeName)\"\n            (mouseenter)=\"previewTheme(themeName)\"\n            (mouseleave)=\"restoreTheme()\"\n            *ngFor=\"let themeName of availableThemes\"\n            mat-menu-item>\n      {{ themeName }}\n    </button>\n  </ng-template>\n</mat-menu>\n" }]
+        }], ctorParameters: () => [{ type: i1$6.ThemeService }, { type: i2.ActivatedRoute }, { type: i0.Injector }, { type: i3$3.ChangelogService }] });
+
+class SidenavToggleButtonComponent {
+    constructor(layoutComponentService) {
+        this.layoutComponentService = layoutComponentService;
+        this.opened = layoutComponentService.opened;
     }
-    isNavigationItem(item) {
-        return !this.isNavigationDividerItem(item);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavToggleButtonComponent, deps: [{ token: LayoutComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SidenavToggleButtonComponent, isStandalone: true, selector: "rxap-sidenav-toggle-button", ngImport: i0, template: "<button (click)=\"layoutComponentService.toggleOpened()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SidenavToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-sidenav-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatButtonModule,
+                        NgIf,
+                        MatIconModule,
+                    ], template: "<button (click)=\"layoutComponentService.toggleOpened()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: LayoutComponentService }] });
+
+const EXTRACT_USERNAME_FROM_PROFILE = new InjectionToken('extract-username-from-profile', {
+    providedIn: 'root',
+    factory: () => (profile) => (profile ? profile.username ?? profile.email ?? profile.name : null) ?? null,
+});
+class UserProfileIconComponent {
+    constructor(userProfileService, authenticationService, extractUsernameFromProfile) {
+        this.userProfileService = userProfileService;
+        this.authenticationService = authenticationService;
+        this.username = toSignal(this.authenticationService.isAuthenticated$.pipe(filter$1(Boolean), switchMap(() => this.userProfileService.connect({
+            viewChange: this.authenticationService.isAuthenticated$.pipe(skip(1), filter$1(Boolean), distinctUntilChanged()),
+        })), filter$1(Boolean), map(extractUsernameFromProfile)), { initialValue: null });
     }
-    asNavigationItem(item) {
-        if (!this.isNavigationItem(item)) {
-            throw new Error('The item is not a NavigationItem');
-        }
-        return item;
+    async logout() {
+        await this.authenticationService.signOut();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationComponent, deps: [{ token: NavigationService }, { token: ChangeDetectorRef }, { token: SidenavComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationComponent, isStandalone: true, selector: "ul[rxap-navigation]", inputs: { items: "items", level: "level", root: "root" }, host: { properties: { "class.rxap-root-navigation": "this._root" }, classAttribute: "list-none dark:text-neutral-400 text-neutral-700" }, ngImport: i0, template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"(sidenav.collapsed$ | async) === false\" class=\"pl-5 h-6\">\n      <span *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\" [level]=\"level\" class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item></li>\n  </ng-template>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatDividerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i3$4.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(function () { return NavigationItemComponent; }), selector: "li[rxap-navigation-item]", inputs: ["level", "item"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: UserProfileIconComponent, deps: [{ token: i1$7.UserProfileDataSource }, { token: i2$4.RxapAuthenticationService }, { token: EXTRACT_USERNAME_FROM_PROFILE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: UserProfileIconComponent, isStandalone: true, selector: "rxap-user-profile-icon", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: UserProfileIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ul[rxap-navigation]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, host: {
-                        class: 'list-none dark:text-neutral-400 text-neutral-700',
-                    }, imports: [
-                        NgFor,
+            args: [{ selector: 'rxap-user-profile-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatMenuModule,
+                        MatIconModule,
                         NgIf,
-                        MatDividerModule,
-                        forwardRef(() => NavigationItemComponent),
                         AsyncPipe,
-                    ], template: "<ng-template [ngForOf]=\"items\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"(sidenav.collapsed$ | async) === false\" class=\"pl-5 h-6\">\n      <span *ngIf=\"item.title\">{{item.title}}</span>\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\" [level]=\"level\" class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item></li>\n  </ng-template>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: NavigationService, decorators: [{
+                    ], template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$7.UserProfileDataSource }, { type: i2$4.RxapAuthenticationService }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [NavigationService]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    args: [EXTRACT_USERNAME_FROM_PROFILE]
+                }] }] });
+
+class HeaderComponent {
+    constructor(headerComponentService, layoutComponentService, headerComponent) {
+        this.headerComponentService = headerComponentService;
+        this.layoutComponentService = layoutComponentService;
+        this.headerComponent = headerComponent;
+        this.color = undefined;
+        this.collapsable = layoutComponentService.collapsable;
+        this.opened = layoutComponentService.opened;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HeaderComponent, deps: [{ token: HeaderService }, { token: LayoutComponentService }, { token: RXAP_HEADER_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: HeaderComponent, isStandalone: true, selector: "rxap-header", inputs: { color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\" [ngClass]=\"{ open: opened() }\" class=\"mat-elevation-z3 header\">\n  <div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n    <rxap-sidenav-toggle-button *ngIf=\"!collapsable()\"></rxap-sidenav-toggle-button>\n    <div class=\"grow\">\n      <ng-content></ng-content>\n    </div>\n    <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n    <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n    <rxap-user-profile-icon class=\"grow-0\"></rxap-user-profile-icon>\n  </div>\n</mat-toolbar>\n\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: NavigationProgressBarComponent, selector: "rxap-navigation-progress-bar" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon" }, { kind: "component", type: AppsButtonComponent, selector: "rxap-apps-button" }, { kind: "component", type: SettingsButtonComponent, selector: "rxap-settings-button" }, { kind: "component", type: SidenavToggleButtonComponent, selector: "rxap-sidenav-toggle-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatToolbarModule,
+                        NgClass,
+                        NgIf,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        StopPropagationDirective,
+                        MatSelectModule,
+                        FormsModule,
+                        MatOptionModule,
+                        DataSourceCollectionDirective,
+                        MatSlideToggleModule,
+                        AsyncPipe,
+                        NavigationProgressBarComponent,
+                        UserProfileIconComponent,
+                        AppsButtonComponent,
+                        SettingsButtonComponent,
+                        SidenavToggleButtonComponent,
+                    ], template: "<mat-toolbar [color]=\"color\" [ngClass]=\"{ open: opened() }\" class=\"mat-elevation-z3 header\">\n  <div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n    <rxap-sidenav-toggle-button *ngIf=\"!collapsable()\"></rxap-sidenav-toggle-button>\n    <div class=\"grow\">\n      <ng-content></ng-content>\n    </div>\n    <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n    <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n    <rxap-user-profile-icon class=\"grow-0\"></rxap-user-profile-icon>\n  </div>\n</mat-toolbar>\n\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.HeaderService, decorators: [{
                     type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: SidenavComponentService, decorators: [{
+                    args: [HeaderService]
+                }] }, { type: LayoutComponentService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
-                    args: [SidenavComponentService]
-                }] }]; }, propDecorators: { items: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], _root: [{
-                type: HostBinding,
-                args: ['class.rxap-root-navigation']
-            }], root: [{
+                    args: [RXAP_HEADER_COMPONENT]
+                }] }], propDecorators: { color: [{
                 type: Input
             }] } });
 
@@ -895,10 +1050,10 @@ class LayoutComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutComponentService }, { token: RXAP_ENVIRONMENT }, { token: i2$6.IconLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayoutComponent, isStandalone: true, selector: "rxap-layout", viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<rxap-status-indicator class=\"fixed bottom-0 right-0 z-10\"></rxap-status-indicator>\n<div class=\"flex flex-col h-screen justify-between\">\n  <rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n  <mat-sidenav-container [ngStyle]=\"{\n    'margin-top.px': fixedTopGap(),\n    'margin-bottom.px': fixedBottomGap(),\n  }\" class=\"grow\">\n    <mat-sidenav\n      #matSidenav=\"matSidenav\"\n      [fixedBottomGap]=\"fixedBottomGap()\"\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"fixedTopGap()\"\n      [mode]=\"sidenavMode()\"\n      [ngClass]=\"{ collapsable: collapsable() }\"\n      class=\"sidenav\"\n      [opened]=\"opened()\"\n    >\n      <div (mouseleave)=\"collapsable() && !pinned() && matSidenav.close()\"\n           class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n        <div (click)=\"layoutComponentService.togglePinned()\" *ngIf=\"collapsable()\"\n             class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n          <span class=\"text-lg\" i18n>Navigation</span>\n          <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n            <button mat-icon-button>\n              <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n              <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n            </button>\n          </div>\n        </div>\n\n        <ul\n          (mouseenter)=\"collapsable() && !pinned() && matSidenav.open()\"\n          class=\"grow self-stretch\"\n          root\n          rxap-navigation\n        >\n        </ul>\n\n        <img\n          [src]=\"logoSrc\"\n          [routerLink]=\"['/']\"\n          [width]=\"logoWidth\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav.collapsable:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav.collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "rxap-header", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: StatusIndicatorComponent, selector: "rxap-status-indicator" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutComponentService }, { token: RXAP_ENVIRONMENT }, { token: i2$6.IconLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: LayoutComponent, isStandalone: true, selector: "rxap-layout", viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<rxap-status-indicator class=\"fixed bottom-0 right-0 z-10\"></rxap-status-indicator>\n<div class=\"flex flex-col h-screen justify-between\">\n  <rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n  <mat-sidenav-container [ngStyle]=\"{\n    'margin-top.px': fixedTopGap(),\n    'margin-bottom.px': fixedBottomGap(),\n  }\" class=\"grow\">\n    <mat-sidenav\n      #matSidenav=\"matSidenav\"\n      [fixedBottomGap]=\"fixedBottomGap()\"\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"fixedTopGap()\"\n      [mode]=\"sidenavMode()\"\n      [ngClass]=\"{ collapsable: collapsable() }\"\n      class=\"sidenav\"\n      [opened]=\"opened()\"\n    >\n      <div (mouseleave)=\"collapsable() && !pinned() && matSidenav.close()\"\n           class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n        <div (click)=\"layoutComponentService.togglePinned()\" *ngIf=\"collapsable()\"\n             class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n          <span class=\"text-lg\" i18n>Navigation</span>\n          <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n            <button mat-icon-button>\n              <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n              <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n            </button>\n          </div>\n        </div>\n\n        <ul\n          (mouseenter)=\"collapsable() && !pinned() && matSidenav.open()\"\n          class=\"grow self-stretch\"\n          root\n          rxap-navigation\n        >\n        </ul>\n\n        <img\n          [src]=\"logoSrc\"\n          [routerLink]=\"['/']\"\n          [width]=\"logoWidth\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav.collapsable:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav.collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "rxap-header", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: StatusIndicatorComponent, selector: "rxap-status-indicator" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rxap-layout', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         HeaderComponent,
@@ -917,180 +1072,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgStyle,
                         NgClass,
                     ], template: "<rxap-status-indicator class=\"fixed bottom-0 right-0 z-10\"></rxap-status-indicator>\n<div class=\"flex flex-col h-screen justify-between\">\n  <rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n  <mat-sidenav-container [ngStyle]=\"{\n    'margin-top.px': fixedTopGap(),\n    'margin-bottom.px': fixedBottomGap(),\n  }\" class=\"grow\">\n    <mat-sidenav\n      #matSidenav=\"matSidenav\"\n      [fixedBottomGap]=\"fixedBottomGap()\"\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"fixedTopGap()\"\n      [mode]=\"sidenavMode()\"\n      [ngClass]=\"{ collapsable: collapsable() }\"\n      class=\"sidenav\"\n      [opened]=\"opened()\"\n    >\n      <div (mouseleave)=\"collapsable() && !pinned() && matSidenav.close()\"\n           class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n        <div (click)=\"layoutComponentService.togglePinned()\" *ngIf=\"collapsable()\"\n             class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n          <span class=\"text-lg\" i18n>Navigation</span>\n          <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n            <button mat-icon-button>\n              <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n              <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n            </button>\n          </div>\n        </div>\n\n        <ul\n          (mouseenter)=\"collapsable() && !pinned() && matSidenav.open()\"\n          class=\"grow self-stretch\"\n          root\n          rxap-navigation\n        >\n        </ul>\n\n        <img\n          [src]=\"logoSrc\"\n          [routerLink]=\"['/']\"\n          [width]=\"logoWidth\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav.collapsable:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav.collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: LayoutComponentService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: LayoutComponentService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RXAP_ENVIRONMENT]
-                }] }, { type: i2$6.IconLoaderService }]; }, propDecorators: { sidenav: [{
+                }] }, { type: i2$6.IconLoaderService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: [MatSidenav, { static: true }]
             }] } });
 
-class ReplaceRouterPathsService {
-    transform(routerLink) {
-        return of(routerLink);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReplaceRouterPathsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReplaceRouterPathsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReplaceRouterPathsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class SidenavFooterDirective {
-    constructor(template) {
-        this.template = template;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavFooterDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidenavFooterDirective, isStandalone: true, selector: "[rxapSidenavFooter]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rxapSidenavFooter]',
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Inject,
-                    args: [TemplateRef]
-                }] }]; } });
-
-class SidenavHeaderDirective {
-    constructor(template) {
-        this.template = template;
+class SignOutComponent {
+    constructor(authenticationService) {
+        this.authenticationService = authenticationService;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavHeaderDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SidenavHeaderDirective, isStandalone: true, selector: "[rxapSidenavHeader]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rxapSidenavHeader]',
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Inject,
-                    args: [TemplateRef]
-                }] }]; } });
-
-class SidenavComponent {
-    constructor(sidenav) {
-        this.sidenav = sidenav;
+    async logout() {
+        await this.authenticationService.signOut();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavComponent, deps: [{ token: SidenavComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SidenavComponent, isStandalone: true, selector: "rxap-sidenav", host: { classAttribute: "rxap-layout-sidenav" }, queries: [{ propertyName: "sidenavFooterDirective", first: true, predicate: SidenavFooterDirective, descendants: true }, { propertyName: "sidenavHeaderDirective", first: true, predicate: SidenavHeaderDirective, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" class=\"rxap-container\">\n  <div class=\"inner flex flex-col justify-between items-stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"header grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n    </ng-template>\n    <div class=\"nav-container grow\">\n      <ul class=\"flex flex-col\" root rxap-navigation></ul>\n    </div>\n    <mat-divider class=\"grow-0\"></mat-divider>\n    <button (click)=\"sidenav.toggleNavigationCollapse()\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\"\n            class=\"sidebar-toggle grow-0\"\n            mat-button>\n      <span class=\"sidebar-toggle-inner flex flex-row items-center gap-4\">\n        <mat-icon class=\"arrow grow-0\">double_arrow</mat-icon>\n        <span [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"label grow-0\" i18n>Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"footer grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".rxap-container,.rxap-container .inner{height:100%}.rxap-container .inner .header{padding-bottom:12px}.rxap-container .inner .footer{padding-top:12px}.rxap-container .inner .nav-container{overflow-y:scroll;padding-top:12px}.rxap-container .inner .nav-container::-webkit-scrollbar{width:6px}.rxap-container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.rxap-container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.rxap-container .sidebar-toggle{min-height:48px}.rxap-container .sidebar-toggle .sidebar-toggle-inner{padding:0}.rxap-container .sidebar-toggle .arrow{transform:rotate(180deg)}.rxap-container .sidebar-toggle.collapsed .arrow{transform:initial}.rxap-container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SignOutComponent, deps: [{ token: i2$4.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: SignOutComponent, isStandalone: true, selector: "rxap-sign-out", ngImport: i0, template: "<button\n  mat-icon-button\n  (click)=\"logout()\"\n>\n  <mat-icon svgIcon=\"logout\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SignOutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'rxap-layout-sidenav',
-                    }, standalone: true, imports: [
-                        NgClass,
-                        NgIf,
-                        NgTemplateOutlet,
-                        MatDividerModule,
-                        NavigationComponent,
-                        MatButtonModule,
-                        MatIconModule,
-                        AsyncPipe,
-                    ], template: "<div [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\" class=\"rxap-container\">\n  <div class=\"inner flex flex-col justify-between items-stretch\">\n    <ng-template [ngIf]=\"sidenavHeaderDirective?.template\">\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"header grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavHeaderDirective?.template ?? null\"></ng-container>\n      </div>\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n    </ng-template>\n    <div class=\"nav-container grow\">\n      <ul class=\"flex flex-col\" root rxap-navigation></ul>\n    </div>\n    <mat-divider class=\"grow-0\"></mat-divider>\n    <button (click)=\"sidenav.toggleNavigationCollapse()\" [ngClass]=\"{ 'collapsed': sidenav.collapsed$ | async }\"\n            class=\"sidebar-toggle grow-0\"\n            mat-button>\n      <span class=\"sidebar-toggle-inner flex flex-row items-center gap-4\">\n        <mat-icon class=\"arrow grow-0\">double_arrow</mat-icon>\n        <span [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"label grow-0\" i18n>Collapse sidebar</span>\n      </span>\n    </button>\n    <ng-template [ngIf]=\"sidenavFooterDirective?.template ?? null\">\n      <mat-divider [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"grow-0\"></mat-divider>\n      <div [ngClass]=\"{ hidden: sidenav.collapsed$ | async }\" class=\"footer grow-0\">\n        <ng-container *ngTemplateOutlet=\"sidenavFooterDirective?.template ?? null\"></ng-container>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".rxap-container,.rxap-container .inner{height:100%}.rxap-container .inner .header{padding-bottom:12px}.rxap-container .inner .footer{padding-top:12px}.rxap-container .inner .nav-container{overflow-y:scroll;padding-top:12px}.rxap-container .inner .nav-container::-webkit-scrollbar{width:6px}.rxap-container .inner .nav-container::-webkit-scrollbar-track{border-radius:2px}.rxap-container .inner .nav-container::-webkit-scrollbar-thumb{border-radius:10px}.rxap-container .sidebar-toggle{min-height:48px}.rxap-container .sidebar-toggle .sidebar-toggle-inner{padding:0}.rxap-container .sidebar-toggle .arrow{transform:rotate(180deg)}.rxap-container .sidebar-toggle.collapsed .arrow{transform:initial}.rxap-container .sidebar-toggle.collapsed .sidebar-toggle-inner{justify-content:space-around!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: SidenavComponentService }]; }, propDecorators: { sidenavFooterDirective: [{
-                type: ContentChild,
-                args: [SidenavFooterDirective]
-            }], sidenavHeaderDirective: [{
-                type: ContentChild,
-                args: [SidenavHeaderDirective]
-            }] } });
+            args: [{ selector: 'rxap-sign-out', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<button\n  mat-icon-button\n  (click)=\"logout()\"\n>\n  <mat-icon svgIcon=\"logout\"></mat-icon>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: i2$4.RxapAuthenticationService }] });
 
-class VersionComponent {
-    constructor(version) {
-        this.version = version;
-    }
-    ngOnInit() {
-        this.modules = this.version.get();
-        this.subscription = this.version.update$.pipe(tap(() => this.modules = this.version.get())).subscribe();
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
+class ResetButtonComponent {
+    constructor(resetService) {
+        this.resetService = resetService;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VersionComponent, deps: [{ token: VersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VersionComponent, isStandalone: true, selector: "rxap-version", ngImport: i0, template: "<div class=\"version flex flex-col gap-2\">\n  <div *ngFor=\"let module of modules | keyvalue\" class=\"flex flex-col\">\n    <span class=\"name grow-0\">{{module.value.name}}</span>\n    <span class=\"semantic grow-0\">{{module.value.semantic}}</span>\n    <span class=\"hash grow-0\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ResetButtonComponent, deps: [{ token: ResetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: ResetButtonComponent, isStandalone: true, selector: "rxap-reset-button", ngImport: i0, template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon svgIcon=\"refresh\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VersionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: ResetButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxap-version', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, KeyValuePipe], template: "<div class=\"version flex flex-col gap-2\">\n  <div *ngFor=\"let module of modules | keyvalue\" class=\"flex flex-col\">\n    <span class=\"name grow-0\">{{module.value.name}}</span>\n    <span class=\"semantic grow-0\">{{module.value.semantic}}</span>\n    <span class=\"hash grow-0\">{{module.value.hash}}</span>\n  </div>\n</div>\n", styles: [".version{width:100%;font-size:9px;padding:8px}.version .name{padding-bottom:12px;font-size:10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.VersionService, decorators: [{
+            args: [{ selector: 'rxap-reset-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<button (click)=\"resetService.resetAll()\" mat-icon-button>\n  <mat-icon svgIcon=\"refresh\"></mat-icon>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.ResetService, decorators: [{
                     type: Inject,
-                    args: [VersionService]
-                }] }]; } });
-
-class ToggleWindowSidenavButtonComponent {
-    constructor() {
-        this.openWindowSidenav = false;
-        this.openWindowSidenavChange = new EventEmitter();
-    }
-    toggle() {
-        this.openWindowSidenav = !this.openWindowSidenav;
-        this.openWindowSidenavChange.emit(this.openWindowSidenav);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleWindowSidenavButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleWindowSidenavButtonComponent, isStandalone: true, selector: "rxap-toggle-window-sidenav-button", inputs: { openWindowSidenav: "openWindowSidenav" }, outputs: { openWindowSidenavChange: "openWindowSidenavChange" }, host: { classAttribute: "rxap-toggle-window-sidenav-button" }, ngImport: i0, template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon svgIcon=\"arrow-left-bold\"></mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon svgIcon=\"arrow-right-bold\"></mat-icon>\n    </ng-template>\n  </button>\n</div>\n", styles: [".toggle-button{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleWindowSidenavButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-toggle-window-sidenav-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'rxap-toggle-window-sidenav-button',
-                    }, standalone: true, imports: [MatButtonModule, NgIf, MatIconModule], template: "<div class=\"toggle-button\">\n  <button (click)=\"toggle()\" mat-icon-button>\n    <ng-template [ngIfElse]=\"hide\" [ngIf]=\"!openWindowSidenav\">\n      <mat-icon svgIcon=\"arrow-left-bold\"></mat-icon>\n    </ng-template>\n    <ng-template #hide>\n      <mat-icon svgIcon=\"arrow-right-bold\"></mat-icon>\n    </ng-template>\n  </button>\n</div>\n", styles: [".toggle-button{position:absolute;top:70px;right:0;z-index:10000;border-radius:15px 0 0 15px;border:1px solid black;background:#000}\n"] }]
-        }], propDecorators: { openWindowSidenav: [{
-                type: Input
-            }], openWindowSidenavChange: [{
-                type: Output
-            }] } });
+                    args: [ResetService]
+                }] }] });
 
-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();
-        }
+class AuthenticationServiceMock {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    signOut() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WindowContainerSidenavComponent, deps: [{ token: WindowContainerSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WindowContainerSidenavComponent, isStandalone: true, selector: "rxap-window-container-sidenav", ngImport: i0, template: "<div class=\"flex flex-col gap-4 p-2\">\n\n  <div *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\" class=\"grow-0\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AuthenticationServiceMock, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AuthenticationServiceMock }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WindowContainerSidenavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-window-container-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, PortalModule], template: "<div class=\"flex flex-col gap-4 p-2\">\n\n  <div *ngFor=\"let portalId of portals.keys(); trackBy: trackBy\" class=\"grow-0\">\n    <ng-template [cdkPortalOutlet]=\"portals.get(portalId)\"></ng-template>\n  </div>\n\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.WindowContainerSidenavService, decorators: [{
-                    type: Inject,
-                    args: [WindowContainerSidenavService]
-                }] }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AuthenticationServiceMock, decorators: [{
+            type: Injectable
+        }] });
 
 class FooterDirective {
     constructor(footerService, template, viewContainerRef) {
@@ -1107,16 +1136,16 @@ class FooterDirective {
             this.footerService.removePortal(this._portal);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterDirective, deps: [{ token: FooterService }, { token: TemplateRef }, { token: ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FooterDirective, isStandalone: true, selector: "[rxapFooter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FooterDirective, deps: [{ token: FooterService }, { token: TemplateRef }, { token: ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: FooterDirective, isStandalone: true, selector: "[rxapFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rxapFooter]',
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FooterService, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.FooterService, decorators: [{
                     type: Inject,
                     args: [FooterService]
                 }] }, { type: i0.TemplateRef, decorators: [{
@@ -1125,11 +1154,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: i0.ViewContainerRef, decorators: [{
                     type: Inject,
                     args: [ViewContainerRef]
-                }] }]; } });
+                }] }] });
+
+// region window-container-sidenav
+// endregion
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppUrlService, AppsButtonComponent, EXTRACT_USERNAME_FROM_PROFILE, FooterComponent, FooterDirective, HeaderComponent, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LayoutComponent, LayoutComponentService, NavigationComponent, NavigationItemComponent, NavigationProgressBarComponent, NavigationService, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, ReplaceRouterPathsService, ResetButtonComponent, SidenavComponent, SidenavComponentService, SidenavFooterDirective, SidenavHeaderDirective, SidenavToggleButtonComponent, SignOutComponent, ToggleWindowSidenavButtonComponent, UserProfileIconComponent, VersionComponent, WindowContainerSidenavComponent };
+export { AppUrlService, AppsButtonComponent, AuthenticationServiceMock, EXTRACT_USERNAME_FROM_PROFILE, FooterComponent, FooterDirective, HeaderComponent, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LanguageSelectorComponent, LayoutComponent, LayoutComponentService, NavigationComponent, NavigationItemComponent, NavigationProgressBarComponent, NavigationService, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, ReplaceRouterPathsPipe, ReplaceRouterPathsService, ResetButtonComponent, SettingsButtonComponent, SidenavComponent, SidenavComponentService, SidenavFooterDirective, SidenavHeaderDirective, SidenavToggleButtonComponent, SignOutComponent, ToggleWindowSidenavButtonComponent, UserProfileIconComponent, VersionComponent, WindowContainerSidenavComponent };
 //# sourceMappingURL=rxap-layout.mjs.map