@flusys/ng-layout 9.1.0 → 9.1.2

package/fesm2022/flusys-ng-layout.mjs

@@ -1,465 +1,372 @@
-import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Service, DOCUMENT, signal, DestroyRef, computed, effect, Renderer2, Component, input, viewChild, InjectionToken, ElementRef } from '@angular/core';
-import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgComponentOutlet } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled, isSignUpEnabled } from '@flusys/ng-core';
-import { evaluateLogicNode, PermissionValidatorService, InlineSvgComponent, TranslatePipe, IconComponent, TranslateService, IsEmptyImageDirective } from '@flusys/ng-shared';
-import { Subject, fromEvent, filter } from 'rxjs';
-import { PRESET_NAMES, UiIconComponent, applyTheme, SURFACE_PALETTES, PRIMARY_PALETTES, NOIR_PRIMARY, applyPrimaryPalette, applySurfacePalette, PRESETS, SelectButtonComponent, MessageService, FButtonDirective, SelectComponent, StyleClassDirective, IconFieldComponent, InputIconComponent, InputTextDirective } from '@flusys/ng-ui';
-export { applyTheme, buildBootstrapPreset } from '@flusys/ng-ui';
-import { Router, NavigationEnd, isActive, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { filter as filter$1 } from 'rxjs/operators';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-
-/** Filter launcher apps based on user permission codes */
+import * as i0 from "@angular/core";
+import { Component, DOCUMENT, DestroyRef, ElementRef, InjectionToken, PLATFORM_ID, Renderer2, Service, computed, effect, inject, input, signal, viewChild } from "@angular/core";
+import { DOCUMENT as DOCUMENT$1, NgComponentOutlet, isPlatformBrowser } from "@angular/common";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled, isSignUpEnabled } from "@flusys/ng-core";
+import { IconComponent, InlineSvgComponent, IsEmptyImageDirective, PermissionValidatorService, TranslatePipe, TranslateService, buildBranchTreeNodes, evaluateLogicNode } from "@flusys/ng-shared";
+import { Subject, filter, fromEvent } from "rxjs";
+import { FButtonDirective, IconFieldComponent, InputIconComponent, InputTextDirective, MessageService, NOIR_PRIMARY, PRESETS, PRESET_NAMES, PRIMARY_PALETTES, SURFACE_PALETTES, SelectButtonComponent, SelectComponent, StyleClassDirective, TreeSelectComponent, UiIconComponent, applyPrimaryPalette, applySurfacePalette, applyTheme, applyTheme as applyTheme$1, buildBootstrapPreset } from "@flusys/ng-ui";
+import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet, isActive } from "@angular/router";
+import { filter as filter$1 } from "rxjs/operators";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
 function filterAppsByPermissions(apps, permissionCodes) {
-    return apps.filter((app) => !app.permissionLogic ||
-        evaluateLogicNode(app.permissionLogic, permissionCodes));
+	return apps.filter((app) => !app.permissionLogic || evaluateLogicNode(app.permissionLogic, permissionCodes));
 }
-
-/**
- * Filter menu items based on permission and role checker
- *
- * @param items - Array of menu items to filter
- * @param hasPermission - Function to check if user has permission
- * @param hasRole - Function to check if user has role (optional, defaults to always false)
- * @returns Filtered menu items array
- *
- * @example
- * ```typescript
- * const filteredMenu = filterMenuByPermissions(
- *   menuItems,
- *   (actionCode) => permissionState.hasAction(actionCode)
- * );
- * ```
- */
 function filterMenuByPermissions(items, permissionCode) {
-    return items
-        .map((item) => filterMenuItem(item, permissionCode))
-        .filter((item) => item !== null);
+	return items.map((item) => filterMenuItem(item, permissionCode)).filter((item) => item !== null);
 }
-/**
- * Filter a single menu item and its children recursively
- *
- * @param item - Menu item to filter
- * @param hasPermission - Function to check if user has permission
- * @param hasRole - Function to check if user has role
- * @returns Filtered menu item or null if user doesn't have permission
- */
 function filterMenuItem(item, permissionCode) {
-    // Skip separators - they have no permission checks
-    if (item.separator) {
-        return item;
-    }
-    // Check permission logic tree
-    if (item.permissionLogic) {
-        const hasAccess = evaluateLogicNode(item.permissionLogic, permissionCode);
-        if (!hasAccess) {
-            return null; // User doesn't pass permission logic
-        }
-    }
-    // Filter child items recursively
-    if (item.children && item.children.length > 0) {
-        const filteredChildren = filterMenuByPermissions(item.children, permissionCode);
-        // If parent has no visible children, hide parent too
-        if (filteredChildren.length === 0) {
-            return null;
-        }
-        return { ...item, children: filteredChildren };
-    }
-    return item;
+	if (item.separator) return item;
+	if (item.permissionLogic) {
+		if (!evaluateLogicNode(item.permissionLogic, permissionCode)) return null;
+	}
+	if (item.children && item.children.length > 0) {
+		const filteredChildren = filterMenuByPermissions(item.children, permissionCode);
+		if (filteredChildren.length === 0) return null;
+		return {
+			...item,
+			children: filteredChildren
+		};
+	}
+	return item;
 }
-
-const STORAGE_KEY = 'flusys.layout.config';
+const STORAGE_KEY = "flusys.layout.config";
 const STORAGE_VERSION = 1;
-// Sourced from the theme package so a new preset never silently fails validation.
 const VALID_PRESETS = PRESET_NAMES;
-const VALID_MENU_MODES = ['static', 'overlay', 'topbar'];
-const VALID_LAYOUT_THEMES = ['classic', 'modern'];
-class LayoutPersistenceService {
-    platformId = inject(PLATFORM_ID);
-    isBrowser = isPlatformBrowser(this.platformId);
-    load() {
-        if (!this.isBrowser)
-            return null;
-        try {
-            const stored = localStorage.getItem(STORAGE_KEY);
-            if (!stored)
-                return null;
-            return this.validateConfig(JSON.parse(stored));
-        }
-        catch {
-            this.clear();
-            return null;
-        }
-    }
-    save(config) {
-        if (!this.isBrowser)
-            return;
-        try {
-            const toStore = {
-                ...config,
-                _version: STORAGE_VERSION,
-            };
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore));
-        }
-        catch {
-            // localStorage may be full or disabled — the config simply stays unsaved.
-        }
-    }
-    clear() {
-        if (!this.isBrowser)
-            return;
-        localStorage.removeItem(STORAGE_KEY);
-    }
-    /**
-     * Coerces a stored value only when it is present and unrecognised. A field the
-     * user never changed stays absent so the app's own default still wins when this
-     * result is merged over it.
-     */
-    validateConfig(stored) {
-        if (stored._version && stored._version !== STORAGE_VERSION) {
-            this.clear();
-            return null;
-        }
-        const { _version, ...config } = stored;
-        if (config.preset !== undefined && !VALID_PRESETS.includes(config.preset)) {
-            config.preset = 'Aura';
-        }
-        if (config.menuMode !== undefined &&
-            !VALID_MENU_MODES.includes(config.menuMode)) {
-            config.menuMode = 'static';
-        }
-        if (config.layoutTheme !== undefined &&
-            !VALID_LAYOUT_THEMES.includes(config.layoutTheme)) {
-            config.layoutTheme = 'classic';
-        }
-        if (config.darkTheme !== undefined && typeof config.darkTheme !== 'boolean') {
-            config.darkTheme = false;
-        }
-        return config;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.5", ngImport: i0, type: LayoutPersistenceService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LayoutPersistenceService, decorators: [{
-            type: Service
-        }] });
-
-/** Matches the 991px shell breakpoint both skins use in SCSS. */
+const VALID_MENU_MODES = [
+	"static",
+	"overlay",
+	"topbar"
+];
+const VALID_LAYOUT_THEMES = ["classic", "modern"];
+var LayoutPersistenceService = class LayoutPersistenceService {
+	platformId = inject(PLATFORM_ID);
+	isBrowser = isPlatformBrowser(this.platformId);
+	load() {
+		if (!this.isBrowser) return null;
+		try {
+			const stored = localStorage.getItem(STORAGE_KEY);
+			if (!stored) return null;
+			return this.validateConfig(JSON.parse(stored));
+		} catch {
+			this.clear();
+			return null;
+		}
+	}
+	save(config) {
+		if (!this.isBrowser) return;
+		try {
+			const toStore = {
+				...config,
+				_version: STORAGE_VERSION
+			};
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore));
+		} catch {}
+	}
+	clear() {
+		if (!this.isBrowser) return;
+		localStorage.removeItem(STORAGE_KEY);
+	}
+	validateConfig(stored) {
+		if (stored._version && stored._version !== STORAGE_VERSION) {
+			this.clear();
+			return null;
+		}
+		const { _version, ...config } = stored;
+		if (config.preset !== void 0 && !VALID_PRESETS.includes(config.preset)) config.preset = "Aura";
+		if (config.menuMode !== void 0 && !VALID_MENU_MODES.includes(config.menuMode)) config.menuMode = "static";
+		if (config.layoutTheme !== void 0 && !VALID_LAYOUT_THEMES.includes(config.layoutTheme)) config.layoutTheme = "classic";
+		if (config.darkTheme !== void 0 && typeof config.darkTheme !== "boolean") config.darkTheme = false;
+		return config;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LayoutPersistenceService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LayoutPersistenceService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LayoutPersistenceService,
+	decorators: [{ type: Service }]
+});
 const DESKTOP_BREAKPOINT = 991;
