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

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

@@ -1,10 +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 { ObserveCurrentThemeDensity } from '@rxap/ngx-theme';
 import { FooterService, HeaderService, } from '@rxap/services';
-import { BehaviorSubject, combineLatest, skip, } from 'rxjs';
-import { map, startWith, tap, } from 'rxjs/operators';
 import { RXAP_LOGO_CONFIG } from '../tokens';
 import * as i0 from "@angular/core";
 import * as i1 from "@rxap/services";
@@ -15,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);
@@ -23,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' }); }
@@ -80,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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYW5ndWxhci9sYXlvdXQvc3JjL2xpYi9sYXlvdXQvbGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNuRCxPQUFPLEVBQ0wsTUFBTSxFQUNOLFVBQVUsRUFDVixRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUM3QyxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM3RCxPQUFPLEVBQ0wsYUFBYSxFQUNiLGFBQWEsR0FDZCxNQUFNLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8sRUFDTCxlQUFlLEVBQ2YsYUFBYSxFQUViLElBQUksR0FDTCxNQUFNLE1BQU0sQ0FBQztBQUNkLE9BQU8sRUFDTCxHQUFHLEVBQ0gsU0FBUyxFQUNULEdBQUcsR0FDSixNQUFNLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLFdBQVcsQ0FBQzs7Ozs7QUFJN0MsTUFBTSxPQUFPLHNCQUFzQjtJQVdqQyxZQUNrQixzQkFBcUMsRUFDckMsc0JBQXFDLEVBQ2YsYUFBZ0MsSUFBSSxFQUV6RCxNQUFxQixFQUN0QyxZQUEwQjtRQUxWLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBZTtRQUNyQywyQkFBc0IsR0FBdEIsc0JBQXNCLENBQWU7UUFHcEMsV0FBTSxHQUFOLE1BQU0sQ0FBZTtRQVZqQyxpQkFBWSxHQUFHLElBQUksZUFBZSxDQUFTLEVBQUUsQ0FBQyxDQUFDO1FBYXBELE1BQU0sV0FBVyxHQUFHLFlBQVksQ0FBQyxVQUFVLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUNsRSxNQUFN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LENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUN6QjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztnQkFDeEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDMUI7UUFDSCxDQUFDLENBQUMsQ0FDSCxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQzs4R0E1RVUsc0JBQXNCLDRFQWNYLGdCQUFnQiw2QkFDNUIsYUFBYTtrSEFmWixzQkFBc0IsY0FEVCxNQUFNOzsyRkFDbkIsc0JBQXNCO2tCQURsQyxVQUFVO21CQUFDLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRTs7MEJBZTdCLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsZ0JBQWdCOzswQkFDbkMsTUFBTTsyQkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTWVkaWFNYXRjaGVyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XG5pbXBvcnQge1xuICBJbmplY3QsXG4gIEluamVjdGFibGUsXG4gIE9wdGlvbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdERyYXdlck1vZGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zaWRlbmF2JztcbmltcG9ydCB7IENvbmZpZ1NlcnZpY2UgfSBmcm9tICdAcnhhcC9jb25maWcnO1xuaW1wb3J0IHsgT2JzZXJ2ZUN1cnJlbnRUaGVtZURlbnNpdHkgfSBmcm9tICdAcnhhcC9uZ3gtdGhlbWUnO1xuaW1wb3J0IHtcbiAgRm9vdGVyU2VydmljZSxcbiAgSGVhZGVyU2VydmljZSxcbn0gZnJvbSAnQHJ4YXAvc2VydmljZXMnO1xuaW1wb3J0IHtcbiAgQmVoYXZpb3JTdWJqZWN0LFxuICBjb21iaW5lTGF0ZXN0LFxuICBPYnNlcnZhYmxlLFxuICBza2lwLFxufSBmcm9tICdyeGpzJztcbmltcG9ydCB7XG4gIG1hcCxcbiAgc3RhcnRXaXRoLFxuICB0YXAsXG59IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFJYQVBfTE9HT19DT05GSUcgfSBmcm9tICcuLi90b2tlbnMnO1xuaW1wb3J0IHsgTG9nb0NvbmZpZyB9IGZyb20gJy4uL3R5cGVzJztcblxuQEluamVjdGFibGUoeyBwcm92aWRlZEluOiAncm9vdCcgfSlcbmV4cG9ydCBjbGFzcyBMYXlvdXRDb21wb25lbnRTZXJ2aWNlIHtcblxuICBwdWJsaWMgb3BlbmVkJDogQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+O1xuICBwdWJsaWMgbW9kZSQ6IEJlaGF2aW9yU3ViamVjdDxNYXREcmF3ZXJNb2RlPjtcbiAgcHVibGljIHBpbm5lZCQ6IEJlaGF2aW9yU3ViamVjdDxib29sZWFuPjtcbiAgcHVibGljIGZpeGVkQm90dG9tR2FwJDogT2JzZXJ2YWJsZTxudW1iZXI+O1xuICBwdWJsaWMgZml4ZWRUb3BHYXAkID0gbmV3IEJlaGF2aW9yU3ViamVjdDxudW1iZXI+KDY0KTtcbiAgcHVibGljIGxvZ286IExvZ29Db25maWc7XG4gIHB1YmxpYyBjb2xsYXBzYWJsZSQ6IEJlaGF2aW9yU3ViamVjdDxib29sZWFuPjtcblxuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgcmVhZG9ubHkgZm9vdGVyQ29tcG9uZW50U2VydmljZTogRm9vdGVyU2VydmljZSxcbiAgICBwdWJsaWMgcmVhZG9ubHkgaGVhZGVyQ29tcG9uZW50U2VydmljZTogSGVhZGVyU2VydmljZSxcbiAgICBAT3B0aW9uYWwoKSBASW5qZWN0KFJYQVBfTE9HT19DT05GSUcpIGxvZ29Db25maWc6IExvZ29Db25maWcgfCBudWxsID0gbnVsbCxcbiAgICBASW5qZWN0KENvbmZpZ1NlcnZpY2UpXG4gICAgcHJpdmF0ZSByZWFkb25seSBjb25maWc6IENvbmZpZ1NlcnZpY2UsXG4gICAgbWVkaWFNYXRjaGVyOiBNZWRpYU1hdGNoZXIsXG4gICkge1xuICAgIGNvbnN0IG1vYmlsZVF1ZXJ5ID0gbWVkaWFNYXRjaGVyLm1hdGNoTWVkaWEoJyhtYXgtd2lkdGg6IDk1OXB4KScpO1xuICAgIGNvbnN0IG1vYmlsZSA9IG1vYmlsZVF1ZXJ5Lm1hdGNoZXM7XG4gICAgY29uc3QgaW5pdGlhbENvbGxhcHNhYmxlID0gdGhpcy5jb25maWcuZ2V0KCduYXZpZ2F0aW9uLmNvbGxhcHNhYmxlJywgdHJ1ZSk7XG4gICAgY29uc3QgY29sbGFwc2FibGUgPSBpbml0aWFsQ29sbGFwc2FibGUgJiYgIW1vYmlsZTtcbiAgICBjb25zdCBwaW5uZWQgPSB0aGlzLmNvbmZpZy5nZXQoJ25hdmlnYXRpb24ucGlubmVkJywgZmFsc2UpO1xuICAgIGNvbnN0IG1vZGUgPSB0aGlzLmNvbmZpZy5nZXQoJ25hdmlnYXRpb24ubW9kZScsIHBpbm5lZCB8fCAhY29sbGFwc2FibGUgPyAnc2lkZScgOiAnb3ZlcicpO1xuICAgIGNvbnN0IG9wZW5lZCA9IHRoaXMuY29uZmlnLmdldCgnbmF2aWdhdGlvbi5vcGVuZWQnLCAoIWNvbGxhcHNhYmxlIHx8IHBpbm5lZCkgJiYgIW1vYmlsZSk7XG4gICAgdGhpcy5tb2RlJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8TWF0RHJhd2VyTW9kZT4obW9kZSk7XG4gICAgdGhpcy5vcGVuZWQkID0gbmV3IEJlaGF2aW9yU3ViamVjdDxib29sZWFuPihvcGVuZWQpO1xuICAgIHRoaXMucGlubmVkJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4ocGlubmVkKTtcbiAgICB0aGlzLmNvbGxhcHNhYmxlJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4oY29sbGFwc2FibGUpO1xuICAgIHRoaXMuZml4ZWRCb3R0b21HYXAkID0gdGhpcy5mb290ZXJDb21wb25lbnRTZXJ2aWNlLnBvcnRhbENvdW50JC5waXBlKG1hcChjb3VudCA9PiBjb3VudCAqIDY0KSk7XG4gICAgY29tYmluZUxhdGVzdChbXG4gICAgICB0aGlzLmhlYWRlckNvbXBvbmVudFNlcnZpY2UudXBkYXRlJC5waXBlKFxuICAgICAgICBzdGFydFdpdGgobnVsbCksXG4gICAgICAgIG1hcCgoKSA9PiB0aGlzLmhlYWRlckNvbXBvbmVudFNlcnZpY2UuY291bnRDb21wb25lbnQpLFxuICAgICAgKSxcbiAgICAgIE9ic2VydmVDdXJyZW50VGhlbWVEZW5zaXR5KCksXG4gICAgXSkucGlwZShcbiAgICAgIHRhcCgoWyBjb3VudCwgZGVuc2l0eSBdKSA9PiB7XG4gICAgICAgIHRoaXMuZml4ZWRUb3BHYXAkLm5leHQoY291bnQgKiAoNjQgKyBkZW5zaXR5ICogNCkpO1xuICAgICAgfSksXG4gICAgKS5zdWJzY3JpYmUoKTtcbiAgICB0aGlzLmxvZ28gPSBsb2dvQ29uZmlnID8/IHtcbiAgICAgIHNyYzogJ2Fzc2V0cy9sb2dvLnBuZycsXG4gICAgICB3aWR0aDogMTkyLFxuICAgIH07XG4gICAgbW9iaWxlUXVlcnkuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgKGV2ZW50KSA9PiB7XG4gICAgICBpZiAoaW5pdGlhbENvbGxhcHNhYmxlKSB7XG4gICAgICAgIHRoaXMuY29sbGFwc2FibGUkLm5leHQoIWV2ZW50Lm1hdGNoZXMpO1xuICAgICAgICBpZiAodGhpcy5jb2xsYXBzYWJsZSQudmFsdWUpIHtcbiAgICAgICAgICBpZiAoIXRoaXMucGlubmVkJC52YWx1ZSkge1xuICAgICAgICAgICAgdGhpcy5vcGVuZWQkLm5leHQoZmFsc2UpO1xuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0pO1xuICAgIHRoaXMucGlubmVkJC5waXBlKFxuICAgICAgc2tpcCgxKSxcbiAgICAgIHRhcChwaW5uZWQgPT4ge1xuICAgICAgICBpZiAocGlubmVkKSB7XG4gICAgICAgICAgdGhpcy5tb2RlJC5uZXh0KCdzaWRlJyk7XG4gICAgICAgICAgdGhpcy5vcGVuZWQkLm5leHQodHJ1ZSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgdGhpcy5tb2RlJC5uZXh0KCdvdmVyJyk7XG4gICAgICAgICAgdGhpcy5vcGVuZWQkLm5leHQoZmFsc2UpO1xuICAgICAgICB9XG4gICAgICB9KSxcbiAgICApLnN1YnNjcmliZSgpO1xuICB9XG5cbiAgcHVibGljIHRvZ2dsZU9wZW5kKCkge1xuICAgIHRoaXMub3BlbmVkJC5uZXh0KCF0aGlzLm9wZW5lZCQudmFsdWUpO1xuICB9XG5cbiAgcHVibGljIHRvZ2dsZVBpbm5lZCgpIHtcbiAgICB0aGlzLnBpbm5lZCQubmV4dCghdGhpcy5waW5uZWQkLnZhbHVlKTtcbiAgfVxuXG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvYW5ndWxhci9sYXlvdXQvc3JjL2xpYi9sYXlvdXQvbGF5b3V0LmNvbXBvbmVudC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNuRCxPQUFPLEVBQ0wsUUFBUSxFQUNSLE1BQU0sRUFDTixNQUFNLEVBQ04sVUFBVSxFQUNWLFFBQVEsRUFDUixNQUFNLEdBR1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRXRELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDN0MsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDN0QsT0FBTyxFQUNMLGFBQWEsRUFDYixhQUFhLEdBQ2QsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxXQUFXLENBQUM7Ozs7O0FBSTdDLE1BQU0sT0FBTyxzQkFBc0I7SUFjakMsWUFDa0Isc0JBQXFDLEVBQ3JDLHNCQUFxQyxFQUNmLGFBQWdDLElBQUksRUFFekQsTUFBcUIsRUFDdEMsWUFBMEI7UUFMViwyQkFBc0IsR0FBdEIsc0JBQXNCLENBQWU7UUFDckMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUFlO1FBR3BDLFdBQU0sR0FBTixNQUFNLENBQWU7UUFSdkIsd0JBQW1CLEdBQUcsUUFBUSxDQUFDLDBCQUEwQixFQUFFLENBQUMsQ0FBQztRQVc1RSxNQUFNLFdBQVcsR0FBRyxZQUFZLENBQUMsVUFBVSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDbEUsTUFBTSxNQUFNLEdBQUcsV0FBVyxDQUFDLE9BQU8sQ0FBQztRQUNuQyxNQUFNLGtCQUFr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QyxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs4R0E3RVUsc0JBQXNCLDRFQWlCWCxnQkFBZ0IsNkJBQzVCLGFBQWE7a0hBbEJaLHNCQUFzQixjQURULE1BQU07OzJGQUNuQixzQkFBc0I7a0JBRGxDLFVBQVU7bUJBQUMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFOzswQkFrQjdCLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsZ0JBQWdCOzswQkFDbkMsTUFBTTsyQkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTWVkaWFNYXRjaGVyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XG5pbXBvcnQge1xuICBjb21wdXRlZCxcbiAgZWZmZWN0LFxuICBJbmplY3QsXG4gIEluamVjdGFibGUsXG4gIE9wdGlvbmFsLFxuICBzaWduYWwsXG4gIFNpZ25hbCxcbiAgV3JpdGFibGVTaWduYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdG9TaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBNYXREcmF3ZXJNb2RlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2lkZW5hdic7XG5pbXBvcnQgeyBDb25maWdTZXJ2aWNlIH0gZnJvbSAnQHJ4YXAvY29uZmlnJztcbmltcG9ydCB7IE9ic2VydmVDdXJyZW50VGhlbWVEZW5zaXR5IH0gZnJvbSAnQHJ4YXAvbmd4LXRoZW1lJztcbmltcG9ydCB7XG4gIEZvb3RlclNlcnZpY2UsXG4gIEhlYWRlclNlcnZpY2UsXG59IGZyb20gJ0ByeGFwL3NlcnZpY2VzJztcbmltcG9ydCB7IFJYQVBfTE9HT19DT05GSUcgfSBmcm9tICcuLi90b2tlbnMnO1xuaW1wb3J0IHsgTG9nb0NvbmZpZyB9IGZyb20gJy4uL3R5cGVzJztcblxuQEluamVjdGFibGUoeyBwcm92aWRlZEluOiAncm9vdCcgfSlcbmV4cG9ydCBjbGFzcyBMYXlvdXRDb21wb25lbnRTZXJ2aWNlIHtcblxuICBwdWJsaWMgbG9nbzogTG9nb0NvbmZpZztcblxuICBwdWJsaWMgcmVhZG9ubHkgb3BlbmVkOiBXcml0YWJsZVNpZ25hbDxib29sZWFuPjtcbiAgcHVibGljIHJlYWRvbmx5IG1vZGU6IFdyaXRhYmxlU2lnbmFsPE1hdERyYXdlck1vZGU+O1xuICBwdWJsaWMgcmVhZG9ubHkgcGlubmVkOiBXcml0YWJsZVNpZ25hbDxib29sZWFuPjtcbiAgcHVibGljIHJlYWRvbmx5IGNvbGxhcHNhYmxlOiBXcml0YWJsZVNpZ25hbDxib29sZWFuPjtcbiAgcHVibGljIHJlYWRvbmx5IGZpeGVkQm90dG9tR2FwOiBTaWduYWw8bnVtYmVyPjtcbiAgcHVibGljIHJlYWRvbmx5IGZpeGVkVG9wR2FwOiBTaWduYWw8bnVtYmVyPjtcblxuICBwcml2YXRlIHJlYWRvbmx5IGN1cnJlbnRUaGVtZURlbnNpdHkgPSB0b1NpZ25hbChPYnNlcnZlQ3VycmVudFRoZW1lRGVuc2l0eSgpKTtcblxuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgcmVhZG9ubHkgZm9vdGVyQ29tcG9uZW50U2VydmljZTogRm9vdGVyU2VydmljZSxcbiAgICBwdWJsaWMgcmVhZG9ubHkgaGVhZGVyQ29tcG9uZW50U2VydmljZTogSGVhZGVyU2VydmljZSxcbiAgICBAT3B0aW9uYWwoKSBASW5qZWN0KFJYQVBfTE9HT19DT05GSUcpIGxvZ29Db25maWc6IExvZ29Db25maWcgfCBudWxsID0gbnVsbCxcbiAgICBASW5qZWN0KENvbmZpZ1NlcnZpY2UpXG4gICAgcHJpdmF0ZSByZWFkb25seSBjb25maWc6IENvbmZpZ1NlcnZpY2UsXG4gICAgbWVkaWFNYXRjaGVyOiBNZWRpYU1hdGNoZXIsXG4gICkge1xuICAgIGNvbnN0IG1vYmlsZVF1ZXJ5ID0gbWVkaWFNYXRjaGVyLm1hdGNoTWVkaWEoJyhtYXgtd2lkdGg6IDk1OXB4KScpO1xuICAgIGNvbnN0IG1vYmlsZSA9IG1vYmlsZVF1ZXJ5Lm1hdGNoZXM7XG4gICAgY29uc3QgaW5pdGlhbENvbGxhcHNhYmxlID0gdGhpcy5jb25maWcuZ2V0KCduYXZpZ2F0aW9uLmNvbGxhcHNhYmxlJywgdHJ1ZSk7XG4gICAgY29uc3QgY29sbGFwc2FibGUgPSBpbml0aWFsQ29sbGFwc2FibGUgJiYgIW1vYmlsZTtcbiAgICBjb25zdCBwaW5uZWQgPSB0aGlzLmNvbmZpZy5nZXQoJ25hdmlnYXRpb24ucGlubmVkJywgZmFsc2UpO1xuICAgIGNvbnN0IG1vZGUgPSB0aGlzLmNvbmZpZy5nZXQoJ25hdmlnYXRpb24ubW9kZScsIHBpbm5lZCB8fCAhY29sbGFwc2FibGUgPyAnc2lkZScgOiAnb3ZlcicpO1xuICAgIGNvbnN0IG9wZW5lZCA9IHRoaXMuY29uZmlnLmdldCgnbmF2aWdhdGlvbi5vcGVuZWQnLCAoIWNvbGxhcHNhYmxlIHx8IHBpbm5lZCkgJiYgIW1vYmlsZSk7XG5cbiAgICB0aGlzLm9wZW5lZCA9IHNpZ25hbChvcGVuZWQpO1xuICAgIHRoaXMubW9kZSA9IHNpZ25hbChtb2RlKTtcbiAgICB0aGlzLnBpbm5lZCA9IHNpZ25hbChwaW5uZWQpO1xuICAgIHRoaXMuY29sbGFwc2FibGUgPSBzaWduYWwoY29sbGFwc2FibGUpO1xuXG4gICAgdGhpcy5maXhlZEJvdHRvbUdhcCA9IGNvbXB1dGVkKCgpID0+IHRoaXMuZm9vdGVyQ29tcG9uZW50U2VydmljZS5wb3J0YWxDb3VudCgpICogKFxuICAgICAgNjQgKyAoXG4gICAgICAgICAgIHRoaXMuY3VycmVudFRoZW1lRGVuc2l0eSgpID8/IDBcbiAgICAgICAgICkgKiA0XG4gICAgKSk7XG4gICAgdGhpcy5maXhlZFRvcEdhcCA9IGNvbXB1dGVkKCgpID0+IHRoaXMuaGVhZGVyQ29tcG9uZW50U2VydmljZS5jb21wb25lbnRDb3VudCgpICogKFxuICAgICAgNjQgKyAoXG4gICAgICAgICAgIHRoaXMuY3VycmVudFRoZW1lRGVuc2l0eSgpID8/IDBcbiAgICAgICAgICkgKiA0XG4gICAgKSk7XG5cbiAgICB0aGlzLmxvZ28gPSBsb2dvQ29uZmlnID8/IHtcbiAgICAgIHNyYzogJ2Fzc2V0cy9sb2dvLnBuZycsXG4gICAgICB3aWR0aDogMTkyLFxuICAgIH07XG4gICAgbW9iaWxlUXVlcnkuYWRkRXZlbnRMaXN0ZW5lcignY2hhbmdlJywgKGV2ZW50KSA9PiB7XG4gICAgICBpZiAoaW5pdGlhbENvbGxhcHNhYmxlKSB7XG4gICAgICAgIHRoaXMuY29sbGFwc2FibGUuc2V0KCFldmVudC5tYXRjaGVzKTtcbiAgICAgICAgaWYgKHRoaXMuY29sbGFwc2FibGUoKSkge1xuICAgICAgICAgIGlmICghdGhpcy5waW5uZWQoKSkge1xuICAgICAgICAgICAgdGhpcy5vcGVuZWQuc2V0KGZhbHNlKTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9KTtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMucGlubmVkKCkpIHtcbiAgICAgICAgdGhpcy5tb2RlLnNldCgnc2lkZScpO1xuICAgICAgICB0aGlzLm9wZW5lZC5zZXQodHJ1ZSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLm1vZGUuc2V0KCdvdmVyJyk7XG4gICAgICAgIHRoaXMub3BlbmVkLnNldChmYWxzZSk7XG4gICAgICB9XG4gICAgfSwgeyBhbGxvd1NpZ25hbFdyaXRlczogdHJ1ZSB9KTtcbiAgfVxuXG4gIHB1YmxpYyB0b2dnbGVPcGVuZWQoKSB7XG4gICAgdGhpcy5vcGVuZWQuc2V0KCF0aGlzLm9wZW5lZCgpKTtcbiAgfVxuXG4gIHB1YmxpYyB0b2dnbGVQaW5uZWQoKSB7XG4gICAgdGhpcy5waW5uZWQuc2V0KCF0aGlzLnBpbm5lZCgpKTtcbiAgfVxuXG59XG4iXX0=

package/fesm2022/rxap-layout.mjs

@@ -1,5 +1,5 @@
 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 { HeaderService, ResetService, VersionService, WindowContainerSidenavService, FooterService } from '@rxap/services';
 import * as i3 from '@angular/cdk/portal';
@@ -8,7 +8,6 @@ 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,19 +25,20 @@ 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 } 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';
@@ -46,6 +46,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i3$3 from '@rxap/ngx-changelog';
 import * as i1$3 from '@rxap/ngx-localize';
 import * as i1$5 from '@rxap/ngx-user';
+import { UserSettingsThemeService, IsThemeDensity } 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';
@@ -73,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 {
@@ -85,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);
@@ -93,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' }); }
@@ -317,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$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)=\"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.ɵ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" }]
+            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,
@@ -384,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', {
@@ -423,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 }); }
@@ -899,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,
@@ -932,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]