@flusys/ng-layout 1.0.0-beta → 1.0.0-rc

package/fesm2022/flusys-ng-layout.mjs

@@ -1,8 +1,7 @@
-import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, ChangeDetectionStrategy, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2, ViewChild } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, NavigationEnd } from '@angular/router';
@@ -10,12 +9,11 @@ import { updatePreset, updateSurfacePalette, $t, definePreset } from '@primeuix/
 import Aura from '@primeuix/themes/aura';
 import Lara from '@primeuix/themes/lara';
 import Nora from '@primeuix/themes/nora';
-import { PrimeNG } from 'primeng/config';
-import * as i3 from 'primeng/selectbutton';
+import * as i2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
 import * as i2$2 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, PlatformService, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
 import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
@@ -235,17 +233,25 @@ class LayoutService {
         staticMenuMobileActive: false,
         menuHoverActive: false,
     };
-    // Signals
-    layoutConfig = signal(this.initialConfig, ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
-    layoutState = signal(this.defaultState, ...(ngDevMode ? [{ debugName: "layoutState" }] : []));
-    transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "transitionComplete" }] : []));
-    // User Profile Signals
-    userProfile = signal(null, ...(ngDevMode ? [{ debugName: "userProfile" }] : []));
-    companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "companyProfile" }] : []));
-    appName = signal(this.appConfig?.appName ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "appName" }] : []));
-    // Author/Brand Signals
-    authorName = signal(this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name, ...(ngDevMode ? [{ debugName: "authorName" }] : []));
-    authorUrl = signal(this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url, ...(ngDevMode ? [{ debugName: "authorUrl" }] : []));
+    // Private writable signals with public readonly accessors
+    _layoutConfig = signal(this.initialConfig, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
+    _layoutState = signal(this.defaultState, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
+    _transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : []));
+    layoutConfig = this._layoutConfig.asReadonly();
+    layoutState = this._layoutState.asReadonly();
+    transitionComplete = this._transitionComplete.asReadonly();
+    // User Profile Signals (private writable, public readonly)
+    _userProfile = signal(null, ...(ngDevMode ? [{ debugName: "_userProfile" }] : []));
+    _companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "_companyProfile" }] : []));
+    _appName = signal(this.appConfig?.appName ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "_appName" }] : []));
+    userProfile = this._userProfile.asReadonly();
+    companyProfile = this._companyProfile.asReadonly();
+    appName = this._appName.asReadonly();
+    // Author/Brand Signals (private writable, public readonly)
+    _authorName = signal(this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name, ...(ngDevMode ? [{ debugName: "_authorName" }] : []));
+    _authorUrl = signal(this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url, ...(ngDevMode ? [{ debugName: "_authorUrl" }] : []));
+    authorName = this._authorName.asReadonly();
+    authorUrl = this._authorUrl.asReadonly();
     // App Launcher Signals
     _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
     /**
@@ -271,25 +277,25 @@ class LayoutService {
         return filterMenuByPermissions(raw, permission);
     }, ...(ngDevMode ? [{ debugName: "menu" }] : []));
     // Computed signals - Layout
-    isSidebarActive = computed(() => this.layoutState().overlayMenuActive ||
-        this.layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
-    isDarkTheme = computed(() => this.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
-    getPrimary = computed(() => this.layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
-    getSurface = computed(() => this.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
-    isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
+    isSidebarActive = computed(() => this._layoutState().overlayMenuActive ||
+        this._layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
+    isDarkTheme = computed(() => this._layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    getPrimary = computed(() => this._layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
+    getSurface = computed(() => this._layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
+    isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
     // Computed signals - User Profile
-    userName = computed(() => this.userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
-    userEmail = computed(() => this.userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    userProfilePictureUrl = computed(() => this.userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
+    userName = computed(() => this._userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
+    userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
     companyName = computed(() => {
         // If company feature is disabled, always show app name
         if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig)) {
-            return this.appName();
+            return this._appName();
         }
-        return this.companyProfile()?.name ?? this.appName();
+        return this._companyProfile()?.name ?? this._appName();
     }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
-    companyLogoUrl = computed(() => this.companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
-    isAuthenticated = computed(() => !!this.userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
+    companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
+    isAuthenticated = computed(() => !!this._userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
     // Computed signals - App Launcher
     hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
     // RxJS Subjects for event communication
@@ -304,13 +310,13 @@ class LayoutService {
     initialized = false;
     constructor() {
         effect(() => {
-            const config = this.layoutConfig();
+            const config = this._layoutConfig();
             if (config) {
                 this.onConfigUpdate();
             }
         });
         effect(() => {
-            const config = this.layoutConfig();
+            const config = this._layoutConfig();
             if (!this.initialized || !config) {
                 this.initialized = true;
                 return;
@@ -319,29 +325,31 @@ class LayoutService {
         });
         // Auto-save configuration changes to localStorage
         effect(() => {
-            const config = this.layoutConfig();
+            const config = this._layoutConfig();
             if (config && this.initialized) {
                 this.persistence.save(config);
             }
         });
     }
     handleDarkModeTransition(config) {
-        if (this.document.startViewTransition) {
-            this.startViewTransition(config);
+        const doc = this.document;
+        // Check for View Transitions API support (not all browsers support it)
+        if ('startViewTransition' in doc && typeof doc.startViewTransition === 'function') {
+            this.startViewTransition(config, doc);
         }
         else {
             this.toggleDarkMode(config);
             this.onTransitionEnd();
         }
     }
-    startViewTransition(config) {
-        const transition = this.document.startViewTransition(() => {
+    startViewTransition(config, doc) {
+        const transition = doc.startViewTransition(() => {
             this.toggleDarkMode(config);
         });
         transition.ready.then(() => this.onTransitionEnd()).catch(() => { });
     }
     toggleDarkMode(config) {
-        const _config = config || this.layoutConfig();
+        const _config = config || this._layoutConfig();
         if (_config.darkTheme) {
             this.document.documentElement.classList.add('app-dark');
         }
@@ -350,31 +358,31 @@ class LayoutService {
         }
     }
     onTransitionEnd() {
-        this.transitionComplete.set(true);
-        setTimeout(() => this.transitionComplete.set(false));
+        this._transitionComplete.set(true);
+        setTimeout(() => this._transitionComplete.set(false));
     }
     onMenuToggle() {
         if (this.isOverlay()) {
-            this.layoutState.update((prev) => ({
+            this._layoutState.update((prev) => ({
                 ...prev,
-                overlayMenuActive: !this.layoutState().overlayMenuActive,
+                overlayMenuActive: !this._layoutState().overlayMenuActive,
             }));
-            if (this.layoutState().overlayMenuActive) {
+            if (this._layoutState().overlayMenuActive) {
                 this.overlayOpen.next();
             }
         }
         if (this.isDesktop()) {
-            this.layoutState.update((prev) => ({
+            this._layoutState.update((prev) => ({
                 ...prev,
-                staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive,
+                staticMenuDesktopInactive: !this._layoutState().staticMenuDesktopInactive,
             }));
         }
         else {
-            this.layoutState.update((prev) => ({
+            this._layoutState.update((prev) => ({
                 ...prev,
-                staticMenuMobileActive: !this.layoutState().staticMenuMobileActive,
+                staticMenuMobileActive: !this._layoutState().staticMenuMobileActive,
             }));
-            if (this.layoutState().staticMenuMobileActive) {
+            if (this._layoutState().staticMenuMobileActive) {
                 this.overlayOpen.next();
             }
         }
@@ -386,7 +394,7 @@ class LayoutService {
         return !this.isDesktop();
     }
     onConfigUpdate() {
-        this.configUpdate.next(this.layoutConfig());
+        this.configUpdate.next(this._layoutConfig());
     }
     onMenuStateChange(event) {
         this.menuSource.next(event);
@@ -395,6 +403,23 @@ class LayoutService {
         this.resetSource.next(true);
     }
     // ==========================================================================
+    // Layout Config Methods
+    // ==========================================================================
+    /**
+     * Update layout configuration.
+     * Called by configurator component.
+     */
+    updateLayoutConfig(config) {
+        this._layoutConfig.update((prev) => ({ ...prev, ...config }));
+    }
+    /**
+     * Update layout state.
+     * Called internally and by layout components.
+     */
+    updateLayoutState(state) {
+        this._layoutState.update((prev) => ({ ...prev, ...state }));
+    }
+    // ==========================================================================
     // User Profile Methods
     // ==========================================================================
     /**
@@ -402,14 +427,14 @@ class LayoutService {
      * Called by auth integration to sync user data.
      */
     setUserProfile(profile) {
-        this.userProfile.set(profile);
+        this._userProfile.set(profile);
     }
     /**
      * Set the current company profile for display in layout.
      * Called by auth integration to sync company data.
      */
     setCompanyProfile(profile) {
-        this.companyProfile.set(profile);
+        this._companyProfile.set(profile);
     }
     // ==========================================================================
     // Menu Methods
