@rxap/layout 16.0.0-dev.34 → 16.0.0-dev.36

package/esm2022/lib/layout/layout.component.service.mjs

@@ -1,9 +1,9 @@
 import { MediaMatcher } from '@angular/cdk/layout';
-import { Inject, Injectable, Optional, } from '@angular/core';
+import { computed, effect, Inject, Injectable, Optional, signal, } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ConfigService } from '@rxap/config';
-import { FooterService, HeaderService, ObserveCurrentThemeDensity, } from '@rxap/services';
-import { BehaviorSubject, combineLatest, skip, } from 'rxjs';
-import { map, startWith, tap, } from 'rxjs/operators';
+import { ObserveCurrentThemeDensity } from '@rxap/ngx-theme';
+import { FooterService, HeaderService, } from '@rxap/services';
 import { RXAP_LOGO_CONFIG } from '../tokens';
 import * as i0 from "@angular/core";
 import * as i1 from "@rxap/services";
@@ -14,7 +14,7 @@ export class LayoutComponentService {
         this.footerComponentService = footerComponentService;
         this.headerComponentService = headerComponentService;
         this.config = config;
-        this.fixedTopGap$ = new BehaviorSubject(64);
+        this.currentThemeDensity = toSignal(ObserveCurrentThemeDensity());
         const mobileQuery = mediaMatcher.matchMedia('(max-width: 959px)');
         const mobile = mobileQuery.matches;
         const initialCollapsable = this.config.get('navigation.collapsable', true);
@@ -22,47 +22,42 @@ export class LayoutComponentService {
         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.mode$ = new BehaviorSubject(mode);
-        this.opened$ = new BehaviorSubject(opened);
-        this.pinned$ = new BehaviorSubject(pinned);
-        this.collapsable$ = new BehaviorSubject(collapsable);
-        this.fixedBottomGap$ = this.footerComponentService.portalCount$.pipe(map(count => count * 64));
-        combineLatest([
-            this.headerComponentService.update$.pipe(startWith(null), map(() => this.headerComponentService.countComponent)),
-            ObserveCurrentThemeDensity(),
-        ]).pipe(tap(([count, density]) => {
-            this.fixedTopGap$.next(count * (64 + density * 4));
-        })).subscribe();
+        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$.next(!event.matches);
-                if (this.collapsable$.value) {
-                    if (!this.pinned$.value) {
-                        this.opened$.next(false);
+                this.collapsable.set(!event.matches);
+                if (this.collapsable()) {
+                    if (!this.pinned()) {
+                        this.opened.set(false);
                     }
                 }
             }
         });
-        this.pinned$.pipe(skip(1), tap(pinned => {
-            if (pinned) {
-                this.mode$.next('side');
-                this.opened$.next(true);
+        effect(() => {
+            if (this.pinned()) {
+                this.mode.set('side');
+                this.opened.set(true);
             }
             else {
-                this.mode$.next('over');
-                this.opened$.next(false);
+                this.mode.set('over');
+                this.opened.set(false);
             }
-        })).subscribe();
+        }, { allowSignalWrites: true });
     }
-    toggleOpend() {
-        this.opened$.next(!this.opened$.value);
+    toggleOpened() {
+        this.opened.set(!this.opened());
     }
     togglePinned() {
-        this.pinned$.next(!this.pinned$.value);
+        this.pinned.set(!this.pinned());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponentService, deps: [{ token: i1.FooterService }, { token: i1.HeaderService }, { token: RXAP_LOGO_CONFIG, optional: true }, { token: ConfigService }, { token: i2.MediaMatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponentService, providedIn: 'root' }); }
@@ -79,4 +74,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                     type: Inject,
                     args: [ConfigService]
                 }] }, { type: i2.MediaMatcher }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYW5ndWxhci9sYXlvdXQvc3JjL2xpYi9sYXlvdXQvbGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNuRCxPQUFPLEVBQ0wsTUFBTSxFQUNOLFVBQVUsRUFDVixRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUM3QyxPQUFPLEVBQ0wsYUFBYSxFQUNiLGFBQWEsRUFDYiwwQkFBMEIsR0FDM0IsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLEVBQ0wsZUFBZSxFQUNmLGFBQWEsRUFFYixJQUFJLEdBQ0wsTUFBTSxNQUFNLENBQUM7QUFDZCxPQUFPLEVBQ0wsR0FBRyxFQUNILFNBQVMsRUFDVCxHQUFHLEdBQ0osTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7O0FBSTdDLE1BQU0sT0FBTyxzQkFBc0I7SUFXakMsWUFDa0Isc0JBQXFDLEVBQ3JDLHNCQUFxQyxFQUNmLGFBQWdDLElBQUksRUFFekQsTUFBcUIsRUFDdEMsWUFBMEI7UUFMViwyQkFBc0IsR0FBdEIsc0JBQXNCLENBQWU7UUFDckMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUFlO1FBR3BDLFdBQU0sR0FBTixNQUFNLENBQWU7UUFWakMsaUJBQVksR0FBRyxJQUFJLGVBQWUsQ0FBUyxFQUFFLENBQUMsQ0FBQztRQWFwRCxNQUFNLFdBQVcsR0FBRyxZQUFZLENBQUMsVUFBVSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDbEUsTUFBTSxNQUFNLEdBQUcsV0FBVyxDQUFDLE9BQU8sQ0FBQztR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QUFDLENBQUM7YUFDekI7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7Z0JBQ3hCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQzFCO1FBQ0gsQ0FBQyxDQUFDLENBQ0gsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBRU0sV0FBVztRQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVNLFlBQVk7UUFDakIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pDLENBQUM7OEdBNUVVLHNCQUFzQiw0RUFjWCxnQkFBZ0IsNkJBQzVCLGFBQWE7a0hBZlosc0JBQXNCLGNBRFQsTUFBTTs7MkZBQ25CLHNCQUFzQjtrQkFEbEMsVUFBVTttQkFBQyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUU7OzBCQWU3QixRQUFROzswQkFBSSxNQUFNOzJCQUFDLGdCQUFnQjs7MEJBQ25DLE1BQU07MkJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE1lZGlhTWF0Y2hlciB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuaW1wb3J0IHtcbiAgSW5qZWN0LFxuICBJbmplY3RhYmxlLFxuICBPcHRpb25hbCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXREcmF3ZXJNb2RlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2lkZW5hdic7XG5pbXBvcnQgeyBDb25maWdTZXJ2aWNlIH0gZnJvbSAnQHJ4YXAvY29uZmlnJztcbmltcG9ydCB7XG4gIEZvb3RlclNlcnZpY2UsXG4gIEhlYWRlclNlcnZpY2UsXG4gIE9ic2VydmVDdXJyZW50VGhlbWVEZW5zaXR5LFxufSBmcm9tICdAcnhhcC9zZXJ2aWNlcyc7XG5pbXBvcnQge1xuICBCZWhhdmlvclN1YmplY3QsXG4gIGNvbWJpbmVMYXRlc3QsXG4gIE9ic2VydmFibGUsXG4gIHNraXAsXG59IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtcbiAgbWFwLFxuICBzdGFydFdpdGgsXG4gIHRhcCxcbn0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgUlhBUF9MT0dPX0NPTkZJRyB9IGZyb20gJy4uL3Rva2Vucyc7XG5pbXBvcnQgeyBMb2dvQ29uZmlnIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5ASW5qZWN0YWJsZSh7IHByb3ZpZGVkSW46ICdyb290JyB9KVxuZXhwb3J0IGNsYXNzIExheW91dENvbXBvbmVudFNlcnZpY2Uge1xuXG4gIHB1YmxpYyBvcGVuZWQkOiBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj47XG4gIHB1YmxpYyBtb2RlJDogQmVoYXZpb3JTdWJqZWN0PE1hdERyYXdlck1vZGU+O1xuICBwdWJsaWMgcGlubmVkJDogQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+O1xuICBwdWJsaWMgZml4ZWRCb3R0b21HYXAkOiBPYnNlcnZhYmxlPG51bWJlcj47XG4gIHB1YmxpYyBmaXhlZFRvcEdhcCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PG51bWJlcj4oNjQpO1xuICBwdWJsaWMgbG9nbzogTG9nb0NvbmZpZztcbiAgcHVibGljIGNvbGxhcHNhYmxlJDogQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+O1xuXG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyByZWFkb25seSBmb290ZXJDb21wb25lbnRTZXJ2aWNlOiBGb290ZXJTZXJ2aWNlLFxuICAgIHB1YmxpYyByZWFkb25seSBoZWFkZXJDb21wb25lbnRTZXJ2aWNlOiBIZWFkZXJTZXJ2aWNlLFxuICAgIEBPcHRpb25hbCgpIEBJbmplY3QoUlhBUF9MT0dPX0NPTkZJRykgbG9nb0NvbmZpZzogTG9nb0NvbmZpZyB8IG51bGwgPSBudWxsLFxuICAgIEBJbmplY3QoQ29uZmlnU2VydmljZSlcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNvbmZpZzogQ29uZmlnU2VydmljZSxcbiAgICBtZWRpYU1hdGNoZXI6IE1lZGlhTWF0Y2hlcixcbiAgKSB7XG4gICAgY29uc3QgbW9iaWxlUXVlcnkgPSBtZWRpYU1hdGNoZXIubWF0Y2hNZWRpYSgnKG1heC13aWR0aDogOTU5cHgpJyk7XG4gICAgY29uc3QgbW9iaWxlID0gbW9iaWxlUXVlcnkubWF0Y2hlcztcbiAgICBjb25zdCBpbml0aWFsQ29sbGFwc2FibGUgPSB0aGlzLmNvbmZpZy5nZXQoJ25hdmlnYXRpb24uY29sbGFwc2FibGUnLCB0cnVlKTtcbiAgICBjb25zdCBjb2xsYXBzYWJsZSA9IGluaXRpYWxDb2xsYXBzYWJsZSAmJiAhbW9iaWxlO1xuICAgIGNvbnN0IHBpbm5lZCA9IHRoaXMuY29uZmlnLmdldCgnbmF2aWdhdGlvbi5waW5uZWQnLCBmYWxzZSk7XG4gICAgY29uc3QgbW9kZSA9IHRoaXMuY29uZmlnLmdldCgnbmF2aWdhdGlvbi5tb2RlJywgcGlubmVkIHx8ICFjb2xsYXBzYWJsZSA/ICdzaWRlJyA6ICdvdmVyJyk7XG4gICAgY29uc3Qgb3BlbmVkID0gdGhpcy5jb25maWcuZ2V0KCduYXZpZ2F0aW9uLm9wZW5lZCcsICghY29sbGFwc2FibGUgfHwgcGlubmVkKSAmJiAhbW9iaWxlKTtcbiAgICB0aGlzLm1vZGUkID0gbmV3IEJlaGF2aW9yU3ViamVjdDxNYXREcmF3ZXJNb2RlPihtb2RlKTtcbiAgICB0aGlzLm9wZW5lZCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+KG9wZW5lZCk7XG4gICAgdGhpcy5waW5uZWQkID0gbmV3IEJlaGF2aW9yU3ViamVjdDxib29sZWFuPihwaW5uZWQpO1xuICAgIHRoaXMuY29sbGFwc2FibGUkID0gbmV3IEJlaGF2aW9yU3ViamVjdDxib29sZWFuPihjb2xsYXBzYWJsZSk7XG4gICAgdGhpcy5maXhlZEJvdHRvbUdhcCQgPSB0aGlzLmZvb3RlckNvbXBvbmVudFNlcnZpY2UucG9ydGFsQ291bnQkLnBpcGUobWFwKGNvdW50ID0+IGNvdW50ICogNjQpKTtcbiAgICBjb21iaW5lTGF0ZXN0KFtcbiAgICAgIHRoaXMuaGVhZGVyQ29tcG9uZW50U2VydmljZS51cGRhdGUkLnBpcGUoXG4gICAgICAgIHN0YXJ0V2l0aChudWxsKSxcbiAgICAgICAgbWFwKCgpID0+IHRoaXMuaGVhZGVyQ29tcG9uZW50U2VydmljZS5jb3VudENvbXBvbmVudCksXG4gICAgICApLFxuICAgICAgT2JzZXJ2ZUN1cnJlbnRUaGVtZURlbnNpdHkoKSxcbiAgICBdKS5waXBlKFxuICAgICAgdGFwKChbIGNvdW50LCBkZW5zaXR5IF0pID0+IHtcbiAgICAgICAgdGhpcy5maXhlZFRvcEdhcCQubmV4dChjb3VudCAqICg2NCArIGRlbnNpdHkgKiA0KSk7XG4gICAgICB9KSxcbiAgICApLnN1YnNjcmliZSgpO1xuICAgIHRoaXMubG9nbyA9IGxvZ29Db25maWcgPz8ge1xuICAgICAgc3JjOiAnYXNzZXRzL2xvZ28ucG5nJyxcbiAgICAgIHdpZHRoOiAxOTIsXG4gICAgfTtcbiAgICBtb2JpbGVRdWVyeS5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCAoZXZlbnQpID0+IHtcbiAgICAgIGlmIChpbml0aWFsQ29sbGFwc2FibGUpIHtcbiAgICAgICAgdGhpcy5jb2xsYXBzYWJsZSQubmV4dCghZXZlbnQubWF0Y2hlcyk7XG4gICAgICAgIGlmICh0aGlzLmNvbGxhcHNhYmxlJC52YWx1ZSkge1xuICAgICAgICAgIGlmICghdGhpcy5waW5uZWQkLnZhbHVlKSB7XG4gICAgICAgICAgICB0aGlzLm9wZW5lZCQubmV4dChmYWxzZSk7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfSk7XG4gICAgdGhpcy5waW5uZWQkLnBpcGUoXG4gICAgICBza2lwKDEpLFxuICAgICAgdGFwKHBpbm5lZCA9PiB7XG4gICAgICAgIGlmIChwaW5uZWQpIHtcbiAgICAgICAgICB0aGlzLm1vZGUkLm5leHQoJ3NpZGUnKTtcbiAgICAgICAgICB0aGlzLm9wZW5lZCQubmV4dCh0cnVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLm1vZGUkLm5leHQoJ292ZXInKTtcbiAgICAgICAgICB0aGlzLm9wZW5lZCQubmV4dChmYWxzZSk7XG4gICAgICAgIH1cbiAgICAgIH0pLFxuICAgICkuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBwdWJsaWMgdG9nZ2xlT3BlbmQoKSB7XG4gICAgdGhpcy5vcGVuZWQkLm5leHQoIXRoaXMub3BlbmVkJC52YWx1ZSk7XG4gIH1cblxuICBwdWJsaWMgdG9nZ2xlUGlubmVkKCkge1xuICAgIHRoaXMucGlubmVkJC5uZXh0KCF0aGlzLnBpbm5lZCQudmFsdWUpO1xuICB9XG5cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYW5ndWxhci9sYXlvdXQvc3JjL2xpYi9sYXlvdXQvbGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNuRCxPQUFPLEVBQ0wsUUFBUSxFQUNSLE1BQU0sRUFDTixNQUFNLEVBQ04sVUFBVSxFQUNWLFFBQVEsRUFDUixNQUFNLEdBR1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRXRELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDN0MsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDN0QsT0FBTyxFQUNMLGFBQWEsRUFDYixhQUFhLEdBQ2QsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7O0FBSTdDLE1BQU0sT0FBTyxzQkFBc0I7SUFjakMsWUFDa0Isc0JBQXFDLEVBQ3JDLHNCQUFxQyxFQUNmLGFBQWdDLElBQUksRUFFekQsTUFBcUIsRUFDdEMsWUFBMEI7UUFMViwyQkFBc0IsR0FBdEIsc0JBQXNCLENBQWU7UUFDckMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUFlO1FBR3BDLFdBQU0sR0FBTixNQUFNLENBQWU7UUFSdkIsd0JBQW1CLEdBQUcsUUFBUSxDQUFDLDBCQUEwQixFQUFFLENBQUMsQ0FBQztRQVc1RSxNQUFNLFdBQVcsR0FBRyxZQUFZLENBQUMsVUFBVSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDbEUsTUFBTSxNQUFNLEdBQUcsV0FBVyxDQUFDLE9BQU8sQ0FBQztRQUNuQyxNQUFNLGtCQUFr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QyxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs4R0E3RVUsc0JBQXNCLDRFQWlCWCxnQkFBZ0IsNkJBQzVCLGFBQWE7a0hBbEJaLHNCQUFzQixjQURULE1BQU07OzJGQUNuQixzQkFBc0I7a0JBRGxDLFVBQVU7bUJBQUMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFOzswQkFrQjdCLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsZ0JBQWdCOzswQkFDbkMsTUFBTTsyQkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTWVkaWFNYXRjaGVyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XG5pbXBvcnQge1xuICBjb21wdXRlZCxcbiAgZWZmZWN0LFxuICBJbmplY3QsXG4gIEluamVjdGFibGUsXG4gIE9wdGlvbmFsLFxuICBzaWduYWwsXG4gIFNpZ25hbCxcbiAgV3JpdGFibGVTaWduYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdG9TaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBNYXREcmF3ZXJNb2RlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2lkZW5hdic7XG5pbXBvcnQgeyBDb25maWdTZXJ2aWNlIH0gZnJvbSAnQHJ4YXAvY29uZmlnJztcbmltcG9ydCB7IE9ic2VydmVDdXJyZW50VGhlbWVEZW5zaXR5IH0gZnJvbSAnQHJ4YXAvbmd4LXRoZW1lJztcbmltcG9ydCB7XG4gIEZvb3RlclNlcnZpY2UsXG4gIEhlYWRlclNlcnZpY2UsXG59IGZyb20gJ0ByeGFwL3NlcnZpY2VzJztcbmltcG9ydCB7IFJYQVBfTE9HT19DT05GSUcgfSBmcm9tICcuLi90b2tlbnMnO1xuaW1wb3J0IHsgTG9nb0NvbmZpZyB9IGZyb20gJy4uL3R5cGVzJztcblxuQEluamVjdGFibGUoeyBwcm92aWRlZEluOiAncm9vdCcgfSlcbmV4cG9ydCBjbGFzcyBMYXlvdXRDb21wb25lbnRTZXJ2aWNlIHtcblxuICBwdWJsaWMgbG9nbzogTG9nb0NvbmZpZztcblxuICBwdWJsaWMgcmVhZG9ubHkgb3BlbmVkOiBXcml0YWJsZVNpZ25hbDxib29sZWFuPjtcbiAgcHVibGljIHJlYWRvbmx5IG1vZGU6IFdyaXRhYmxlU2lnbmFsPE1hdERyYXdlck1vZGU+O1xuICBwdWJsaWMgcmVhZG9ubHkgcGlubmVkOiBXcml0YWJsZVNpZ25hbDxib29sZWFuPjtcbiAgcHVibGljIHJlYWRvbmx5IGNvbGxhcHNhYmxlOiBXcml0YWJsZVNpZ25hbDxib29sZWFuPjtcbiAgcHVibGljIHJlYWRvbmx5IGZpeGVkQm90dG9tR2FwOiBTaWduYWw8bnVtYmVyPjtcbiAgcHVibGljIHJlYWRvbmx5IGZpeGVkVG9wR2FwOiBTaWduYWw8bnVtYmVyPjtcblxuICBwcml2YXRlIHJlYWRvbmx5IGN1cnJlbnRUaGVtZURlbnNpdHkgPSB0b1NpZ25hbChPYnNlcnZlQ3VycmVudFRoZW1lRGVuc2l0eSgpKTtcblxuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgcmVhZG9ubHkgZm9vdGVyQ29tcG9uZW50U2VydmljZTogRm9vdGVyU2VydmljZSxcbiAgICBwdWJsaWMgcmVhZG9ubHkgaGVhZGVyQ29tcG9uZW50U2VydmljZTogSGVhZGVyU2VydmljZSxcbiAgICBAT3B0aW9uYWwoKSBASW5qZWN0KFJYQVBfTE9HT19DT05GSUcpIGxvZ29Db25maWc6IExvZ29Db25maWcgfCBudWxsID0gbnVsbCxcbiAgICBASW5qZWN0KENvbmZpZ1NlcnZpY2UpXG4gICAgcHJpdmF0ZSByZWFkb25seSBjb25maWc6IENvbmZpZ1NlcnZpY2UsXG4gICAgbWVkaWFNYXRjaGVyOiBNZWRpYU1hdGNoZXIsXG4gICkge1xuICAgIGNvbnN0IG1vYmlsZVF1ZXJ5ID0gbWVkaWFNYXRjaGVyLm1hdGNoTWVkaWEoJyhtYXgtd2lkdGg6IDk1OXB4KScpO1xuICAgIGNvbnN0IG1vYmlsZSA9IG1vYmlsZVF1ZXJ5Lm1hdGNoZXM7XG4gICAgY29uc3QgaW5pdGlhbENvbGxhcHNhYmxlID0gdGhpcy5jb25maWcuZ2V0KCduYXZpZ2F0aW9uLmNvbGxhcHNhYmxlJywgdHJ1ZSk7XG4gICAgY29uc3QgY29sbGFwc2FibGUgPSBpbml0aWFsQ29sbGFwc2FibGUgJiYgIW1vYmlsZTtcbiAgICBjb25zdCBwaW5uZWQgPSB0aGlzLmNvbmZpZy5nZXQoJ25hdmlnYXRpb24ucGlubmVkJywgZmFsc2UpO1xuICAgIGNvbnN0IG1vZGUgPSB0aGlzLmNvbmZpZy5nZXQoJ25hdmlnYXRpb24ubW9kZScsIHBpbm5lZCB8fCAhY29sbGFwc2FibGUgPyAnc2lkZScgOiAnb3ZlcicpO1xuICAgIGNvbnN0IG9wZW5lZCA9IHRoaXMuY29uZmlnLmdldCgnbmF2aWdhdGlvbi5vcGVuZWQnLCAoIWNvbGxhcHNhYmxlIHx8IHBpbm5lZCkgJiYgIW1vYmlsZSk7XG5cbiAgICB0aGlzLm9wZW5lZCA9IHNpZ25hbChvcGVuZWQpO1xuICAgIHRoaXMubW9kZSA9IHNpZ25hbChtb2RlKTtcbiAgICB0aGlzLnBpbm5lZCA9IHNpZ25hbChwaW5uZWQpO1xuICAgIHRoaXMuY29sbGFwc2FibGUgPSBzaWduYWwoY29sbGFwc2FibGUpO1xuXG4gICAgdGhpcy5maXhlZEJvdHRvbUdhcCA9IGNvbXB1dGVkKCgpID0+IHRoaXMuZm9vdGVyQ29tcG9uZW50U2VydmljZS5wb3J0YWxDb3VudCgpICogKFxuICAgICAgNjQgKyAoXG4gICAgICAgICAgIHRoaXMuY3VycmVudFRoZW1lRGVuc2l0eSgpID8/IDBcbiAgICAgICAgICkgKiA0XG4gICAgKSk7XG4gICAgdGhpcy5maXhlZFRvcEdhcCA9IGNvbXB1dGVkKCgpID0+IHRoaXMuaGVhZGVyQ29tcG9uZW50U2VydmljZS5jb21wb25lbnRDb3VudCgpICogKFxuICAgICAgNjQgKyAoXG4gICAgICAgICAgIHRoaXMuY3VycmVudFRoZW1lRGVuc2l0eSgpID8/IDBcbiAgICAgICAgICkgKiA0XG4gICAgKSk7XG5cbiAgICB0aGlzLmxvZ28gPSBsb2dvQ29uZmlnID8/IHtcbiAgICAgIHNyYzogJ2Fzc2V0cy9sb2dvLnBuZycsXG4gICAgICB3aWR0aDogMTkyLFxuICAgIH07XG4gICAgbW9iaWxlUXVlcnkuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgKGV2ZW50KSA9PiB7XG4gICAgICBpZiAoaW5pdGlhbENvbGxhcHNhYmxlKSB7XG4gICAgICAgIHRoaXMuY29sbGFwc2FibGUuc2V0KCFldmVudC5tYXRjaGVzKTtcbiAgICAgICAgaWYgKHRoaXMuY29sbGFwc2FibGUoKSkge1xuICAgICAgICAgIGlmICghdGhpcy5waW5uZWQoKSkge1xuICAgICAgICAgICAgdGhpcy5vcGVuZWQuc2V0KGZhbHNlKTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9KTtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMucGlubmVkKCkpIHtcbiAgICAgICAgdGhpcy5tb2RlLnNldCgnc2lkZScpO1xuICAgICAgICB0aGlzLm9wZW5lZC5zZXQodHJ1ZSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLm1vZGUuc2V0KCdvdmVyJyk7XG4gICAgICAgIHRoaXMub3BlbmVkLnNldChmYWxzZSk7XG4gICAgICB9XG4gICAgfSwgeyBhbGxvd1NpZ25hbFdyaXRlczogdHJ1ZSB9KTtcbiAgfVxuXG4gIHB1YmxpYyB0b2dnbGVPcGVuZWQoKSB7XG4gICAgdGhpcy5vcGVuZWQuc2V0KCF0aGlzLm9wZW5lZCgpKTtcbiAgfVxuXG4gIHB1YmxpYyB0b2dnbGVQaW5uZWQoKSB7XG4gICAgdGhpcy5waW5uZWQuc2V0KCF0aGlzLnBpbm5lZCgpKTtcbiAgfVxuXG59XG4iXX0=

