@rxap/layout 18.0.3-dev.0 → 18.1.0-dev.0

package/fesm2022/rxap-layout.mjs

@@ -1,151 +1,36 @@
 import * as i0 from '@angular/core';
-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 { TemplateRef, Directive, Inject, InjectionToken, inject, signal, computed, isDevMode, Injectable, effect, INJECTOR, Optional, input, ElementRef, Renderer2, Component, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, runInInjectionContext, viewChild, contentChild, ViewContainerRef, Injector, LOCALE_ID } from '@angular/core';
+import { NgIf, NgClass, NgFor, AsyncPipe, NgStyle, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
+import { MatIconButton, MatButton, MatButtonModule, MatAnchor } from '@angular/material/button';
+import * as i3 from '@angular/material/divider';
+import { MatDividerModule, MatDivider } from '@angular/material/divider';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import { MatSidenav, MatSidenavContainer, MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
+import { Router, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet, NavigationStart, NavigationCancel } from '@angular/router';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
 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 { ObserveCurrentThemeDensity, ThemeService } from '@rxap/ngx-theme';
+import { Observable, ReplaySubject, of, from, combineLatest, Subscription, debounceTime } from 'rxjs';
+import * as i2$1 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule, CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import { coerceArray, JoinPath } from '@rxap/utilities';
+import { switchMap, catchError, map, filter, startWith, tap } from 'rxjs/operators';
 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 * as i1 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
 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 i5 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i2$5 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-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$3 from '@rxap/authorization';
+import { MatDialog } from '@angular/material/dialog';
+import { DetermineReleaseName, RXAP_ENVIRONMENT, EnvironmentComponent } from '@rxap/environment';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import * as i1$1 from '@angular/material/toolbar';
+import { MatToolbarModule, MatToolbar, MatToolbarRow } from '@angular/material/toolbar';
+import * as i1$2 from '@angular/material/menu';
+import { MatMenuModule, MatMenu, MatMenuTrigger, MatMenuItem } from '@angular/material/menu';
+import { UserSettingsThemeService, IsThemeDensity, ThemeDensity, UserProfileDataSource } from '@rxap/ngx-user';
+import { PubSubService } from '@rxap/ngx-pub-sub';
 import { ClickOnLink } from '@rxap/browser-utilities';
-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$5 from '@rxap/ngx-localize';
-
-class WindowContainerSidenavComponent {
-    constructor(service) {
-        this.service = service;
-        this.portals = new Map();
-        this.subscription = new Subscription();
-    }
-    ngOnInit() {
-        const components = this.service.getAll();
-        for (const component of components) {
-            this.add(component);
-        }
-        this.subscription.add(this.service.add$.pipe(tap(component => this.add(component))).subscribe());
-        this.subscription.add(this.service.remove$.pipe(tap(component => this.remove(component))).subscribe());
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    trackBy(index, id) {
-        return id;
-    }
-    add(component) {
-        if (this.portals.has(component.id)) {
-            throw new Error(`Component portal with id ${component.id} already exists`);
-        }
-        const portal = new ComponentPortal(component.component, component.viewContainerRef, component.injector, component.componentFactoryResolver);
-        this.portals.set(component.id, portal);
-    }
-    remove(component) {
-        if (this.portals.has(component.id)) {
-            const portal = this.portals.get(component.id);
-            this.portals.delete(component.id);
-            portal.detach();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: WindowContainerSidenavComponent, deps: [{ token: WindowContainerSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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: "18.0.1", 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: [WindowContainerSidenavService]
-                }] }] });
-
-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: "18.0.1", ngImport: i0, type: ToggleWindowSidenavButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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: "18.0.1", 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
-            }] } });
-
-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: "18.0.1", ngImport: i0, type: VersionComponent, deps: [{ token: VersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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: "18.0.1", ngImport: i0, type: VersionComponent, 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: () => [{ type: i1$1.VersionService, decorators: [{
-                    type: Inject,
-                    args: [VersionService]
-                }] }] });
 
 class SidenavFooterDirective {
     constructor(template) {
@@ -183,170 +68,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                     args: [TemplateRef]
                 }] }] });
 
