@flusys/ng-layout 0.1.0-alpha.1

package/fesm2022/flusys-ng-layout.mjs

@@ -0,0 +1,2233 @@
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, InjectionToken, DestroyRef, input, Renderer2, ViewChild } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$2 from '@angular/router';
+import { Router, RouterModule, NavigationEnd } from '@angular/router';
+import { updatePreset, updateSurfacePalette, $t, definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+import Lara from '@primeuix/themes/lara';
+import Nora from '@primeuix/themes/nora';
+import { PrimeNG } from 'primeng/config';
+import * as i3 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i2$2 from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, PlatformService, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { Subject, filter as filter$1 } from 'rxjs';
+import * as i1$1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i2$1 from 'primeng/styleclass';
+import { StyleClassModule } from 'primeng/styleclass';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { APP_CONFIG, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import { MessageService } from 'primeng/api';
+import * as i4 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i2$3 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import { filter } from 'rxjs/operators';
+import Material from '@primeuix/themes/material';
+
+/** Filter launcher apps based on user permission codes */
+function filterAppsByPermissions(apps, 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);
+}
+/**
+ * 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;
+}
+
+const STORAGE_KEY = 'flusys.layout.config';
+const STORAGE_VERSION = 1;
+/**
+ * Service for persisting layout configuration to localStorage.
+ * Handles loading, saving, and validation of layout preferences with SSR-safe checks.
+ *
+ * @example
+ * ```typescript
+ * const persistence = inject(LayoutPersistenceService);
+ *
+ * // Load saved config
+ * const config = persistence.load();
+ *
+ * // Save config
+ * persistence.save({ darkTheme: true, preset: 'Aura' });
+ *
+ * // Clear saved config
+ * persistence.clear();
+ * ```
+ */
+class LayoutPersistenceService {
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    validPresets = ['Aura', 'Lara', 'Nora'];
+    validMenuModes = ['static', 'overlay'];
+    /**
+     * Load configuration from localStorage.
+     * Returns null if no saved config or invalid data.
+     * SSR-safe (returns null on server).
+     *
+     * @returns Validated layout configuration or null
+     */
+    load() {
+        if (!this.isBrowser)
+            return null;
+        try {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (!stored)
+                return null;
+            const parsed = JSON.parse(stored);
+            return this.validateConfig(parsed);
+        }
+        catch (error) {
+            console.warn('[LayoutPersistence] Failed to load config:', error);
+            this.clear();
+            return null;
+        }
+    }
+    /**
+     * Save configuration to localStorage.
+     * SSR-safe (no-op on server).
+     *
+     * @param config Layout configuration to save
+     */
+    save(config) {
+        if (!this.isBrowser)
+            return;
+        try {
+            const toStore = {
+                ...config,
+                _version: STORAGE_VERSION,
+            };
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore));
+        }
+        catch (error) {
+            console.warn('[LayoutPersistence] Failed to save config:', error);
+        }
+    }
+    /**
+     * Clear stored configuration.
+     * SSR-safe (no-op on server).
+     */
+    clear() {
+        if (!this.isBrowser)
+            return;
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    /**
+     * Validate and sanitize configuration.
+     * Returns null if version mismatch.
+     *
+     * @param config Configuration to validate
+     * @returns Validated configuration or null
+     */
+    validateConfig(config) {
+        // Version mismatch - clear and return null
+        if (config._version && config._version !== STORAGE_VERSION) {
+            console.warn('[LayoutPersistence] Version mismatch, clearing config');
+            this.clear();
+            return null;
+        }
+        // Validate preset
+        if (config.preset && !this.validPresets.includes(config.preset)) {
+            console.warn(`[LayoutPersistence] Invalid preset "${config.preset}", using Aura`);
+            config.preset = 'Aura';
+        }
+        // Validate menuMode
+        if (config.menuMode && !this.validMenuModes.includes(config.menuMode)) {
+            console.warn(`[LayoutPersistence] Invalid menuMode "${config.menuMode}", using static`);
+            config.menuMode = 'static';
+        }
+        // Validate darkTheme
+        if (typeof config.darkTheme !== 'boolean') {
+            config.darkTheme = false;
+        }
+        // Remove version field from returned config
+        const { _version, ...cleanConfig } = config;
+        return cleanConfig;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LayoutPersistenceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LayoutPersistenceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Service managing layout configuration and state.
+ * Provides signals for reactive layout updates.
+ */
+class LayoutService {
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    persistence = inject(LayoutPersistenceService);
+    defaultConfig = {
+        preset: 'Aura',
+        primary: 'emerald',
+        surface: null,
+        darkTheme: false,
+        menuMode: 'static',
+    };
+    // Load persisted config merged with defaults
+    initialConfig = (() => {
+        const persisted = this.persistence.load();
+        return persisted
+            ? { ...this.defaultConfig, ...persisted }
+            : this.defaultConfig;
+    })();
+    defaultState = {
+        staticMenuDesktopInactive: false,
+        overlayMenuActive: false,
+        configSidebarVisible: false,
+        staticMenuMobileActive: false,
+        menuHoverActive: false,
+    };
+    // Signals
+    layoutConfig = signal(this.initialConfig, ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
+    layoutState = signal(this.defaultState, ...(ngDevMode ? [{ debugName: "layoutState" }] : []));
+    transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "transitionComplete" }] : []));
+    // User Profile Signals
+    userProfile = signal(null, ...(ngDevMode ? [{ debugName: "userProfile" }] : []));
+    companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "companyProfile" }] : []));
+    appName = signal('FLUSYS', ...(ngDevMode ? [{ debugName: "appName" }] : []));
+    // App Launcher Signals
+    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
+    /**
+     * Filtered launcher apps based on user permissions.
+     * Automatically recomputes when raw apps or permissions change.
+     */
+    apps = computed(() => {
+        const raw = this._rawApps();
+        const permission = this.permissionValidator.permissions();
+        return filterAppsByPermissions(raw, permission);
+    }, ...(ngDevMode ? [{ debugName: "apps" }] : []));
+    // Menu Signals
+    _rawMenu = signal([], ...(ngDevMode ? [{ debugName: "_rawMenu" }] : []));
+    permissionValidator = inject(PermissionValidatorService);
+    /**
+     * Filtered menu items based on user permissions.
+     * Automatically recomputes when raw menu or permission checker changes.
+     * Role checker is optional - if not set, role-based permissions will be denied.
+     */
+    menu = computed(() => {
+        const raw = this._rawMenu(); // Track permission changes
+        const permission = this.permissionValidator.permissions();
+        return filterMenuByPermissions(raw, permission);
+    }, ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    // Computed signals - Layout
+    theme = computed(() => this.layoutConfig()?.darkTheme ? 'light' : 'dark', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    isSidebarActive = computed(() => this.layoutState().overlayMenuActive ||
+        this.layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
+    isDarkTheme = computed(() => this.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    getPrimary = computed(() => this.layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
+    getSurface = computed(() => this.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
+    isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
+    // Computed signals - User Profile
+    userName = computed(() => this.userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userEmail = computed(() => this.userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
+    userProfilePictureUrl = computed(() => this.userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
+    companyName = computed(() => this.companyProfile()?.name ?? this.appName(), ...(ngDevMode ? [{ debugName: "companyName" }] : []));
+    companyLogoUrl = computed(() => this.companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
+    isAuthenticated = computed(() => !!this.userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
+    // Computed signals - App Launcher
+    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
+    // RxJS Subjects for event communication
+    configUpdate = new Subject();
+    overlayOpen = new Subject();
+    menuSource = new Subject();
+    resetSource = new Subject();
+    menuSource$ = this.menuSource.asObservable();
+    resetSource$ = this.resetSource.asObservable();
+    configUpdate$ = this.configUpdate.asObservable();
+    overlayOpen$ = this.overlayOpen.asObservable();
+    initialized = false;
+    constructor() {
+        effect(() => {
+            const config = this.layoutConfig();
+            if (config) {
+                this.onConfigUpdate();
+            }
+        });
+        effect(() => {
+            const config = this.layoutConfig();
+            if (!this.initialized || !config) {
+                this.initialized = true;
+                return;
+            }
+            this.handleDarkModeTransition(config);
+        });
+        // Auto-save configuration changes to localStorage
+        effect(() => {
+            const config = this.layoutConfig();
+            if (config && this.initialized) {
+                this.persistence.save(config);
+            }
+        });
+    }
+    handleDarkModeTransition(config) {
+        if (this.document.startViewTransition) {
+            this.startViewTransition(config);
+        }
+        else {
+            this.toggleDarkMode(config);
+            this.onTransitionEnd();
+        }
+    }
+    startViewTransition(config) {
+        const transition = this.document.startViewTransition(() => {
+            this.toggleDarkMode(config);
+        });
+        transition.ready.then(() => this.onTransitionEnd()).catch(() => { });
+    }
+    toggleDarkMode(config) {
+        const _config = config || this.layoutConfig();
+        if (_config.darkTheme) {
+            this.document.documentElement.classList.add('app-dark');
+        }
+        else {
+            this.document.documentElement.classList.remove('app-dark');
+        }
+    }
+    onTransitionEnd() {
+        this.transitionComplete.set(true);
+        setTimeout(() => this.transitionComplete.set(false));
+    }
+    onMenuToggle() {
+        if (this.isOverlay()) {
+            this.layoutState.update((prev) => ({
+                ...prev,
+                overlayMenuActive: !this.layoutState().overlayMenuActive,
+            }));
+            if (this.layoutState().overlayMenuActive) {
+                this.overlayOpen.next();
+            }
+        }
+        if (this.isDesktop()) {
+            this.layoutState.update((prev) => ({
+                ...prev,
+                staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive,
+            }));
+        }
+        else {
+            this.layoutState.update((prev) => ({
+                ...prev,
+                staticMenuMobileActive: !this.layoutState().staticMenuMobileActive,
+            }));
+            if (this.layoutState().staticMenuMobileActive) {
+                this.overlayOpen.next();
+            }
+        }
+    }
+    isDesktop() {
+        return this.isBrowser ? window.innerWidth > 991 : true;
+    }
+    isMobile() {
+        return !this.isDesktop();
+    }
+    onConfigUpdate() {
+        this.configUpdate.next(this.layoutConfig());
+    }
+    onMenuStateChange(event) {
+        this.menuSource.next(event);
+    }
+    reset() {
+        this.resetSource.next(true);
+    }
+    // ==========================================================================
+    // User Profile Methods
+    // ==========================================================================
+    /**
+     * Set the current user profile for display in layout.
+     * Called by auth integration to sync user data.
+     */
+    setUserProfile(profile) {
+        this.userProfile.set(profile);
+    }
+    /**
+     * Set the current company profile for display in layout.
+     * Called by auth integration to sync company data.
+     */
+    setCompanyProfile(profile) {
+        this.companyProfile.set(profile);
+    }
+    // ==========================================================================
+    // Menu Methods
+    // ==========================================================================
+    /**
+     * Set the raw menu items (unfiltered).
+     * Menu will be automatically filtered based on permission checker.
+     * Called by app initialization to set menu from IAM or other source.
+     */
+    setMenu(items) {
+        this._rawMenu.set(items);
+    }
+    /**
+     * Clear menu and permission/role checkers.
+     * Called on logout.
+     */
+    clearMenu() {
+        this._rawMenu.set([]);
+    }
+    // ==========================================================================
+    // App Launcher Methods
+    // ==========================================================================
+    /**
+     * Set launcher apps for display in header.
+     * Apps will be automatically filtered based on user permissions.
+     * If empty after filtering, the app launcher button is hidden.
+     */
+    setApps(apps) {
+        this._rawApps.set(apps);
+    }
+    /**
+     * Clear launcher apps.
+     * Called on logout.
+     */
+    clearApps() {
+        this._rawApps.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const presets = {
+    Aura,
+    Lara,
+    Nora,
+};
+class AppConfigurator {
+    router = inject(Router);
+    config = inject(PrimeNG);
+    layoutService = inject(LayoutService);
+    platformService = inject(PlatformService);
+    primeng = inject(PrimeNG);
+    presets = Object.keys(presets);
+    showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
+    menuModeOptions = [
+        { label: 'Static', value: 'static' },
+        { label: 'Overlay', value: 'overlay' },
+    ];
+    ngOnInit() {
+        if (!this.platformService.isServer) {
+            this.onPresetChange(this.layoutService.layoutConfig().preset);
+        }
+    }
+    surfaces = [
+        {
+            name: 'slate',
+            palette: {
+                0: '#ffffff',
+                50: '#f8fafc',
+                100: '#f1f5f9',
+                200: '#e2e8f0',
+                300: '#cbd5e1',
+                400: '#94a3b8',
+                500: '#64748b',
+                600: '#475569',
+                700: '#334155',
+                800: '#1e293b',
+                900: '#0f172a',
+                950: '#020617',
+            },
+        },
+        {
+            name: 'gray',
+            palette: {
+                0: '#ffffff',
+                50: '#f9fafb',
+                100: '#f3f4f6',
+                200: '#e5e7eb',
+                300: '#d1d5db',
+                400: '#9ca3af',
+                500: '#6b7280',
+                600: '#4b5563',
+                700: '#374151',
+                800: '#1f2937',
+                900: '#111827',
+                950: '#030712',
+            },
+        },
+        {
+            name: 'zinc',
+            palette: {
+                0: '#ffffff',
+                50: '#fafafa',
+                100: '#f4f4f5',
+                200: '#e4e4e7',
+                300: '#d4d4d8',
+                400: '#a1a1aa',
+                500: '#71717a',
+                600: '#52525b',
+                700: '#3f3f46',
+                800: '#27272a',
+                900: '#18181b',
+                950: '#09090b',
+            },
+        },
+        {
+            name: 'neutral',
+            palette: {
+                0: '#ffffff',
+                50: '#fafafa',
+                100: '#f5f5f5',
+                200: '#e5e5e5',
+                300: '#d4d4d4',
+                400: '#a3a3a3',
+                500: '#737373',
+                600: '#525252',
+                700: '#404040',
+                800: '#262626',
+                900: '#171717',
+                950: '#0a0a0a',
+            },
+        },
+        {
+            name: 'stone',
+            palette: {
+                0: '#ffffff',
+                50: '#fafaf9',
+                100: '#f5f5f4',
+                200: '#e7e5e4',
+                300: '#d6d3d1',
+                400: '#a8a29e',
+                500: '#78716c',
+                600: '#57534e',
+                700: '#44403c',
+                800: '#292524',
+                900: '#1c1917',
+                950: '#0c0a09',
+            },
+        },
+        {
+            name: 'soho',
+            palette: {
+                0: '#ffffff',
+                50: '#ececec',
+                100: '#dedfdf',
+                200: '#c4c4c6',
+                300: '#adaeb0',
+                400: '#97979b',
+                500: '#7f8084',
+                600: '#6a6b70',
+                700: '#55565b',
+                800: '#3f4046',
+                900: '#2c2c34',
+                950: '#16161d',
+            },
+        },
+        {
+            name: 'viva',
+            palette: {
+                0: '#ffffff',
+                50: '#f3f3f3',
+                100: '#e7e7e8',
+                200: '#cfd0d0',
+                300: '#b7b8b9',
+                400: '#9fa1a1',
+                500: '#87898a',
+                600: '#6e7173',
+                700: '#565a5b',
+                800: '#3e4244',
+                900: '#262b2c',
+                950: '#0e1315',
+            },
+        },
+        {
+            name: 'ocean',
+            palette: {
+                0: '#ffffff',
+                50: '#fbfcfc',
+                100: '#F7F9F8',
+                200: '#EFF3F2',
+                300: '#DADEDD',
+                400: '#B1B7B6',
+                500: '#828787',
+                600: '#5F7274',
+                700: '#415B61',
+                800: '#29444E',
+                900: '#183240',
+                950: '#0c1920',
+            },
+        },
+    ];
+    selectedPrimaryColor = computed(() => {
+        return this.layoutService.layoutConfig().primary;
+    }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
+    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : []));
+    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, ...(ngDevMode ? [{ debugName: "selectedPreset" }] : []));
+    menuMode = computed(() => this.layoutService.layoutConfig().menuMode, ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
+    primaryColors = computed(() => {
+        const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
+        const colors = [
+            'emerald',
+            'green',
+            'lime',
+            'orange',
+            'amber',
+            'yellow',
+            'teal',
+            'cyan',
+            'sky',
+            'blue',
+            'indigo',
+            'violet',
+            'purple',
+            'fuchsia',
+            'pink',
+            'rose',
+        ];
+        const palettes = [{ name: 'noir', palette: {} }];
+        colors.forEach((color) => {
+            palettes.push({
+                name: color,
+                palette: presetPalette?.[color],
+            });
+        });
+        return palettes;
+    }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
+    getPresetExt() {
+        const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
+        const preset = this.layoutService.layoutConfig().preset;
+        if (color.name === 'noir') {
+            return {
+                semantic: {
+                    primary: {
+                        50: '{surface.50}',
+                        100: '{surface.100}',
+                        200: '{surface.200}',
+                        300: '{surface.300}',
+                        400: '{surface.400}',
+                        500: '{surface.500}',
+                        600: '{surface.600}',
+                        700: '{surface.700}',
+                        800: '{surface.800}',
+                        900: '{surface.900}',
+                        950: '{surface.950}',
+                    },
+                    colorScheme: {
+                        light: {
+                            primary: {
+                                color: '{primary.950}',
+                                contrastColor: '#ffffff',
+                                hoverColor: '{primary.800}',
+                                activeColor: '{primary.700}',
+                            },
+                            highlight: {
+                                background: '{primary.950}',
+                                focusBackground: '{primary.700}',
+                                color: '#ffffff',
+                                focusColor: '#ffffff',
+                            },
+                        },
+                        dark: {
+                            primary: {
+                                color: '{primary.50}',
+                                contrastColor: '{primary.950}',
+                                hoverColor: '{primary.200}',
+                                activeColor: '{primary.300}',
+                            },
+                            highlight: {
+                                background: '{primary.50}',
+                                focusBackground: '{primary.300}',
+                                color: '{primary.950}',
+                                focusColor: '{primary.950}',
+                            },
+                        },
+                    },
+                },
+            };
+        }
+        else {
+            if (preset === 'Nora') {
+                return {
+                    semantic: {
+                        primary: color.palette,
+                        colorScheme: {
+                            light: {
+                                primary: {
+                                    color: '{primary.600}',
+                                    contrastColor: '#ffffff',
+                                    hoverColor: '{primary.700}',
+                                    activeColor: '{primary.800}',
+                                },
+                                highlight: {
+                                    background: '{primary.600}',
+                                    focusBackground: '{primary.700}',
+                                    color: '#ffffff',
+                                    focusColor: '#ffffff',
+                                },
+                            },
+                            dark: {
+                                primary: {
+                                    color: '{primary.500}',
+                                    contrastColor: '{surface.900}',
+                                    hoverColor: '{primary.400}',
+                                    activeColor: '{primary.300}',
+                                },
+                                highlight: {
+                                    background: '{primary.500}',
+                                    focusBackground: '{primary.400}',
+                                    color: '{surface.900}',
+                                    focusColor: '{surface.900}',
+                                },
+                            },
+                        },
+                    },
+                };
+            }
+            else {
+                return {
+                    semantic: {
+                        primary: color.palette,
+                        colorScheme: {
+                            light: {
+                                primary: {
+                                    color: '{primary.500}',
+                                    contrastColor: '#ffffff',
+                                    hoverColor: '{primary.600}',
+                                    activeColor: '{primary.700}',
+                                },
+                                highlight: {
+                                    background: '{primary.50}',
+                                    focusBackground: '{primary.100}',
+                                    color: '{primary.700}',
+                                    focusColor: '{primary.800}',
+                                },
+                            },
+                            dark: {
+                                primary: {
+                                    color: '{primary.400}',
+                                    contrastColor: '{surface.900}',
+                                    hoverColor: '{primary.300}',
+                                    activeColor: '{primary.200}',
+                                },
+                                highlight: {
+                                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                                    color: 'rgba(255,255,255,.87)',
+                                    focusColor: 'rgba(255,255,255,.87)',
+                                },
+                            },
+                        },
+                    },
+                };
+            }
+        }
+    }
+    updateColors(event, type, color) {
+        if (type === 'primary') {
+            this.layoutService.layoutConfig.update((state) => ({
+                ...state,
+                primary: color.name,
+            }));
+        }
+        else if (type === 'surface') {
+            this.layoutService.layoutConfig.update((state) => ({
+                ...state,
+                surface: color.name,
+            }));
+        }
+        this.applyTheme(type, color);
+        event.stopPropagation();
+    }
+    applyTheme(type, color) {
+        if (type === 'primary') {
+            updatePreset(this.getPresetExt());
+        }
+        else if (type === 'surface') {
+            updateSurfacePalette(color.palette);
+        }
+    }
+    onPresetChange(event) {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            preset: event,
+        }));
+        const preset = presets[event];
+        const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
+        $t()
+            .preset(preset)
+            .preset(this.getPresetExt())
+            .surfacePalette(surfacePalette)
+            .use({ useDefaultOptions: true });
+    }
+    onMenuModeChange(event) {
+        this.layoutService.layoutConfig.update((prev) => ({
+            ...prev,
+            menuMode: event,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <span class="text-sm text-muted-color font-semibold">Primary</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (primaryColor of primaryColors(); track primaryColor.name) {
+            <button
+              type="button"
+              [title]="primaryColor.name"
+              (click)="updateColors($event, 'primary', primaryColor)"
+            [ngClass]="{
+              'outline-primary': primaryColor.name === selectedPrimaryColor()
+            }"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+            ></button>
+          }
+        </div>
+      </div>
+      <div>
+        <span class="text-sm text-muted-color font-semibold">Surface</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (surface of surfaces; track surface.name) {
+            <button
+              type="button"
+              [title]="surface.name"
+              (click)="updateColors($event, 'surface', surface)"
+            [ngClass]="{
+              'outline-primary': selectedSurfaceColor()
+                ? selectedSurfaceColor() === surface.name
+                : layoutService.layoutConfig().darkTheme
+                ? surface.name === 'zinc'
+                : surface.name === 'slate'
+            }"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+            ></button>
+          }
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">Presets</span>
+        <p-selectbutton
+          [options]="presets"
+          [ngModel]="selectedPreset()"
+          (ngModelChange)="onPresetChange($event)"
+          [allowEmpty]="false"
+          size="small"
+          />
+      </div>
+      @if (showMenuModeButton()) {
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+          <p-selectbutton
+            [ngModel]="menuMode()"
+            (ngModelChange)="onMenuModeChange($event)"
+            [options]="menuModeOptions"
+            [allowEmpty]="false"
+            size="small"
+            />
+        </div>
+      }
+    </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppConfigurator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-configurator',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, SelectButtonModule],
+                    template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <span class="text-sm text-muted-color font-semibold">Primary</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (primaryColor of primaryColors(); track primaryColor.name) {
+            <button
+              type="button"
+              [title]="primaryColor.name"
+              (click)="updateColors($event, 'primary', primaryColor)"
+            [ngClass]="{
+              'outline-primary': primaryColor.name === selectedPrimaryColor()
+            }"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+            ></button>
+          }
+        </div>
+      </div>
+      <div>
+        <span class="text-sm text-muted-color font-semibold">Surface</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (surface of surfaces; track surface.name) {
+            <button
+              type="button"
+              [title]="surface.name"
+              (click)="updateColors($event, 'surface', surface)"
+            [ngClass]="{
+              'outline-primary': selectedSurfaceColor()
+                ? selectedSurfaceColor() === surface.name
+                : layoutService.layoutConfig().darkTheme
+                ? surface.name === 'zinc'
+                : surface.name === 'slate'
+            }"
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+            ></button>
+          }
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">Presets</span>
+        <p-selectbutton
+          [options]="presets"
+          [ngModel]="selectedPreset()"
+          (ngModelChange)="onPresetChange($event)"
+          [allowEmpty]="false"
+          size="small"
+          />
+      </div>
+      @if (showMenuModeButton()) {
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+          <p-selectbutton
+            [ngModel]="menuMode()"
+            (ngModelChange)="onMenuModeChange($event)"
+            [options]="menuModeOptions"
+            [allowEmpty]="false"
+            size="small"
+            />
+        </div>
+      }
+    </div>
+    `,
+                    host: {
+                        class: 'hidden absolute top-[3.25rem] right-0 w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]',
+                        style: 'background-color: var(--surface-overlay)',
+                    },
+                }]
+        }] });
+
+class AppFloatingConfigurator {
+    LayoutService = inject(LayoutService);
+    isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    toggleDarkMode() {
+        this.LayoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+        <div class="fixed flex flex-col md:flex-row gap-4 top-8 right-0 md:right-8 z-99">
+            <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
+            <div class="relative">
+                <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
+                <app-configurator />
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-floating-configurator',
+                    imports: [ButtonModule, StyleClassModule, AppConfigurator],
+                    template: `
+        <div class="fixed flex flex-col md:flex-row gap-4 top-8 right-0 md:right-8 z-99">
+            <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
+            <div class="relative">
+                <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
+                <app-configurator />
+            </div>
+        </div>
+    `
+                }]
+        }] });
+
+const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
+const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
+
+class AppFooter {
+    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
+    companyName = computed(() => {
+        return this.authState?.currentCompanyInfo()?.name ?? 'Flusys';
+    }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+        {{ companyName() }} by
+        <a href="https://flusys.vercel.app" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">Flusys</a>
+    </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppFooter, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'app-footer',
+                    template: `<div class="layout-footer">
+        {{ companyName() }} by
+        <a href="https://flusys.vercel.app" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">Flusys</a>
+    </div>`,
+                }]
+        }] });
+
+/** 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);
+    currentCompanyName = computed(() => this.authState?.currentCompanyInfo()?.name ?? 'No Company', ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    currentBranchName = computed(() => this.authState?.currentBranchInfo()?.name ?? null, ...(ngDevMode ? [{ debugName: "currentBranchName" }] : []));
+    companies = signal([], ...(ngDevMode ? [{ debugName: "companies" }] : []));
+    branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
+    selectedCompanyId = signal(null, ...(ngDevMode ? [{ debugName: "selectedCompanyId" }] : []));
+    selectedBranchId = signal(null, ...(ngDevMode ? [{ debugName: "selectedBranchId" }] : []));
+    isLoadingCompanies = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingCompanies" }] : []));
+    isLoadingBranches = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingBranches" }] : []));
+    isSwitching = signal(false, ...(ngDevMode ? [{ debugName: "isSwitching" }] : []));
+    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" }] : []));
+    onPanelOpen() {
+        if (this.companies().length === 0) {
+            this.loadCompanies();
+        }
+    }
+    loadCompanies() {
+        if (!this.authApi)
+            return;
+        this.isLoadingCompanies.set(true);
+        this.authApi
+            .getUserCompanies()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (companies) => {
+                this.companies.set(companies);
+                this.isLoadingCompanies.set(false);
+            },
+            error: (err) => {
+                this.isLoadingCompanies.set(false);
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: err?.message || 'Failed to load companies',
+                });
+            },
+        });
+    }
+    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
+            .getCompanyBranches(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: (err) => {
+                this.isLoadingBranches.set(false);
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: err?.message || 'Failed to load branches',
+                });
+            },
+        });
+    }
+    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: 'Branch Required',
+                detail: 'Please select a branch',
+            });
+            return;
+        }
+        this.isSwitching.set(true);
+        this.authApi
+            .switchCompany(selectedCompany, selectedBranch || '')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => { },
+            error: (err) => {
+                this.isSwitching.set(false);
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: err?.message || 'Failed to switch company',
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+      (click)="onPanelOpen()"
+    >
+      <i class="pi pi-building"></i>
+      <span>{{ currentCompanyName() }}</span>
+      @if (currentBranchName()) {
+        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
+      }
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      style="background-color: var(--surface-overlay)"
+    >
+      <div class="flex flex-col gap-4 min-w-[280px]">
+        <span class="text-sm text-muted-color font-semibold"
+          >Switch Company & Branch</span
+        >
+
+        <!-- Company Selector -->
+        <div class="flex flex-col gap-2">
+          <label class="text-sm text-muted-color font-semibold">Company</label>
+          <p-select
+            [options]="companies()"
+            [ngModel]="selectedCompanyId()"
+            (ngModelChange)="onCompanyChange($event)"
+            optionLabel="name"
+            optionValue="id"
+            placeholder="Select Company"
+            class="w-full"
+            [loading]="isLoadingCompanies()"
+          />
+        </div>
+
+        <!-- Branch Selector -->
+        @if (selectedCompanyId() && branches().length > 0) {
+          <div class="flex flex-col gap-2">
+            <label class="text-sm text-muted-color font-semibold">Branch</label>
+            <p-select
+              [options]="branches()"
+              [ngModel]="selectedBranchId()"
+              (ngModelChange)="onBranchChange($event)"
+              optionLabel="name"
+              optionValue="id"
+              placeholder="Select Branch"
+              class="w-full"
+              [loading]="isLoadingBranches()"
+            />
+          </div>
+        }
+
+        <!-- Actions -->
+        <div class="flex gap-2 pt-2">
+          <p-button
+            label="Switch"
+            icon="pi pi-sync"
+            styleClass="flex-1"
+            [loading]="isSwitching()"
+            [disabled]="!canSwitch()"
+            (onClick)="onSwitch()"
+          />
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-company-branch-selector',
+                    standalone: true,
+                    imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule],
+                    host: { class: 'relative' },
+                    template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+      (click)="onPanelOpen()"
+    >
+      <i class="pi pi-building"></i>
+      <span>{{ currentCompanyName() }}</span>
+      @if (currentBranchName()) {
+        <span class="text-xs opacity-70"> | {{ currentBranchName() }}</span>
+      }
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      style="background-color: var(--surface-overlay)"
+    >
+      <div class="flex flex-col gap-4 min-w-[280px]">
+        <span class="text-sm text-muted-color font-semibold"
+          >Switch Company & Branch</span
+        >
+
+        <!-- Company Selector -->
+        <div class="flex flex-col gap-2">
+          <label class="text-sm text-muted-color font-semibold">Company</label>
+          <p-select
+            [options]="companies()"
+            [ngModel]="selectedCompanyId()"
+            (ngModelChange)="onCompanyChange($event)"
+            optionLabel="name"
+            optionValue="id"
+            placeholder="Select Company"
+            class="w-full"
+            [loading]="isLoadingCompanies()"
+          />
+        </div>
+
+        <!-- Branch Selector -->
+        @if (selectedCompanyId() && branches().length > 0) {
+          <div class="flex flex-col gap-2">
+            <label class="text-sm text-muted-color font-semibold">Branch</label>
+            <p-select
+              [options]="branches()"
+              [ngModel]="selectedBranchId()"
+              (ngModelChange)="onBranchChange($event)"
+              optionLabel="name"
+              optionValue="id"
+              placeholder="Select Branch"
+              class="w-full"
+              [loading]="isLoadingBranches()"
+            />
+          </div>
+        }
+
+        <!-- Actions -->
+        <div class="flex gap-2 pt-2">
+          <p-button
+            label="Switch"
+            icon="pi pi-sync"
+            styleClass="flex-1"
+            [loading]="isSwitching()"
+            [disabled]="!canSwitch()"
+            (onClick)="onSwitch()"
+          />
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
+class AppLauncher {
+    layoutService = inject(LayoutService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+    >
+      <i class="pi pi-th-large"></i>
+      <span>Apps</span>
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      style="background-color: var(--surface-overlay)"
+    >
+      <div class="flex flex-col gap-2 min-w-[240px]">
+        <span class="text-sm text-muted-color font-semibold">Applications</span>
+        <div class="grid grid-cols-3 gap-2">
+          @for (app of layoutService.apps(); track app.id) {
+            <a
+              class="group flex flex-col items-center w-20 p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              [href]="app.url"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div
+                class="flex items-center justify-center w-10 h-10 rounded-border bg-emphasis group-hover:bg-primary transition-all duration-200"
+              >
+                <lib-icon
+                  [icon]="app.icon"
+                  [iconType]="app.iconType"
+                  class="text-xl text-primary group-hover:text-primary-contrast transition-colors duration-200"
+                />
+              </div>
+              <span
+                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200"
+                >{{ app.name }}</span
+              >
+            </a>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppLauncher, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-launcher',
+                    standalone: true,
+                    imports: [StyleClassModule, IconComponent],
+                    host: { class: 'relative' },
+                    template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+    >
+      <i class="pi pi-th-large"></i>
+      <span>Apps</span>
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      style="background-color: var(--surface-overlay)"
+    >
+      <div class="flex flex-col gap-2 min-w-[240px]">
+        <span class="text-sm text-muted-color font-semibold">Applications</span>
+        <div class="grid grid-cols-3 gap-2">
+          @for (app of layoutService.apps(); track app.id) {
+            <a
+              class="group flex flex-col items-center w-20 p-2 rounded-border cursor-pointer no-underline transition-all duration-200 hover:bg-emphasis"
+              [href]="app.url"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div
+                class="flex items-center justify-center w-10 h-10 rounded-border bg-emphasis group-hover:bg-primary transition-all duration-200"
+              >
+                <lib-icon
+                  [icon]="app.icon"
+                  [iconType]="app.iconType"
+                  class="text-xl text-primary group-hover:text-primary-contrast transition-colors duration-200"
+                />
+              </div>
+              <span
+                class="text-xs mt-2 text-center text-muted-color group-hover:text-color transition-colors duration-200"
+                >{{ app.name }}</span
+              >
+            </a>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
+class AppProfile {
+    destroyRef = inject(DestroyRef);
+    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
+    authApi = inject(LAYOUT_AUTH_API, { optional: true });
+    messageService = inject(MessageService);
+    userName = computed(() => this.authState?.loginUserData()?.name ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
+    userEmail = computed(() => this.authState?.loginUserData()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
+    profilePicture = computed(() => this.authState?.loginUserData()?.profilePicture?.url ?? '', ...(ngDevMode ? [{ debugName: "profilePicture" }] : []));
+    logout() {
+        if (!this.authApi)
+            return;
+        this.authApi
+            .logOut()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (result) => {
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Success!',
+                    detail: result.message,
+                });
+                this.authApi?.navigateLogin(false);
+            },
+            error: (err) => {
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: err?.message || 'Failed to logout',
+                });
+            },
+        });
+    }
+    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: 'Link Copied',
+                detail: 'Sign Up Link copied.',
+            });
+        })
+            .catch((err) => {
+            console.error('Failed to copy signup link: ', err);
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Sorry',
+                detail: 'Failed to copy signup link.',
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+    >
+      <i class="pi pi-user"></i>
+      <span>Profile</span>
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      style="background-color: var(--surface-overlay)"
+    >
+      <div class="flex flex-col gap-3 min-w-[240px]">
+        <!-- User Info -->
+        <a
+          class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline hover:bg-emphasis transition-all duration-200"
+          routerLink="/profile"
+        >
+          @if (profilePicture()) {
+            <img
+              [src]="profilePicture()"
+              class="w-12 h-12 rounded-border object-cover"
+              alt="Profile"
+            />
+          } @else {
+            <div
+              class="w-12 h-12 rounded-border bg-primary flex items-center justify-center"
+            >
+              <i class="pi pi-user text-xl text-primary-contrast"></i>
+            </div>
+          }
+          <div class="flex flex-col">
+            <span class="font-semibold text-color">{{ userName() }}</span>
+            <span class="text-sm text-muted-color">{{ userEmail() }}</span>
+          </div>
+        </a>
+
+        <!-- Divider -->
+        <div class="border-t border-surface"></div>
+
+        <!-- Menu Items -->
+        <div class="flex flex-col gap-1">
+          <a
+            class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
+            (click)="copySignUpLink()"
+          >
+            <i class="pi pi-link text-muted-color"></i>
+            <span>Copy SignUp Link</span>
+          </a>
+          <a
+            class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
+            (click)="logout()"
+          >
+            <i class="pi pi-sign-out text-muted-color"></i>
+            <span>Logout</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppProfile, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-profile',
+                    standalone: true,
+                    imports: [AngularModule, StyleClassModule],
+                    host: { class: 'relative' },
+                    template: `
+    <button
+      type="button"
+      class="layout-topbar-action"
+      pStyleClass="@next"
+      enterFromClass="hidden"
+      enterActiveClass="animate-scalein"
+      leaveToClass="hidden"
+      leaveActiveClass="animate-fadeout"
+      [hideOnOutsideClick]="true"
+    >
+      <i class="pi pi-user"></i>
+      <span>Profile</span>
+    </button>
+    <div
+      class="hidden absolute top-[3.25rem] right-0 z-50 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
+      style="background-color: var(--surface-overlay)"
+    >
+      <div class="flex flex-col gap-3 min-w-[240px]">
+        <!-- User Info -->
+        <a
+          class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline hover:bg-emphasis transition-all duration-200"
+          routerLink="/profile"
+        >
+          @if (profilePicture()) {
+            <img
+              [src]="profilePicture()"
+              class="w-12 h-12 rounded-border object-cover"
+              alt="Profile"
+            />
+          } @else {
+            <div
+              class="w-12 h-12 rounded-border bg-primary flex items-center justify-center"
+            >
+              <i class="pi pi-user text-xl text-primary-contrast"></i>
+            </div>
+          }
+          <div class="flex flex-col">
+            <span class="font-semibold text-color">{{ userName() }}</span>
+            <span class="text-sm text-muted-color">{{ userEmail() }}</span>
+          </div>
+        </a>
+
+        <!-- Divider -->
+        <div class="border-t border-surface"></div>
+
+        <!-- Menu Items -->
+        <div class="flex flex-col gap-1">
+          <a
+            class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
+            (click)="copySignUpLink()"
+          >
+            <i class="pi pi-link text-muted-color"></i>
+            <span>Copy SignUp Link</span>
+          </a>
+          <a
+            class="flex items-center gap-3 p-3 rounded-border cursor-pointer no-underline text-color hover:bg-emphasis transition-all duration-200"
+            (click)="logout()"
+          >
+            <i class="pi pi-sign-out text-muted-color"></i>
+            <span>Logout</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
+class AppTopbar {
+    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
+    appConfig = inject(APP_CONFIG);
+    layoutService = inject(LayoutService);
+    companyName = computed(() => {
+        return this.authState?.currentCompanyInfo()?.name ?? 'Flusys';
+    }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
+    enableCompanyFeature = computed(() => {
+        return isCompanyFeatureEnabled(this.appConfig);
+    }, ...(ngDevMode ? [{ debugName: "enableCompanyFeature" }] : []));
+    toggleDarkMode() {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            darkTheme: !state.darkTheme,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AppTopbar, isStandalone: true, selector: "app-topbar", ngImport: i0, template: ` <div class="layout-topbar">
+    <div class="layout-topbar-logo-container">
+      <button
+        class="layout-menu-button layout-topbar-action"
+        (click)="layoutService.onMenuToggle()"
+      >
+        <i class="pi pi-bars"></i>
+      </button>
+      <a class="layout-topbar-logo" routerLink="/">
+        <span>{{ companyName() }}</span>
+      </a>
+    </div>
+
+    <div class="layout-topbar-actions">
+      <div class="layout-config-menu">
+        <button
+          type="button"
+          class="layout-topbar-action"
+          (click)="toggleDarkMode()"
+        >
+          <i
+            [ngClass]="{
+              'pi ': true,
+              'pi-moon': layoutService.isDarkTheme(),
+              'pi-sun': !layoutService.isDarkTheme(),
+            }"
+          ></i>
+        </button>
+        <div class="relative">
+          <button
+            class="layout-topbar-action layout-topbar-action-highlight"
+            pStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+          >
+            <i class="pi pi-palette"></i>
+          </button>
+          <app-configurator />
+        </div>
+      </div>
+
+      <button
+        class="layout-topbar-menu-button layout-topbar-action"
+        pStyleClass="@next"
+        enterFromClass="hidden"
+        enterActiveClass="animate-scalein"
+        leaveToClass="hidden"
+        leaveActiveClass="animate-fadeout"
+        [hideOnOutsideClick]="true"
+      >
+        <i class="pi pi-ellipsis-v"></i>
+      </button>
+
+      <div class="layout-topbar-menu hidden lg:block">
+        <div class="layout-topbar-menu-content">
+          @if (layoutService.hasApps()) {
+            <app-launcher />
+          }
+          @if (enableCompanyFeature()) {
+            <app-company-branch-selector />
+          }
+          <app-profile />
+        </div>
+      </div>
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppTopbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-topbar',
+                    standalone: true,
+                    imports: [
+                        RouterModule,
+                        CommonModule,
+                        StyleClassModule,
+                        AppConfigurator,
+                        AppProfile,
+                        AppCompanyBranchSelector,
+                        AppLauncher,
+                    ],
+                    template: ` <div class="layout-topbar">
+    <div class="layout-topbar-logo-container">
+      <button
+        class="layout-menu-button layout-topbar-action"
+        (click)="layoutService.onMenuToggle()"
+      >
+        <i class="pi pi-bars"></i>
+      </button>
+      <a class="layout-topbar-logo" routerLink="/">
+        <span>{{ companyName() }}</span>
+      </a>
+    </div>
+
+    <div class="layout-topbar-actions">
+      <div class="layout-config-menu">
+        <button
+          type="button"
+          class="layout-topbar-action"
+          (click)="toggleDarkMode()"
+        >
+          <i
+            [ngClass]="{
+              'pi ': true,
+              'pi-moon': layoutService.isDarkTheme(),
+              'pi-sun': !layoutService.isDarkTheme(),
+            }"
+          ></i>
+        </button>
+        <div class="relative">
+          <button
+            class="layout-topbar-action layout-topbar-action-highlight"
+            pStyleClass="@next"
+            enterFromClass="hidden"
+            enterActiveClass="animate-scalein"
+            leaveToClass="hidden"
+            leaveActiveClass="animate-fadeout"
+            [hideOnOutsideClick]="true"
+          >
+            <i class="pi pi-palette"></i>
+          </button>
+          <app-configurator />
+        </div>
+      </div>
+
+      <button
+        class="layout-topbar-menu-button layout-topbar-action"
+        pStyleClass="@next"
+        enterFromClass="hidden"
+        enterActiveClass="animate-scalein"
+        leaveToClass="hidden"
+        leaveActiveClass="animate-fadeout"
+        [hideOnOutsideClick]="true"
+      >
+        <i class="pi pi-ellipsis-v"></i>
+      </button>
+
+      <div class="layout-topbar-menu hidden lg:block">
+        <div class="layout-topbar-menu-content">
+          @if (layoutService.hasApps()) {
+            <app-launcher />
+          }
+          @if (enableCompanyFeature()) {
+            <app-company-branch-selector />
+          }
+          <app-profile />
+        </div>
+      </div>
+    </div>
+  </div>`,
+                }]
+        }] });
+
+class AppMenuitem {
+    // Signal inputs
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
+    parentKey = input('', ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
+    // Injected services
+    router = inject(Router);
+    layoutService = inject(LayoutService);
+    authState = inject(LAYOUT_AUTH_STATE, { optional: true });
+    destroyRef = inject(DestroyRef);
+    // State signals
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    // Computed signals
+    key = computed(() => {
+        const parent = this.parentKey();
+        return parent ? `${parent}-${this.index()}` : String(this.index());
+    }, ...(ngDevMode ? [{ debugName: "key" }] : []));
+    routerLink = computed(() => {
+        const menuItem = this.item();
+        return menuItem.routerLink ?? [];
+    }, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
+    // 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',
+        };
+    }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
+    constructor() {
+        // Subscribe to menu source changes
+        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);
+                }
+            });
+        });
+        // Subscribe to menu reset
+        this.layoutService.resetSource$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.active.set(false));
+        // Subscribe to navigation events
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (this.item().routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        });
+        // Effect to update active state on init when item has routerLink
+        effect(() => {
+            const menuItem = this.item();
+            if (menuItem.routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        });
+    }
+    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 isActive = this.router.isActive(link[0], {
+            paths: pathsMatch,
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored',
+        });
+        if (isActive) {
+            this.layoutService.onMenuStateChange({
+                key: this.key(),
+                routeEvent: true,
+            });
+        }
+    }
+    itemClick() {
+        if (this.item().children) {
+            this.active.update((prev) => !prev);
+        }
+        this.layoutService.onMenuStateChange({ key: this.key() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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()" } }, ngImport: i0, template: `
+    <ng-container>
+      @if (item().children?.length) {
+        <a (click)="itemClick()" tabindex="0" pRipple>
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{ item().label }}</span>
+          @if (item().children) {
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+          }
+        </a>
+      }
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+          pRipple
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{ item().label }}</span>
+        </a>
+      }
+      @if (item().children) {
+        <ul
+          [class.submenu-expanded]="active()"
+          [class.submenu-collapsed]="!active()"
+        >
+          @for (
+            child of item().children;
+            track 'menu' + child.id + '' + i;
+            let i = $index
+          ) {
+            <li
+              app-menuitem
+              [item]="child"
+              [index]="i"
+              [parentKey]="key()"
+            ></li>
+          }
+        </ul>
+      }
+    </ng-container>
+  `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppMenuitem, decorators: [{
+            type: Component,
+            args: [{ selector: '[app-menuitem]', standalone: true, imports: [IconComponent, RouterModule, RippleModule], template: `
+    <ng-container>
+      @if (item().children?.length) {
+        <a (click)="itemClick()" tabindex="0" pRipple>
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{ item().label }}</span>
+          @if (item().children) {
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+          }
+        </a>
+      }
+      @if (item().routerLink && !item().children?.length) {
+        <a
+          (click)="itemClick()"
+          [routerLink]="routerLink()"
+          routerLinkActive="active-route"
+          [routerLinkActiveOptions]="routerLinkActiveOptions()"
+          tabindex="0"
+          pRipple
+        >
+          @if (item().icon) {
+            <lib-icon
+              [icon]="item().icon!"
+              [iconType]="item().iconType"
+              class="layout-menuitem-icon"
+            />
+          }
+          <span class="layout-menuitem-text">{{ item().label }}</span>
+        </a>
+      }
+      @if (item().children) {
+        <ul
+          [class.submenu-expanded]="active()"
+          [class.submenu-collapsed]="!active()"
+        >
+          @for (
+            child of item().children;
+            track 'menu' + child.id + '' + i;
+            let i = $index
+          ) {
+            <li
+              app-menuitem
+              [item]="child"
+              [index]="i"
+              [parentKey]="key()"
+            ></li>
+          }
+        </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 }] }] } });
+
+/**
+ * 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: "21.1.0", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
+    <ul>
+      @for (
+        item of menuItems();
+        track 'menu' + item.id + '' + i;
+        let i = $index
+      ) {
+        <li app-menuitem [item]="item" [index]="i"></li>
+      }
+    </ul>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-menu',
+                    standalone: true,
+                    imports: [AppMenuitem, RouterModule],
+                    template: `<div class="layout-menu">
+    <ul>
+      @for (
+        item of menuItems();
+        track 'menu' + item.id + '' + i;
+        let i = $index
+      ) {
+        <li app-menuitem [item]="item" [index]="i"></li>
+      }
+    </ul>
+  </div>`,
+                }]
+        }] });
+
+class AppSidebar {
+    el;
+    constructor(el) {
+        this.el = el;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppSidebar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: ` <div class="layout-sidebar">
+        <app-menu></app-menu>
+    </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-sidebar',
+                    standalone: true,
+                    imports: [AppMenu],
+                    template: ` <div class="layout-sidebar">
+        <app-menu></app-menu>
+    </div>`
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class AppLayout {
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
+    layoutService = inject(LayoutService);
+    renderer = inject(Renderer2);
+    router = inject(Router);
+    menuOutsideClickListener = null;
+    appSidebar;
+    appTopBar;
+    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$1((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.hideMenu());
+    }
+    isOutsideClicked(event) {
+        const sidebarEl = this.document.querySelector('.layout-sidebar');
+        const topbarEl = this.document.querySelector('.layout-menu-button');
+        const eventTarget = event.target;
+        return !(sidebarEl?.isSameNode(eventTarget) ||
+            sidebarEl?.contains(eventTarget) ||
+            topbarEl?.isSameNode(eventTarget) ||
+            topbarEl?.contains(eventTarget));
+    }
+    hideMenu() {
+        this.layoutService.layoutState.update((prev) => ({
+            ...prev,
+            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');
+    }
+    get containerClass() {
+        const config = this.layoutService.layoutConfig();
+        const state = this.layoutService.layoutState();
+        return {
+            'layout-overlay': config.menuMode === 'overlay',
+            'layout-static': config.menuMode === 'static',
+            'layout-static-inactive': state.staticMenuDesktopInactive && config.menuMode === 'static',
+            'layout-overlay-active': state.overlayMenuActive,
+            'layout-mobile-active': state.staticMenuMobileActive,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: AppLayout, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebar, descendants: true }, { propertyName: "appTopBar", first: true, predicate: AppTopbar, descendants: true }], ngImport: i0, template: `
+    <div class="layout-wrapper" [ngClass]="containerClass">
+      <app-topbar></app-topbar>
+      <app-sidebar></app-sidebar>
+      <div class="layout-main-container">
+        <div class="layout-main">
+          <router-outlet></router-outlet>
+        </div>
+        <app-footer></app-footer>
+      </div>
+      <div class="layout-mask animate-fadein"></div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: AppSidebar, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AppLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-layout',
+                    standalone: true,
+                    imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppFooter],
+                    template: `
+    <div class="layout-wrapper" [ngClass]="containerClass">
+      <app-topbar></app-topbar>
+      <app-sidebar></app-sidebar>
+      <div class="layout-main-container">
+        <div class="layout-main">
+          <router-outlet></router-outlet>
+        </div>
+        <app-footer></app-footer>
+      </div>
+      <div class="layout-mask animate-fadein"></div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { appSidebar: [{
+                type: ViewChild,
+                args: [AppSidebar]
+            }], appTopBar: [{
+                type: ViewChild,
+                args: [AppTopbar]
+            }] } });
+
+const GreenTheme = definePreset(Material, {
+    semantic: {
+        colorScheme: {
+            light: {
+                primary: {
+                    color: '#01712c',
+                    inverseColor: '#119744',
+                    hoverColor: '#119744',
+                    activeColor: '#119744',
+                },
+                highlight: {
+                    background: '#e2e8f0',
+                    focusBackground: '#e2e8f0',
+                    color: '#01712c',
+                    focusColor: '#01712c',
+                },
+            },
+        },
+    },
+});
+
+const NavyBlueTheme = definePreset(Material, {
+    semantic: {
+        colorScheme: {
+            light: {
+                primary: {
+                    color: '#3535cd',
+                    inverseColor: '#0707a9',
+                    hoverColor: '#0707a9',
+                    activeColor: '#0707a9',
+                },
+                highlight: {
+                    background: '#e2e8f0',
+                    focusBackground: '#e2e8f0',
+                    color: '#3535cd',
+                    focusColor: '#3535cd',
+                },
+            },
+        },
+    },
+});
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LayoutPersistenceService, LayoutService, NavyBlueTheme, filterAppsByPermissions, filterMenuByPermissions };
+//# sourceMappingURL=flusys-ng-layout.mjs.map