-class LayoutService {
-    document = inject(DOCUMENT);
-    platformId = inject(PLATFORM_ID);
-    isBrowser = isPlatformBrowser(this.platformId);
-    persistence = inject(LayoutPersistenceService);
-    appConfig = inject(APP_CONFIG, { optional: true });
-    DEFAULT_CONFIG = this.appConfig?.layoutConfig ?? {
-        preset: 'Aura',
-        primary: 'violet',
-        surface: null,
-        darkTheme: false,
-        menuMode: 'static',
-        layoutTheme: 'classic',
-    };
-    DEFAULT_STATE = {
-        staticMenuDesktopInactive: false,
-        overlayMenuActive: false,
-        configSidebarVisible: false,
-        staticMenuMobileActive: false,
-        menuHoverActive: false,
-    };
-    memorable = this.DEFAULT_CONFIG.isMemorable !== false;
-    _layoutConfig = signal({
-        ...this.DEFAULT_CONFIG,
-        ...(this.memorable ? this.persistence.load() : null),
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : /* istanbul ignore next */ []));
-    _layoutState = signal(this.DEFAULT_STATE, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_layoutState" }] : /* istanbul ignore next */ []));
-    _transitionComplete = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : /* istanbul ignore next */ []));
-    layoutConfig = this._layoutConfig.asReadonly();
-    layoutState = this._layoutState.asReadonly();
-    transitionComplete = this._transitionComplete.asReadonly();
-    _userProfile = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_userProfile" }] : /* istanbul ignore next */ []));
-    _companyProfile = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_companyProfile" }] : /* istanbul ignore next */ []));
-    _rawMenu = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_rawMenu" }] : /* istanbul ignore next */ []));
-    _rawApps = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_rawApps" }] : /* istanbul ignore next */ []));
-    permissionValidator = inject(PermissionValidatorService);
-    destroyRef = inject(DestroyRef);
-    _windowWidth = signal(this.isBrowser ? window.innerWidth : DESKTOP_BREAKPOINT + 1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_windowWidth" }] : /* istanbul ignore next */ []));
-    userProfile = this._userProfile.asReadonly();
-    companyProfile = this._companyProfile.asReadonly();
-    appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
-    appLogo = this.appConfig?.appLogo ?? '';
-    isAppLogoSvg = this.appLogo.toLowerCase().endsWith('.svg');
-    authorName = this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name;
-    authorUrl = this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url;
-    menu = computed(() => filterMenuByPermissions(this._rawMenu(), this.permissionValidator.permissions()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
-    apps = computed(() => filterAppsByPermissions(this._rawApps(), this.permissionValidator.permissions()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
-    hasApps = computed(() => this.apps().length > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasApps" }] : /* istanbul ignore next */ []));
-    isSidebarActive = computed(() => this._layoutState().overlayMenuActive ||
-        this._layoutState().staticMenuMobileActive, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : /* istanbul ignore next */ []));
-    isDesktop = computed(() => this._windowWidth() > DESKTOP_BREAKPOINT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
-    isMobile = computed(() => !this.isDesktop(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
-    isDarkTheme = computed(() => this._layoutConfig().darkTheme, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
-    isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
-    layoutTheme = computed(() => this._layoutConfig().layoutTheme ?? 'classic', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layoutTheme" }] : /* istanbul ignore next */ []));
-    isModernLayout = computed(() => this.layoutTheme() === 'modern', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isModernLayout" }] : /* istanbul ignore next */ []));
-    isClassicLayout = computed(() => this.layoutTheme() === 'classic', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isClassicLayout" }] : /* istanbul ignore next */ []));
-    /** The modern skin has no horizontal nav, so topbar mode only applies to the classic skin. */
-    isTopbar = computed(() => this._layoutConfig().menuMode === 'topbar' && !this.isModernLayout(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isTopbar" }] : /* istanbul ignore next */ []));
-    userName = computed(() => this._userProfile()?.name ?? 'Guest', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
-    userEmail = computed(() => this._userProfile()?.email ?? '', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []));
-    // `||`, not `??`, throughout the block below: the backend returns "no picture" and
-    // "no logo" as an empty string as often as it does null, and an empty string would
-    // slip past `??` and render as a broken image.
-    userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl || null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : /* istanbul ignore next */ []));
-    companyLogoUrl = computed(() => this._companyProfile()?.logoUrl || null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : /* istanbul ignore next */ []));
-    isAuthenticated = computed(() => !!this._userProfile(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []));
-    companyName = computed(() => {
-        if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig))
-            return this.appName;
-        return this._companyProfile()?.name || this.appName;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "companyName" }] : /* istanbul ignore next */ []));
-    displayLogo = computed(() => this.companyLogoUrl() ?? this.appLogo, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayLogo" }] : /* istanbul ignore next */ []));
-    isDisplayLogoSvg = computed(() => this.displayLogo().toLowerCase().endsWith('.svg'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDisplayLogoSvg" }] : /* istanbul ignore next */ []));
-    overlayOpen = new Subject();
-    menuSource = new Subject();
-    resetSource = new Subject();
-    menuSource$ = this.menuSource.asObservable();
-    resetSource$ = this.resetSource.asObservable();
-    overlayOpen$ = this.overlayOpen.asObservable();
-    initialized = false;
-    appliedDarkTheme = this._layoutConfig().darkTheme;
-    constructor() {
-        if (this.isBrowser) {
-            this.toggleDarkMode();
-            fromEvent(window, 'resize')
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => {
-                this._windowWidth.set(window.innerWidth);
-            });
-        }
-        effect(() => {
-            const config = this._layoutConfig();
-            if (this.initialized) {
-                // Only the dark-mode flip is worth a view transition. Every other field —
-                // preset, primary, menu mode, layout skin — used to start one too, which
-                // cross-faded the whole page for a change that never touched it.
-                if (config.darkTheme !== this.appliedDarkTheme) {
-                    this.appliedDarkTheme = config.darkTheme;
-                    this.handleDarkModeTransition(config);
-                }
-                if (this.memorable)
-                    this.persistence.save(config);
-            }
-            this.initialized = true;
-        });
-    }
-    toggleDarkMode(config) {
-        const isDark = (config ?? this._layoutConfig()).darkTheme;
-        this.document.documentElement.classList.toggle('app-dark', isDark);
-    }
-    handleDarkModeTransition(config) {
-        const doc = this.document;
-        if ('startViewTransition' in doc &&
-            typeof doc.startViewTransition === 'function') {
-            doc
-                .startViewTransition(() => this.toggleDarkMode(config))
-                .ready.then(() => this.onTransitionEnd())
-                .catch(() => { });
-        }
-        else {
-            this.toggleDarkMode(config);
-            this.onTransitionEnd();
-        }
-    }
-    onTransitionEnd() {
-        this._transitionComplete.set(true);
-        setTimeout(() => this._transitionComplete.set(false));
-    }
-    onMenuToggle() {
-        const state = this._layoutState();
-        // Mobile always uses staticMenuMobileActive regardless of menu mode
-        if (!this.isDesktop()) {
-            const newMobileActive = !state.staticMenuMobileActive;
-            this._layoutState.update((prev) => ({
-                ...prev,
-                staticMenuMobileActive: newMobileActive,
-            }));
-            if (newMobileActive)
-                this.overlayOpen.next();
-            return;
-        }
-        // Desktop: use overlay or static mode
-        if (this.isOverlay()) {
-            const newOverlayActive = !state.overlayMenuActive;
-            this._layoutState.update((prev) => ({
-                ...prev,
-                overlayMenuActive: newOverlayActive,
-            }));
-            if (newOverlayActive)
-                this.overlayOpen.next();
-        }
-        else {
-            this._layoutState.update((prev) => ({
-                ...prev,
-                staticMenuDesktopInactive: !state.staticMenuDesktopInactive,
-            }));
-        }
-    }
-    onMenuStateChange(event) {
-        this.menuSource.next(event);
-    }
-    reset() {
-        this.resetSource.next(true);
-    }
-    updateLayoutConfig(config) {
-        this._layoutConfig.update((prev) => ({ ...prev, ...config }));
-    }
-    updateLayoutState(state) {
-        this._layoutState.update((prev) => ({ ...prev, ...state }));
-    }
-    setUserProfile(profile) {
-        this._userProfile.set(profile);
-    }
-    setCompanyProfile(profile) {
-        this._companyProfile.set(profile);
-    }
-    setMenu(items) {
-        this._rawMenu.set(items);
-    }
-    clearMenu() {
-        this._rawMenu.set([]);
-    }
-    setApps(apps) {
-        this._rawApps.set(apps);
-    }
-    clearApps() {
-        this._rawApps.set([]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.5", ngImport: i0, type: LayoutService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LayoutService, decorators: [{
-            type: Service
-        }], ctorParameters: () => [] });
-
-/**
- * Shared shell behaviour for every layout skin.
- * Holds the menu open/close lifecycle so a skin only owns markup and styling.
- */
-class LayoutShellBase {
-    destroyRef = inject(DestroyRef);
-    document = inject(DOCUMENT);
-    renderer = inject(Renderer2);
-    router = inject(Router);
-    layoutService = inject(LayoutService);
-    menuOutsideClickListener = null;
-    /** Extra work a skin needs on every completed navigation. */
-    onNavigated() { }
-    constructor() {
-        this.layoutService.overlayOpen$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (!this.menuOutsideClickListener) {
-                this.menuOutsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
-                    if (this.isOutsideClicked(event)) {
-                        this.hideMenu();
-                    }
-                });
-            }
-            if (this.layoutService.layoutState().staticMenuMobileActive) {
-                this.blockBodyScroll();
-            }
-        });
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.hideMenu();
-            this.onNavigated();
-        });
-    }
-    isOutsideClicked(event) {
-        const eventTarget = event.target;
-        // querySelectorAll, not querySelector: a skin may render the same control more
-        // than once (the modern shell has a menu button in both the sidebar and the
-        // topbar) and matching only the first one reads a real click as an outside one.
-        return !this.outsideClickSelectors().some((selector) => Array.from(this.document.querySelectorAll(selector)).some((element) => element.isSameNode(eventTarget) || element.contains(eventTarget)));
-    }
-    hideMenu() {
-        this.layoutService.updateLayoutState({
-            overlayMenuActive: false,
-            staticMenuMobileActive: false,
-            menuHoverActive: false,
-        });
-        if (this.menuOutsideClickListener) {
-            this.menuOutsideClickListener();
-            this.menuOutsideClickListener = null;
-        }
-        this.unblockBodyScroll();
-    }
-    blockBodyScroll() {
-        this.document.body.classList.add('blocked-scroll');
-    }
-    unblockBodyScroll() {
-        this.document.body.classList.remove('blocked-scroll');
-    }
-    isOverlay = this.layoutService.isOverlay;
-    /** Delegated so a skin that has no horizontal nav is never treated as being in it. */
-    isTopbarMode = this.layoutService.isTopbar;
-    isOverlayActive = computed(() => this.layoutService.layoutState().overlayMenuActive, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOverlayActive" }] : /* istanbul ignore next */ []));
-    isMobileActive = computed(() => this.layoutService.layoutState().staticMenuMobileActive, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isMobileActive" }] : /* istanbul ignore next */ []));
-    /**
-     * The desktop sidebar is collapsed in place. Only meaningful for the modes that
-     * keep the sidebar in the layout flow — an overlay drawer and the horizontal nav
-     * have nothing to collapse.
-     */
-    isDesktopCollapsed = computed(() => !!this.layoutService.layoutState().staticMenuDesktopInactive &&
-        !this.isOverlay() &&
-        !this.isTopbarMode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDesktopCollapsed" }] : /* istanbul ignore next */ []));
-}
-
-class AppFooter {
-    layoutService = inject(LayoutService);
-    appName = this.layoutService.appName;
-    displayLogo = this.layoutService.appLogo;
-    isLogoSvg = this.layoutService.isAppLogoSvg;
-    authorName = this.layoutService.authorName;
-    authorUrl = this.layoutService.authorUrl;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+var LayoutService = class LayoutService {
+	document = inject(DOCUMENT);
+	platformId = inject(PLATFORM_ID);
+	isBrowser = isPlatformBrowser(this.platformId);
+	persistence = inject(LayoutPersistenceService);
+	appConfig = inject(APP_CONFIG, { optional: true });
+	DEFAULT_CONFIG = this.appConfig?.layoutConfig ?? {
+		preset: "Aura",
+		primary: "violet",
+		surface: null,
+		darkTheme: false,
+		menuMode: "static",
+		layoutTheme: "classic"
+	};
+	DEFAULT_STATE = {
+		staticMenuDesktopInactive: false,
+		overlayMenuActive: false,
+		configSidebarVisible: false,
+		staticMenuMobileActive: false,
+		menuHoverActive: false
+	};
+	memorable = this.DEFAULT_CONFIG.isMemorable !== false;
+	_layoutConfig = signal({
+		...this.DEFAULT_CONFIG,
+		...this.memorable ? this.persistence.load() : null
+	}, ...ngDevMode ? [{ debugName: "_layoutConfig" }] : /* istanbul ignore next */ []);
+	_layoutState = signal(this.DEFAULT_STATE, ...ngDevMode ? [{ debugName: "_layoutState" }] : /* istanbul ignore next */ []);
+	_transitionComplete = signal(false, ...ngDevMode ? [{ debugName: "_transitionComplete" }] : /* istanbul ignore next */ []);
+	layoutConfig = this._layoutConfig.asReadonly();
+	layoutState = this._layoutState.asReadonly();
+	transitionComplete = this._transitionComplete.asReadonly();
+	_userProfile = signal(null, ...ngDevMode ? [{ debugName: "_userProfile" }] : /* istanbul ignore next */ []);
+	_companyProfile = signal(null, ...ngDevMode ? [{ debugName: "_companyProfile" }] : /* istanbul ignore next */ []);
+	_rawMenu = signal([], ...ngDevMode ? [{ debugName: "_rawMenu" }] : /* istanbul ignore next */ []);
+	_rawApps = signal([], ...ngDevMode ? [{ debugName: "_rawApps" }] : /* istanbul ignore next */ []);
+	permissionValidator = inject(PermissionValidatorService);
+	destroyRef = inject(DestroyRef);
+	_windowWidth = signal(this.isBrowser ? window.innerWidth : 992, ...ngDevMode ? [{ debugName: "_windowWidth" }] : /* istanbul ignore next */ []);
+	userProfile = this._userProfile.asReadonly();
+	companyProfile = this._companyProfile.asReadonly();
+	appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
+	appLogo = this.appConfig?.appLogo ?? "";
+	isAppLogoSvg = this.appLogo.toLowerCase().endsWith(".svg");
+	authorName = this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name;
+	authorUrl = this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url;
+	menu = computed(() => filterMenuByPermissions(this._rawMenu(), this.permissionValidator.permissions()), ...ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []);
+	apps = computed(() => filterAppsByPermissions(this._rawApps(), this.permissionValidator.permissions()), ...ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []);
+	hasApps = computed(() => this.apps().length > 0, ...ngDevMode ? [{ debugName: "hasApps" }] : /* istanbul ignore next */ []);
+	isSidebarActive = computed(() => this._layoutState().overlayMenuActive || this._layoutState().staticMenuMobileActive, ...ngDevMode ? [{ debugName: "isSidebarActive" }] : /* istanbul ignore next */ []);
+	isDesktop = computed(() => this._windowWidth() > DESKTOP_BREAKPOINT, ...ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []);
+	isMobile = computed(() => !this.isDesktop(), ...ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []);
+	isDarkTheme = computed(() => this._layoutConfig().darkTheme, ...ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []);
+	isOverlay = computed(() => this._layoutConfig().menuMode === "overlay", ...ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []);
+	layoutTheme = computed(() => this._layoutConfig().layoutTheme ?? "classic", ...ngDevMode ? [{ debugName: "layoutTheme" }] : /* istanbul ignore next */ []);
+	isModernLayout = computed(() => this.layoutTheme() === "modern", ...ngDevMode ? [{ debugName: "isModernLayout" }] : /* istanbul ignore next */ []);
+	isClassicLayout = computed(() => this.layoutTheme() === "classic", ...ngDevMode ? [{ debugName: "isClassicLayout" }] : /* istanbul ignore next */ []);
+	isTopbar = computed(() => this._layoutConfig().menuMode === "topbar" && !this.isModernLayout(), ...ngDevMode ? [{ debugName: "isTopbar" }] : /* istanbul ignore next */ []);
+	userName = computed(() => this._userProfile()?.name ?? "Guest", ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+	userEmail = computed(() => this._userProfile()?.email ?? "", ...ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []);
+	userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl || null, ...ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : /* istanbul ignore next */ []);
+	companyLogoUrl = computed(() => this._companyProfile()?.logoUrl || null, ...ngDevMode ? [{ debugName: "companyLogoUrl" }] : /* istanbul ignore next */ []);
+	isAuthenticated = computed(() => !!this._userProfile(), ...ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []);
+	companyName = computed(() => {
+		if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig)) return this.appName;
+		return this._companyProfile()?.name || this.appName;
+	}, ...ngDevMode ? [{ debugName: "companyName" }] : /* istanbul ignore next */ []);
+	displayLogo = computed(() => this.companyLogoUrl() ?? this.appLogo, ...ngDevMode ? [{ debugName: "displayLogo" }] : /* istanbul ignore next */ []);
+	isDisplayLogoSvg = computed(() => this.displayLogo().toLowerCase().endsWith(".svg"), ...ngDevMode ? [{ debugName: "isDisplayLogoSvg" }] : /* istanbul ignore next */ []);
+	overlayOpen = new Subject();
+	menuSource = new Subject();
+	resetSource = new Subject();
+	menuSource$ = this.menuSource.asObservable();
+	resetSource$ = this.resetSource.asObservable();
+	overlayOpen$ = this.overlayOpen.asObservable();
+	initialized = false;
+	appliedDarkTheme = this._layoutConfig().darkTheme;
+	constructor() {
+		if (this.isBrowser) {
+			this.toggleDarkMode();
+			fromEvent(window, "resize").pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+				this._windowWidth.set(window.innerWidth);
+			});
+		}
+		effect(() => {
+			const config = this._layoutConfig();
+			if (this.initialized) {
+				if (config.darkTheme !== this.appliedDarkTheme) {
+					this.appliedDarkTheme = config.darkTheme;
+					this.handleDarkModeTransition(config);
+				}
+				if (this.memorable) this.persistence.save(config);
+			}
+			this.initialized = true;
+		});
+	}
+	toggleDarkMode(config) {
+		const isDark = (config ?? this._layoutConfig()).darkTheme;
+		this.document.documentElement.classList.toggle("app-dark", isDark);
+	}
+	handleDarkModeTransition(config) {
+		const doc = this.document;
+		if ("startViewTransition" in doc && typeof doc.startViewTransition === "function") doc.startViewTransition(() => this.toggleDarkMode(config)).ready.then(() => this.onTransitionEnd()).catch(() => {});
+		else {
+			this.toggleDarkMode(config);
+			this.onTransitionEnd();
+		}
+	}
+	onTransitionEnd() {
+		this._transitionComplete.set(true);
+		setTimeout(() => this._transitionComplete.set(false));
+	}
+	onMenuToggle() {
+		const state = this._layoutState();
+		if (!this.isDesktop()) {
+			const newMobileActive = !state.staticMenuMobileActive;
+			this._layoutState.update((prev) => ({
+				...prev,
+				staticMenuMobileActive: newMobileActive
+			}));
+			if (newMobileActive) this.overlayOpen.next();
+			return;
+		}
+		if (this.isOverlay()) {
+			const newOverlayActive = !state.overlayMenuActive;
+			this._layoutState.update((prev) => ({
+				...prev,
+				overlayMenuActive: newOverlayActive
+			}));
+			if (newOverlayActive) this.overlayOpen.next();
+		} else this._layoutState.update((prev) => ({
+			...prev,
+			staticMenuDesktopInactive: !state.staticMenuDesktopInactive
+		}));
+	}
+	onMenuStateChange(event) {
+		this.menuSource.next(event);
+	}
+	reset() {
+		this.resetSource.next(true);
+	}
+	updateLayoutConfig(config) {
+		this._layoutConfig.update((prev) => ({
+			...prev,
+			...config
+		}));
+	}
+	updateLayoutState(state) {
+		this._layoutState.update((prev) => ({
+			...prev,
+			...state
+		}));
+	}
+	setUserProfile(profile) {
+		this._userProfile.set(profile);
+	}
+	setCompanyProfile(profile) {
+		this._companyProfile.set(profile);
+	}
+	setMenu(items) {
+		this._rawMenu.set(items);
+	}
+	clearMenu() {
+		this._rawMenu.set([]);
+	}
+	setApps(apps) {
+		this._rawApps.set(apps);
+	}
+	clearApps() {
+		this._rawApps.set([]);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LayoutService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LayoutService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LayoutService,
+	decorators: [{ type: Service }],
+	ctorParameters: () => []
+});
+var LayoutShellBase = class {
+	destroyRef = inject(DestroyRef);
+	document = inject(DOCUMENT);
+	renderer = inject(Renderer2);
+	router = inject(Router);
+	layoutService = inject(LayoutService);
+	menuOutsideClickListener = null;
+	onNavigated() {}
+	constructor() {
+		this.layoutService.overlayOpen$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+			if (!this.menuOutsideClickListener) this.menuOutsideClickListener = this.renderer.listen(this.document, "click", (event) => {
+				if (this.isOutsideClicked(event)) this.hideMenu();
+			});
+			if (this.layoutService.layoutState().staticMenuMobileActive) this.blockBodyScroll();
+		});
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+			this.hideMenu();
+			this.onNavigated();
+		});
+	}
+	isOutsideClicked(event) {
+		const eventTarget = event.target;
+		return !this.outsideClickSelectors().some((selector) => Array.from(this.document.querySelectorAll(selector)).some((element) => element.isSameNode(eventTarget) || element.contains(eventTarget)));
+	}
+	hideMenu() {
+		this.layoutService.updateLayoutState({
+			overlayMenuActive: false,
+			staticMenuMobileActive: false,
+			menuHoverActive: false
+		});
+		if (this.menuOutsideClickListener) {
+			this.menuOutsideClickListener();
+			this.menuOutsideClickListener = null;
+		}
+		this.unblockBodyScroll();
+	}
+	blockBodyScroll() {
+		this.document.body.classList.add("blocked-scroll");
+	}
+	unblockBodyScroll() {
+		this.document.body.classList.remove("blocked-scroll");
+	}
+	isOverlay = this.layoutService.isOverlay;
+	isTopbarMode = this.layoutService.isTopbar;
+	isOverlayActive = computed(() => this.layoutService.layoutState().overlayMenuActive, ...ngDevMode ? [{ debugName: "isOverlayActive" }] : /* istanbul ignore next */ []);
+	isMobileActive = computed(() => this.layoutService.layoutState().staticMenuMobileActive, ...ngDevMode ? [{ debugName: "isMobileActive" }] : /* istanbul ignore next */ []);
+	isDesktopCollapsed = computed(() => !!this.layoutService.layoutState().staticMenuDesktopInactive && !this.isOverlay() && !this.isTopbarMode(), ...ngDevMode ? [{ debugName: "isDesktopCollapsed" }] : /* istanbul ignore next */ []);
+};
+var AppFooter = class AppFooter {
+	layoutService = inject(LayoutService);
+	appName = this.layoutService.appName;
+	displayLogo = this.layoutService.appLogo;
+	isLogoSvg = this.layoutService.isAppLogoSvg;
+	authorName = this.layoutService.authorName;
+	authorUrl = this.layoutService.authorUrl;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppFooter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppFooter,
+		isStandalone: true,
+		selector: "app-footer",
+		ngImport: i0,
+		template: `<div class="layout-footer">
     @if (displayLogo) {
       @if (isLogoSvg) {
         <inline-svg [src]="displayLogo" class="logo-image" />
@@ -477,14 +384,31 @@ class AppFooter {
         >{{ authorName }}</a
       >
     </span>
-  </div>`, isInline: true, dependencies: [{ kind: "component", type: InlineSvgComponent, selector: "inline-svg", inputs: ["src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppFooter, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-footer',
-                    imports: [TranslatePipe, InlineSvgComponent],
-                    template: `<div class="layout-footer">
+  </div>`,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: InlineSvgComponent,
+			selector: "inline-svg",
+			inputs: ["src"]
+		}, {
+			kind: "pipe",
+			type: TranslatePipe,
+			name: "translate"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppFooter,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-footer",
+			imports: [TranslatePipe, InlineSvgComponent],
+			template: `<div class="layout-footer">
     @if (displayLogo) {
       @if (isLogoSvg) {
         <inline-svg [src]="displayLogo" class="logo-image" />
@@ -502,132 +426,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         >{{ authorName }}</a
       >
     </span>
-  </div>`,
-                }]
-        }] });
-
-class AppMenuitem {
-    item = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
-    index = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-    parentKey = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentKey" }] : /* istanbul ignore next */ []));
-    router = inject(Router);
-    layoutService = inject(LayoutService);
-    destroyRef = inject(DestroyRef);
-    parentLink = viewChild('parentLink', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentLink" }] : /* istanbul ignore next */ []));
-    _active = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
-    active = this._active.asReadonly();
-    key = computed(() => {
-        const parent = this.parentKey();
-        return parent ? `${parent}-${this.index()}` : String(this.index());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    routerLink = computed(() => {
-        const menuItem = this.item();
-        return menuItem.routerLink ?? [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
-    // Computed options for routerLinkActive - use 'exact' for root, 'subset' for others
-    routerLinkActiveOptions = computed(() => {
-        const link = this.routerLink();
-        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
-        return {
-            paths: pathsMatch,
-            queryParams: 'ignored',
-            matrixParams: 'ignored',
-            fragment: 'ignored',
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.layoutService.menuSource$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            Promise.resolve(null).then(() => {
-                const currentKey = this.key();
-                if (value.routeEvent) {
-                    this._active.set(value.key === currentKey ||
-                        value.key?.startsWith(currentKey + '-'));
-                }
-                else if (value.key !== currentKey &&
-                    !value.key?.startsWith(currentKey + '-')) {
-                    this._active.set(false);
-                }
-            });
-        });
-        this.layoutService.resetSource$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this._active.set(false));
-        this.router.events
-            .pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (this.item().routerLink) {
-                this.updateActiveStateFromRoute();
-            }
-        });
-        effect(() => {
-            const menuItem = this.item();
-            if (menuItem.routerLink) {
-                this.updateActiveStateFromRoute();
-            }
-        });
-        effect(() => {
-            if (this.active() && this.parentLink()) {
-                Promise.resolve().then(() => this.updateSubmenuPosition());
-            }
-        });
-    }
-    onMouseEnter() {
-        if (this.layoutService.isTopbar() && this.item().children) {
-            this.updateSubmenuPosition();
-        }
-    }
-    updateSubmenuPosition() {
-        const linkEl = this.parentLink()?.nativeElement;
-        if (!linkEl || typeof linkEl.getBoundingClientRect !== 'function')
-            return;
-        const rect = linkEl.getBoundingClientRect();
-        const hostEl = linkEl.closest('[app-menuitem]');
-        if (!hostEl)
-            return;
-        // Position submenu to the left of the parent link and above it
-        const left = rect.left;
-        const top = rect.top + 30; // 8px gap above the menu item
-        hostEl.style.setProperty('--submenu-left', `${left}px`);
-        hostEl.style.setProperty('--submenu-top', `${top}px`);
-    }
-    updateActiveStateFromRoute() {
-        const link = this.routerLink();
-        if (!link.length)
-            return;
-        // Use 'exact' for root path to avoid matching all routes
-        // Use 'subset' for all other paths to match child routes
-        const pathsMatch = link[0] === '/' ? 'exact' : 'subset';
-        const active = isActive(link[0], this.router, {
-            paths: pathsMatch,
-            queryParams: 'ignored',
-            matrixParams: 'ignored',
-            fragment: 'ignored',
-        })();
-        if (active) {
-            this.layoutService.onMenuStateChange({
-                key: this.key(),
-                routeEvent: true,
-            });
-        }
-    }
-    itemClick() {
-        if (this.item().children && !this.layoutService.isTopbar()) {
-            this._active.update((prev) => !prev);
-        }
-        this.layoutService.onMenuStateChange({ key: this.key() });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "active()" } }, viewQueries: [{ propertyName: "parentLink", first: true, predicate: ["parentLink"], descendants: true, isSignal: true }], ngImport: i0, template: `
+  </div>`
+		}]
+	}]
+});
+var AppMenuitem = class AppMenuitem {
+	item = input.required(...ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []);
+	index = input.required(...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	parentKey = input("", ...ngDevMode ? [{ debugName: "parentKey" }] : /* istanbul ignore next */ []);
+	router = inject(Router);
+	layoutService = inject(LayoutService);
+	destroyRef = inject(DestroyRef);
+	parentLink = viewChild("parentLink", ...ngDevMode ? [{ debugName: "parentLink" }] : /* istanbul ignore next */ []);
+	_active = signal(false, ...ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []);
+	active = this._active.asReadonly();
+	key = computed(() => {
+		const parent = this.parentKey();
+		return parent ? `${parent}-${this.index()}` : String(this.index());
+	}, ...ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []);
+	routerLink = computed(() => {
+		return this.item().routerLink ?? [];
+	}, ...ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []);
+	routerLinkActiveOptions = computed(() => {
+		return {
+			paths: this.routerLink()[0] === "/" ? "exact" : "subset",
+			queryParams: "ignored",
+			matrixParams: "ignored",
+			fragment: "ignored"
+		};
+	}, ...ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.layoutService.menuSource$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+			Promise.resolve(null).then(() => {
+				const currentKey = this.key();
+				if (value.routeEvent) this._active.set(value.key === currentKey || value.key?.startsWith(currentKey + "-"));
+				else if (value.key !== currentKey && !value.key?.startsWith(currentKey + "-")) this._active.set(false);
+			});
+		});
+		this.layoutService.resetSource$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this._active.set(false));
+		this.router.events.pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+			if (this.item().routerLink) this.updateActiveStateFromRoute();
+		});
+		effect(() => {
+			if (this.item().routerLink) this.updateActiveStateFromRoute();
+		});
+		effect(() => {
+			if (this.active() && this.parentLink()) Promise.resolve().then(() => this.updateSubmenuPosition());
+		});
+	}
+	onMouseEnter() {
+		if (this.layoutService.isTopbar() && this.item().children) this.updateSubmenuPosition();
+	}
+	updateSubmenuPosition() {
+		const linkEl = this.parentLink()?.nativeElement;
+		if (!linkEl || typeof linkEl.getBoundingClientRect !== "function") return;
+		const rect = linkEl.getBoundingClientRect();
+		const hostEl = linkEl.closest("[app-menuitem]");
+		if (!hostEl) return;
+		const left = rect.left;
+		const top = rect.top + 30;
+		hostEl.style.setProperty("--submenu-left", `${left}px`);
+		hostEl.style.setProperty("--submenu-top", `${top}px`);
+	}
+	updateActiveStateFromRoute() {
+		const link = this.routerLink();
+		if (!link.length) return;
+		const pathsMatch = link[0] === "/" ? "exact" : "subset";
+		if (isActive(link[0], this.router, {
+			paths: pathsMatch,
+			queryParams: "ignored",
+			matrixParams: "ignored",
+			fragment: "ignored"
+		})()) this.layoutService.onMenuStateChange({
+			key: this.key(),
+			routeEvent: true
+		});
+	}
+	itemClick() {
+		if (this.item().children && !this.layoutService.isTopbar()) this._active.update((prev) => !prev);
+		this.layoutService.onMenuStateChange({ key: this.key() });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppMenuitem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppMenuitem,
+		isStandalone: true,
+		selector: "[app-menuitem]",
+		inputs: {
+			item: {
+				classPropertyName: "item",
+				publicName: "item",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			index: {
+				classPropertyName: "index",
+				publicName: "index",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			parentKey: {
+				classPropertyName: "parentKey",
+				publicName: "parentKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class.active-menuitem": "active()" } },
+		viewQueries: [{
+			propertyName: "parentLink",
+			first: true,
+			predicate: ["parentLink"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <ng-container>
       @if (item().children?.length) {
         <a
@@ -696,11 +621,94 @@ 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: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppMenuitem, decorators: [{
-            type: Component,
-            args: [{ selector: '[app-menuitem]', imports: [UiIconComponent, IconComponent, RouterLink, RouterLinkActive, TranslatePipe], template: `
+  `,
+		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: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lib-icon",
+				inputs: ["icon", "iconType"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLinkActive,
+				selector: "[routerLinkActive]",
+				inputs: [
+					"routerLinkActiveOptions",
+					"ariaCurrentWhenActive",
+					"routerLinkActive"
+				],
+				outputs: ["isActiveChange"],
+				exportAs: ["routerLinkActive"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppMenuitem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[app-menuitem]",
+			imports: [
+				UiIconComponent,
+				IconComponent,
+				RouterLink,
+				RouterLinkActive,
+				TranslatePipe
+			],
+			template: `
     <ng-container>
       @if (item().children?.length) {
         <a
@@ -769,27 +777,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </ul>
       }
     </ng-container>
-  `, host: {
-                        '[class.active-menuitem]': 'active()',
-                    }, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], parentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKey", required: false }] }], parentLink: [{ type: i0.ViewChild, args: ['parentLink', { isSignal: true }] }] } });
-
-/**
- * Main menu component that displays filtered menu items.
- * Menu is automatically filtered based on user permissions using the permission checker (logicNode pattern).
- * The filtering happens internally in LayoutService via computed signal.
- */
-class AppMenu {
-    layoutService = inject(LayoutService);
-    /**
-     * Filtered menu items from layout service.
-     * This signal is computed in LayoutService and automatically updates when:
-     * - Raw menu changes (setMenu called)
-     * - Permission state changes (user permissions updated)
-     */
-    menuItems = this.layoutService.menu;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
+  `,
+			host: { "[class.active-menuitem]": "active()" },
+			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"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		item: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "item",
+				required: true
+			}]
+		}],
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: true
+			}]
+		}],
+		parentKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "parentKey",
+				required: false
+			}]
+		}],
+		parentLink: [{
+			type: i0.ViewChild,
+			args: ["parentLink", { isSignal: true }]
+		}]
+	}
+});
+var AppMenu = class AppMenu {
+	layoutService = inject(LayoutService);
+	menuItems = this.layoutService.menu;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppMenu,
+		isStandalone: true,
+		selector: "app-menu",
+		ngImport: i0,
+		template: `<div class="layout-menu">
     <ul>
       @for (
         item of menuItems();
@@ -799,14 +842,31 @@ 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppMenu, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-menu',
-                    imports: [AppMenuitem],
-                    template: `<div class="layout-menu">
+  </div>`,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: AppMenuitem,
+			selector: "[app-menuitem]",
+			inputs: [
+				"item",
+				"index",
+				"parentKey"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppMenu,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-menu",
+			imports: [AppMenuitem],
+			template: `<div class="layout-menu">
     <ul>
       @for (
         item of menuItems();
@@ -816,41 +876,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         <li app-menuitem [item]="item" [index]="i"></li>
       }
     </ul>
-  </div>`,
-                }]
-        }] });
-
-class AppSidebar {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
+  </div>`
+		}]
+	}]
+});
+var AppSidebar = class AppSidebar {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppSidebar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: AppSidebar,
+		isStandalone: true,
+		selector: "app-sidebar",
+		ngImport: i0,
+		template: `
     <div class="layout-sidebar">
       <app-menu />
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppSidebar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-sidebar',
-                    imports: [AppMenu],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: AppMenu,
+			selector: "app-menu"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppSidebar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-sidebar",
+			imports: [AppMenu],
+			template: `
     <div class="layout-sidebar">
       <app-menu />
     </div>
-  `,
-                }]
-        }] });
-
-/**
- * Home link showing the active company logo and name.
- * Every skin renders this same markup; sizing and colour come from the bar it sits in.
- */
-class AppBrandLogo {
-    layoutService = inject(LayoutService);
-    companyName = this.layoutService.companyName;
-    displayLogo = this.layoutService.displayLogo;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppBrandLogo, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppBrandLogo, isStandalone: true, selector: "app-brand-logo", host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+var AppBrandLogo = class AppBrandLogo {
+	layoutService = inject(LayoutService);
+	companyName = this.layoutService.companyName;
+	displayLogo = this.layoutService.displayLogo;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppBrandLogo,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppBrandLogo,
+		isStandalone: true,
+		selector: "app-brand-logo",
+		host: { styleAttribute: "display: contents" },
+		ngImport: i0,
+		template: `
     <a class="layout-brand-logo" routerLink="/">
       @if (displayLogo()) {
         @if (layoutService.isDisplayLogoSvg()) {
@@ -861,15 +958,46 @@ class AppBrandLogo {
       }
       <span>{{ companyName() }}</span>
     </a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: InlineSvgComponent, selector: "inline-svg", inputs: ["src"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppBrandLogo, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-brand-logo',
-                    imports: [RouterLink, InlineSvgComponent],
-                    host: { style: 'display: contents' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: RouterLink,
+			selector: "[routerLink]",
+			inputs: [
+				"target",
+				"queryParams",
+				"fragment",
+				"queryParamsHandling",
+				"state",
+				"info",
+				"relativeTo",
+				"preserveFragment",
+				"skipLocationChange",
+				"replaceUrl",
+				"browserUrl",
+				"routerLink"
+			]
+		}, {
+			kind: "component",
+			type: InlineSvgComponent,
+			selector: "inline-svg",
+			inputs: ["src"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppBrandLogo,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-brand-logo",
+			imports: [RouterLink, InlineSvgComponent],
+			host: { style: "display: contents" },
+			template: `
     <a class="layout-brand-logo" routerLink="/">
       @if (displayLogo()) {
         @if (layoutService.isDisplayLogoSvg()) {
@@ -880,134 +1008,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       }
       <span>{{ companyName() }}</span>
     </a>
-  `,
-                }]
-        }] });
-
-const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
-const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
-const LAYOUT_NOTIFICATION_BELL = new InjectionToken('LAYOUT_NOTIFICATION_BELL');
-const LAYOUT_LANGUAGE_SELECTOR = new InjectionToken('LAYOUT_LANGUAGE_SELECTOR');
-const LAYOUT_LANGUAGE_SELECTOR_PANEL = new InjectionToken('LAYOUT_LANGUAGE_SELECTOR_PANEL');
-const LAYOUT_SEARCHBAR = new InjectionToken('LAYOUT_SEARCHBAR');
-const LAYOUT_IS_RTL = new InjectionToken('LAYOUT_IS_RTL');
-const LAYOUT_SEARCH_ADAPTER = new InjectionToken('LAYOUT_SEARCH_ADAPTER');
-
-class AppConfigurator {
-    translateAdapter = inject(TranslateService, { optional: true });
-    platformId = inject(PLATFORM_ID);
-    layoutService = inject(LayoutService);
-    showMenuModeButton = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : /* istanbul ignore next */ []));
-    presets = PRESET_NAMES;
-    menuModeOptions = computed(() => {
-        const options = [
-            { label: this.translate('layout.configurator.menu.mode.static'), value: 'static' },
-            { label: this.translate('layout.configurator.menu.mode.overlay'), value: 'overlay' },
-        ];
-        // Topbar mode renders a horizontal nav, which only the classic skin provides.
-        if (this.layoutService.isDesktop() && !this.layoutService.isModernLayout()) {
-            options.push({ label: this.translate('layout.configurator.menu.mode.topbar'), value: 'topbar' });
-        }
-        return options;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : /* istanbul ignore next */ []));
-    layoutThemeOptions = computed(() => [
-        { label: this.translate('layout.configurator.layout.theme.classic'), value: 'classic' },
-        { label: this.translate('layout.configurator.layout.theme.modern'), value: 'modern' },
-    ], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layoutThemeOptions" }] : /* istanbul ignore next */ []));
-    constructor() {
-        if (isPlatformBrowser(this.platformId)) {
-            effect(() => {
-                const config = this.layoutService.layoutConfig();
-                applyTheme({
-                    preset: (config.preset ?? 'Aura'),
-                    primary: config.primary ?? 'violet',
-                    surface: config.surface ?? null,
-                    darkTheme: config.darkTheme ?? false,
-                });
-            });
-        }
-    }
-    surfaces = Object.entries(SURFACE_PALETTES).map(([name, pal]) => ({
-        name,
-        palette: pal,
-    }));
-    selectedPrimaryColor = computed(() => this.layoutService.layoutConfig().primary, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : /* istanbul ignore next */ []));
-    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : /* istanbul ignore next */ []));
-    isSurfaceSelected(surfaceName) {
-        const sel = this.selectedSurfaceColor();
-        if (sel)
-            return sel === surfaceName;
-        const isDark = this.layoutService.layoutConfig().darkTheme;
-        return isDark ? surfaceName === 'zinc' : surfaceName === 'slate';
-    }
-    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []));
-    menuMode = computed(() => this.layoutService.layoutConfig().menuMode, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
-    layoutTheme = this.layoutService.layoutTheme;
-    primaryColors = computed(() => {
-        const palettes = [{ name: 'noir', palette: {} }];
-        for (const [name, pal] of Object.entries(PRIMARY_PALETTES)) {
-            palettes.push({ name, palette: pal });
-        }
-        return palettes;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "primaryColors" }] : /* istanbul ignore next */ []));
-    updateColors(event, type, color) {
-        if (type === 'primary') {
-            this.layoutService.updateLayoutConfig({ primary: color.name });
-        }
-        else if (type === 'surface') {
-            this.layoutService.updateLayoutConfig({ surface: color.name });
-        }
-        this._applyColorChange(type, color);
-        event.stopPropagation();
-    }
-    _applyColorChange(type, color) {
-        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
-        if (type === 'primary') {
-            const primary = color.name ?? 'violet';
-            // NOIR_PRIMARY, not a copy of a surface palette: its shades are references to
-            // the active surface ramp, which is what lets applyPrimaryPalette recognise the
-            // neutral and derive the same tokens a preset switch to Nora would.
-            const pal = primary === 'noir' ? NOIR_PRIMARY : PRIMARY_PALETTES[primary];
-            if (pal)
-                applyPrimaryPalette(pal, isDark);
-        }
-        else if (type === 'surface') {
-            const surfacePal = SURFACE_PALETTES[color.name ?? 'slate'];
-            if (surfacePal)
-                applySurfacePalette(surfacePal);
-        }
-    }
-    onPresetChange(event) {
-        const primary = PRESETS[event]?.signaturePrimary ?? 'violet';
-        this.layoutService.updateLayoutConfig({ preset: event, primary });
-        const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
-        const surface = this.layoutService.layoutConfig().surface ?? null;
-        applyTheme({ preset: event, primary, surface, darkTheme: isDark });
-    }
-    onMenuModeChange(event) {
-        this.layoutService.updateLayoutConfig({ menuMode: event });
-    }
-    onLayoutThemeChange(event) {
-        const menuMode = this.layoutService.layoutConfig().menuMode;
-        this.layoutService.updateLayoutConfig({
-            layoutTheme: event,
-            // Modern skin has no horizontal nav — fall back to the static sidebar.
-            menuMode: event === 'modern' && menuMode === 'topbar' ? 'static' : menuMode,
-        });
-    }
-    translate(key) {
-        return this.translateAdapter?.translate(key) ?? key;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppConfigurator, isStandalone: true, selector: "app-configurator", inputs: { showMenuModeButton: { classPropertyName: "showMenuModeButton", publicName: "showMenuModeButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;", classAttribute: "hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl" }, ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+const LAYOUT_AUTH_STATE = new InjectionToken("LAYOUT_AUTH_STATE");
+const LAYOUT_AUTH_API = new InjectionToken("LAYOUT_AUTH_API");
+const LAYOUT_NOTIFICATION_BELL = new InjectionToken("LAYOUT_NOTIFICATION_BELL");
+const LAYOUT_LANGUAGE_SELECTOR = new InjectionToken("LAYOUT_LANGUAGE_SELECTOR");
+const LAYOUT_LANGUAGE_SELECTOR_PANEL = new InjectionToken("LAYOUT_LANGUAGE_SELECTOR_PANEL");
+const LAYOUT_SEARCHBAR = new InjectionToken("LAYOUT_SEARCHBAR");
+const LAYOUT_IS_RTL = new InjectionToken("LAYOUT_IS_RTL");
+const LAYOUT_SEARCH_ADAPTER = new InjectionToken("LAYOUT_SEARCH_ADAPTER");
+var AppConfigurator = class AppConfigurator {
+	translateAdapter = inject(TranslateService, { optional: true });
+	platformId = inject(PLATFORM_ID);
+	layoutService = inject(LayoutService);
+	showMenuModeButton = input(true, ...ngDevMode ? [{ debugName: "showMenuModeButton" }] : /* istanbul ignore next */ []);
+	presets = PRESET_NAMES;
+	menuModeOptions = computed(() => {
+		const options = [{
+			label: this.translate("layout.configurator.menu.mode.static"),
+			value: "static"
+		}, {
+			label: this.translate("layout.configurator.menu.mode.overlay"),
+			value: "overlay"
+		}];
+		if (this.layoutService.isDesktop() && !this.layoutService.isModernLayout()) options.push({
+			label: this.translate("layout.configurator.menu.mode.topbar"),
+			value: "topbar"
+		});
+		return options;
+	}, ...ngDevMode ? [{ debugName: "menuModeOptions" }] : /* istanbul ignore next */ []);
+	layoutThemeOptions = computed(() => [{
+		label: this.translate("layout.configurator.layout.theme.classic"),
+		value: "classic"
+	}, {
+		label: this.translate("layout.configurator.layout.theme.modern"),
+		value: "modern"
+	}], ...ngDevMode ? [{ debugName: "layoutThemeOptions" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (isPlatformBrowser(this.platformId)) effect(() => {
+			const config = this.layoutService.layoutConfig();
+			applyTheme$1({
+				preset: config.preset ?? "Aura",
+				primary: config.primary ?? "violet",
+				surface: config.surface ?? null,
+				darkTheme: config.darkTheme ?? false
+			});
+		});
+	}
+	surfaces = Object.entries(SURFACE_PALETTES).map(([name, pal]) => ({
+		name,
+		palette: pal
+	}));
+	selectedPrimaryColor = computed(() => this.layoutService.layoutConfig().primary, ...ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : /* istanbul ignore next */ []);
+	selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : /* istanbul ignore next */ []);
+	isSurfaceSelected(surfaceName) {
+		const sel = this.selectedSurfaceColor();
+		if (sel) return sel === surfaceName;
+		return this.layoutService.layoutConfig().darkTheme ? surfaceName === "zinc" : surfaceName === "slate";
+	}
+	selectedPreset = computed(() => this.layoutService.layoutConfig().preset, ...ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []);
+	menuMode = computed(() => this.layoutService.layoutConfig().menuMode, ...ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []);
+	layoutTheme = this.layoutService.layoutTheme;
+	primaryColors = computed(() => {
+		const palettes = [{
+			name: "noir",
+			palette: {}
+		}];
+		for (const [name, pal] of Object.entries(PRIMARY_PALETTES)) palettes.push({
+			name,
+			palette: pal
+		});
+		return palettes;
+	}, ...ngDevMode ? [{ debugName: "primaryColors" }] : /* istanbul ignore next */ []);
+	updateColors(event, type, color) {
+		if (type === "primary") this.layoutService.updateLayoutConfig({ primary: color.name });
+		else if (type === "surface") this.layoutService.updateLayoutConfig({ surface: color.name });
+		this._applyColorChange(type, color);
+		event.stopPropagation();
+	}
+	_applyColorChange(type, color) {
+		const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
+		if (type === "primary") {
+			const primary = color.name ?? "violet";
+			const pal = primary === "noir" ? NOIR_PRIMARY : PRIMARY_PALETTES[primary];
+			if (pal) applyPrimaryPalette(pal, isDark);
+		} else if (type === "surface") {
+			const surfacePal = SURFACE_PALETTES[color.name ?? "slate"];
+			if (surfacePal) applySurfacePalette(surfacePal);
+		}
+	}
+	onPresetChange(event) {
+		const primary = PRESETS[event]?.signaturePrimary ?? "violet";
+		this.layoutService.updateLayoutConfig({
+			preset: event,
+			primary
+		});
+		const isDark = this.layoutService.layoutConfig().darkTheme ?? false;
+		const surface = this.layoutService.layoutConfig().surface ?? null;
+		applyTheme$1({
+			preset: event,
+			primary,
+			surface,
+			darkTheme: isDark
+		});
+	}
+	onMenuModeChange(event) {
+		this.layoutService.updateLayoutConfig({ menuMode: event });
+	}
+	onLayoutThemeChange(event) {
+		const menuMode = this.layoutService.layoutConfig().menuMode;
+		this.layoutService.updateLayoutConfig({
+			layoutTheme: event,
+			menuMode: event === "modern" && menuMode === "topbar" ? "static" : menuMode
+		});
+	}
+	translate(key) {
+		return this.translateAdapter?.translate(key) ?? key;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppConfigurator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppConfigurator,
+		isStandalone: true,
+		selector: "app-configurator",
+		inputs: { showMenuModeButton: {
+			classPropertyName: "showMenuModeButton",
+			publicName: "showMenuModeButton",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			styleAttribute: "background-color: var(--surface-overlay); inset-inline-end: 0;",
+			classAttribute: "hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl"
+		},
+		ngImport: i0,
+		template: `
     <div class="flex flex-col gap-4">
       <div>
         <span class="text-sm text-muted-color font-semibold">{{
@@ -1090,14 +1237,73 @@ class AppConfigurator {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: SelectButtonComponent, selector: "f-selectbutton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "multiple", "disabled", "invalid", "allowEmpty", "size", "styleClass", "style"], outputs: ["onChange"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppConfigurator, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-configurator',
-                    imports: [SelectButtonComponent, FormsModule, TranslatePipe],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: SelectButtonComponent,
+				selector: "f-selectbutton",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"optionDisabled",
+					"multiple",
+					"disabled",
+					"invalid",
+					"allowEmpty",
+					"size",
+					"styleClass",
+					"style"
+				],
+				outputs: ["onChange"]
+			},
+			{
+				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: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppConfigurator,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-configurator",
+			imports: [
+				SelectButtonComponent,
+				FormsModule,
+				TranslatePipe
+			],
+			template: `
     <div class="flex flex-col gap-4">
       <div>
         <span class="text-sm text-muted-color font-semibold">{{
@@ -1181,167 +1387,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       }
     </div>
   `,
-                    host: {
-                        class: 'hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl',
-                        style: 'background-color: var(--surface-overlay); inset-inline-end: 0;',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { showMenuModeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuModeButton", required: false }] }] } });
-
-/**
- * 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);
-    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
-    authApi = inject(LAYOUT_AUTH_API, { optional: true });
-    messageService = inject(MessageService);
-    translateAdapter = inject(TranslateService, {
-        optional: true,
-    });
-    document = inject(DOCUMENT$1);
-    elementRef = inject(ElementRef);
-    _isActive = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
-    isActive = this._isActive.asReadonly();
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive()))
-            .subscribe((event) => {
-            const target = event.target;
-            if (!this.elementRef.nativeElement.contains(target)) {
-                this._isActive.set(false);
-            }
-        });
-    }
-    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ??
-        this.translate('layout.company.branch.selector.no.company'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : /* istanbul ignore next */ []));
-    currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentBranchName" }] : /* istanbul ignore next */ []));
-    _companies = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_companies" }] : /* istanbul ignore next */ []));
-    companies = this._companies.asReadonly();
-    _branches = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_branches" }] : /* istanbul ignore next */ []));
-    branches = this._branches.asReadonly();
-    _selectedCompanyId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_selectedCompanyId" }] : /* istanbul ignore next */ []));
-    selectedCompanyId = this._selectedCompanyId.asReadonly();
-    _selectedBranchId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_selectedBranchId" }] : /* istanbul ignore next */ []));
-    selectedBranchId = this._selectedBranchId.asReadonly();
-    _isLoadingCompanies = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isLoadingCompanies" }] : /* istanbul ignore next */ []));
-    isLoadingCompanies = this._isLoadingCompanies.asReadonly();
-    _isLoadingBranches = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isLoadingBranches" }] : /* istanbul ignore next */ []));
-    isLoadingBranches = this._isLoadingBranches.asReadonly();
-    _isSwitching = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isSwitching" }] : /* istanbul ignore next */ []));
-    isSwitching = this._isSwitching.asReadonly();
-    canSwitch = computed(() => {
-        const selectedCompany = this.selectedCompanyId();
-        if (!selectedCompany)
-            return false;
-        const currentCompanyId = this.authState?.currentCompanyInfo()?.id;
-        const currentBranchId = this.authState?.currentBranchInfo()?.id;
-        const selectedBranch = this.selectedBranchId();
-        return (selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canSwitch" }] : /* istanbul ignore next */ []));
-    onPanelToggle() {
-        this._isActive.update((v) => !v);
-        if (this.isActive() && this.companies().length === 0) {
-            this.loadCompanies();
-        }
-    }
-    loadCompanies() {
-        if (!this.authApi)
-            return;
-        this._isLoadingCompanies.set(true);
-        this.authApi
-            .getMyCompanies()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (companies) => {
-                this._companies.set(companies);
-                this._isLoadingCompanies.set(false);
-            },
-            error: () => {
-                // Error toast handled by global interceptor
-                this._isLoadingCompanies.set(false);
-            },
-        });
-    }
-    onCompanyChange(companyId) {
-        this._selectedCompanyId.set(companyId);
-        if (!companyId) {
-            this._branches.set([]);
-            this._selectedBranchId.set(null);
-            return;
-        }
-        this.loadBranches(companyId);
-    }
-    onBranchChange(branchId) {
-        this._selectedBranchId.set(branchId);
-    }
-    loadBranches(companyId) {
-        if (!this.authApi)
-            return;
-        this._isLoadingBranches.set(true);
-        this._selectedBranchId.set(null);
-        this.authApi
-            .getMyCompanyBranches(companyId)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (branches) => {
-                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);
-                }
-            },
-            error: () => {
-                // Error toast handled by global interceptor
-                this._isLoadingBranches.set(false);
-            },
-        });
-    }
-    onSwitch() {
-        const selectedCompany = this.selectedCompanyId();
-        const selectedBranch = this.selectedBranchId();
-        if (!this.authApi || !selectedCompany)
-            return;
-        if (this.branches().length > 0 && !selectedBranch) {
-            this.messageService.add({
-                severity: 'warn',
-                summary: this.translate('layout.company.branch.selector.branch.required'),
-                detail: this.translate('layout.company.branch.selector.please.select.branch'),
-            });
-            return;
-        }
-        this._isSwitching.set(true);
-        this.authApi
-            .switchCompany(selectedCompany, selectedBranch || '')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: () => { },
-            error: () => {
-                // Error toast handled by global interceptor
-                this._isSwitching.set(false);
-            },
-        });
-    }
-    translate(key) {
-        return this.translateAdapter?.translate(key) ?? key;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
+			host: {
+				class: "hidden absolute top-[3.25rem] w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-xl",
+				style: "background-color: var(--surface-overlay); inset-inline-end: 0;"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { showMenuModeButton: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "showMenuModeButton",
+			required: false
+		}]
+	}] }
+});
+var AppCompanyBranchSelector = class AppCompanyBranchSelector {
+	destroyRef = inject(DestroyRef);
+	authState = inject(LAYOUT_AUTH_STATE, { optional: true });
+	authApi = inject(LAYOUT_AUTH_API, { optional: true });
+	messageService = inject(MessageService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	document = inject(DOCUMENT$1);
+	elementRef = inject(ElementRef);
+	_isActive = signal(false, ...ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []);
+	isActive = this._isActive.asReadonly();
+	constructor() {
+		fromEvent(this.document, "click").pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive())).subscribe((event) => {
+			const target = event.target;
+			if (!this.elementRef.nativeElement.contains(target)) this._isActive.set(false);
+		});
+	}
+	currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? this.translate("layout.company.branch.selector.no.company"), ...ngDevMode ? [{ debugName: "currentCompanyName" }] : /* istanbul ignore next */ []);
+	currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...ngDevMode ? [{ debugName: "currentBranchName" }] : /* istanbul ignore next */ []);
+	_companies = signal([], ...ngDevMode ? [{ debugName: "_companies" }] : /* istanbul ignore next */ []);
+	companies = this._companies.asReadonly();
+	_branches = signal([], ...ngDevMode ? [{ debugName: "_branches" }] : /* istanbul ignore next */ []);
+	branches = this._branches.asReadonly();
+	branchTreeNodes = computed(() => buildBranchTreeNodes(this.branches()), ...ngDevMode ? [{ debugName: "branchTreeNodes" }] : /* istanbul ignore next */ []);
+	_selectedCompanyId = signal(null, ...ngDevMode ? [{ debugName: "_selectedCompanyId" }] : /* istanbul ignore next */ []);
+	selectedCompanyId = this._selectedCompanyId.asReadonly();
+	_selectedBranchId = signal(null, ...ngDevMode ? [{ debugName: "_selectedBranchId" }] : /* istanbul ignore next */ []);
+	selectedBranchId = this._selectedBranchId.asReadonly();
+	_isLoadingCompanies = signal(false, ...ngDevMode ? [{ debugName: "_isLoadingCompanies" }] : /* istanbul ignore next */ []);
+	isLoadingCompanies = this._isLoadingCompanies.asReadonly();
+	_isLoadingBranches = signal(false, ...ngDevMode ? [{ debugName: "_isLoadingBranches" }] : /* istanbul ignore next */ []);
+	isLoadingBranches = this._isLoadingBranches.asReadonly();
+	_isSwitching = signal(false, ...ngDevMode ? [{ debugName: "_isSwitching" }] : /* istanbul ignore next */ []);
+	isSwitching = this._isSwitching.asReadonly();
+	canSwitch = computed(() => {
+		const selectedCompany = this.selectedCompanyId();
+		if (!selectedCompany) return false;
+		const currentCompanyId = this.authState?.currentCompanyInfo()?.id;
+		const currentBranchId = this.authState?.currentBranchInfo()?.id;
+		const selectedBranch = this.selectedBranchId();
+		return selectedCompany !== currentCompanyId || selectedBranch !== currentBranchId;
+	}, ...ngDevMode ? [{ debugName: "canSwitch" }] : /* istanbul ignore next */ []);
+	onPanelToggle() {
+		this._isActive.update((v) => !v);
+		if (this.isActive() && this.companies().length === 0) this.loadCompanies();
+	}
+	loadCompanies() {
+		if (!this.authApi) return;
+		this._isLoadingCompanies.set(true);
+		this.authApi.getMyCompanies().pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (companies) => {
+				this._companies.set(companies);
+				this._isLoadingCompanies.set(false);
+			},
+			error: () => {
+				this._isLoadingCompanies.set(false);
+			}
+		});
+	}
+	onCompanyChange(companyId) {
+		this._selectedCompanyId.set(companyId);
+		if (!companyId) {
+			this._branches.set([]);
+			this._selectedBranchId.set(null);
+			return;
+		}
+		this.loadBranches(companyId);
+	}
+	onBranchChange(branchId) {
+		this._selectedBranchId.set(branchId);
+	}
+	loadBranches(companyId) {
+		if (!this.authApi) return;
+		this._isLoadingBranches.set(true);
+		this._selectedBranchId.set(null);
+		this.authApi.getMyCompanyBranches(companyId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (branches) => {
+				this._branches.set(branches);
+				this._isLoadingBranches.set(false);
+				if (branches.length === 1) this._selectedBranchId.set(branches[0].id);
+			},
+			error: () => {
+				this._isLoadingBranches.set(false);
+			}
+		});
+	}
+	onSwitch() {
+		const selectedCompany = this.selectedCompanyId();
+		const selectedBranch = this.selectedBranchId();
+		if (!this.authApi || !selectedCompany) return;
+		if (this.branches().length > 0 && !selectedBranch) {
+			this.messageService.add({
+				severity: "warn",
+				summary: this.translate("layout.company.branch.selector.branch.required"),
+				detail: this.translate("layout.company.branch.selector.please.select.branch")
+			});
+			return;
+		}
+		this._isSwitching.set(true);
+		this.authApi.switchCompany(selectedCompany, selectedBranch || "").pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: () => {},
+			error: () => {
+				this._isSwitching.set(false);
+			}
+		});
+	}
+	translate(key) {
+		return this.translateAdapter?.translate(key) ?? key;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppCompanyBranchSelector,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppCompanyBranchSelector,
+		isStandalone: true,
+		selector: "app-company-branch-selector",
+		host: { classAttribute: "relative" },
+		ngImport: i0,
+		template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1394,17 +1580,19 @@ class AppCompanyBranchSelector {
             <label class="text-sm text-muted-color font-semibold">{{
               'layout.company.branch.selector.branch' | translate
             }}</label>
-            <f-select
-              [options]="branches()"
+            <f-treeselect
+              [options]="branchTreeNodes()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
-              optionLabel="name"
-              optionValue="id"
               [placeholder]="
                 'layout.company.branch.selector.select.branch' | translate
               "
+              [filter]="true"
+              [filterPlaceholder]="'shared.search' | translate"
+              [emptyMessage]="'shared.no.results' | translate"
+              [disabled]="isLoadingBranches()"
+              appendTo="self"
               class="w-full"
-              [loading]="isLoadingBranches()"
             />
           </div>
         }
@@ -1427,22 +1615,191 @@ class AppCompanyBranchSelector {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy", "selectedObject"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-company-branch-selector',
-                    imports: [
-                        FButtonDirective,
-                        SelectComponent,
-                        StyleClassDirective,
-                        UiIconComponent,
-                        FormsModule,
-                        TranslatePipe,
-                    ],
-                    host: { class: 'relative' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "directive",
+				type: StyleClassDirective,
+				selector: "[fStyleClass]",
+				inputs: [
+					"fStyleClass",
+					"enterFromClass",
+					"enterActiveClass",
+					"enterToClass",
+					"leaveFromClass",
+					"leaveActiveClass",
+					"leaveToClass",
+					"hideOnOutsideClick",
+					"toggleClass"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeSelectComponent,
+				selector: "f-treeselect",
+				inputs: [
+					"options",
+					"placeholder",
+					"inputId",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterPlaceholder",
+					"selectionMode",
+					"display",
+					"propagateSelectionDown",
+					"propagateSelectionUp",
+					"showClear",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"emptyMessage",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				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: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppCompanyBranchSelector,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-company-branch-selector",
+			imports: [
+				FButtonDirective,
+				SelectComponent,
+				StyleClassDirective,
+				TreeSelectComponent,
+				UiIconComponent,
+				FormsModule,
+				TranslatePipe
+			],
+			host: { class: "relative" },
+			template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1495,17 +1852,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             <label class="text-sm text-muted-color font-semibold">{{
               'layout.company.branch.selector.branch' | translate
             }}</label>
-            <f-select
-              [options]="branches()"
+            <f-treeselect
+              [options]="branchTreeNodes()"
               [ngModel]="selectedBranchId()"
               (ngModelChange)="onBranchChange($event)"
-              optionLabel="name"
-              optionValue="id"
               [placeholder]="
                 'layout.company.branch.selector.select.branch' | translate
               "
+              [filter]="true"
+              [filterPlaceholder]="'shared.search' | translate"
+              [emptyMessage]="'shared.no.results' | translate"
+              [disabled]="isLoadingBranches()"
+              appendTo="self"
               class="w-full"
-              [loading]="isLoadingBranches()"
             />
           </div>
         }
@@ -1528,33 +1887,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </div>
       </div>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [] });
-
-class AppLauncher {
-    layoutService = inject(LayoutService);
-    destroyRef = inject(DestroyRef);
-    document = inject(DOCUMENT$1);
-    elementRef = inject(ElementRef);
-    _isActive = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
-    isActive = this._isActive.asReadonly();
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive()))
-            .subscribe((event) => {
-            const target = event.target;
-            if (!this.elementRef.nativeElement.contains(target)) {
-                this._isActive.set(false);
-            }
-        });
-    }
-    toggleActive() {
-        this._isActive.update((v) => !v);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var AppLauncher = class AppLauncher {
+	layoutService = inject(LayoutService);
+	destroyRef = inject(DestroyRef);
+	document = inject(DOCUMENT$1);
+	elementRef = inject(ElementRef);
+	_isActive = signal(false, ...ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []);
+	isActive = this._isActive.asReadonly();
+	constructor() {
+		fromEvent(this.document, "click").pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive())).subscribe((event) => {
+			const target = event.target;
+			if (!this.elementRef.nativeElement.contains(target)) this._isActive.set(false);
+		});
+	}
+	toggleActive() {
+		this._isActive.update((v) => !v);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppLauncher,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppLauncher,
+		isStandalone: true,
+		selector: "app-launcher",
+		host: { classAttribute: "relative" },
+		ngImport: i0,
+		template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1610,15 +1980,61 @@ class AppLauncher {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppLauncher, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-launcher',
-                    imports: [StyleClassDirective, UiIconComponent, TranslatePipe],
-                    host: { class: 'relative' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: StyleClassDirective,
+				selector: "[fStyleClass]",
+				inputs: [
+					"fStyleClass",
+					"enterFromClass",
+					"enterActiveClass",
+					"enterToClass",
+					"leaveFromClass",
+					"leaveActiveClass",
+					"leaveToClass",
+					"hideOnOutsideClick",
+					"toggleClass"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppLauncher,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-launcher",
+			imports: [
+				StyleClassDirective,
+				UiIconComponent,
+				TranslatePipe
+			],
+			host: { class: "relative" },
+			template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1674,95 +2090,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </div>
       }
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [] });
-
-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);
-    translateAdapter = inject(TranslateService, {
-        optional: true,
-    });
-    appConfig = inject(APP_CONFIG, { optional: true });
-    document = inject(DOCUMENT$1);
-    elementRef = inject(ElementRef);
-    _isActive = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
-    isActive = this._isActive.asReadonly();
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive()))
-            .subscribe((event) => {
-            const target = event.target;
-            if (!this.elementRef.nativeElement.contains(target)) {
-                this._isActive.set(false);
-            }
-        });
-    }
-    togglePanel() {
-        this._isActive.update((v) => !v);
-    }
-    userName = computed(() => this.authState?.loginUserData()?.name ??
-        this.translate('layout.profile.guest'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
-    userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []));
-    profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? '', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "profilePicture" }] : /* istanbul ignore next */ []));
-    signUpEnabled = computed(() => this.appConfig ? isSignUpEnabled(this.appConfig) : false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "signUpEnabled" }] : /* istanbul ignore next */ []));
-    logout() {
-        if (!this.authApi)
-            return;
-        this.authApi
-            .logOut()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: (result) => {
-                const r = result;
-                this.messageService.add({
-                    severity: 'success',
-                    summary: this.translate('shared.success'),
-                    detail: r?.messageKey
-                        ? this.translate(r.messageKey, r.messageVariables)
-                        : (r?.message ?? ''),
-                });
-                this.authApi?.navigateLogin(false);
-            },
-            error: () => {
-                // Error toast handled by global interceptor
-            },
-        });
-    }
-    copySignUpLink() {
-        const slug = this.authState?.currentCompanyInfo()?.slug ?? '';
-        const signUpLink = `${window.location.origin}/auth/register?companySlug=${slug}`;
-        navigator.clipboard
-            .writeText(signUpLink)
-            .then(() => {
-            this.messageService.add({
-                severity: 'success',
-                summary: this.translate('layout.profile.link.copied'),
-                detail: this.translate('layout.profile.sign.up.link.copied'),
-            });
-        })
-            .catch(() => {
-            this.messageService.add({
-                severity: 'error',
-                summary: this.translate('shared.error'),
-                detail: this.translate('layout.profile.failed.copy.sign.up.link'),
-            });
-        });
-    }
-    translate(key, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var AppProfile = 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);
+	translateAdapter = inject(TranslateService, { optional: true });
+	appConfig = inject(APP_CONFIG, { optional: true });
+	document = inject(DOCUMENT$1);
+	elementRef = inject(ElementRef);
+	_isActive = signal(false, ...ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []);
+	isActive = this._isActive.asReadonly();
+	constructor() {
+		fromEvent(this.document, "click").pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this.isActive())).subscribe((event) => {
+			const target = event.target;
+			if (!this.elementRef.nativeElement.contains(target)) this._isActive.set(false);
+		});
+	}
+	togglePanel() {
+		this._isActive.update((v) => !v);
+	}
+	userName = computed(() => this.authState?.loginUserData()?.name ?? this.translate("layout.profile.guest"), ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+	userEmail = computed(() => this.authState?.loginUserData()?.email ?? "", ...ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []);
+	profilePicture = computed(() => this.layoutService.userProfilePictureUrl() ?? "", ...ngDevMode ? [{ debugName: "profilePicture" }] : /* istanbul ignore next */ []);
+	signUpEnabled = computed(() => this.appConfig ? isSignUpEnabled(this.appConfig) : false, ...ngDevMode ? [{ debugName: "signUpEnabled" }] : /* istanbul ignore next */ []);
+	logout() {
+		if (!this.authApi) return;
+		this.authApi.logOut().pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (result) => {
+				const r = result;
+				this.messageService.add({
+					severity: "success",
+					summary: this.translate("shared.success"),
+					detail: r?.messageKey ? this.translate(r.messageKey, r.messageVariables) : r?.message ?? ""
+				});
+				this.authApi?.navigateLogin(false);
+			},
+			error: () => {}
+		});
+	}
+	copySignUpLink() {
+		const slug = this.authState?.currentCompanyInfo()?.slug ?? "";
+		const signUpLink = `${window.location.origin}/auth/register?companySlug=${slug}`;
+		navigator.clipboard.writeText(signUpLink).then(() => {
+			this.messageService.add({
+				severity: "success",
+				summary: this.translate("layout.profile.link.copied"),
+				detail: this.translate("layout.profile.sign.up.link.copied")
+			});
+		}).catch(() => {
+			this.messageService.add({
+				severity: "error",
+				summary: this.translate("shared.error"),
+				detail: this.translate("layout.profile.failed.copy.sign.up.link")
+			});
+		});
+	}
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppProfile,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppProfile,
+		isStandalone: true,
+		selector: "app-profile",
+		host: { classAttribute: "relative" },
+		ngImport: i0,
+		template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1835,15 +2244,88 @@ class AppProfile {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppProfile, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-profile',
-                    imports: [StyleClassDirective, UiIconComponent, RouterLink, IsEmptyImageDirective, TranslatePipe],
-                    host: { class: 'relative' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: StyleClassDirective,
+				selector: "[fStyleClass]",
+				inputs: [
+					"fStyleClass",
+					"enterFromClass",
+					"enterActiveClass",
+					"enterToClass",
+					"leaveFromClass",
+					"leaveActiveClass",
+					"leaveToClass",
+					"hideOnOutsideClick",
+					"toggleClass"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: IsEmptyImageDirective,
+				selector: "img",
+				inputs: ["src"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppProfile,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-profile",
+			imports: [
+				StyleClassDirective,
+				UiIconComponent,
+				RouterLink,
+				IsEmptyImageDirective,
+				TranslatePipe
+			],
+			host: { class: "relative" },
+			template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1916,151 +2398,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </div>
       </div>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [] });
-
-class AppSearchbar {
-    layoutService = inject(LayoutService);
-    router = inject(Router);
-    searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, {
-        optional: true,
-    });
-    destroyRef = inject(DestroyRef);
-    document = inject(DOCUMENT$1);
-    searchTerm = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
-    suggestionsOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "suggestionsOpen" }] : /* istanbul ignore next */ []));
-    suggestions = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
-    focusedIndex = signal(-1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
-    isSearchExpanded = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSearchExpanded" }] : /* istanbul ignore next */ []));
-    isResponsive = signal(typeof window !== 'undefined' ? window.innerWidth < 768 : false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isResponsive" }] : /* istanbul ignore next */ []));
-    searchWrapper = viewChild('searchWrapper', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "searchWrapper" }] : /* istanbul ignore next */ []));
-    searchInput = viewChild('searchInput', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
-    searchTimeout;
-    constructor() {
-        // Track responsive breakpoint (mobile < 768px)
-        if (typeof window !== 'undefined') {
-            fromEvent(window, 'resize')
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => {
-                this.isResponsive.set(window.innerWidth < 768);
-            });
-        }
-        // Close dropdown/search on outside click
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            const wrapper = this.searchWrapper()?.nativeElement;
-            const target = event.target;
-            if (wrapper && !wrapper.contains(target)) {
-                if (this.suggestionsOpen()) {
-                    this.closeSuggestions();
-                }
-                if (this.isSearchExpanded() &&
-                    (this.layoutService.isTopbar() || this.isResponsive())) {
-                    this.closeSearch();
-                }
-            }
-        });
-        // Debounced search for suggestions
-        effect(() => {
-            const query = this.searchTerm();
-            clearTimeout(this.searchTimeout);
-            if (!this.searchAdapter || !query.trim()) {
-                this.suggestions.set([]);
-                this.focusedIndex.set(-1);
-                return;
-            }
-            this.searchTimeout = setTimeout(() => {
-                this.searchAdapter.getSuggestions(query)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe((results) => {
-                    this.suggestions.set(results);
-                    this.focusedIndex.set(-1);
-                    this.suggestionsOpen.set(results.length > 0);
-                });
-            }, 300);
-        });
-    }
-    onFocus() {
-        if (this.suggestions().length > 0) {
-            this.suggestionsOpen.set(true);
-        }
-    }
-    handleKeydown(event) {
-        const items = this.suggestions();
-        const current = this.focusedIndex();
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                this.focusedIndex.set(current < items.length - 1 ? current + 1 : 0);
-                this.suggestionsOpen.set(items.length > 0);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this.focusedIndex.set(current > 0 ? current - 1 : items.length - 1);
-                break;
-            case 'Escape':
-                event.preventDefault();
-                this.closeSuggestions();
-                break;
-        }
-    }
-    handleEnter() {
-        const current = this.focusedIndex();
-        const items = this.suggestions();
-        if (current >= 0 && current < items.length) {
-            this.selectSuggestion(items[current]);
-        }
-        else if (items.length > 0) {
-            this.selectSuggestion(items[0]);
-        }
-        else {
-            this.onSearch();
-        }
-    }
-    selectSuggestion(item) {
-        if (item.routerLink) {
-            this.router.navigate(item.routerLink);
-        }
-        this.searchTerm.set('');
-        this.closeSuggestions();
-        if (this.layoutService.isTopbar() || this.isResponsive()) {
-            this.closeSearch();
-        }
-    }
-    closeSuggestions() {
-        this.suggestionsOpen.set(false);
-        this.focusedIndex.set(-1);
-    }
-    toggleSearch() {
-        this.isSearchExpanded.set(!this.isSearchExpanded());
-        if (this.isSearchExpanded()) {
-            setTimeout(() => {
-                this.searchInput()?.nativeElement?.focus();
-            }, 100);
-        }
-    }
-    closeSearch() {
-        this.isSearchExpanded.set(false);
-        this.closeSuggestions();
-    }
-    onSearch() {
-        const query = this.searchTerm();
-        if (this.searchAdapter?.onSearch && query.trim()) {
-            this.searchAdapter.onSearch(query);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppSearchbar, isStandalone: true, selector: "app-searchbar", viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var AppSearchbar = class AppSearchbar {
+	layoutService = inject(LayoutService);
+	router = inject(Router);
+	searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, { optional: true });
+	destroyRef = inject(DestroyRef);
+	document = inject(DOCUMENT$1);
+	searchTerm = signal("", ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
+	suggestionsOpen = signal(false, ...ngDevMode ? [{ debugName: "suggestionsOpen" }] : /* istanbul ignore next */ []);
+	suggestions = signal([], ...ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []);
+	focusedIndex = signal(-1, ...ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []);
+	isSearchExpanded = signal(false, ...ngDevMode ? [{ debugName: "isSearchExpanded" }] : /* istanbul ignore next */ []);
+	isResponsive = signal(typeof window !== "undefined" ? window.innerWidth < 768 : false, ...ngDevMode ? [{ debugName: "isResponsive" }] : /* istanbul ignore next */ []);
+	searchWrapper = viewChild("searchWrapper", ...ngDevMode ? [{ debugName: "searchWrapper" }] : /* istanbul ignore next */ []);
+	searchInput = viewChild("searchInput", ...ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []);
+	searchTimeout;
+	constructor() {
+		if (typeof window !== "undefined") fromEvent(window, "resize").pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+			this.isResponsive.set(window.innerWidth < 768);
+		});
+		fromEvent(this.document, "click").pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+			const wrapper = this.searchWrapper()?.nativeElement;
+			const target = event.target;
+			if (wrapper && !wrapper.contains(target)) {
+				if (this.suggestionsOpen()) this.closeSuggestions();
+				if (this.isSearchExpanded() && (this.layoutService.isTopbar() || this.isResponsive())) this.closeSearch();
+			}
+		});
+		effect(() => {
+			const query = this.searchTerm();
+			clearTimeout(this.searchTimeout);
+			if (!this.searchAdapter || !query.trim()) {
+				this.suggestions.set([]);
+				this.focusedIndex.set(-1);
+				return;
+			}
+			this.searchTimeout = setTimeout(() => {
+				this.searchAdapter.getSuggestions(query).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((results) => {
+					this.suggestions.set(results);
+					this.focusedIndex.set(-1);
+					this.suggestionsOpen.set(results.length > 0);
+				});
+			}, 300);
+		});
+	}
+	onFocus() {
+		if (this.suggestions().length > 0) this.suggestionsOpen.set(true);
+	}
+	handleKeydown(event) {
+		const items = this.suggestions();
+		const current = this.focusedIndex();
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.focusedIndex.set(current < items.length - 1 ? current + 1 : 0);
+				this.suggestionsOpen.set(items.length > 0);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				this.focusedIndex.set(current > 0 ? current - 1 : items.length - 1);
+				break;
+			case "Escape":
+				event.preventDefault();
+				this.closeSuggestions();
+		}
+	}
+	handleEnter() {
+		const current = this.focusedIndex();
+		const items = this.suggestions();
+		if (current >= 0 && current < items.length) this.selectSuggestion(items[current]);
+		else if (items.length > 0) this.selectSuggestion(items[0]);
+		else this.onSearch();
+	}
+	selectSuggestion(item) {
+		if (item.routerLink) this.router.navigate(item.routerLink);
+		this.searchTerm.set("");
+		this.closeSuggestions();
+		if (this.layoutService.isTopbar() || this.isResponsive()) this.closeSearch();
+	}
+	closeSuggestions() {
+		this.suggestionsOpen.set(false);
+		this.focusedIndex.set(-1);
+	}
+	toggleSearch() {
+		this.isSearchExpanded.set(!this.isSearchExpanded());
+		if (this.isSearchExpanded()) setTimeout(() => {
+			this.searchInput()?.nativeElement?.focus();
+		}, 100);
+	}
+	closeSearch() {
+		this.isSearchExpanded.set(false);
+		this.closeSuggestions();
+	}
+	onSearch() {
+		const query = this.searchTerm();
+		if (this.searchAdapter?.onSearch && query.trim()) this.searchAdapter.onSearch(query);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppSearchbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppSearchbar,
+		isStandalone: true,
+		selector: "app-searchbar",
+		viewQueries: [{
+			propertyName: "searchWrapper",
+			first: true,
+			predicate: ["searchWrapper"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "searchInput",
+			first: true,
+			predicate: ["searchInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <div
       class="search-container h-full"
       #searchWrapper
@@ -2164,18 +2631,104 @@ class AppSearchbar {
         }
       }
     </div>
-  `, isInline: true, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:var(--layout-shell-topbar-bottom, 4rem);left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"], dependencies: [{ kind: "component", type: IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppSearchbar, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-searchbar', imports: [
-                        IconFieldComponent,
-                        InputIconComponent,
-                        InputTextDirective,
-                        UiIconComponent,
-                        FormsModule,
-                        TranslatePipe,
-                    ], template: `
+  `,
+		isInline: true,
+		styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:var(--layout-shell-topbar-bottom, 4rem);left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: IconFieldComponent,
+				selector: "f-iconfield",
+				inputs: ["iconPosition", "styleClass"]
+			},
+			{
+				kind: "component",
+				type: InputIconComponent,
+				selector: "f-inputicon",
+				inputs: [
+					"icon",
+					"position",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputTextDirective,
+				selector: "[fInputText]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"size",
+					"fluid"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				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: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppSearchbar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-searchbar",
+			imports: [
+				IconFieldComponent,
+				InputIconComponent,
+				InputTextDirective,
+				UiIconComponent,
+				FormsModule,
+				TranslatePipe
+			],
+			template: `
     <div
       class="search-container h-full"
       #searchWrapper
@@ -2279,56 +2832,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         }
       }
     </div>
-  `, styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:var(--layout-shell-topbar-bottom, 4rem);left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { searchWrapper: [{ type: i0.ViewChild, args: ['searchWrapper', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
-
-/**
- * Trailing action rail of the topbar — search, theme controls and the widget menu.
- * Skins own the bar around it; the rail itself is identical in every skin, and
- * `display: contents` on the host keeps it a direct flex child of the bar.
- */
-class AppTopbarActions {
-    appConfig = inject(APP_CONFIG);
-    document = inject(DOCUMENT$1);
-    destroyRef = inject(DestroyRef);
-    layoutService = inject(LayoutService);
-    notificationBellComponent = inject(LAYOUT_NOTIFICATION_BELL, {
-        optional: true,
-    });
-    languageSelectorComponent = inject(LAYOUT_LANGUAGE_SELECTOR, {
-        optional: true,
-    });
-    searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, {
-        optional: true,
-    });
-    configContainer = viewChild('configContainer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "configContainer" }] : /* istanbul ignore next */ []));
-    _configPanelOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_configPanelOpen" }] : /* istanbul ignore next */ []));
-    configPanelOpen = this._configPanelOpen.asReadonly();
-    hasSearchAdapter = computed(() => !!this.searchAdapter, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasSearchAdapter" }] : /* istanbul ignore next */ []));
-    enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this._configPanelOpen()))
-            .subscribe((event) => {
-            const configEl = this.configContainer()?.nativeElement;
-            if (configEl && !configEl.contains(event.target)) {
-                this._configPanelOpen.set(false);
-            }
-        });
-    }
-    toggleDarkMode() {
-        this.layoutService.updateLayoutConfig({
-            darkTheme: !this.layoutService.layoutConfig().darkTheme,
-        });
-    }
-    toggleConfigPanel() {
-        this._configPanelOpen.update((open) => !open);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppTopbarActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppTopbarActions, isStandalone: true, selector: "app-topbar-actions", host: { styleAttribute: "display: contents" }, viewQueries: [{ propertyName: "configContainer", first: true, predicate: ["configContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+  `,
+			styles: [".search-container{display:flex;align-items:center;position:relative;width:100%;flex:0 1 auto}.search-container.topbar-mode{width:auto}.search-dropdown-panel{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1100;padding:1rem .75rem .75rem;min-width:300px;max-width:450px;animation:slideDown .2s ease-out}.search-suggestions{margin-top:.5rem;border-top:1px solid var(--surface-border);padding-top:.5rem;background-color:inherit}.suggestions-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;background-color:inherit}.suggestion-item{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--text-color);border-bottom:1px solid var(--surface-border);transition:background-color .15s ease,color .15s ease}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.focused{background-color:var(--surface-50);color:var(--primary-color)}.suggestion-icon{color:var(--text-color-secondary);font-size:1rem;flex-shrink:0;transition:color .15s ease}.suggestion-item:hover .suggestion-icon,.suggestion-item.focused .suggestion-icon{color:var(--primary-color)}.suggestion-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;background-color:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--f-content-border-radius);box-shadow:var(--f-shadow-xl);z-index:1000;overflow:hidden}.search-dropdown .suggestions-list{background-color:inherit}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.search-dropdown-panel{min-width:280px;max-width:400px}}@media(max-width:576px){.search-dropdown-panel{position:fixed;top:var(--layout-shell-topbar-bottom, 4rem);left:0;right:0;bottom:auto;width:100vw;min-width:100vw;max-width:100vw;margin-top:0;padding:1rem;border-radius:0;border-bottom:1px solid var(--surface-border);z-index:1200}.search-dropdown-panel .search-iconfield{margin-bottom:1rem}.search-dropdown{max-width:100%;left:0!important;right:0!important;transform:none;position:static;border-radius:var(--f-content-border-radius);margin-top:0}.suggestion-item{padding:.75rem}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		searchWrapper: [{
+			type: i0.ViewChild,
+			args: ["searchWrapper", { isSignal: true }]
+		}],
+		searchInput: [{
+			type: i0.ViewChild,
+			args: ["searchInput", { isSignal: true }]
+		}]
+	}
+});
+var AppTopbarActions = class AppTopbarActions {
+	appConfig = inject(APP_CONFIG);
+	document = inject(DOCUMENT$1);
+	destroyRef = inject(DestroyRef);
+	layoutService = inject(LayoutService);
+	notificationBellComponent = inject(LAYOUT_NOTIFICATION_BELL, { optional: true });
+	languageSelectorComponent = inject(LAYOUT_LANGUAGE_SELECTOR, { optional: true });
+	searchAdapter = inject(LAYOUT_SEARCH_ADAPTER, { optional: true });
+	configContainer = viewChild("configContainer", ...ngDevMode ? [{ debugName: "configContainer" }] : /* istanbul ignore next */ []);
+	_configPanelOpen = signal(false, ...ngDevMode ? [{ debugName: "_configPanelOpen" }] : /* istanbul ignore next */ []);
+	configPanelOpen = this._configPanelOpen.asReadonly();
+	hasSearchAdapter = computed(() => !!this.searchAdapter, ...ngDevMode ? [{ debugName: "hasSearchAdapter" }] : /* istanbul ignore next */ []);
+	enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
+	constructor() {
+		fromEvent(this.document, "click").pipe(takeUntilDestroyed(this.destroyRef), filter$1(() => this._configPanelOpen())).subscribe((event) => {
+			const configEl = this.configContainer()?.nativeElement;
+			if (configEl && !configEl.contains(event.target)) this._configPanelOpen.set(false);
+		});
+	}
+	toggleDarkMode() {
+		this.layoutService.updateLayoutConfig({ darkTheme: !this.layoutService.layoutConfig().darkTheme });
+	}
+	toggleConfigPanel() {
+		this._configPanelOpen.update((open) => !open);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppTopbarActions,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppTopbarActions,
+		isStandalone: true,
+		selector: "app-topbar-actions",
+		host: { styleAttribute: "display: contents" },
+		viewQueries: [{
+			propertyName: "configContainer",
+			first: true,
+			predicate: ["configContainer"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <div class="layout-topbar-actions">
       @if (hasSearchAdapter()) {
         <app-searchbar />
@@ -2396,25 +2964,107 @@ class AppTopbarActions {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator", inputs: ["showMenuModeButton"] }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }, { kind: "component", type: AppSearchbar, selector: "app-searchbar" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppTopbarActions, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-topbar-actions',
-                    imports: [
-                        StyleClassDirective,
-                        UiIconComponent,
-                        NgComponentOutlet,
-                        TranslatePipe,
-                        AppConfigurator,
-                        AppProfile,
-                        AppCompanyBranchSelector,
-                        AppLauncher,
-                        AppSearchbar,
-                    ],
-                    host: { style: 'display: contents' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: StyleClassDirective,
+				selector: "[fStyleClass]",
+				inputs: [
+					"fStyleClass",
+					"enterFromClass",
+					"enterActiveClass",
+					"enterToClass",
+					"leaveFromClass",
+					"leaveActiveClass",
+					"leaveToClass",
+					"hideOnOutsideClick",
+					"toggleClass"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "component",
+				type: AppConfigurator,
+				selector: "app-configurator",
+				inputs: ["showMenuModeButton"]
+			},
+			{
+				kind: "component",
+				type: AppProfile,
+				selector: "app-profile"
+			},
+			{
+				kind: "component",
+				type: AppCompanyBranchSelector,
+				selector: "app-company-branch-selector"
+			},
+			{
+				kind: "component",
+				type: AppLauncher,
+				selector: "app-launcher"
+			},
+			{
+				kind: "component",
+				type: AppSearchbar,
+				selector: "app-searchbar"
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppTopbarActions,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-topbar-actions",
+			imports: [
+				StyleClassDirective,
+				UiIconComponent,
+				NgComponentOutlet,
+				TranslatePipe,
+				AppConfigurator,
+				AppProfile,
+				AppCompanyBranchSelector,
+				AppLauncher,
+				AppSearchbar
+			],
+			host: { style: "display: contents" },
+			template: `
     <div class="layout-topbar-actions">
       @if (hasSearchAdapter()) {
         <app-searchbar />
@@ -2482,69 +3132,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </div>
       </div>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { configContainer: [{ type: i0.ViewChild, args: ['configContainer', { isSignal: true }] }] } });
-
-class AppTopbar {
-    layoutService = inject(LayoutService);
-    navContainer = viewChild('navContainer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navContainer" }] : /* istanbul ignore next */ []));
-    _scrollThumb = signal({ width: 0, offset: 0 }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_scrollThumb" }] : /* istanbul ignore next */ []));
-    scrollThumb = this._scrollThumb.asReadonly();
-    constructor() {
-        effect((onCleanup) => {
-            const nav = this.navContainer();
-            if (!nav) {
-                this._scrollThumb.set({ width: 0, offset: 0 });
-                return;
-            }
-            const subscription = fromEvent(nav.nativeElement, 'scroll').subscribe(() => {
-                this.recalculateHoveredSubmenu(nav.nativeElement);
-                this.syncScrollThumb();
-            });
-            const resizeObserver = typeof ResizeObserver === 'undefined'
-                ? null
-                : new ResizeObserver(() => this.syncScrollThumb());
-            resizeObserver?.observe(nav.nativeElement);
-            onCleanup(() => {
-                subscription.unsubscribe();
-                resizeObserver?.disconnect();
-            });
-        });
-    }
-    syncScrollThumb() {
-        const nav = this.navContainer()?.nativeElement;
-        if (!nav)
-            return;
-        const { clientWidth, scrollWidth, scrollLeft } = nav;
-        if (scrollWidth <= clientWidth + 1) {
-            this._scrollThumb.set({ width: 0, offset: 0 });
-            return;
-        }
-        const ratio = clientWidth / scrollWidth;
-        this._scrollThumb.set({
-            width: Math.round(clientWidth * ratio),
-            offset: Math.round(Math.abs(scrollLeft) * ratio),
-        });
-    }
-    /**
-     * Horizontal-nav submenus are `position: fixed`, so scrolling the nav strip leaves
-     * an open submenu behind — re-anchor it to the item it belongs to.
-     */
-    recalculateHoveredSubmenu(navEl) {
-        navEl.querySelectorAll('li:hover').forEach((li) => {
-            const link = li.querySelector(':scope > a');
-            if (!link)
-                return;
-            const rect = link.getBoundingClientRect();
-            li.style.setProperty('--submenu-left', `${rect.left - 12}px`);
-            li.style.setProperty('--submenu-top', `${rect.bottom + 12}px`);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppTopbar, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "navContainer", first: true, predicate: ["navContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="layout-topbar">
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { configContainer: [{
+		type: i0.ViewChild,
+		args: ["configContainer", { isSignal: true }]
+	}] }
+});
+var AppTopbar = class AppTopbar {
+	layoutService = inject(LayoutService);
+	navContainer = viewChild("navContainer", ...ngDevMode ? [{ debugName: "navContainer" }] : /* istanbul ignore next */ []);
+	_scrollThumb = signal({
+		width: 0,
+		offset: 0
+	}, ...ngDevMode ? [{ debugName: "_scrollThumb" }] : /* istanbul ignore next */ []);
+	scrollThumb = this._scrollThumb.asReadonly();
+	constructor() {
+		effect((onCleanup) => {
+			const nav = this.navContainer();
+			if (!nav) {
+				this._scrollThumb.set({
+					width: 0,
+					offset: 0
+				});
+				return;
+			}
+			const subscription = fromEvent(nav.nativeElement, "scroll").subscribe(() => {
+				this.recalculateHoveredSubmenu(nav.nativeElement);
+				this.syncScrollThumb();
+			});
+			const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => this.syncScrollThumb());
+			resizeObserver?.observe(nav.nativeElement);
+			onCleanup(() => {
+				subscription.unsubscribe();
+				resizeObserver?.disconnect();
+			});
+		});
+	}
+	syncScrollThumb() {
+		const nav = this.navContainer()?.nativeElement;
+		if (!nav) return;
+		const { clientWidth, scrollWidth, scrollLeft } = nav;
+		if (scrollWidth <= clientWidth + 1) {
+			this._scrollThumb.set({
+				width: 0,
+				offset: 0
+			});
+			return;
+		}
+		const ratio = clientWidth / scrollWidth;
+		this._scrollThumb.set({
+			width: Math.round(clientWidth * ratio),
+			offset: Math.round(Math.abs(scrollLeft) * ratio)
+		});
+	}
+	recalculateHoveredSubmenu(navEl) {
+		navEl.querySelectorAll("li:hover").forEach((li) => {
+			const link = li.querySelector(":scope > a");
+			if (!link) return;
+			const rect = link.getBoundingClientRect();
+			li.style.setProperty("--submenu-left", `${rect.left - 12}px`);
+			li.style.setProperty("--submenu-top", `${rect.bottom + 12}px`);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppTopbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppTopbar,
+		isStandalone: true,
+		selector: "app-topbar",
+		viewQueries: [{
+			propertyName: "navContainer",
+			first: true,
+			predicate: ["navContainer"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `<div class="layout-topbar">
     <div
       class="layout-topbar-logo-container"
       [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
@@ -2589,14 +3264,61 @@ class AppTopbar {
     }
 
     <app-topbar-actions />
-  </div>`, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppBrandLogo, selector: "app-brand-logo" }, { kind: "component", type: AppMenu, selector: "app-menu" }, { kind: "component", type: AppTopbarActions, selector: "app-topbar-actions" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppTopbar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-topbar',
-                    imports: [UiIconComponent, TranslatePipe, AppBrandLogo, AppMenu, AppTopbarActions],
-                    template: `<div class="layout-topbar">
+  </div>`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "component",
+				type: AppBrandLogo,
+				selector: "app-brand-logo"
+			},
+			{
+				kind: "component",
+				type: AppMenu,
+				selector: "app-menu"
+			},
+			{
+				kind: "component",
+				type: AppTopbarActions,
+				selector: "app-topbar-actions"
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppTopbar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-topbar",
+			imports: [
+				UiIconComponent,
+				TranslatePipe,
+				AppBrandLogo,
+				AppMenu,
+				AppTopbarActions
+			],
+			template: `<div class="layout-topbar">
     <div
       class="layout-topbar-logo-container"
       [class.layout-topbar-logo-container-desktop]="layoutService.isDesktop()"
@@ -2641,18 +3363,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     }
 
     <app-topbar-actions />
-  </div>`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { navContainer: [{ type: i0.ViewChild, args: ['navContainer', { isSignal: true }] }] } });
-
-class AppClassicLayout extends LayoutShellBase {
-    isStatic = computed(() => this.layoutService.layoutConfig().menuMode === 'static', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isStatic" }] : /* istanbul ignore next */ []));
-    outsideClickSelectors() {
-        return ['.layout-sidebar', '.layout-menu-button', '.layout-topbar-nav'];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppClassicLayout, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: AppClassicLayout, isStandalone: true, selector: "app-classic-layout", usesInheritance: true, ngImport: i0, template: `
+  </div>`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { navContainer: [{
+		type: i0.ViewChild,
+		args: ["navContainer", { isSignal: true }]
+	}] }
+});
+var AppClassicLayout = class AppClassicLayout extends LayoutShellBase {
+	isStatic = computed(() => this.layoutService.layoutConfig().menuMode === "static", ...ngDevMode ? [{ debugName: "isStatic" }] : /* istanbul ignore next */ []);
+	outsideClickSelectors() {
+		return [
+			".layout-sidebar",
+			".layout-menu-button",
+			".layout-topbar-nav"
+		];
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppClassicLayout,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: AppClassicLayout,
+		isStandalone: true,
+		selector: "app-classic-layout",
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
     <div
       class="layout-wrapper"
       [class.layout-overlay]="isOverlay()"
@@ -2672,14 +3417,56 @@ class AppClassicLayout extends LayoutShellBase {
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppClassicLayout, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-classic-layout',
-                    imports: [AppTopbar, AppSidebar, RouterOutlet, AppFooter],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: AppTopbar,
+				selector: "app-topbar"
+			},
+			{
+				kind: "component",
+				type: AppSidebar,
+				selector: "app-sidebar"
+			},
+			{
+				kind: "directive",
+				type: RouterOutlet,
+				selector: "router-outlet",
+				inputs: ["name", "routerOutletData"],
+				outputs: [
+					"activate",
+					"deactivate",
+					"attach",
+					"detach"
+				],
+				exportAs: ["outlet"]
+			},
+			{
+				kind: "component",
+				type: AppFooter,
+				selector: "app-footer"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppClassicLayout,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-classic-layout",
+			imports: [
+				AppTopbar,
+				AppSidebar,
+				RouterOutlet,
+				AppFooter
+			],
+			template: `
     <div
       class="layout-wrapper"
       [class.layout-overlay]="isOverlay()"
@@ -2699,21 +3486,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       </div>
       <div class="layout-mask animate-fadein"></div>
     </div>
-  `,
-                }]
-        }] });
-
-class AppModernSidebar {
-    layoutService = inject(LayoutService);
-    /**
-     * Only the in-flow column can be collapsed from here. As an overlay or mobile
-     * drawer the sidebar is opened by the topbar button and dismissed by the mask,
-     * so a second toggle inside it would be dead weight next to the brand.
-     */
-    showMenuButton = computed(() => !this.layoutService.isMobile() && !this.layoutService.isOverlay(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showMenuButton" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppModernSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppModernSidebar, isStandalone: true, selector: "app-modern-sidebar", ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+var AppModernSidebar = class AppModernSidebar {
+	layoutService = inject(LayoutService);
+	showMenuButton = computed(() => !this.layoutService.isMobile() && !this.layoutService.isOverlay(), ...ngDevMode ? [{ debugName: "showMenuButton" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppModernSidebar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppModernSidebar,
+		isStandalone: true,
+		selector: "app-modern-sidebar",
+		ngImport: i0,
+		template: `
     <aside class="layout-modern-sidebar">
       <div class="layout-modern-brand">
         <app-brand-logo />
@@ -2735,14 +3530,61 @@ class AppModernSidebar {
         <app-footer />
       </div>
     </aside>
-  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppBrandLogo, selector: "app-brand-logo" }, { kind: "component", type: AppMenu, selector: "app-menu" }, { kind: "component", type: AppFooter, selector: "app-footer" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppModernSidebar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-modern-sidebar',
-                    imports: [UiIconComponent, TranslatePipe, AppBrandLogo, AppMenu, AppFooter],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "component",
+				type: AppBrandLogo,
+				selector: "app-brand-logo"
+			},
+			{
+				kind: "component",
+				type: AppMenu,
+				selector: "app-menu"
+			},
+			{
+				kind: "component",
+				type: AppFooter,
+				selector: "app-footer"
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppModernSidebar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-modern-sidebar",
+			imports: [
+				UiIconComponent,
+				TranslatePipe,
+				AppBrandLogo,
+				AppMenu,
+				AppFooter
+			],
+			template: `
     <aside class="layout-modern-sidebar">
       <div class="layout-modern-brand">
         <app-brand-logo />
@@ -2764,37 +3606,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         <app-footer />
       </div>
     </aside>
-  `,
-                }]
-        }] });
-
-class AppModernTopbar {
-    destroyRef = inject(DestroyRef);
-    router = inject(Router);
-    layoutService = inject(LayoutService);
-    _pageTitle = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_pageTitle" }] : /* istanbul ignore next */ []));
-    pageTitle = this._pageTitle.asReadonly();
-    /** The sidebar is a drawer (not a column) in these modes, so the topbar owns the brand. */
-    showBrand = computed(() => this.layoutService.isMobile() ||
-        this.layoutService.isOverlay() ||
-        !!this.layoutService.layoutState().staticMenuDesktopInactive, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showBrand" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.resolvePageTitle();
-        this.router.events
-            .pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.resolvePageTitle());
-    }
-    resolvePageTitle() {
-        let route = this.router.routerState.snapshot.root;
-        while (route.firstChild) {
-            route = route.firstChild;
-        }
-        this._pageTitle.set(route.title ?? '');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppModernTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppModernTopbar, isStandalone: true, selector: "app-modern-topbar", ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+var AppModernTopbar = class AppModernTopbar {
+	destroyRef = inject(DestroyRef);
+	router = inject(Router);
+	layoutService = inject(LayoutService);
+	_pageTitle = signal("", ...ngDevMode ? [{ debugName: "_pageTitle" }] : /* istanbul ignore next */ []);
+	pageTitle = this._pageTitle.asReadonly();
+	showBrand = computed(() => this.layoutService.isMobile() || this.layoutService.isOverlay() || !!this.layoutService.layoutState().staticMenuDesktopInactive, ...ngDevMode ? [{ debugName: "showBrand" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.resolvePageTitle();
+		this.router.events.pipe(filter$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.resolvePageTitle());
+	}
+	resolvePageTitle() {
+		let route = this.router.routerState.snapshot.root;
+		while (route.firstChild) route = route.firstChild;
+		this._pageTitle.set(route.title ?? "");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppModernTopbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppModernTopbar,
+		isStandalone: true,
+		selector: "app-modern-topbar",
+		ngImport: i0,
+		template: `
     <header class="layout-modern-topbar">
       @if (showBrand()) {
         <button
@@ -2813,14 +3660,55 @@ class AppModernTopbar {
 
       <app-topbar-actions />
     </header>
-  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppBrandLogo, selector: "app-brand-logo" }, { kind: "component", type: AppTopbarActions, selector: "app-topbar-actions" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppModernTopbar, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-modern-topbar',
-                    imports: [UiIconComponent, TranslatePipe, AppBrandLogo, AppTopbarActions],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "component",
+				type: AppBrandLogo,
+				selector: "app-brand-logo"
+			},
+			{
+				kind: "component",
+				type: AppTopbarActions,
+				selector: "app-topbar-actions"
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppModernTopbar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-modern-topbar",
+			imports: [
+				UiIconComponent,
+				TranslatePipe,
+				AppBrandLogo,
+				AppTopbarActions
+			],
+			template: `
     <header class="layout-modern-topbar">
       @if (showBrand()) {
         <button
@@ -2839,25 +3727,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
       <app-topbar-actions />
     </header>
-  `,
-                }]
-        }], ctorParameters: () => [] });
-
-class AppModernLayout extends LayoutShellBase {
-    content = viewChild('content', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
-    outsideClickSelectors() {
-        return ['.layout-modern-sidebar', '.layout-modern-menu-button'];
-    }
-    /**
-     * The page scrolls inside the content card rather than the window, so the router's
-     * scroll restoration never reaches it — reset it here instead.
-     */
-    onNavigated() {
-        this.content()?.nativeElement.scrollTo({ top: 0 });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppModernLayout, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: AppModernLayout, isStandalone: true, selector: "app-modern-layout", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+var AppModernLayout = class AppModernLayout extends LayoutShellBase {
+	content = viewChild("content", ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	outsideClickSelectors() {
+		return [".layout-modern-sidebar", ".layout-modern-menu-button"];
+	}
+	onNavigated() {
+		this.content()?.nativeElement.scrollTo({ top: 0 });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppModernLayout,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: AppModernLayout,
+		isStandalone: true,
+		selector: "app-modern-layout",
+		viewQueries: [{
+			propertyName: "content",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
     <div
       class="layout-modern"
       [class.layout-modern-overlay]="isOverlay()"
@@ -2874,14 +3780,50 @@ class AppModernLayout extends LayoutShellBase {
       </div>
       <div class="layout-modern-mask animate-fadein"></div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AppModernTopbar, selector: "app-modern-topbar" }, { kind: "component", type: AppModernSidebar, selector: "app-modern-sidebar" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppModernLayout, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-modern-layout',
-                    imports: [AppModernTopbar, AppModernSidebar, RouterOutlet],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: AppModernTopbar,
+				selector: "app-modern-topbar"
+			},
+			{
+				kind: "component",
+				type: AppModernSidebar,
+				selector: "app-modern-sidebar"
+			},
+			{
+				kind: "directive",
+				type: RouterOutlet,
+				selector: "router-outlet",
+				inputs: ["name", "routerOutletData"],
+				outputs: [
+					"activate",
+					"deactivate",
+					"attach",
+					"detach"
+				],
+				exportAs: ["outlet"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppModernLayout,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-modern-layout",
+			imports: [
+				AppModernTopbar,
+				AppModernSidebar,
+				RouterOutlet
+			],
+			template: `
     <div
       class="layout-modern"
       [class.layout-modern-overlay]="isOverlay()"
@@ -2898,54 +3840,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       </div>
       <div class="layout-modern-mask animate-fadein"></div>
     </div>
-  `,
-                }]
-        }], propDecorators: { content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
-
-/**
- * Layout shell entry point.
- * Renders the skin selected by `LayoutConfig.layoutTheme` — every skin shares
- * the same services, menu and topbar components, only the markup and styling differ.
- */
-class AppLayout {
-    layoutService = inject(LayoutService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: { content: [{
+		type: i0.ViewChild,
+		args: ["content", { isSignal: true }]
+	}] }
+});
+var AppLayout = class AppLayout {
+	layoutService = inject(LayoutService);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppLayout,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppLayout,
+		isStandalone: true,
+		selector: "app-layout",
+		ngImport: i0,
+		template: `
     @if (layoutService.isModernLayout()) {
       <app-modern-layout />
     } @else {
       <app-classic-layout />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AppClassicLayout, selector: "app-classic-layout" }, { kind: "component", type: AppModernLayout, selector: "app-modern-layout" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppLayout, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-layout',
-                    imports: [AppClassicLayout, AppModernLayout],
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: AppClassicLayout,
+			selector: "app-classic-layout"
+		}, {
+			kind: "component",
+			type: AppModernLayout,
+			selector: "app-modern-layout"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppLayout,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-layout",
+			imports: [AppClassicLayout, AppModernLayout],
+			template: `
     @if (layoutService.isModernLayout()) {
       <app-modern-layout />
     } @else {
       <app-classic-layout />
     }
-  `,
-                }]
-        }] });
-
-class AppFloatingConfigurator {
-    layoutService = inject(LayoutService);
-    languageSelectorPanel = inject(LAYOUT_LANGUAGE_SELECTOR_PANEL, {
-        optional: true,
-    });
-    isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
-    toggleDarkMode() {
-        const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
-        this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+var AppFloatingConfigurator = class AppFloatingConfigurator {
+	layoutService = inject(LayoutService);
+	languageSelectorPanel = inject(LAYOUT_LANGUAGE_SELECTOR_PANEL, { optional: true });
+	isDarkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, ...ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []);
+	toggleDarkMode() {
+		const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
+		this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AppFloatingConfigurator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AppFloatingConfigurator,
+		isStandalone: true,
+		selector: "app-floating-configurator",
+		ngImport: i0,
+		template: `
     <div
       class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
     >
@@ -2993,11 +3975,102 @@ class AppFloatingConfigurator {
         <app-configurator [showMenuModeButton]="false" />
       </div>
     </div>
-  `, isInline: true, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "directive", type: StyleClassDirective, selector: "[fStyleClass]", inputs: ["fStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator", inputs: ["showMenuModeButton"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-floating-configurator', imports: [NgComponentOutlet, FButtonDirective, StyleClassDirective, UiIconComponent, AppConfigurator], template: `
+  `,
+		isInline: true,
+		styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "directive",
+				type: StyleClassDirective,
+				selector: "[fStyleClass]",
+				inputs: [
+					"fStyleClass",
+					"enterFromClass",
+					"enterActiveClass",
+					"enterToClass",
+					"leaveFromClass",
+					"leaveActiveClass",
+					"leaveToClass",
+					"hideOnOutsideClick",
+					"toggleClass"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "component",
+				type: AppConfigurator,
+				selector: "app-configurator",
+				inputs: ["showMenuModeButton"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AppFloatingConfigurator,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-floating-configurator",
+			imports: [
+				NgComponentOutlet,
+				FButtonDirective,
+				StyleClassDirective,
+				UiIconComponent,
+				AppConfigurator
+			],
+			template: `
     <div
       class="floating-configurator fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 z-50"
     >
@@ -3045,119 +4118,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         <app-configurator [showMenuModeButton]="false" />
       </div>
     </div>
-  `, styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"] }]
-        }] });
-
-// Shell entry point (renders the configured layout skin)
-
+  `,
+			styles: [".floating-configurator{inset-inline-end:.5rem}@media(min-width:768px){.floating-configurator{inset-inline-end:2rem}}\n"]
+		}]
+	}]
+});
 function buildPreset(presetName, primary) {
-    return { preset: presetName, primary };
+	return {
+		preset: presetName,
+		primary
+	};
 }
-
 const NavyBlueTheme = {
-    preset: 'Aura',
-    primary: 'indigo',
+	preset: "Aura",
+	primary: "indigo"
 };
-
 const GreenTheme = {
-    preset: 'Aura',
-    primary: 'green',
+	preset: "Aura",
+	primary: "green"
 };
-
 const LAYOUT_MESSAGES = {
-    // components/shared/top-bar/app.profile.ts
-    'layout.profile.title': 'Profile',
-    'layout.profile.profile.picture.alt': 'Profile picture',
-    'layout.profile.copy.sign.up.link': 'Copy SignUp Link',
-    'layout.profile.logout': 'Logout',
-    'layout.profile.guest': 'Guest',
-    'layout.profile.link.copied': 'Link Copied',
-    'layout.profile.sign.up.link.copied': 'Sign Up Link copied.',
-    'layout.profile.failed.copy.sign.up.link': 'Failed to copy signup link.',
-    // components/shared/top-bar/app.launcher.ts
-    'layout.launcher.apps': 'Apps',
-    'layout.launcher.applications': 'Applications',
-    'layout.launcher.no.apps': 'No apps available',
-    // components/shared/top-bar/app.company-branch-selector.ts
-    'layout.company.branch.selector.title': 'Switch Company & Branch',
-    'layout.company.branch.selector.select.company': 'Select Company',
-    'layout.company.branch.selector.branch': 'Branch',
-    'layout.company.branch.selector.select.branch': 'Select Branch',
-    'layout.company.branch.selector.switch.button': 'Switch',
-    'layout.company.branch.selector.no.company': 'No Company',
-    'layout.company.branch.selector.branch.required': 'Branch Required',
-    'layout.company.branch.selector.please.select.branch': 'Please select a branch',
-    // components/shared/top-bar/app.searchbar.ts
-    'layout.topbar.search': 'Search',
-    'layout.topbar.search.placeholder': 'Search for content...',
-    // components/layouts/classic/app.topbar.ts + components/layouts/modern/app.modern-topbar.ts
-    // + components/layouts/modern/app.modern-sidebar.ts
-    'layout.topbar.toggle.menu': 'Toggle menu',
-    // components/shared/top-bar/app.topbar-actions.ts
-    'layout.topbar.toggle.dark.mode': 'Toggle dark mode',
-    'layout.topbar.open.theme.settings': 'Open theme settings',
-    'layout.topbar.more.options': 'More options',
-    // components/shared/app.configurator.ts
-    'layout.configurator.primary': 'Primary',
-    'layout.configurator.surface': 'Surface',
-    'layout.configurator.presets': 'Presets',
-    'layout.configurator.menu.mode': 'Menu Mode',
-    'layout.configurator.menu.mode.static': 'Static',
-    'layout.configurator.menu.mode.overlay': 'Overlay',
-    'layout.configurator.menu.mode.topbar': 'Topbar',
-    'layout.configurator.layout.theme': 'Layout',
-    'layout.configurator.layout.theme.classic': 'Classic',
-    'layout.configurator.layout.theme.modern': 'Modern',
-    // components/shared/app.footer.ts
-    'layout.footer.by': 'by',
-    // app-menu.config.ts (main app menu configuration)
-    'menu.dashboard': 'Dashboard',
-    'menu.administration': 'Administration',
-    'menu.iam': 'IAM',
-    'menu.storage': 'Storage',
-    'menu.forms': 'Forms',
-    'menu.email': 'Email',
-    'menu.entity.builder': 'Entity Builder',
-    'menu.event.manager': 'Event Manager',
-    'menu.task.manager': 'Task Manager',
-    'menu.ai.assistant': 'AI Assistant',
-    'menu.notifications': 'Notifications',
-    'menu.localization': 'Localization',
-    'menu.components': 'Components',
-    'menu.components.display': 'Display',
-    'menu.components.menu': 'Menu',
-    'menu.components.form': 'Form',
-    'menu.components.overlay': 'Overlay',
-    'menu.components.data': 'Data',
-    'menu.components.panel': 'Panel',
-    'menu.components.media': 'Media',
-    'menu.components.misc': 'Directives',
-    // Those are layout part from notification module, but we put them here to avoid circular dependency between layout and notification module
-    // components/notification-bell/notification-bell.component.ts
-    'notification.title': 'Notifications',
-    // components/notification-list/notification-list.component.ts
-    'notification.mark.all.read': 'Mark all read',
-    'notification.view.all': 'View all notifications',
-    'notification.empty': 'No notifications',
-    // components/notification-item/notification-item.component.ts
-    'notification.time.just.now': 'Just now',
-    'notification.time.minutes.ago': '{{count}}m ago',
-    'notification.time.hours.ago': '{{count}}h ago',
-    'notification.time.days.ago': '{{count}}d ago',
-    // ng-ai-assistant/components/chat-widget-host/chat-widget-host.component.ts
-    'ai-assistant.widget.title': 'Assistant',
-    'ai-assistant.widget.placeholder': 'Ask me anything…',
-    'ai-assistant.widget.empty': 'Ask me anything to get started',
-    'ai-assistant.widget.pin': 'Pin',
-    'ai-assistant.widget.pinned': 'Pinned',
-    'ai-assistant.widget.error': 'Error: {{error}}',
+	"layout.profile.title": "Profile",
+	"layout.profile.profile.picture.alt": "Profile picture",
+	"layout.profile.copy.sign.up.link": "Copy SignUp Link",
+	"layout.profile.logout": "Logout",
+	"layout.profile.guest": "Guest",
+	"layout.profile.link.copied": "Link Copied",
+	"layout.profile.sign.up.link.copied": "Sign Up Link copied.",
+	"layout.profile.failed.copy.sign.up.link": "Failed to copy signup link.",
+	"layout.launcher.apps": "Apps",
+	"layout.launcher.applications": "Applications",
+	"layout.launcher.no.apps": "No apps available",
+	"layout.company.branch.selector.title": "Switch Company & Branch",
+	"layout.company.branch.selector.select.company": "Select Company",
+	"layout.company.branch.selector.branch": "Branch",
+	"layout.company.branch.selector.select.branch": "Select Branch",
+	"layout.company.branch.selector.switch.button": "Switch",
+	"layout.company.branch.selector.no.company": "No Company",
+	"layout.company.branch.selector.branch.required": "Branch Required",
+	"layout.company.branch.selector.please.select.branch": "Please select a branch",
+	"layout.topbar.search": "Search",
+	"layout.topbar.search.placeholder": "Search for content...",
+	"layout.topbar.toggle.menu": "Toggle menu",
+	"layout.topbar.toggle.dark.mode": "Toggle dark mode",
+	"layout.topbar.open.theme.settings": "Open theme settings",
+	"layout.topbar.more.options": "More options",
+	"layout.configurator.primary": "Primary",
+	"layout.configurator.surface": "Surface",
+	"layout.configurator.presets": "Presets",
+	"layout.configurator.menu.mode": "Menu Mode",
+	"layout.configurator.menu.mode.static": "Static",
+	"layout.configurator.menu.mode.overlay": "Overlay",
+	"layout.configurator.menu.mode.topbar": "Topbar",
+	"layout.configurator.layout.theme": "Layout",
+	"layout.configurator.layout.theme.classic": "Classic",
+	"layout.configurator.layout.theme.modern": "Modern",
+	"layout.footer.by": "by",
+	"menu.dashboard": "Dashboard",
+	"menu.administration": "Administration",
+	"menu.iam": "IAM",
+	"menu.storage": "Storage",
+	"menu.forms": "Forms",
+	"menu.email": "Email",
+	"menu.entity.builder": "Entity Builder",
+	"menu.event.manager": "Event Manager",
+	"menu.task.manager": "Task Manager",
+	"menu.ai.assistant": "AI Assistant",
+	"menu.notifications": "Notifications",
+	"menu.localization": "Localization",
+	"menu.components": "Components",
+	"menu.components.display": "Display",
+	"menu.components.menu": "Menu",
+	"menu.components.form": "Form",
+	"menu.components.overlay": "Overlay",
+	"menu.components.data": "Data",
+	"menu.components.panel": "Panel",
+	"menu.components.media": "Media",
+	"menu.components.misc": "Directives",
+	"notification.title": "Notifications",
+	"notification.mark.all.read": "Mark all read",
+	"notification.view.all": "View all notifications",
+	"notification.empty": "No notifications",
+	"notification.time.just.now": "Just now",
+	"notification.time.minutes.ago": "{{count}}m ago",
+	"notification.time.hours.ago": "{{count}}h ago",
+	"notification.time.days.ago": "{{count}}d ago",
+	"ai-assistant.widget.title": "Assistant",
+	"ai-assistant.widget.placeholder": "Ask me anything…",
+	"ai-assistant.widget.empty": "Ask me anything to get started",
+	"ai-assistant.widget.pin": "Pin",
+	"ai-assistant.widget.pinned": "Pinned",
+	"ai-assistant.widget.error": "Error: {{error}}"
 };
+export { AppBrandLogo, AppClassicLayout, AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppModernLayout, AppModernSidebar, AppModernTopbar, AppProfile, AppSearchbar, AppSidebar, AppTopbar, AppTopbarActions, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, LayoutShellBase, NavyBlueTheme, applyTheme, buildBootstrapPreset, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
 
-// Components
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AppBrandLogo, AppClassicLayout, AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppModernLayout, AppModernSidebar, AppModernTopbar, AppProfile, AppSearchbar, AppSidebar, AppTopbar, AppTopbarActions, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, LayoutShellBase, NavyBlueTheme, buildPreset, filterAppsByPermissions, filterMenuByPermissions };
-//# sourceMappingURL=flusys-ng-layout.mjs.map
+//# sourceMappingURL=flusys-ng-layout.mjs.map