-class SidenavComponentService {
-    constructor(config) {
-        this.config = config;
-        this.collapsed$ = new BehaviorSubject(true);
-        this.collapsed$.next(this.config.get('navigation.collapsed', this.collapsed$.value));
+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');
+const RXAP_EXTERNAL_APP_FILTER = new InjectionToken('rxap/layout/app-config-filter');
+const EXTRACT_USERNAME_FROM_PROFILE = new InjectionToken('extract-username-from-profile', {
+    providedIn: 'root',
+    factory: () => (profile) => (profile ? profile.username ?? profile.email ?? profile.name : null) ?? null,
+});
+const RXAP_RELEASE_INFO_MODULE = new InjectionToken('rxap/layout/release-info-module');
+const RXAP_SETTINGS_MENU_ITEM_COMPONENT = new InjectionToken('rxap/layout/settings-menu-item-component');
+const RXAP_SETTINGS_MENU_ITEM = new InjectionToken('rxap/layout/settings-menu-item');
+
+class FooterService {
+    constructor() {
+        this.components = coerceArray(inject(RXAP_FOOTER_COMPONENT, { optional: true }));
+        /**
+         * Represents an array of `Portal` objects with unknown type.
+         */
+        this.portals = signal(this.components.map(component => new ComponentPortal(component)));
+        /**
+         * Computes the count of portals.
+         *
+         * @returns {number} The count of portals.
+         */
+        this.portalCount = computed(() => this.portals().length);
     }
-    toggleNavigationCollapse() {
-        this.collapsed$.next(!this.collapsed$.value);
+    /**
+     * Adds a portal to the list of portals.
+     *
+     * @param {Portal<unknown>} portal - The portal to be added.
+     *
+     * @return {void}
+     */
+    pushPortal(portal) {
+        if (!this.portals().includes(portal)) {
+            this.portals.update(portals => [...portals, portal]);
+        }
+        else {
+            if (isDevMode()) {
+                console.warn('Can not add the same portal multiple times');
+            }
+        }
+    }
+    /**
+     * Removes a portal from the list of portals.
+     *
+     * @param {Portal<unknown>} portal - The portal to be removed.
+     * @return {void}
+     */
+    removePortal(portal) {
+        const index = this.portals().indexOf(portal);
+        if (index !== -1) {
+            this.portals.update(portals => {
+                portals.splice(index, 1);
+                return portals.slice();
+            });
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavComponentService, deps: [{ token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavComponentService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavComponentService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$2.ConfigService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterService, decorators: [{
+            type: Injectable
+        }] });
 
-class NavigationItemComponent {
-    get isActive() {
-        return this._isActive;
-    }
-    set isActive(value) {
-        this._isActive = value;
-        this.active.set(value);
-    }
-    constructor(router, sidenav, elementRef, renderer, overlay, viewContainerRef) {
-        this.router = router;
-        this.sidenav = sidenav;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.level = 0;
-        this._isActive = false;
-        this.children = null;
-        this.active = signal(false);
-        this._subscription = new Subscription();
+class HeaderService {
+    constructor() {
+        this.components = coerceArray(inject(RXAP_HEADER_COMPONENT, { optional: true }));
+        /**
+         * Represents an array of `Portal` objects with unknown type.
+         *
+         * @typedef {Array<Portal<unknown>>} SignalPortals
+         */
+        this.portals = signal(this.components.map(component => new ComponentPortal(component)));
+        /**
+         * Computes the count of portals.
+         *
+         * @returns {number} The count of portals.
+         */
+        this.portalCount = computed(() => this.portals().length);
     }
-    ngOnChanges(changes) {
-        if (changes['item']) {
-            const item = changes['item'].currentValue;
-            this.children =
-                item.children && item.children.length ? item.children : null;
+    /**
+     * Adds a portal to the list of portals.
+     *
+     * @param {Portal<unknown>} portal - The portal to be added.
+     *
+     * @return {void}
+     */
+    pushPortal(portal) {
+        if (!this.portals().includes(portal)) {
+            this.portals.update(portals => [...portals, portal]);
         }
-    }
-    ngAfterViewInit() {
-        this._subscription.add(this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), debounceTime(100), startWith(true), tap(() => {
-            let isActive = true;
-            const urlParts = this.router.url.split('/');
-            if (urlParts[0] === '') {
-                urlParts[0] = '/';
+        else {
+            if (isDevMode()) {
+                console.warn('Can not add the same portal multiple times');
             }
-            for (let i = 0; i < this.item.routerLink.length; i++) {
-                if (urlParts[i] !== this.item.routerLink[i]) {
-                    isActive = false;
-                    break;
+        }
+    }
+    /**
+     * Removes a portal from the list of portals.
+     *
+     * @param {Portal<unknown>} portal - The portal to be removed.
+     * @return {void}
+     */
+    removePortal(portal) {
+        const index = this.portals().indexOf(portal);
+        if (index !== -1) {
+            this.portals.update(portals => {
+                portals.splice(index, 1);
+                return portals.slice();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: HeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: HeaderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: HeaderService, decorators: [{
+            type: Injectable
+        }] });
+
+class LayoutService {
+    constructor() {
+        this.currentThemeDensity = toSignal(ObserveCurrentThemeDensity());
+        this.footerService = inject(FooterService);
+        this.headerService = inject(HeaderService);
+        this.config = inject(ConfigService);
+        this.mediaMatcher = inject(MediaMatcher);
+        const mobileQuery = this.mediaMatcher.matchMedia('(max-width: 959px)');
+        this.isMobile = toSignal(new Observable(subscriber => {
+            mobileQuery.addEventListener('change', (event) => {
+                subscriber.next(event.matches);
+            });
+        }), { initialValue: mobileQuery.matches });
+        const initialCollapsable = this.config.get('navigation.collapsable', true);
+        const collapsable = initialCollapsable && !this.isMobile();
+        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) && !this.isMobile());
+        const fixedInViewport = this.config.get('navigation.fixedInViewport', true);
+        if (isDevMode()) {
+            console.log({
+                initialCollapsable,
+                collapsable,
+                pinned,
+                mode,
+                opened,
+                fixedInViewport,
+            });
+        }
+        this.opened = signal(opened);
+        this.mode = signal(mode);
+        this.pinned = signal(pinned);
+        this.collapsable = signal(collapsable);
+        this.fixedInViewport = signal(fixedInViewport);
+        this.collapsed = computed(() => this.collapsable() && !this.opened() && !this.pinned());
+        this.fixedBottomGap = computed(() => {
+            const footerPortalCount = this.footerService.portalCount();
+            const currentThemeDensity = this.currentThemeDensity() ?? 0;
+            return footerPortalCount * (currentThemeDensity * 4 + 64);
+        });
+        this.fixedTopGap = computed(() => {
+            const headerPortalCount = this.headerService.portalCount();
+            const currentThemeDensity = this.currentThemeDensity() ?? 0;
+            return headerPortalCount * (currentThemeDensity * 4 + 64);
+        });
+        if (initialCollapsable) {
+            effect(() => {
+                const isMobile = this.isMobile();
+                this.collapsable.set(!isMobile);
+                if (!isMobile && !this.pinned()) {
+                    this.opened.set(false);
                 }
-            }
-            this.isActive = isActive;
-            if (isActive) {
-                this.renderer.addClass(this.elementRef.nativeElement, 'active');
+            }, { allowSignalWrites: true });
+        }
+        effect(() => {
+            if (this.pinned()) {
+                this.mode.set('side');
+                this.opened.set(true);
             }
             else {
-                this.renderer.removeClass(this.elementRef.nativeElement, 'active');
+                this.mode.set('over');
+                this.opened.set(false);
             }
-        }))
-            .subscribe());
+        }, { allowSignalWrites: true });
     }
-    ngOnDestroy() {
-        this._subscription?.unsubscribe();
+    toggleOpened() {
+        this.opened.update(opened => !opened);
     }
-    // region type save item property
-    // required to check the type of the item property in the ngFor loop
-    isNavigationDividerItem(item) {
-        return item['divider'];
+    togglePinned() {
+        this.pinned.update(pinned => !pinned);
     }
-    isNavigationItem(item) {
-        return !this.isNavigationDividerItem(item);
+    openSidenav() {
+        this.opened.set(true);
     }
-    asNavigationItem(item) {
-        if (!this.isNavigationItem(item)) {
-            throw new Error('The item is not a NavigationItem');
-        }
-        return item;
+    closeSidenav() {
+        this.opened.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", 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({
-                        display: 'block',
-                        height: '0',
-                        overflow: 'hidden',
-                    }),
-                    animate(150, style({ height: '*' })),
-                ]),
-                transition(':leave', [
-                    style({ overflow: 'hidden' }),
-                    animate(300, style({ height: '0' })),
-                    style({ display: 'none' }),
-                ]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'li[rxap-navigation-item]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
-                        trigger('sub-nav', [
-                            transition(':enter', [
-                                style({
-                                    display: 'block',
-                                    height: '0',
-                                    overflow: 'hidden',
-                                }),
-                                animate(150, style({ height: '*' })),
-                            ]),
-                            transition(':leave', [
-                                style({ overflow: 'hidden' }),
-                                animate(300, style({ height: '0' })),
-                                style({ display: 'none' }),
-                            ]),
-                        ]),
-                    ], standalone: true, imports: [
-                        RouterLinkActive,
-                        RouterLink,
-                        NgIf,
-                        MatRippleModule,
-                        MatIconModule,
-                        IconDirective,
-                        MatDividerModule,
-                        forwardRef(() => NavigationComponent),
-                        NgClass,
-                    ], template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item.routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"{\n        'pl-0': level === 0,\n        'pl-4': level === 1,\n        'pl-8': level === 2,\n        'pl-12': level === 3\n      }\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item.label }}\n    </span>\n    <mat-icon *ngIf=\"item.icon\" [rxapIcon]=\"item.icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item.children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i2.Router, decorators: [{
-                    type: Inject,
-                    args: [Router]
-                }] }, { type: SidenavComponentService, decorators: [{
-                    type: Inject,
-                    args: [SidenavComponentService]
-                }] }, { type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }, { type: i6.Overlay, decorators: [{
-                    type: Inject,
-                    args: [Overlay]
-                }] }, { type: i0.ViewContainerRef, decorators: [{
-                    type: Inject,
-                    args: [ViewContainerRef]
-                }] }], propDecorators: { level: [{
-                type: Input
-            }], routerLinkActive: [{
-                type: ViewChild,
-                args: [RouterLinkActive, { static: true }]
-            }], item: [{
-                type: Input,
-                args: [{ required: true }]
-            }], isActive: [{
-                type: HostBinding,
-                args: ['class.active']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
 function IsNavigationDividerItem(item) {
     return !!item && !!item['divider'];
@@ -358,18 +285,11 @@ 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;
+    constructor(navigation, inserts = null) {
         this.inserts = new Map();
         this.navigation$ = new ReplaySubject(1);
+        this.injector = inject(INJECTOR);
         if (typeof navigation === 'function') {
             this.navigation = navigation();
         }
@@ -420,7 +340,8 @@ class NavigationService {
         if (IsNavigationDividerItem(navigationItem) || !navigationItem.status) {
             return of(navigationItem);
         }
-        const isVisibleArray$ = navigationItem.status
+        const isVisibleArray$ = navigationItem
+            .status
             .map((statusToken) => this.injector.get(statusToken))
             .map((status) => {
             const isVisible = status.isVisible(navigationItem);
@@ -432,8 +353,7 @@ class NavigationService {
             }
         })
             .map(isVisible$ => isVisible$.pipe(catchError(e => {
-            console.error('isVisible method failed: ' +
-                e.message);
+            console.error(`isVisible method failed: ${e.message}`);
             return of(false);
         })));
         // TODO : dont wait for all status services to complete, but cancel waiting if one returns false
@@ -485,18 +405,14 @@ class NavigationService {
         }
         return navigation;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", ngImport: i0, type: NavigationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationService, deps: [{ token: RXAP_NAVIGATION_CONFIG }, { token: RXAP_NAVIGATION_CONFIG_INSERTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+            type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [RXAP_NAVIGATION_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [INJECTOR]
                 }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -504,28 +420,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                     args: [RXAP_NAVIGATION_CONFIG_INSERTS]
                 }] }] });
 
-class NavigationComponent {
-    constructor(navigationService, cdr, sidenav) {
-        this.navigationService = navigationService;
-        this.cdr = cdr;
-        this.sidenav = sidenav;
-        this.level = 0;
-        this._root = false;
-    }
-    set root(value) {
-        this._root = coerceBoolean(value);
+class NavigationItemComponent {
+    constructor() {
+        this.level = input(0);
+        this.children = null;
+        this.item = input.required();
+        this.active = signal(false);
+        this.itemClasses = computed(() => {
+            let classes = `level-${this.level() * 4}`;
+            if (this.collapsed()) {
+                classes += ' invisible';
+            }
+            return classes;
+        });
+        this.layoutService = inject(LayoutService);
+        this.collapsed = computed(() => this.layoutService.collapsed());
+        this._subscription = new Subscription();
+        this.router = inject(Router);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
     }
-    ngOnInit() {
-        if (this._root) {
-            this.items = [];
-            this.subscription = this.navigationService.config$
-                .pipe(tap((navigation) => (this.items = navigation)), tap(() => this.cdr.detectChanges()))
-                .subscribe();
+    ngOnChanges(changes) {
+        if (changes['item']) {
+            const item = changes['item'].currentValue;
+            this.children =
+                item.children && item.children.length ? item.children : null;
         }
-        this.items ??= [];
+    }
+    ngAfterViewInit() {
+        this._subscription.add(this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), debounceTime(100), startWith(true), tap(() => {
+            let isActive = true;
+            const urlParts = this.router.url.split('/');
+            if (urlParts[0] === '') {
+                urlParts[0] = '/';
+            }
+            for (let i = 0; i < this.item().routerLink.length; i++) {
+                if (urlParts[i] !== this.item().routerLink[i]) {
+                    isActive = false;
+                    break;
+                }
+            }
+            this.active.set(isActive);
+            if (isActive) {
+                this.renderer.addClass(this.elementRef.nativeElement, 'active');
+            }
+            else {
+                this.renderer.removeClass(this.elementRef.nativeElement, 'active');
+            }
+        }))
+            .subscribe());
     }
     ngOnDestroy() {
-        this.subscription?.unsubscribe();
+        this._subscription?.unsubscribe();
     }
     // region type save item property
     // required to check the type of the item property in the ngFor loop
@@ -541,350 +488,431 @@ class NavigationComponent {
         }
         return item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, 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]=\"itemClasses()\"\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.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(() => i2.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.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({
+                        display: 'block',
+                        height: '0',
+                        overflow: 'hidden',
+                    }),
+                    animate(150, style({ height: '*' })),
+                ]),
+                transition(':leave', [
+                    style({ overflow: 'hidden' }),
+                    animate(300, style({ height: '0' })),
+                    style({ display: 'none' }),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationItemComponent, 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
-            }] } });
+            args: [{ selector: 'li[rxap-navigation-item]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
+                        trigger('sub-nav', [
+                            transition(':enter', [
+                                style({
+                                    display: 'block',
+                                    height: '0',
+                                    overflow: 'hidden',
+                                }),
+                                animate(150, style({ height: '*' })),
+                            ]),
+                            transition(':leave', [
+                                style({ overflow: 'hidden' }),
+                                animate(300, style({ height: '0' })),
+                                style({ display: 'none' }),
+                            ]),
+                        ]),
+                    ], standalone: true, imports: [
+                        RouterLinkActive,
+                        RouterLink,
+                        NgIf,
+                        MatRippleModule,
+                        MatIconModule,
+                        IconDirective,
+                        MatDividerModule,
+                        forwardRef(() => NavigationComponent),
+                        NgClass,
+                    ], template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item().routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"itemClasses()\"\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" }]
+        }] });
 