@@ -464,19 +489,19 @@ const presets = {
 };
 class AppConfigurator {
     router = inject(Router);
-    primeng = inject(PrimeNG);
     layoutService = inject(LayoutService);
-    platformService = inject(PlatformService);
     presets = Object.keys(presets);
     showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
     menuModeOptions = [
         { label: 'Static', value: 'static' },
         { label: 'Overlay', value: 'overlay' },
     ];
-    ngOnInit() {
-        if (!this.platformService.isServer) {
-            this.onPresetChange(this.layoutService.layoutConfig().preset);
-        }
+    constructor() {
+        // Use afterNextRender for browser-only initialization (replaces isServer check)
+        afterNextRender(() => {
+            const preset = this.layoutService.layoutConfig().preset ?? 'Aura';
+            this.onPresetChange(preset);
+        });
     }
     surfaces = [
         {
@@ -782,16 +807,10 @@ class AppConfigurator {
     }
     updateColors(event, type, color) {
         if (type === 'primary') {
-            this.layoutService.layoutConfig.update((state) => ({
-                ...state,
-                primary: color.name,
-            }));
+            this.layoutService.updateLayoutConfig({ primary: color.name });
         }
         else if (type === 'surface') {
-            this.layoutService.layoutConfig.update((state) => ({
-                ...state,
-                surface: color.name,
-            }));
+            this.layoutService.updateLayoutConfig({ surface: color.name });
         }
         this.applyTheme(type, color);
         event.stopPropagation();
@@ -805,12 +824,12 @@ class AppConfigurator {
         }
     }
     onPresetChange(event) {
-        this.layoutService.layoutConfig.update((state) => ({
-            ...state,
-            preset: event,
-        }));
+        this.layoutService.updateLayoutConfig({ preset: event });
         const preset = presets[event];
-        const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
+        // Use selected surface or default (slate for light, zinc for dark)
+        const selectedSurface = this.selectedSurfaceColor();
+        const defaultSurface = this.layoutService.layoutConfig().darkTheme ? 'zinc' : 'slate';
+        const surfacePalette = this.surfaces.find((s) => s.name === (selectedSurface || defaultSurface))?.palette;
         $t()
             .preset(preset)
             .preset(this.getPresetExt())
@@ -818,13 +837,10 @@ class AppConfigurator {
             .use({ useDefaultOptions: true });
     }
     onMenuModeChange(event) {
-        this.layoutService.layoutConfig.update((prev) => ({
-            ...prev,
-            menuMode: event,
-        }));
+        this.layoutService.updateLayoutConfig({ menuMode: event });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
     <div class="flex flex-col gap-4">
       <div>
         <span class="text-sm text-muted-color font-semibold">Primary</span>
@@ -891,14 +907,15 @@ class AppConfigurator {
         </div>
       }
     </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-configurator',
                     standalone: true,
-                    imports: [CommonModule, FormsModule, SelectButtonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, FormsModule, SelectButtonModule],
                     template: `
     <div class="flex flex-col gap-4">
       <div>
@@ -968,36 +985,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
     </div>
     `,
                     host: {
-                        class: 'hidden absolute top-[3.25rem] right-0 w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]',
+                        class: 'hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]',
                         style: 'background-color: var(--surface-overlay)',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class AppFloatingConfigurator {
-    LayoutService = inject(LayoutService);
-    isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    layoutService = inject(LayoutService);
+    isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
     toggleDarkMode() {
-        this.LayoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
+        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
+        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
-        <div class="fixed flex flex-col md:flex-row gap-4 top-8 right-0 md:right-8 z-99">
+        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
             <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
             <div class="relative">
                 <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
                 <app-configurator />
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-floating-configurator',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonModule, StyleClassModule, AppConfigurator],
                     template: `
-        <div class="fixed flex flex-col md:flex-row gap-4 top-8 right-0 md:right-8 z-99">
+        <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
             <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
             <div class="relative">
                 <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
@@ -1036,6 +1056,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
 const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
 
+/**
+ * View Transitions API type definitions
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+ */
+
 /** Company/branch switcher displayed in top bar */
 class AppCompanyBranchSelector {
     destroyRef = inject(DestroyRef);
@@ -1044,26 +1069,34 @@ class AppCompanyBranchSelector {
     messageService = inject(MessageService);
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
-    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
             .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
-                this.isActive.set(false);
+                this._isActive.set(false);
             }
         });
     }
     currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? 'No Company', ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
     currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...(ngDevMode ? [{ debugName: "currentBranchName" }] : []));
-    companies = signal([], ...(ngDevMode ? [{ debugName: "companies" }] : []));
-    branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
-    selectedCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : []));
-    selectedBranchId = signal(null, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
-    isLoadingCompanies = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingCompanies" }] : []));
-    isLoadingBranches = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingBranches" }] : []));
-    isSwitching = signal(false, ...(ngDevMode ? [{ debugName: "isSwitching" }] : []));
+    _companies = signal([], ...(ngDevMode ? [{ debugName: "_companies" }] : []));
+    companies = this._companies.asReadonly();
+    _branches = signal([], ...(ngDevMode ? [{ debugName: "_branches" }] : []));
+    branches = this._branches.asReadonly();
+    _selectedCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedCompanyId" }] : []));
+    selectedCompanyId = this._selectedCompanyId.asReadonly();
+    _selectedBranchId = signal(null, ...(ngDevMode ? [{ debugName: "_selectedBranchId" }] : []));
+    selectedBranchId = this._selectedBranchId.asReadonly();
+    _isLoadingCompanies = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingCompanies" }] : []));
+    isLoadingCompanies = this._isLoadingCompanies.asReadonly();
+    _isLoadingBranches = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingBranches" }] : []));
+    isLoadingBranches = this._isLoadingBranches.asReadonly();
+    _isSwitching = signal(false, ...(ngDevMode ? [{ debugName: "_isSwitching" }] : []));
+    isSwitching = this._isSwitching.asReadonly();
     canSwitch = computed(() => {
         const selectedCompany = this.selectedCompanyId();
         if (!selectedCompany)
@@ -1074,7 +1107,7 @@ class AppCompanyBranchSelector {
         return selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId;
     }, ...(ngDevMode ? [{ debugName: "canSwitch" }] : []));
     onPanelToggle() {
-        this.isActive.update((v) => !v);
+        this._isActive.update((v) => !v);
         if (this.isActive() && this.companies().length === 0) {
             this.loadCompanies();
         }
@@ -1082,61 +1115,53 @@ class AppCompanyBranchSelector {
     loadCompanies() {
         if (!this.authApi)
             return;
-        this.isLoadingCompanies.set(true);
+        this._isLoadingCompanies.set(true);
         this.authApi
             .getUserCompanies()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (companies) => {
-                this.companies.set(companies);
-                this.isLoadingCompanies.set(false);
+                this._companies.set(companies);
+                this._isLoadingCompanies.set(false);
             },
-            error: (err) => {
-                this.isLoadingCompanies.set(false);
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to load companies',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isLoadingCompanies.set(false);
             },
         });
     }
     onCompanyChange(companyId) {
-        this.selectedCompanyId.set(companyId);
+        this._selectedCompanyId.set(companyId);
         if (!companyId) {
-            this.branches.set([]);
-            this.selectedBranchId.set(null);
+            this._branches.set([]);
+            this._selectedBranchId.set(null);
             return;
         }
         this.loadBranches(companyId);
     }
     onBranchChange(branchId) {
-        this.selectedBranchId.set(branchId);
+        this._selectedBranchId.set(branchId);
     }
     loadBranches(companyId) {
         if (!this.authApi)
             return;
-        this.isLoadingBranches.set(true);
-        this.selectedBranchId.set(null);
+        this._isLoadingBranches.set(true);
+        this._selectedBranchId.set(null);
         this.authApi
             .getCompanyBranches(companyId)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (branches) => {
-                this.branches.set(branches);
-                this.isLoadingBranches.set(false);
+                this._branches.set(branches);
+                this._isLoadingBranches.set(false);
                 // Auto-select if only one branch available
                 if (branches.length === 1) {
-                    this.selectedBranchId.set(branches[0].id);
+                    this._selectedBranchId.set(branches[0].id);
                 }
             },
-            error: (err) => {
-                this.isLoadingBranches.set(false);
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to load branches',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isLoadingBranches.set(false);
             },
         });
     }
@@ -1153,19 +1178,15 @@ class AppCompanyBranchSelector {
             });
             return;
         }
-        this.isSwitching.set(true);
+        this._isSwitching.set(true);
         this.authApi
             .switchCompany(selectedCompany, selectedBranch || '')
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: () => { },
-            error: (err) => {
-                this.isSwitching.set(false);
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to switch company',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
+                this._isSwitching.set(false);
             },
         });
     }
@@ -1190,10 +1211,10 @@ class AppCompanyBranchSelector {
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-4 min-w-[280px]">
+      <div class="flex flex-col gap-4">
         <span class="text-sm text-muted-color font-semibold"
           >Switch Company & Branch</span
         >
@@ -1243,13 +1264,14 @@ class AppCompanyBranchSelector {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule],
                     host: { class: 'relative' },
                     template: `
@@ -1272,10 +1294,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       }
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[300px] max-w-[360px]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-4 min-w-[280px]">
+      <div class="flex flex-col gap-4">
         <span class="text-sm text-muted-color font-semibold"
           >Switch Company & Branch</span
         >
@@ -1334,19 +1356,20 @@ class AppLauncher {
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
     layoutService = inject(LayoutService);
-    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this._isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
-                this.isActive.set(false);
+                this._isActive.set(false);
             }
         });
     }
     togglePanel() {
-        this.isActive.update((v) => !v);
+        this._isActive.update((v) => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
@@ -1366,15 +1389,15 @@ class AppLauncher {
       <span>Apps</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-2 min-w-[240px]">
+      <div class="flex flex-col gap-2">
         <span class="text-sm text-muted-color font-semibold">Applications</span>
-        <div class="grid grid-cols-3 gap-2">
+        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center w-20 p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
@@ -1389,7 +1412,7 @@ class AppLauncher {
                 />
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200"
+                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
                 >{{ app.name }}</span
               >
             </a>
@@ -1397,13 +1420,14 @@ class AppLauncher {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLauncher, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-launcher',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [StyleClassModule, IconComponent],
                     host: { class: 'relative' },
                     template: `
@@ -1423,15 +1447,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <span>Apps</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-2 min-w-[240px]">
+      <div class="flex flex-col gap-2">
         <span class="text-sm text-muted-color font-semibold">Applications</span>
-        <div class="grid grid-cols-3 gap-2">
+        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
           @for (app of layoutService.apps(); track app.id) {
             <a
-              class="group flex flex-col items-center w-20 p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              class="group flex flex-col items-center p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
               [href]="app.url"
               target="_blank"
               rel="noopener noreferrer"
@@ -1446,7 +1470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 />
               </div>
               <span
-                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200"
+                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200 truncate max-w-full"
                 >{{ app.name }}</span
               >
             </a>
@@ -1462,26 +1486,28 @@ class AppProfile {
     destroyRef = inject(DestroyRef);
     authState = inject(LAYOUT_AUTH_STATE, { optional: true });
     authApi = inject(LAYOUT_AUTH_API, { optional: true });
+    layoutService = inject(LayoutService);
     messageService = inject(MessageService);
     document = inject(DOCUMENT$1);
     elementRef = inject(ElementRef);
-    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    isActive = this._isActive.asReadonly();
     constructor() {
         fromEvent(this.document, 'click')
             .pipe(takeUntilDestroyed(this.destroyRef), filter(() => this.isActive()))
             .subscribe((event) => {
             const target = event.target;
             if (!this.elementRef.nativeElement.contains(target)) {
-                this.isActive.set(false);
+                this._isActive.set(false);
             }
         });
     }
     togglePanel() {
-        this.isActive.update((v) => !v);
+        this._isActive.update((v) => !v);
     }
     userName = computed(() => this.authState?.loginUserData()?.name ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    profilePicture = computed(() => this.authState?.loginUserData()?.profilePicture?.url ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
+    profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
     logout() {
         if (!this.authApi)
             return;
@@ -1497,12 +1523,8 @@ class AppProfile {
                 });
                 this.authApi?.navigateLogin(false);
             },
-            error: (err) => {
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: err?.message || 'Failed to logout',
-                });
+            error: () => {
+                // Error toast handled by global interceptor
             },
         });
     }
@@ -1544,10 +1566,10 @@ class AppProfile {
       <span>Profile</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-3 min-w-[240px]">
+      <div class="flex flex-col gap-3">
         <!-- User Info -->
         <a
           class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline hover:bg-emphasis transition-all duration-200"
@@ -1566,9 +1588,9 @@ class AppProfile {
               <i class="pi pi-user text-xl text-primary-contrast"></i>
             </div>
           }
-          <div class="flex flex-col">
-            <span class="font-semibold text-color">{{ userName() }}</span>
-            <span class="text-sm text-muted-color">{{ userEmail() }}</span>
+          <div class="flex flex-col min-w-0 flex-1">
+            <span class="font-semibold text-color truncate">{{ userName() }}</span>
+            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
           </div>
         </a>
 
@@ -1594,13 +1616,14 @@ class AppProfile {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-profile',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule],
                     host: { class: 'relative' },
                     template: `
@@ -1620,10 +1643,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <span>Profile</span>
     </button>
     <div
-      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] w-[calc(100vw-2rem)] sm:w-auto sm:min-w-[280px] max-w-[320px]"
       style="background-color: var(--surface-overlay)"
     >
-      <div class="flex flex-col gap-3 min-w-[240px]">
+      <div class="flex flex-col gap-3">
         <!-- User Info -->
         <a
           class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline hover:bg-emphasis transition-all duration-200"
@@ -1642,9 +1665,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               <i class="pi pi-user text-xl text-primary-contrast"></i>
             </div>
           }
-          <div class="flex flex-col">
-            <span class="font-semibold text-color">{{ userName() }}</span>
-            <span class="text-sm text-muted-color">{{ userEmail() }}</span>
+          <div class="flex flex-col min-w-0 flex-1">
+            <span class="font-semibold text-color truncate">{{ userName() }}</span>
+            <span class="text-sm text-muted-color truncate">{{ userEmail() }}</span>
           </div>
         </a>
 
@@ -1688,16 +1711,13 @@ class AppTopbar {
             this.handleOutsideClick(event);
         });
     }
-    // Use layoutService.companyName which falls back to appName
     companyName = this.layoutService.companyName;
     enableCompanyFeature = computed(() => {
         return isCompanyFeatureEnabled(this.appConfig);
     }, ...(ngDevMode ? [{ debugName: "enableCompanyFeature" }] : []));
     toggleDarkMode() {
-        this.layoutService.layoutConfig.update((state) => ({
-            ...state,
-            darkTheme: !state.darkTheme,
-        }));
+        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
+        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
     togglePanel(panel) {
         this.activePanel.update((current) => (current === panel ? null : panel));
@@ -1731,11 +1751,9 @@ class AppTopbar {
           (click)="toggleDarkMode()"
         >
           <i
-            [ngClass]="{
-              'pi ': true,
-              'pi-moon': layoutService.isDarkTheme(),
-              'pi-sun': !layoutService.isDarkTheme(),
-            }"
+            class="pi"
+            [class.pi-moon]="layoutService.isDarkTheme()"
+            [class.pi-sun]="!layoutService.isDarkTheme()"
           ></i>
         </button>
         <div class="relative" #configContainer>
@@ -1780,16 +1798,16 @@ class AppTopbar {
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }] });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-topbar',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         RouterModule,
-                        CommonModule,
                         StyleClassModule,
                         AppConfigurator,
                         AppProfile,
@@ -1817,11 +1835,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           (click)="toggleDarkMode()"
         >
           <i
-            [ngClass]="{
-              'pi ': true,
-              'pi-moon': layoutService.isDarkTheme(),
-              'pi-sun': !layoutService.isDarkTheme(),
-            }"
+            class="pi"
+            [class.pi-moon]="layoutService.isDarkTheme()"
+            [class.pi-sun]="!layoutService.isDarkTheme()"
           ></i>
         </button>
         <div class="relative" #configContainer>
@@ -1878,10 +1894,10 @@ class AppMenuitem {
     // Injected services
     router = inject(Router);
     layoutService = inject(LayoutService);
-    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
     destroyRef = inject(DestroyRef);
-    // State signals
-    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    // State signals - private writable + public readonly pattern
+    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+    active = this._active.asReadonly();
     // Computed signals
     key = computed(() => {
         const parent = this.parentKey();
@@ -1910,19 +1926,19 @@ class AppMenuitem {
             Promise.resolve(null).then(() => {
                 const currentKey = this.key();
                 if (value.routeEvent) {
-                    this.active.set(value.key === currentKey ||
+                    this._active.set(value.key === currentKey ||
                         value.key?.startsWith(currentKey + '-'));
                 }
                 else if (value.key !== currentKey &&
                     !value.key?.startsWith(currentKey + '-')) {
-                    this.active.set(false);
+                    this._active.set(false);
                 }
             });
         });
         // Subscribe to menu reset
         this.layoutService.resetSource$
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.active.set(false));
+            .subscribe(() => this._active.set(false));
         // Subscribe to navigation events
         this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
@@ -1961,7 +1977,7 @@ class AppMenuitem {
     }
     itemClick() {
         if (this.item().children) {
-            this.active.update((prev) => !prev);
+            this._active.update((prev) => !prev);
         }
         this.layoutService.onMenuStateChange({ key: this.key() });
     }
@@ -2022,11 +2038,11 @@ class AppMenuitem {
         </ul>
       }
     </ng-container>
-  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }] });
+  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenuitem, decorators: [{
             type: Component,
-            args: [{ selector: '[app-menuitem]', standalone: true, imports: [IconComponent, RouterModule, RippleModule], template: `
+            args: [{ selector: '[app-menuitem]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], template: `
     <ng-container>
       @if (item().children?.length) {
         <a (click)="itemClick()" tabindex="0" pRipple>
@@ -2112,13 +2128,14 @@ class AppMenu {
         <li app-menuitem [item]="item" [index]="i"></li>
       }
     </ul>
-  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-menu',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenuitem, RouterModule],
                     template: `<div class="layout-menu">
     <ul>
@@ -2140,13 +2157,14 @@ class AppSidebar {
     <div class="layout-sidebar">
       <app-menu />
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppSidebar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sidebar',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenu],
                     template: `
     <div class="layout-sidebar">
@@ -2163,8 +2181,6 @@ class AppLayout {
     renderer = inject(Renderer2);
     router = inject(Router);
     menuOutsideClickListener = null;
-    appSidebar;
-    appTopBar;
     constructor() {
         this.layoutService.overlayOpen$
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -2194,12 +2210,11 @@ class AppLayout {
             topbarEl?.contains(eventTarget));
     }
     hideMenu() {
-        this.layoutService.layoutState.update((prev) => ({
-            ...prev,
+        this.layoutService.updateLayoutState({
             overlayMenuActive: false,
             staticMenuMobileActive: false,
             menuHoverActive: false,
-        }));
+        });
         if (this.menuOutsideClickListener) {
             this.menuOutsideClickListener();
             this.menuOutsideClickListener = null;
@@ -2212,7 +2227,7 @@ class AppLayout {
     unblockBodyScroll() {
         this.document.body.classList.remove('blocked-scroll');
     }
-    get containerClass() {
+    containerClass = computed(() => {
         const config = this.layoutService.layoutConfig();
         const state = this.layoutService.layoutState();
         return {
@@ -2222,10 +2237,10 @@ class AppLayout {
             'layout-overlay-active': state.overlayMenuActive,
             'layout-mobile-active': state.staticMenuMobileActive,
         };
-    }
+    }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppLayout, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebar, descendants: true }, { propertyName: "appTopBar", first: true, predicate: AppTopbar, descendants: true }], ngImport: i0, template: `
-    <div class="layout-wrapper" [ngClass]="containerClass">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+    <div class="layout-wrapper" [ngClass]="containerClass()">
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2236,16 +2251,17 @@ class AppLayout {
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout',
                     standalone: true,
-                    imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppFooter],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
-    <div class="layout-wrapper" [ngClass]="containerClass">
+    <div class="layout-wrapper" [ngClass]="containerClass()">
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
       <div class="layout-main-container">
@@ -2258,13 +2274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { appSidebar: [{
-                type: ViewChild,
-                args: [AppSidebar]
-            }], appTopBar: [{
-                type: ViewChild,
-                args: [AppTopbar]
-            }] } });
+        }], ctorParameters: () => [] });
 
 const GreenTheme = definePreset(Material, {
     semantic: {