package/fesm2022/rxap-layout.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Injectable, Optional, Inject, LOCALE_ID, signal, isDevMode, Input, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, forwardRef, ViewChild, HostBinding, INJECTOR, ChangeDetectorRef, TemplateRef, Directive, ContentChild, EventEmitter, Output } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, signal, computed, effect, Injectable, Optional, Inject, LOCALE_ID, isDevMode, Input, ElementRef, Renderer2, ViewContainerRef, ViewEncapsulation, forwardRef, ViewChild, HostBinding, INJECTOR, ChangeDetectorRef, inject, TemplateRef, Directive, ContentChild, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@rxap/services';
-import { ObserveCurrentThemeDensity, HeaderService, ResetService, VersionService, WindowContainerSidenavService, FooterService } from '@rxap/services';
+import { HeaderService, ResetService, VersionService, WindowContainerSidenavService, FooterService } from '@rxap/services';
 import * as i3 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i4$1 from '@angular/common';
 import { NgIf, NgFor, AsyncPipe, NgOptimizedImage, KeyValuePipe, CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@angular/material/button';
@@ -26,24 +25,28 @@ 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 { BehaviorSubject, combineLatest, skip, firstValueFrom, switchMap, filter as filter$1, distinctUntilChanged, Subscription, debounceTime, ReplaySubject, of, from } from 'rxjs';
-import { map, startWith, tap, filter, switchMap as switchMap$1, catchError } from 'rxjs/operators';
 import * as i2$1 from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@rxap/config';
 import { ConfigService } from '@rxap/config';
+import * as i1$4 from '@rxap/ngx-theme';
+import { ObserveCurrentThemeDensity, ThemeService } from '@rxap/ngx-theme';
 import * as i3$6 from '@angular/flex-layout/flex';
 import { FlexModule } from '@angular/flex-layout/flex';
 import * as i2$2 from '@rxap/authorization';
 import { ClickOnLink } from '@rxap/browser-utilities';
 import { JoinPath, coerceBoolean } from '@rxap/utilities';
+import { firstValueFrom, switchMap, filter as filter$1, skip, distinctUntilChanged, BehaviorSubject, Subscription, debounceTime, ReplaySubject, of, from, combineLatest } from 'rxjs';
 import * as i2$3 from '@rxap/authentication';
+import { filter, tap, map, switchMap as switchMap$1, startWith, catchError } from 'rxjs/operators';
 import * as i2$5 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationCancel, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import * as i1$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i3$3 from '@rxap/ngx-changelog';
 import * as i1$3 from '@rxap/ngx-localize';
-import * as i1$4 from '@rxap/ngx-user';
+import * as i1$5 from '@rxap/ngx-user';
+import { UserSettingsThemeService, IsThemeDensity } from '@rxap/ngx-user';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i3$5 from '@angular/material/sidenav';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
@@ -71,11 +74,11 @@ class FooterComponent {
         this.footerService = footerService;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FooterComponent, deps: [{ token: i1.FooterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: FooterComponent, isStandalone: true, selector: "rxap-footer", ngImport: i0, template: "<ng-template [ngIf]=\"footerService.portals$ | async\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: FooterComponent, isStandalone: true, selector: "rxap-footer", ngImport: i0, template: "<ng-template [ngIf]=\"footerService.portals()\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, MatToolbarModule, NgFor, PortalModule, AsyncPipe], template: "<ng-template [ngIf]=\"footerService.portals$ | async\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n" }]
+            args: [{ selector: 'rxap-footer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, MatToolbarModule, NgFor, PortalModule, AsyncPipe], template: "<ng-template [ngIf]=\"footerService.portals()\" let-portals>\n  <mat-toolbar *ngIf=\"portals.length\" class=\"footer mat-elevation-z1\">\n    <mat-toolbar-row *ngFor=\"let portal of portals\">\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    </mat-toolbar-row>\n  </mat-toolbar>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FooterService }]; } });
 
 class LayoutComponentService {
@@ -83,7 +86,7 @@ class LayoutComponentService {
         this.footerComponentService = footerComponentService;
         this.headerComponentService = headerComponentService;
         this.config = config;
-        this.fixedTopGap$ = new BehaviorSubject(64);
+        this.currentThemeDensity = toSignal(ObserveCurrentThemeDensity());
         const mobileQuery = mediaMatcher.matchMedia('(max-width: 959px)');
         const mobile = mobileQuery.matches;
         const initialCollapsable = this.config.get('navigation.collapsable', true);
@@ -91,47 +94,42 @@ class LayoutComponentService {
         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.mode$ = new BehaviorSubject(mode);
-        this.opened$ = new BehaviorSubject(opened);
-        this.pinned$ = new BehaviorSubject(pinned);
-        this.collapsable$ = new BehaviorSubject(collapsable);
-        this.fixedBottomGap$ = this.footerComponentService.portalCount$.pipe(map(count => count * 64));
-        combineLatest([
-            this.headerComponentService.update$.pipe(startWith(null), map(() => this.headerComponentService.countComponent)),
-            ObserveCurrentThemeDensity(),
-        ]).pipe(tap(([count, density]) => {
-            this.fixedTopGap$.next(count * (64 + density * 4));
-        })).subscribe();
+        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$.next(!event.matches);
-                if (this.collapsable$.value) {
-                    if (!this.pinned$.value) {
-                        this.opened$.next(false);
+                this.collapsable.set(!event.matches);
+                if (this.collapsable()) {
+                    if (!this.pinned()) {
+                        this.opened.set(false);
                     }
                 }
             }
         });
-        this.pinned$.pipe(skip(1), tap(pinned => {
-            if (pinned) {
-                this.mode$.next('side');
-                this.opened$.next(true);
+        effect(() => {
+            if (this.pinned()) {
+                this.mode.set('side');
+                this.opened.set(true);
             }
             else {
-                this.mode$.next('over');
-                this.opened$.next(false);
+                this.mode.set('over');
+                this.opened.set(false);
             }
-        })).subscribe();
+        }, { allowSignalWrites: true });
     }
-    toggleOpend() {
-        this.opened$.next(!this.opened$.value);
+    toggleOpened() {
+        this.opened.set(!this.opened());
     }
     togglePinned() {
-        this.pinned$.next(!this.pinned$.value);
+        this.pinned.set(!this.pinned());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponentService, deps: [{ token: i1.FooterService }, { token: i1.HeaderService }, { token: RXAP_LOGO_CONFIG, optional: true }, { token: ConfigService }, { token: i2$1.MediaMatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponentService, providedIn: 'root' }); }
@@ -315,66 +313,47 @@ class SettingsButtonComponent {
         this.changelogService.showChangelogDialog();
     }
     previewDensity(density) {
-        this.currentDensityValue = this.theme.getDensity();
-        this.theme.setDensity(density);
+        this.theme.applyDensity(density);
     }
-    saveDensity() {
-        if (!this.savePreviewDensityValue) {
-            if (this.currentDensityValue) {
-                this.theme.setDensity(this.currentDensityValue);
-            }
-        }
-        this.savePreviewDensityValue = false;
+    restoreDensity() {
+        this.theme.applyDensity(this.theme.density());
     }
-    selectDensity() {
-        this.savePreviewDensityValue = true;
+    setDensity(density) {
+        this.theme.setDensity(density);
     }
     previewTypography(typography) {
-        this.currentTypographyValue = this.theme.getTypography();
-        this.theme.setTypography(typography);
+        this.theme.applyTypography(typography);
     }
-    saveTypography() {
-        if (!this.savePreviewTypographyValue) {
-            if (this.currentTypographyValue) {
-                this.theme.setTypography(this.currentTypographyValue);
-            }
-        }
-        this.savePreviewTypographyValue = false;
+    restoreTypography() {
+        this.theme.applyTypography(this.theme.typography());
     }
-    selectTypography() {
-        this.savePreviewTypographyValue = true;
+    setTypography(typography) {
+        this.theme.setTypography(typography);
     }
     previewTheme(theme) {
-        this.currentThemeValue ??= this.theme.getCurrentTheme();
-        this.theme.setTheme(theme);
+        this.theme.applyTheme(theme);
     }
-    saveTheme() {
-        if (!this.savePreviewThemeValue) {
-            if (this.currentThemeValue) {
-                this.theme.setTheme(this.currentThemeValue);
-            }
-        }
-        this.savePreviewThemeValue = false;
-        this.currentThemeValue = null;
+    restoreTheme() {
+        this.theme.applyTheme(this.theme.themeName());
     }
-    selectTheme() {
-        this.savePreviewThemeValue = true;
+    setTheme(theme) {
+        this.theme.setTheme(theme);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SettingsButtonComponent, deps: [{ token: i1.ThemeService }, { token: i2$5.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.ChangelogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SettingsButtonComponent, isStandalone: true, selector: "rxap-settings-button", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"compare\"></mat-icon>\n    <span i18n>Theme</span>\n  </button>\n  <rxap-language-selector *ngIf=\"!isDevMode\"></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 [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button [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)=\"selectDensity()\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"saveDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-l\"></mat-icon>\n    <span i18n>Normal</span>\n  </button>\n  <button (click)=\"selectDensity()\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"saveDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-m\"></mat-icon>\n    <span i18n>Dense</span>\n  </button>\n  <button (click)=\"selectDensity()\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"saveDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-s\"></mat-icon>\n    <span i18n>Very Dense</span>\n  </button>\n  <button (click)=\"selectDensity()\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"saveDensity()\" 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  <button (click)=\"selectTypography()\"\n          (mouseenter)=\"previewTypography(typographyName)\"\n          (mouseleave)=\"saveTypography()\"\n          *ngFor=\"let typographyName of availableTypographies\"\n          mat-menu-item>\n    {{ typographyName }}\n  </button>\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  <button (click)=\"selectTheme()\"\n          (mouseenter)=\"previewTheme(themeName)\"\n          (mouseleave)=\"saveTheme()\"\n          *ngFor=\"let themeName of availableThemes\"\n          mat-menu-item>\n    {{ themeName }}\n  </button>\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$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LanguageSelectorComponent, selector: "rxap-language-selector" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SettingsButtonComponent, deps: [{ token: i1$4.ThemeService }, { token: i2$5.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.ChangelogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SettingsButtonComponent, isStandalone: true, selector: "rxap-settings-button", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode()\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode()\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"compare\"></mat-icon>\n    <span i18n>Theme</span>\n  </button>\n  <rxap-language-selector *ngIf=\"!isDevMode\"></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 [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button [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  <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</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\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</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$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LanguageSelectorComponent, selector: "rxap-language-selector" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SettingsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rxap-settings-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, LanguageSelectorComponent, MatMenuModule, PortalModule], template: "<button [matMenuTriggerFor]=\"menu\" mat-icon-button>\n  <mat-icon svgIcon=\"cog\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button (click)=\"theme.toggleDarkTheme()\" mat-menu-item>\n    <mat-icon *ngIf=\"theme.darkMode\" svgIcon=\"brightness-2\"></mat-icon>\n    <mat-icon *ngIf=\"!theme.darkMode\" svgIcon=\"brightness-5\"></mat-icon>\n    <span i18n>Mode</span>\n  </button>\n  <button [matMenuTriggerFor]=\"themeMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"compare\"></mat-icon>\n    <span i18n>Theme</span>\n  </button>\n  <rxap-language-selector *ngIf=\"!isDevMode\"></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 [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button [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)=\"selectDensity()\" (mouseenter)=\"previewDensity(0)\" (mouseleave)=\"saveDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-l\"></mat-icon>\n    <span i18n>Normal</span>\n  </button>\n  <button (click)=\"selectDensity()\" (mouseenter)=\"previewDensity(-1)\" (mouseleave)=\"saveDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-m\"></mat-icon>\n    <span i18n>Dense</span>\n  </button>\n  <button (click)=\"selectDensity()\" (mouseenter)=\"previewDensity(-2)\" (mouseleave)=\"saveDensity()\" mat-menu-item>\n    <mat-icon svgIcon=\"size-s\"></mat-icon>\n    <span i18n>Very Dense</span>\n  </button>\n  <button (click)=\"selectDensity()\" (mouseenter)=\"previewDensity(-3)\" (mouseleave)=\"saveDensity()\" 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  <button (click)=\"selectTypography()\"\n          (mouseenter)=\"previewTypography(typographyName)\"\n          (mouseleave)=\"saveTypography()\"\n          *ngFor=\"let typographyName of availableTypographies\"\n          mat-menu-item>\n    {{ typographyName }}\n  </button>\n</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\n  <button (click)=\"selectTheme()\"\n          (mouseenter)=\"previewTheme(themeName)\"\n          (mouseleave)=\"saveTheme()\"\n          *ngFor=\"let themeName of availableThemes\"\n          mat-menu-item>\n    {{ themeName }}\n  </button>\n</mat-menu>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ThemeService }, { type: i2$5.ActivatedRoute }, { type: i0.Injector }, { type: i3$3.ChangelogService }]; } });
+            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 *ngIf=\"!isDevMode\"></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 [matMenuTriggerFor]=\"themeFontMenu\" mat-menu-item>\n    <mat-icon svgIcon=\"format-font\"></mat-icon>\n    <span i18n>Font</span>\n  </button>\n  <button [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  <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</mat-menu>\n\n<mat-menu #themePresetMenu=\"matMenu\" xPosition=\"before\">\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</mat-menu>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$4.ThemeService }, { type: i2$5.ActivatedRoute }, { type: i0.Injector }, { type: i3$3.ChangelogService }]; } });
 
 class SidenavToggleButtonComponent {
     constructor(layoutComponentService) {
         this.layoutComponentService = layoutComponentService;
-        this.opened = toSignal(layoutComponentService.opened$, { initialValue: layoutComponentService.opened$.value });
+        this.opened = layoutComponentService.opened;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavToggleButtonComponent, deps: [{ token: LayoutComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SidenavToggleButtonComponent, isStandalone: true, selector: "rxap-sidenav-toggle-button", ngImport: i0, template: "<button (click)=\"layoutComponentService.toggleOpend()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SidenavToggleButtonComponent, isStandalone: true, selector: "rxap-sidenav-toggle-button", ngImport: i0, template: "<button (click)=\"layoutComponentService.toggleOpened()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SidenavToggleButtonComponent, decorators: [{
             type: Component,
@@ -382,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                         MatButtonModule,
                         NgIf,
                         MatIconModule,
-                    ], template: "<button (click)=\"layoutComponentService.toggleOpend()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n" }]
+                    ], template: "<button (click)=\"layoutComponentService.toggleOpened()\" mat-icon-button>\n  <mat-icon *ngIf=\"!opened()\">menu</mat-icon>\n  <mat-icon *ngIf=\"opened()\">menu_open</mat-icon>\n</button>\n" }]
         }], ctorParameters: function () { return [{ type: LayoutComponentService }]; } });
 
 const EXTRACT_USERNAME_FROM_PROFILE = new InjectionToken('extract-username-from-profile', {
@@ -400,7 +379,7 @@ class UserProfileIconComponent {
     async logout() {
         await this.authenticationService.signOut();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: UserProfileIconComponent, deps: [{ token: i1$4.UserProfileDataSource }, { token: i2$3.RxapAuthenticationService }, { token: EXTRACT_USERNAME_FROM_PROFILE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: UserProfileIconComponent, deps: [{ token: i1$5.UserProfileDataSource }, { token: i2$3.RxapAuthenticationService }, { token: EXTRACT_USERNAME_FROM_PROFILE }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: UserProfileIconComponent, isStandalone: true, selector: "rxap-user-profile-icon", ngImport: i0, template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: UserProfileIconComponent, decorators: [{
@@ -411,7 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                         NgIf,
                         AsyncPipe,
                     ], template: "<button [matMenuTriggerFor]=\"menu\"\n        [disabled]=\"!username()\"\n        class=\"profile-icon flex flex-row justify-center items-center\">\n  <mat-icon class=\"avatar-icon\" svgIcon=\"account-circle\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" [yPosition]=\"'below'\" class=\"!max-w-none\">\n  <button mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"account\"></mat-icon>\n      <span>{{username()}}</span>\n    </span>\n  </button>\n  <button (click)=\"logout()\" mat-menu-item>\n    <span class=\"flex flex-row gap-2\">\n      <mat-icon svgIcon=\"logout\"></mat-icon>\n      <span i18n>Logout</span>\n    </span>\n  </button>\n</mat-menu>\n", styles: [".profile-icon{border-radius:100%;border:none;height:32px;width:32px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:cover}.profile-icon .avatar-icon{width:32px;height:32px;font-size:32px}.profile-icon:hover{cursor:pointer}.profile-icon:focus{outline:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.UserProfileDataSource }, { type: i2$3.RxapAuthenticationService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.UserProfileDataSource }, { type: i2$3.RxapAuthenticationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [EXTRACT_USERNAME_FROM_PROFILE]
                 }] }]; } });
@@ -421,24 +400,9 @@ class HeaderComponent {
         this.headerComponentService = headerComponentService;
         this.layoutComponentService = layoutComponentService;
         this.headerComponent = headerComponent;
-        this.components = [];
-        this.subscriptions = new Subscription();
         this.color = undefined;
-        this.collapsable =
-            toSignal(layoutComponentService.collapsable$, { initialValue: layoutComponentService.collapsable$.value });
-        this.opened = toSignal(layoutComponentService.opened$, { initialValue: layoutComponentService.opened$.value });
-    }
-    ngOnInit() {
-        this.updateComponents();
-        this.subscriptions.add(this.headerComponentService.update$
-            .pipe(tap(() => this.updateComponents()))
-            .subscribe());
-    }
-    updateComponents() {
-        this.components = this.headerComponentService.getComponents();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
+        this.collapsable = layoutComponentService.collapsable;
+        this.opened = layoutComponentService.opened;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: HeaderComponent, deps: [{ token: HeaderService }, { token: LayoutComponentService }, { token: RXAP_HEADER_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: HeaderComponent, isStandalone: true, selector: "rxap-header", inputs: { color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\" [ngClass]=\"{ open: opened() }\" class=\"mat-elevation-z3 header\">\n  <div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n    <rxap-sidenav-toggle-button *ngIf=\"!collapsable()\"></rxap-sidenav-toggle-button>\n    <div class=\"grow\">\n      <ng-content></ng-content>\n    </div>\n    <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n    <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n    <rxap-user-profile-icon class=\"grow-0\"></rxap-user-profile-icon>\n  </div>\n</mat-toolbar>\n\n<rxap-navigation-progress-bar></rxap-navigation-progress-bar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: NavigationProgressBarComponent, selector: "rxap-navigation-progress-bar" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon" }, { kind: "component", type: AppsButtonComponent, selector: "rxap-apps-button" }, { kind: "component", type: SettingsButtonComponent, selector: "rxap-settings-button" }, { kind: "component", type: SidenavToggleButtonComponent, selector: "rxap-sidenav-toggle-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -897,21 +861,36 @@ class LayoutComponent {
     constructor(layoutComponentService, environment, iconLoaderService) {
         this.layoutComponentService = layoutComponentService;
         this.environment = environment;
+        this.userSettingsThemeService = inject(UserSettingsThemeService);
+        this.themeService = inject(ThemeService);
         iconLoaderService.load();
-        this.fixedBottomGap = toSignal(layoutComponentService.fixedBottomGap$, { initialValue: 0 });
-        this.fixedTopGap =
-            toSignal(layoutComponentService.fixedTopGap$, { initialValue: layoutComponentService.fixedTopGap$.value });
-        this.sidenavMode = toSignal(layoutComponentService.mode$, { initialValue: layoutComponentService.mode$.value });
-        this.pinned = toSignal(layoutComponentService.pinned$, { initialValue: layoutComponentService.pinned$.value });
-        this.collapsable =
-            toSignal(layoutComponentService.collapsable$, { initialValue: layoutComponentService.collapsable$.value });
-        this.opened = toSignal(layoutComponentService.opened$, { initialValue: layoutComponentService.opened$.value });
+        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);
     }
+    ngOnDestroy() {
+        this.userSettingsThemeService.stopSync();
+    }
+    ngOnInit() {
+        this.userSettingsThemeService.startSync();
+        this.userSettingsThemeService.get().then(theme => {
+            if (theme.density && IsThemeDensity(theme.density)) {
+                this.themeService.setDensity(theme.density, true);
+            }
+            if (theme.typography) {
+                this.themeService.setTypography(theme.typography, true);
+            }
+            this.themeService.setTheme(theme.preset, true);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponent, deps: [{ token: LayoutComponentService }, { token: RXAP_ENVIRONMENT }, { token: i2$7.IconLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: LayoutComponent, isStandalone: true, selector: "rxap-layout", viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<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  }\">\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 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          (mouseleave)=\"collapsable() && !pinned() && matSidenav.close()\" class=\"grow self-stretch\"\n          root\n          rxap-navigation\n        >\n        </ul>\n\n        <img\n          [src]=\"logoSrc\"\n          [routerLink]=\"['/']\"\n          [width]=\"logoWidth\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav.collapsable:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav.collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "rxap-header", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: StatusIndicatorComponent, selector: "rxap-status-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: LayoutComponent, isStandalone: true, selector: "rxap-layout", viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<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  }\">\n    <mat-sidenav\n      #matSidenav=\"matSidenav\"\n      [fixedBottomGap]=\"fixedBottomGap()\"\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"fixedTopGap()\"\n      [mode]=\"sidenavMode()\"\n      [ngClass]=\"{ collapsable: collapsable() }\"\n      class=\"sidenav\"\n      [opened]=\"opened()\"\n    >\n      <div (mouseleave)=\"collapsable() && !pinned() && matSidenav.close()\"\n           class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n        <div (click)=\"layoutComponentService.togglePinned()\" *ngIf=\"collapsable()\"\n             class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n          <span class=\"text-lg\" i18n>Navigation</span>\n          <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n            <button mat-icon-button>\n              <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n              <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n            </button>\n          </div>\n        </div>\n\n        <ul\n          (mouseenter)=\"collapsable() && !pinned() && matSidenav.open()\"\n          class=\"grow self-stretch\"\n          root\n          rxap-navigation\n        >\n        </ul>\n\n        <img\n          [src]=\"logoSrc\"\n          [routerLink]=\"['/']\"\n          [width]=\"logoWidth\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav.collapsable:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav.collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "rxap-header", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FooterComponent, selector: "rxap-footer" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: StatusIndicatorComponent, selector: "rxap-status-indicator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -930,7 +909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImpor
                         NavigationComponent,
                         RouterOutlet,
                         StatusIndicatorComponent,
-                    ], 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  }\">\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 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          (mouseleave)=\"collapsable() && !pinned() && matSidenav.close()\" 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"] }]
+                    ], 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  }\">\n    <mat-sidenav\n      #matSidenav=\"matSidenav\"\n      [fixedBottomGap]=\"fixedBottomGap()\"\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"fixedTopGap()\"\n      [mode]=\"sidenavMode()\"\n      [ngClass]=\"{ collapsable: collapsable() }\"\n      class=\"sidenav\"\n      [opened]=\"opened()\"\n    >\n      <div (mouseleave)=\"collapsable() && !pinned() && matSidenav.close()\"\n           class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n        <div (click)=\"layoutComponentService.togglePinned()\" *ngIf=\"collapsable()\"\n             class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n          <span class=\"text-lg\" i18n>Navigation</span>\n          <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n            <button mat-icon-button>\n              <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n              <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n            </button>\n          </div>\n        </div>\n\n        <ul\n          (mouseenter)=\"collapsable() && !pinned() && matSidenav.open()\"\n          class=\"grow self-stretch\"\n          root\n          rxap-navigation\n        >\n        </ul>\n\n        <img\n          [src]=\"logoSrc\"\n          [routerLink]=\"['/']\"\n          [width]=\"logoWidth\"\n          alt=\"logo\"\n          class=\"grow-0 mx-16\"\n        />\n        <div class=\"grow-0 px-16\">\n          <span>{{release}}</span>\n        </div>\n      </div>\n    </mat-sidenav>\n    <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n      <router-outlet></router-outlet>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n  <rxap-footer class=\"z-10 w-full fixed bottom-0\"></rxap-footer>\n</div>\n<!--<rxap-window-task-bar-container></rxap-window-task-bar-container>-->\n", styles: [":host .sidenav.collapsable:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .sidenav.collapsable ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: LayoutComponentService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RXAP_ENVIRONMENT]