-class SidenavComponent {
-    constructor(sidenav) {
-        this.sidenav = sidenav;
+class NavigationComponent {
+    constructor() {
+        this.items = input();
+        this.level = input(0);
+        this.navigationService = inject(NavigationService);
+        this.layoutService = inject(LayoutService);
+        this.collapsed = computed(() => this.layoutService.collapsed());
+        this.navigationItems = computed(() => this.items() ?? []);
+        this.root = input(false);
+        this.injector = inject(INJECTOR);
+    }
+    ngOnInit() {
+        if (this.root()) {
+            runInInjectionContext(this.injector, () => {
+                this.navigationItems = toSignal(this.navigationService.config$, { initialValue: [] });
+            });
+        }
+    }
+    // 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: "18.0.1", ngImport: i0, type: SidenavComponent, deps: [{ token: SidenavComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: NavigationComponent, isStandalone: true, selector: "ul[rxap-navigation]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "list-none dark:text-neutral-400 text-neutral-700" }, ngImport: i0, template: "<ng-template [ngForOf]=\"navigationItems()\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"!collapsed() && item.title\" class=\"pl-5 h-6\">\n      {{item.title}}\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\"\n        [level]=\"level()\"\n        class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item>\n    </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.MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => NavigationItemComponent), selector: "li[rxap-navigation-item]", inputs: ["level", "item"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'rxap-layout-sidenav',
-                    }, standalone: true, imports: [
-                        NgClass,
+            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,
-                        NgTemplateOutlet,
                         MatDividerModule,
-                        NavigationComponent,
-                        MatButtonModule,
-                        MatIconModule,
+                        forwardRef(() => NavigationItemComponent),
                         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]
-            }] } });
+                    ], template: "<ng-template [ngForOf]=\"navigationItems()\" let-item ngFor>\n  <ng-template [ngIf]=\"isNavigationDividerItem(item)\">\n    <mat-divider></mat-divider>\n    <div *ngIf=\"!collapsed() && item.title\" class=\"pl-5 h-6\">\n      {{item.title}}\n    </div>\n  </ng-template>\n  <ng-template [ngIf]=\"isNavigationItem(item)\">\n    <li [item]=\"asNavigationItem(item)\"\n        [level]=\"level()\"\n        class=\"dark:hover:text-white hover:text-black\"\n        rxap-navigation-item>\n    </li>\n  </ng-template>\n</ng-template>\n" }]
+        }] });
 
-class ReplaceRouterPathsService {
-    transform(routerLink) {
-        return of(routerLink);
+class SidenavComponent {
+    constructor() {
+        this.layoutService = inject(LayoutService);
+        this.sidenav = viewChild(MatSidenav);
+        this.sidenavMode = computed(() => this.layoutService.mode());
+        this.fixedBottomGap = computed(() => this.layoutService.fixedBottomGap());
+        this.fixedTopGap = computed(() => this.layoutService.fixedTopGap());
+        this.fixedInViewport = computed(() => this.layoutService.fixedInViewport());
+        this.pinned = computed(() => this.layoutService.pinned());
+        this.collapsed = computed(() => this.layoutService.collapsed());
+        this.collapsable = computed(() => this.layoutService.collapsable());
+        this.opened = computed(() => this.layoutService.opened());
+        this.sidenavFooterDirective = contentChild(SidenavFooterDirective);
+        this.sidenavHeaderDirective = contentChild(SidenavHeaderDirective);
+    }
+    togglePinned() {
+        this.layoutService.togglePinned();
+    }
+    async openSidenav() {
+        await this.sidenav()?.open();
+        this.layoutService.openSidenav();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReplaceRouterPathsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReplaceRouterPathsService, providedIn: 'root' }); }
+    async closeSidenav() {
+        await this.sidenav()?.close();
+        this.layoutService.closeSidenav();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: SidenavComponent, isStandalone: true, selector: "rxap-sidenav", queries: [{ propertyName: "sidenavFooterDirective", first: true, predicate: SidenavFooterDirective, descendants: true, isSignal: true }, { propertyName: "sidenavHeaderDirective", first: true, predicate: SidenavHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container [ngStyle]=\"{\n    'padding-top.px': fixedTopGap(),\n    'padding-bottom.px': fixedBottomGap(),\n  }\" class=\"h-full\">\n  <mat-sidenav\n    [fixedBottomGap]=\"fixedBottomGap()\"\n    [fixedInViewport]=\"fixedInViewport()\"\n    [fixedTopGap]=\"fixedTopGap()\"\n    [mode]=\"sidenavMode()\"\n    [ngClass]=\"{ collapsable: collapsable() }\"\n    [opened]=\"opened()\"\n  >\n    <div (mouseleave)=\"collapsable() && !pinned() && closeSidenav()\"\n         class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n      <div (click)=\"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      @if (sidenavHeaderDirective()?.template; as template) {\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"header grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n      }\n\n      <ul\n        (mouseenter)=\"collapsable() && !pinned() && openSidenav()\"\n        class=\"grow self-stretch\"\n        [root]=\"true\"\n        rxap-navigation\n      >\n      </ul>\n\n      @if (sidenavFooterDirective()?.template; as template) {\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"footer grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host .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 .collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}.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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReplaceRouterPathsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatIcon,
+                        MatIconButton,
+                        MatSidenav,
+                        MatSidenavContainer,
+                        MatSidenavContent,
+                        NavigationComponent,
+                        NgIf,
+                        RouterOutlet,
+                        NgClass,
+                        NgStyle,
+                        MatDivider,
+                        NgTemplateOutlet,
+                        MatButton,
+                    ], template: "<mat-sidenav-container [ngStyle]=\"{\n    'padding-top.px': fixedTopGap(),\n    'padding-bottom.px': fixedBottomGap(),\n  }\" class=\"h-full\">\n  <mat-sidenav\n    [fixedBottomGap]=\"fixedBottomGap()\"\n    [fixedInViewport]=\"fixedInViewport()\"\n    [fixedTopGap]=\"fixedTopGap()\"\n    [mode]=\"sidenavMode()\"\n    [ngClass]=\"{ collapsable: collapsable() }\"\n    [opened]=\"opened()\"\n  >\n    <div (mouseleave)=\"collapsable() && !pinned() && closeSidenav()\"\n         class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n      <div (click)=\"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      @if (sidenavHeaderDirective()?.template; as template) {\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"header grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n      }\n\n      <ul\n        (mouseenter)=\"collapsable() && !pinned() && openSidenav()\"\n        class=\"grow self-stretch\"\n        [root]=\"true\"\n        rxap-navigation\n      >\n      </ul>\n\n      @if (sidenavFooterDirective()?.template; as template) {\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"footer grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host .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 .collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}.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"] }]
         }] });
 
-class ReplaceRouterPathsPipe {
-    constructor(rrp) {
-        this.rrp = rrp;
+class ReleaseInfoComponent {
+    constructor() {
+        this.modules = coerceArray(inject(RXAP_RELEASE_INFO_MODULE, { optional: true }));
+        this.release = DetermineReleaseName(inject(RXAP_ENVIRONMENT));
+        this.dialog = inject(MatDialog);
     }
-    transform(routerLink) {
-        return this.rrp.transform(routerLink);
+    openEnvironmentInfo() {
+        this.dialog.open(EnvironmentComponent, {
+            closeOnNavigation: true,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReplaceRouterPathsPipe, deps: [{ token: ReplaceRouterPathsService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ReplaceRouterPathsPipe, isStandalone: true, name: "replaceRouterPaths" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReleaseInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: ReleaseInfoComponent, isStandalone: true, selector: "rxap-release-info", ngImport: i0, template: "<div class=\"flex flex-col gap-2 w-full justify-center\">\n  <button (click)=\"openEnvironmentInfo()\" mat-button>{{ release }}</button>\n  @if (modules.length) {\n    <table class=\"table-auto border-separate border-spacing-2 bg-white dark:bg-slate-800 text-sm shadow-sm\">\n      <thead class=\"bg-slate-50 dark:bg-slate-700\">\n      <th class=\"text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2\">Module</th>\n      <th class=\"text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2\">Version</th>\n      <th class=\"text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2\">Hash</th>\n      </thead>\n      <tbody>\n        @for (module of modules; track module.name) {\n          <tr>\n            <th class=\"text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 py-2 px-4\">{{ module.name }}</th>\n            <td class=\"text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-2\">{{ module.version }}</td>\n            <td class=\"text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-2\">{{ module.hash }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReplaceRouterPathsPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'replaceRouterPaths',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: ReplaceRouterPathsService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ReleaseInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-release-info', standalone: true, imports: [
+                        MatButton,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2 w-full justify-center\">\n  <button (click)=\"openEnvironmentInfo()\" mat-button>{{ release }}</button>\n  @if (modules.length) {\n    <table class=\"table-auto border-separate border-spacing-2 bg-white dark:bg-slate-800 text-sm shadow-sm\">\n      <thead class=\"bg-slate-50 dark:bg-slate-700\">\n      <th class=\"text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2\">Module</th>\n      <th class=\"text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2\">Version</th>\n      <th class=\"text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2\">Hash</th>\n      </thead>\n      <tbody>\n        @for (module of modules; track module.name) {\n          <tr>\n            <th class=\"text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 py-2 px-4\">{{ module.name }}</th>\n            <td class=\"text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-2\">{{ module.version }}</td>\n            <td class=\"text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-2\">{{ module.hash }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n" }]
+        }] });
 
-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());
+class NavigationProgressBarComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.navigating = toSignal(this.router.events.pipe(filter(event => event instanceof NavigationStart ||
+            event instanceof NavigationEnd ||
+            event instanceof NavigationCancel), map(event => event instanceof NavigationStart)), { initialValue: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", ngImport: i0, type: LayoutComponentService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: NavigationProgressBarComponent, isStandalone: true, selector: "rxap-navigation-progress-bar", ngImport: i0, template: "@if (navigating()) {\n<mat-progress-bar color=\"accent\" mode=\"indeterminate\"></mat-progress-bar>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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 }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-navigation-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatProgressBar,
+                    ], template: "@if (navigating()) {\n<mat-progress-bar color=\"accent\" mode=\"indeterminate\"></mat-progress-bar>\n}\n" }]
+        }] });
 
 class FooterComponent {
-    constructor(footerService) {
-        this.footerService = footerService;
+    constructor() {
+        this.footerService = inject(FooterService);
+        this.portals = computed(() => this.footerService.portals());
+        this.hasPortals = computed(() => this.portals().length > 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterComponent, deps: [{ token: i1$1.FooterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: FooterComponent, isStandalone: true, selector: "rxap-footer", ngImport: i0, template: "@if (hasPortals()) {\n  <mat-toolbar class=\"mat-elevation-z1\">\n    @for (portal of portals(); track portal) {\n      <mat-toolbar-row>\n        <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n      </mat-toolbar-row>\n    }\n  </mat-toolbar>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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 }] });
+            args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatToolbarModule, PortalModule], template: "@if (hasPortals()) {\n  <mat-toolbar class=\"mat-elevation-z1\">\n    @for (portal of portals(); track portal) {\n      <mat-toolbar-row>\n        <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n      </mat-toolbar-row>\n    }\n  </mat-toolbar>\n}\n" }]
+        }] });
 
-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', []);
+class HeaderComponent {
+    constructor() {
+        this.color = input();
+        this.headerService = inject(HeaderService);
+        this.portals = computed(() => this.headerService.portals());
+        this.hasPortals = computed(() => this.portals().length > 0);
     }
-    getApp(appId) {
-        return this._apps.find(app => app.id === appId) ?? null;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: HeaderComponent, isStandalone: true, selector: "rxap-header", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasPortals()) {\n  <mat-toolbar [color]=\"color()\" class=\"mat-elevation-z1\">\n    @for (portal of portals(); track portal) {\n      <mat-toolbar-row>\n        <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n      </mat-toolbar-row>\n    }\n  </mat-toolbar>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatToolbar,
+                        MatToolbarRow,
+                        CdkPortalOutlet,
+                    ], template: "@if (hasPortals()) {\n  <mat-toolbar [color]=\"color()\" class=\"mat-elevation-z1\">\n    @for (portal of portals(); track portal) {\n      <mat-toolbar-row>\n        <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n      </mat-toolbar-row>\n    }\n  </mat-toolbar>\n}\n" }]
+        }] });
+
+class BaseLayoutComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BaseLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: BaseLayoutComponent, isStandalone: true, selector: "rxap-base-layout", ngImport: i0, template: "<div class=\"flex flex-col h-screen justify-between\">\n  <rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n  <ng-content></ng-content>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeaderComponent, selector: "rxap-header", inputs: ["color"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: BaseLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-base-layout', standalone: true, imports: [
+                        HeaderComponent,
+                        FooterComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col h-screen justify-between\">\n  <rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n  <ng-content></ng-content>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n" }]
+        }] });
+
+class MinimalLayoutComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MinimalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: MinimalLayoutComponent, isStandalone: true, selector: "rxap-minimal-layout", ngImport: i0, template: "<rxap-base-layout>\n  <rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n  <router-outlet></router-outlet>\n</rxap-base-layout>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: BaseLayoutComponent, selector: "rxap-base-layout" }, { kind: "component", type: NavigationProgressBarComponent, selector: "rxap-navigation-progress-bar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MinimalLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-minimal-layout', standalone: true, imports: [RouterOutlet, BaseLayoutComponent, NavigationProgressBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<rxap-base-layout>\n  <rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n  <router-outlet></router-outlet>\n</rxap-base-layout>\n" }]
+        }] });
+
+class LogoService {
+    constructor() {
+        this.config = inject(ConfigService);
+        this.logo = signal(inject(RXAP_LOGO_CONFIG, { optional: true }) ??
+            this.config.get('logo', {
+                src: 'logo.png',
+                width: 192,
+            }));
+        this.src = computed(() => this.logo().src);
+        this.width = computed(() => this.logo().width);
+        this.height = computed(() => this.logo().height);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LogoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LogoService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LogoService, decorators: [{
+            type: Injectable
+        }] });
+
+class LayoutComponent {
+    constructor() {
+        this.userSettingsThemeService = inject(UserSettingsThemeService);
+        this.themeService = inject(ThemeService);
+        this.logoService = inject(LogoService);
+        this.logoSrc = computed(() => this.logoService.src());
+        this.logoWidth = computed(() => this.logoService.width());
+        this.logoHeight = computed(() => this.logoService.height());
     }
-    getAppUrl(appId, path, infix = this.getPathPrefix()) {
-        const app = this.getApp(appId);
-        if (app) {
-            return JoinPath(app.href, infix, path);
-        }
-        return null;
+    ngOnDestroy() {
+        this.userSettingsThemeService.stopSync();
     }
-    getAppUrlOrThrow(appId, path) {
-        const url = this.getAppUrl(appId, path);
-        if (url) {
-            return url;
-        }
-        throw new Error(`Could not find app with id "${appId}"`);
+    ngOnInit() {
+        this.userSettingsThemeService.startSync().then(() => {
+            this.userSettingsThemeService.get().then(theme => {
+                if (theme.preset && theme.preset !== 'default') {
+                    this.themeService.setTheme(theme.preset, true);
+                }
+                if (theme.density && IsThemeDensity(theme.density) && theme.density !== ThemeDensity.Normal) {
+                    this.themeService.setDensity(theme.density, true);
+                }
+                if (theme.typography && theme.typography !== 'default') {
+                    this.themeService.setTypography(theme.typography, true);
+                }
+            });
+        });
     }
-    navigate(appId, path) {
-        const url = this.getAppUrl(appId, path);
-        if (url) {
-            ClickOnLink(url);
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LayoutComponent, isStandalone: true, selector: "rxap-layout", ngImport: i0, template: "<rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n<rxap-sidenav>\n  <router-outlet></router-outlet>\n  <ng-template rxapSidenavFooter>\n    <img\n      [src]=\"logoSrc()\"\n      [routerLink]=\"['/']\"\n      [width]=\"logoWidth()\"\n      [height]=\"logoHeight()\"\n      alt=\"logo\"\n      class=\"grow-0 mx-16 cursor-pointer\"\n    />\n    <div class=\"grow-0 px-16 mt-4\">\n      <rxap-release-info></rxap-release-info>\n    </div>\n  </ng-template>\n</rxap-sidenav>\n<rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n", styles: [":host .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 .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: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidenavComponent, selector: "rxap-sidenav" }, { kind: "component", type: ReleaseInfoComponent, selector: "rxap-release-info" }, { kind: "directive", type: SidenavFooterDirective, selector: "[rxapSidenavFooter]" }, { kind: "component", type: NavigationProgressBarComponent, selector: "rxap-navigation-progress-bar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-layout', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        HeaderComponent,
+                        MatSidenavModule,
+                        AsyncPipe,
+                        MatIconModule,
+                        MatButtonModule,
+                        RouterLink,
+                        NgIf,
+                        FooterComponent,
+                        MatMenuModule,
+                        NgOptimizedImage,
+                        NavigationComponent,
+                        RouterOutlet,
+                        NgStyle,
+                        NgClass,
+                        SidenavComponent,
+                        ReleaseInfoComponent,
+                        SidenavFooterDirective,
+                        NavigationProgressBarComponent,
+                    ], template: "<rxap-header class=\"z-10 w-full fixed top-0\"></rxap-header>\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n<rxap-sidenav>\n  <router-outlet></router-outlet>\n  <ng-template rxapSidenavFooter>\n    <img\n      [src]=\"logoSrc()\"\n      [routerLink]=\"['/']\"\n      [width]=\"logoWidth()\"\n      [height]=\"logoHeight()\"\n      alt=\"logo\"\n      class=\"grow-0 mx-16 cursor-pointer\"\n    />\n    <div class=\"grow-0 px-16 mt-4\">\n      <rxap-release-info></rxap-release-info>\n    </div>\n  </ng-template>\n</rxap-sidenav>\n<rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n", styles: [":host .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 .collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"] }]
+        }] });
+
+class HeaderDirective {
+    constructor() {
+        this.headerService = inject(HeaderService);
+        this.template = inject(TemplateRef);
+        this.viewContainerRef = inject(ViewContainerRef);
     }
-    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;
+    ngOnInit() {
+        this._portal = new TemplatePortal(this.template, this.viewContainerRef);
+        this.headerService.pushPortal(this._portal);
     }
-    getPathPrefix() {
-        if (this.environment.production && this.localeId) {
-            return this.localeId.replace(/-.+$/, '');
+    ngOnDestroy() {
+        if (this._portal) {
+            this.headerService.removePortal(this._portal);
         }
-        return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", ngImport: i0, type: AppUrlService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: HeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: HeaderDirective, isStandalone: true, selector: "[rxapHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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]
-                }] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: HeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rxapHeader]',
+                    standalone: true,
+                }]
+        }] });
 
-class AppsButtonComponent {
-    constructor(grid, appUrlService, authenticationService) {
-        this.appUrlService = appUrlService;
-        this.authenticationService = authenticationService;
-        this.isOpen = false;
-        this.appList = signal([]);
+class FooterDirective {
+    constructor() {
+        this.footerService = inject(FooterService);
+        this.template = inject(TemplateRef);
+        this.viewContainerRef = inject(ViewContainerRef);
     }
     ngOnInit() {
-        this._subscription = this.authenticationService.isAuthenticated$.pipe(filter(Boolean), switchMap$1(() => this.appUrlService.getAppList()), tap((apps) => this.appList.set(apps))).subscribe();
+        this._portal = new TemplatePortal(this.template, this.viewContainerRef);
+        this.footerService.pushPortal(this._portal);
     }
     ngOnDestroy() {
-        this._subscription?.unsubscribe();
+        if (this._portal) {
+            this.footerService.removePortal(this._portal);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", 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", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: FooterDirective, isStandalone: true, selector: "[rxapFooter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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 }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rxapFooter]',
+                    standalone: true,
+                }]
+        }] });
 
-class NavigationProgressBarComponent {
-    constructor(router) {
-        this.router = router;
-        this.navigating$ = this.router.events.pipe(filter(event => event instanceof NavigationStart ||
-            event instanceof NavigationEnd ||
-            event instanceof NavigationCancel), map(event => event instanceof NavigationStart));
+class UserProfileIconComponent {
+    constructor() {
+        this.extractUsernameFromProfile = inject(EXTRACT_USERNAME_FROM_PROFILE);
+        this.pubSubService = inject(PubSubService);
+        this.profile = input.required();
+        this.username = computed(() => {
+            const profile = this.profile();
+            if (profile) {
+                return this.extractUsernameFromProfile(profile);
+            }
+            return null;
+        });
+    }
+    logout() {
+        this.pubSubService.publish('authentication.logout');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationProgressBarComponent, deps: [{ token: Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UserProfileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: UserProfileIconComponent, isStandalone: true, selector: "rxap-user-profile-icon", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\"\n        class=\"rounded-full cursor-pointer outline-none overflow-hidden h-8 w-8 bg-center bg-no-repeat bg-cover flex flex-row justify-center items-center\">\n  <mat-icon class=\"h-8 w-8 text-[32px]\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  @if (this.username(); as username) {\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  }\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: [""], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.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: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NavigationProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UserProfileIconComponent, 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]
-                }] }] });
+            args: [{ selector: 'rxap-user-profile-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatMenuModule,
+                        MatIconModule,
+                    ], template: "<button [matMenuTriggerFor]=\"menu\"\n        class=\"rounded-full cursor-pointer outline-none overflow-hidden h-8 w-8 bg-center bg-no-repeat bg-cover flex flex-row justify-center items-center\">\n  <mat-icon class=\"h-8 w-8 text-[32px]\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  @if (this.username(); as username) {\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  }\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" }]
+        }] });
 
-class LanguageSelectorComponent {
-    constructor(language) {
-        this.language = language;
+class SidenavToggleButtonComponent {
+    constructor() {
+        this.layoutComponentService = inject(LayoutService);
+        this.opened = computed(() => this.layoutComponentService.opened());
+    }
+    toggle() {
+        this.layoutComponentService.toggleOpened();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: i1$5.LanguageSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: SidenavToggleButtonComponent, isStandalone: true, selector: "rxap-sidenav-toggle-button", ngImport: i0, template: "<button (click)=\"toggle()\" mat-icon-button>\n  @if (opened()) {\n    <mat-icon>menu_open</mat-icon>\n  } @else {\n    <mat-icon>menu</mat-icon>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavToggleButtonComponent, 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 }] });
+            args: [{ selector: 'rxap-sidenav-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatIcon,
+                        MatIconButton,
+                    ], template: "<button (click)=\"toggle()\" mat-icon-button>\n  @if (opened()) {\n    <mat-icon>menu_open</mat-icon>\n  } @else {\n    <mat-icon>menu</mat-icon>\n  }\n</button>\n" }]
+        }] });
 
 class SettingsButtonComponent {
-    constructor(theme, route, injector, changelogService) {
-        this.theme = theme;
-        this.route = route;
-        this.injector = injector;
-        this.changelogService = changelogService;
+    constructor() {
         this.isDevMode = isDevMode();
-        this.items = signal([]);
+        this.theme = inject(ThemeService);
+        this.injector = inject(Injector);
+        this.customItemComponents = signal(coerceArray(inject(RXAP_SETTINGS_MENU_ITEM_COMPONENT, { optional: true }))
+            .map(item => new ComponentPortal(item, null, this.injector)));
+        this.customItems = signal(coerceArray(inject(RXAP_SETTINGS_MENU_ITEM, { optional: true })));
         this.savePreviewDensityValue = false;
         this.currentDensityValue = null;
         this.savePreviewTypographyValue = false;
         this.currentTypographyValue = null;
+        this.availableTypographies = this.theme.getAvailableTypographies();
         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();
+        this.currentThemeValue = null;
     }
     previewDensity(density) {
         this.theme.applyDensity(density);
@@ -913,255 +941,239 @@ class SettingsButtonComponent {
     setTheme(theme) {
         this.theme.setTheme(theme);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", 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"] }] }); }
+    clickItem(item) {
+        runInInjectionContext(this.injector, () => item.action());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SettingsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", 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    @if (theme.darkMode()) {\n      <mat-icon svgIcon=\"brightness-2\"></mat-icon>\n    } @else {\n      <mat-icon svgIcon=\"brightness-5\"></mat-icon>\n    }\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  @for (item of customItems(); track item.label) {\n    <button (click)=\"clickItem(item)\" mat-menu-item>\n      <mat-icon [rxapIcon]=\"item.icon\"></mat-icon>\n      <span>{{ item.label }}</span>\n    </button>\n  }\n  @for (item of customItemComponents(); track item) {\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  }\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  @if (availableTypographies?.length) {\n    <button [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n      <mat-icon svgIcon=\"format-font\"></mat-icon>\n      <span i18n>Font</span>\n    </button>\n  }\n  @if (availableThemes?.length) {\n    <button [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n      <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n      <span i18n>Preset</span>\n    </button>\n  }\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  @for (typographyName of availableTypographies ?? []; track typographyName) {\n    <button (click)=\"setTypography(typographyName)\"\n            (mouseenter)=\"previewTypography(typographyName)\"\n            (mouseleave)=\"restoreTypography()\"\n            mat-menu-item>\n      {{ typographyName }}\n    </button>\n  }\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  @for (themeName of availableThemes ?? []; track themeName) {\n    <button (click)=\"setTheme(themeName)\"\n            (mouseenter)=\"previewTheme(themeName)\"\n            (mouseleave)=\"restoreTheme()\"\n            mat-menu-item>\n      {{ themeName }}\n    </button>\n  }\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: IconDirective, selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", 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 }] });
+            args: [{ selector: 'rxap-settings-button', standalone: true, imports: [
+                        MatIconButton,
+                        MatIcon,
+                        MatMenu,
+                        MatMenuTrigger,
+                        MatMenuItem,
+                        CdkPortalOutlet,
+                        IconDirective,
+                    ], 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    @if (theme.darkMode()) {\n      <mat-icon svgIcon=\"brightness-2\"></mat-icon>\n    } @else {\n      <mat-icon svgIcon=\"brightness-5\"></mat-icon>\n    }\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  @for (item of customItems(); track item.label) {\n    <button (click)=\"clickItem(item)\" mat-menu-item>\n      <mat-icon [rxapIcon]=\"item.icon\"></mat-icon>\n      <span>{{ item.label }}</span>\n    </button>\n  }\n  @for (item of customItemComponents(); track item) {\n    <ng-template [cdkPortalOutlet]=\"item\"></ng-template>\n  }\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  @if (availableTypographies?.length) {\n    <button [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n      <mat-icon svgIcon=\"format-font\"></mat-icon>\n      <span i18n>Font</span>\n    </button>\n  }\n  @if (availableThemes?.length) {\n    <button [matMenuTriggerFor]=\"themePresetMenu\" mat-menu-item>\n      <mat-icon svgIcon=\"shape-outline\"></mat-icon>\n      <span i18n>Preset</span>\n    </button>\n  }\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  @for (typographyName of availableTypographies ?? []; track typographyName) {\n    <button (click)=\"setTypography(typographyName)\"\n            (mouseenter)=\"previewTypography(typographyName)\"\n            (mouseleave)=\"restoreTypography()\"\n            mat-menu-item>\n      {{ typographyName }}\n    </button>\n  }\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  @for (themeName of availableThemes ?? []; track themeName) {\n    <button (click)=\"setTheme(themeName)\"\n            (mouseenter)=\"previewTheme(themeName)\"\n            (mouseleave)=\"restoreTheme()\"\n            mat-menu-item>\n      {{ themeName }}\n    </button>\n  }\n</mat-menu>\n" }]
+        }] });
 
-class SidenavToggleButtonComponent {
-    constructor(layoutComponentService) {
-        this.layoutComponentService = layoutComponentService;
-        this.opened = layoutComponentService.opened;
+class ExternalAppsService {
+    constructor() {
+        this.appFilterList = coerceArray(inject(RXAP_EXTERNAL_APP_FILTER, { optional: true }));
+        this.config = inject(ConfigService);
+        this.localeId = inject(LOCALE_ID);
+        this.environment = inject(RXAP_ENVIRONMENT);
+        this.apps = this.config.get('navigation.apps', []);
+        /**
+         * The list of active apps that is processed by the getAppList method
+         */
+        this.activeAppList = signal([]);
+    }
+    hasApp(appId) {
+        return this.apps.some(app => app.id === appId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SidenavToggleButtonComponent, deps: [{ token: LayoutComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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: "18.0.1", 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 });
-    }
-    async logout() {
-        await this.authenticationService.signOut();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", 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: "18.0.1", 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: () => [{ type: i1$7.UserProfileDataSource }, { type: i2$4.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: "18.0.1", 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: "18.0.1", 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: "18.0.1", 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: [HeaderService]
-                }] }, { type: LayoutComponentService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [RXAP_HEADER_COMPONENT]
-                }] }], propDecorators: { color: [{
-                type: Input
-            }] } });
-
-class LayoutComponent {
-    constructor(layoutComponentService, environment, iconLoaderService) {
-        this.layoutComponentService = layoutComponentService;
-        this.environment = environment;
-        this.userSettingsThemeService = inject(UserSettingsThemeService);
-        this.themeService = inject(ThemeService);
-        iconLoaderService.load();
-        this.fixedBottomGap = layoutComponentService.fixedBottomGap;
-        this.fixedTopGap = layoutComponentService.fixedTopGap;
-        this.pinned = layoutComponentService.pinned;
-        this.collapsable = layoutComponentService.collapsable;
-        this.opened = layoutComponentService.opened;
-        this.sidenavMode = layoutComponentService.mode;
-        this.logoSrc = this.layoutComponentService.logo.src ?? 'https://via.placeholder.com/256x128px';
-        this.logoWidth = this.layoutComponentService.logo.width ?? 256;
-        this.release = DetermineReleaseName(this.environment);
+    getApp(appId) {
+        if (!this.hasApp(appId)) {
+            return null;
+        }
+        const app = this.apps.find(app => app.id === appId);
+        if (!app) {
+            throw new Error(`FATAL: App with id "${appId}" not found!`);
+        }
+        return structuredClone(app);
     }
-    ngOnDestroy() {
-        this.userSettingsThemeService.stopSync();
+    getAppUrl(appId, path, infix = this.getPathPrefix()) {
+        const app = this.getApp(appId);
+        if (!app || !app.href) {
+            return null;
+        }
+        return JoinPath(app.href, infix, path);
     }
-    ngOnInit() {
-        this.userSettingsThemeService.startSync();
-        this.userSettingsThemeService.get().then(theme => {
-            if (theme.preset && theme.preset !== 'default') {
-                this.themeService.setTheme(theme.preset, true);
-            }
-            if (theme.density && IsThemeDensity(theme.density) && theme.density !== ThemeDensity.Normal) {
-                this.themeService.setDensity(theme.density, true);
-            }
-            if (theme.typography && theme.typography !== 'default') {
-                this.themeService.setTypography(theme.typography, true);
+    getAppRouterLink(appId, path) {
+        const app = this.getApp(appId);
+        if (!app || !app.routerLink) {
+            return null;
+        }
+        return [...app.routerLink, path];
+    }
+    getAppUrlOrThrow(appId, path) {
+        const url = this.getAppUrl(appId, path);
+        if (url) {
+            return url;
+        }
+        throw new Error(`Could not find url for app with id "${appId}"`);
+    }
+    getAppRouterLinkOrThrow(appId, path) {
+        const routerLink = this.getAppRouterLink(appId, path);
+        if (routerLink) {
+            return routerLink;
+        }
+        throw new Error(`Could not find router link for app with id "${appId}"`);
+    }
+    navigate(appId, path) {
+        const url = this.getAppUrl(appId, path);
+        if (url) {
+            ClickOnLink(url);
+        }
+    }
+    async getAppList() {
+        let appList = this
+            .apps
+            .filter(app => !app.hidden)
+            .map(app => structuredClone(app));
+        appList.forEach(app => {
+            if (app.href) {
+                app.href = JoinPath(app.href, this.getPathPrefix());
             }
         });
+        for (const appFilter of this.appFilterList) {
+            appList = await appFilter.call(structuredClone(appList));
+        }
+        appList = structuredClone(appList);
+        this.activeAppList.set(appList);
+        return appList;
+    }
+    getPathPrefix() {
+        if (this.environment.production && this.localeId) {
+            return this.localeId.replace(/-.+$/, '');
+        }
+        return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ExternalAppsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ExternalAppsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rxap-layout', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        HeaderComponent,
-                        MatSidenavModule,
-                        AsyncPipe,
-                        MatIconModule,
-                        MatButtonModule,
-                        RouterLink,
-                        NgIf,
-                        FooterComponent,
-                        MatMenuModule,
-                        NgOptimizedImage,
-                        NavigationComponent,
-                        RouterOutlet,
-                        StatusIndicatorComponent,
-                        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: () => [{ type: LayoutComponentService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RXAP_ENVIRONMENT]
-                }] }, { type: i2$6.IconLoaderService }], propDecorators: { sidenav: [{
-                type: ViewChild,
-                args: [MatSidenav, { static: true }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ExternalAppsService, decorators: [{
+            type: Injectable
+        }] });
 
-class SignOutComponent {
-    constructor(authenticationService) {
-        this.authenticationService = authenticationService;
+class AppsButtonComponent {
+    constructor() {
+        /**
+         * The signal that indicates if the app list is open
+         */
+        this.isOpen = signal(false);
+        this.externalAppsService = inject(ExternalAppsService);
+        this.appList = computed(() => this.externalAppsService.activeAppList());
+        this.hasApps = computed(() => this.appList().length > 0);
     }
-    async logout() {
-        await this.authenticationService.signOut();
+    toggle() {
+        this.isOpen.update(isOpen => !isOpen);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SignOutComponent, deps: [{ token: i2$4.RxapAuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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: "18.0.1", 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: () => [{ type: i2$4.RxapAuthenticationService }] });
-
-class ResetButtonComponent {
-    constructor(resetService) {
-        this.resetService = resetService;
+    ngOnInit() {
+        this.externalAppsService.getAppList();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ResetButtonComponent, deps: [{ token: ResetService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AppsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: AppsButtonComponent, isStandalone: true, selector: "rxap-apps-button", ngImport: i0, template: "@if (hasApps()) {\n  <div class=\"flex flex-row items-center gap-8\">\n\n    @if (isOpen()) {\n      <div class=\"flex flex-row items-center gap-6 h-10\">\n\n        @for (app of appList(); track app.label) {\n          @if (app.href) {\n            <a [href]=\"app.href\" [target]=\"app.target ?? '_self'\" mat-stroked-button>\n              <span class=\"flex flex-row items-center gap-4\">\n                @if (app.image) {\n                  <img [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n                }\n                <span class=\"label grow-0\">{{ app.label }}</span>\n              </span>\n            </a>\n          } @else if (app.routerLink) {\n            <a mat-stroked-button [routerLink]=\"app.routerLink\">\n              <span class=\"flex flex-row items-center gap-4\">\n                @if (app.image) {\n                  <img [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n                }\n                <span class=\"label grow-0\">{{ app.label }}</span>\n              </span>\n            </a>\n          } @else {\n            <button mat-stroked-button [disabled]=\"true\">\n              <span class=\"flex flex-row items-center gap-4\">\n                @if (app.image) {\n                  <img [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n                }\n                <span class=\"label grow-0\">{{ app.label }}</span>\n              </span>\n            </button>\n          }\n        }\n\n      </div>\n    }\n\n    <button (click)=\"toggle()\" mat-icon-button>\n      <mat-icon svgIcon=\"apps\"></mat-icon>\n    </button>\n\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ResetButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AppsButtonComponent, 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: () => [{ type: i1$1.ResetService, decorators: [{
-                    type: Inject,
-                    args: [ResetService]
-                }] }] });
+            args: [{ selector: 'rxap-apps-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgOptimizedImage,
+                        MatButton,
+                        RouterLink,
+                        MatAnchor,
+                        MatIconButton,
+                        MatIcon,
+                    ], template: "@if (hasApps()) {\n  <div class=\"flex flex-row items-center gap-8\">\n\n    @if (isOpen()) {\n      <div class=\"flex flex-row items-center gap-6 h-10\">\n\n        @for (app of appList(); track app.label) {\n          @if (app.href) {\n            <a [href]=\"app.href\" [target]=\"app.target ?? '_self'\" mat-stroked-button>\n              <span class=\"flex flex-row items-center gap-4\">\n                @if (app.image) {\n                  <img [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n                }\n                <span class=\"label grow-0\">{{ app.label }}</span>\n              </span>\n            </a>\n          } @else if (app.routerLink) {\n            <a mat-stroked-button [routerLink]=\"app.routerLink\">\n              <span class=\"flex flex-row items-center gap-4\">\n                @if (app.image) {\n                  <img [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n                }\n                <span class=\"label grow-0\">{{ app.label }}</span>\n              </span>\n            </a>\n          } @else {\n            <button mat-stroked-button [disabled]=\"true\">\n              <span class=\"flex flex-row items-center gap-4\">\n                @if (app.image) {\n                  <img [alt]=\"app.label\" [ngSrc]=\"app.image\" height=\"40\" width=\"40\">\n                }\n                <span class=\"label grow-0\">{{ app.label }}</span>\n              </span>\n            </button>\n          }\n        }\n\n      </div>\n    }\n\n    <button (click)=\"toggle()\" mat-icon-button>\n      <mat-icon svgIcon=\"apps\"></mat-icon>\n    </button>\n\n  </div>\n}\n" }]
+        }] });
 
-class AuthenticationServiceMock {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    signOut() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthenticationServiceMock, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthenticationServiceMock }); }
+class DefaultHeaderComponent {
+    constructor() {
+        this.layoutComponentService = inject(LayoutService);
+        this.collapsable = computed(() => this.layoutComponentService.collapsable());
+        this.opened = computed(() => this.layoutComponentService.opened());
+        this.userProfileService = inject(UserProfileDataSource);
+        this.profile = toSignal(this.userProfileService.connect('user-profile'), { initialValue: null });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DefaultHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: DefaultHeaderComponent, isStandalone: true, selector: "rxap-default-header", host: { classAttribute: "grow" }, ngImport: i0, template: "<div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n  @if (!collapsable()) {\n    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>\n  }\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  @if (this.profile(); as profile) {\n    <rxap-user-profile-icon [profile]=\"profile\" class=\"grow-0\"></rxap-user-profile-icon>\n  }\n</div>\n", styles: [""], dependencies: [{ 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" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon", inputs: ["profile"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: AuthenticationServiceMock, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DefaultHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rxap-default-header', standalone: true, imports: [
+                        AppsButtonComponent,
+                        SettingsButtonComponent,
+                        SidenavToggleButtonComponent,
+                        UserProfileIconComponent,
+                    ], host: {
+                        'class': 'grow',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n  @if (!collapsable()) {\n    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>\n  }\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  @if (this.profile(); as profile) {\n    <rxap-user-profile-icon [profile]=\"profile\" class=\"grow-0\"></rxap-user-profile-icon>\n  }\n</div>\n" }]
         }] });
 
-class FooterDirective {
-    constructor(footerService, template, viewContainerRef) {
-        this.footerService = footerService;
-        this.template = template;
-        this.viewContainerRef = viewContainerRef;
-    }
-    ngOnInit() {
-        this._portal = new TemplatePortal(this.template, this.viewContainerRef);
-        this.footerService.pushPortal(this._portal);
-    }
-    ngOnDestroy() {
-        if (this._portal) {
-            this.footerService.removePortal(this._portal);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", 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: "18.0.1", type: FooterDirective, isStandalone: true, selector: "[rxapFooter]", ngImport: i0 }); }
+function provideLayout(...additionalProviders) {
+    return [
+        ExternalAppsService,
+        LayoutService,
+        LogoService,
+        NavigationService,
+        HeaderService,
+        FooterService,
+        ...additionalProviders,
+    ];
+}
+function withNavigationConfig(config) {
+    return [
+        {
+            provide: RXAP_NAVIGATION_CONFIG,
+            useValue: config,
+        },
+    ];
+}
+function withNavigationInserts(inserts) {
+    return [{
+            provide: RXAP_NAVIGATION_CONFIG_INSERTS,
+            useValue: inserts,
+        }];
+}
+function withSettingsMenuItems(...items) {
+    return [
+        ...items.filter((item) => typeof item === 'function').map(component => ({
+            provide: RXAP_SETTINGS_MENU_ITEM_COMPONENT,
+            useValue: component,
+            multi: true,
+        })),
+        ...items.filter((item) => typeof item !== 'function').map(item => ({
+            provide: RXAP_SETTINGS_MENU_ITEM,
+            useValue: item,
+            multi: true,
+        })),
+    ];
+}
+function withReleaseInfoModules(...module) {
+    return module.map(item => ({
+        provide: RXAP_RELEASE_INFO_MODULE,
+        useValue: item,
+        multi: true,
+    }));
+}
+function withHeaderComponents(components) {
+    return components.map(component => ({
+        provide: RXAP_HEADER_COMPONENT,
+        useValue: component,
+    }));
+}
+function withFooterComponents(components) {
+    return components.map(component => ({
+        provide: RXAP_FOOTER_COMPONENT,
+        useValue: component,
+    }));
+}
+function widthDefaultHeaderComponent() {
+    return {
+        provide: RXAP_HEADER_COMPONENT,
+        useValue: DefaultHeaderComponent,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rxapFooter]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1$1.FooterService, decorators: [{
-                    type: Inject,
-                    args: [FooterService]
-                }] }, { type: i0.TemplateRef, decorators: [{
-                    type: Inject,
-                    args: [TemplateRef]
-                }] }, { type: i0.ViewContainerRef, decorators: [{
-                    type: Inject,
-                    args: [ViewContainerRef]
-                }] }] });
 
-// region window-container-sidenav
+// region sidenav
 // endregion
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AppsButtonComponent, BaseLayoutComponent, DefaultHeaderComponent, EXTRACT_USERNAME_FROM_PROFILE, ExternalAppsService, FooterComponent, FooterDirective, FooterService, HeaderComponent, HeaderDirective, HeaderService, IsNavigationDividerItem, IsNavigationInsertItem, IsNavigationItem, LayoutComponent, LayoutService, LogoService, MinimalLayoutComponent, NavigationComponent, NavigationItemComponent, NavigationProgressBarComponent, NavigationService, RXAP_EXTERNAL_APP_FILTER, RXAP_FOOTER_COMPONENT, RXAP_HEADER_COMPONENT, RXAP_LAYOUT_APPS_GRID, RXAP_LOGO_CONFIG, RXAP_NAVIGATION_CONFIG, RXAP_NAVIGATION_CONFIG_INSERTS, RXAP_RELEASE_INFO_MODULE, RXAP_SETTINGS_MENU_ITEM, RXAP_SETTINGS_MENU_ITEM_COMPONENT, ReleaseInfoComponent, SettingsButtonComponent, SidenavComponent, SidenavFooterDirective, SidenavHeaderDirective, SidenavToggleButtonComponent, UserProfileIconComponent, provideLayout, widthDefaultHeaderComponent, withFooterComponents, withHeaderComponents, withNavigationConfig, withNavigationInserts, withReleaseInfoModules, withSettingsMenuItems };
 //# sourceMappingURL=rxap-layout.mjs.map