@unopsitg/ux 21.0.2

package/fesm2022/unopsitg-ux.mjs

@@ -0,0 +1,2596 @@
+import { definePreset, updatePreset, updateSurfacePalette, $t } from '@primeuix/themes';
+import SoftBase from '@primeuix/themes/aura';
+import CrispBase from '@primeuix/themes/lara';
+import ContrastBase from '@primeuix/themes/nora';
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, inject, computed, effect, Injectable, Component, PLATFORM_ID, model, booleanAttribute, Input, input, HostListener, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/router';
+import { Router, NavigationEnd, RouterModule } from '@angular/router';
+import * as i1$1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { BehaviorSubject, filter, Subject, takeUntil } from 'rxjs';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { PrimeNG } from 'primeng/config';
+import * as i4 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import * as i5$1 from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import * as i3 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import * as i6 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i2 from 'primeng/divider';
+import { DividerModule } from 'primeng/divider';
+import * as i4$1 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i3$1 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i3$2 from 'primeng/autofocus';
+import { AutoFocusModule } from 'primeng/autofocus';
+import * as i1$2 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i4$2 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import * as i3$3 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i10 from 'primeng/avatar';
+import { AvatarModule } from 'primeng/avatar';
+import * as i8 from 'primeng/badge';
+import { BadgeModule } from 'primeng/badge';
+import * as i5$2 from 'primeng/iconfield';
+import { IconFieldModule } from 'primeng/iconfield';
+import * as i6$1 from 'primeng/inputicon';
+import { InputIconModule } from 'primeng/inputicon';
+import * as i9 from 'primeng/overlaybadge';
+import { OverlayBadgeModule } from 'primeng/overlaybadge';
+import * as i3$4 from 'primeng/styleclass';
+import { StyleClassModule } from 'primeng/styleclass';
+
+/**
+ * Brand theme presets built on top of PrimeUIX base presets.
+ *
+ * Upstream mapping (for PrimeNG docs, changelogs, and debugging):
+ *   Soft     <- @primeuix/themes/aura
+ *   Crisp    <- @primeuix/themes/lara
+ *   Contrast <- @primeuix/themes/nora
+ */
+const brandPrimitives = {
+    deepsea: { 50: '#F1F5F9', 100: '#E2E8F0', 200: '#CBD5E1', 300: '#94A3B8', 400: '#64748B', 500: '#475569', 600: '#334155', 700: '#1E293B', 800: '#0F172A', 900: '#0A101D', 950: '#03080c' },
+    gray: { 50: '#f0f3f4', 100: '#ECF0F5', 200: '#d8dadf', 300: '#b9bac1', 400: '#858c99', 500: '#808393', 600: '#808284', 700: '#6a6b6d', 800: '#535455', 900: '#3c3d3e', 950: '#262627' },
+    red: { 50: '#f6cac6', 100: '#f0a9a4', 200: '#eb8982', 300: '#e56960', 400: '#e0493e', 500: '#da291c', 600: '#b92318', 700: '#991d14', 800: '#78170f', 900: '#57100b', 950: '#370a07' },
+    orange: { 50: '#f9d6c3', 100: '#f6be9f', 200: '#f2a57a', 300: '#ef8d56', 400: '#eb7432', 500: '#e85c0e', 600: '#c54e0c', 700: '#a2400a', 800: '#803308', 900: '#5d2506', 950: '#3a1704' },
+    yellow: { 50: '#fff0c5', 100: '#ffe7a1', 200: '#ffdd7e', 300: '#ffd45b', 400: '#ffcb38', 500: '#ffc215', 600: '#d9a512', 700: '#b3880f', 800: '#8c6b0c', 900: '#664e08', 950: '#403105' },
+    lemon: { 50: '#fdfad0', 100: '#fcf7b4', 200: '#fbf398', 300: '#faf07c', 400: '#f9ed60', 500: '#f8ea44', 600: '#d3c73a', 700: '#aea430', 800: '#888125', 900: '#635e1b', 950: '#3e3b11' },
+    lime: { 50: '#f0f5bf', 100: '#e7ef99', 200: '#dfe873', 300: '#d6e24d', 400: '#cddc26', 500: '#c4d600', 600: '#a7b600', 700: '#899600', 800: '#6c7600', 900: '#4e5600', 950: '#313600' },
+    babygreen: { 50: '#e5f2cf', 100: '#d5e9b1', 200: '#c5e194', 300: '#b6d977', 400: '#a6d15a', 500: '#96c93d', 600: '#80ab34', 700: '#698d2b', 800: '#536f22', 900: '#3c5018', 950: '#26320f' },
+    green: { 50: '#d2e7cd', 100: '#b7d9af', 200: '#9dca92', 300: '#82bc74', 400: '#67ad56', 500: '#4c9f38', 600: '#418730', 700: '#356f27', 800: '#2a571f', 900: '#1e4016', 950: '#13280e' },
+    olive: { 50: '#d1e0d5', 100: '#b5cdbc', 200: '#99baa3', 300: '#7da889', 400: '#619570', 500: '#458257', 600: '#3b6f4a', 700: '#305b3d', 800: '#264830', 900: '#1c3423', 950: '#112116' },
+    teal: { 50: '#bfeae5', 100: '#99ddd5', 200: '#73d0c6', 300: '#4dc3b6', 400: '#26b6a7', 500: '#00a997', 600: '#009080', 700: '#00766a', 800: '#005d53', 900: '#00443c', 950: '#002a26' },
+    ocean: { 50: '#d3f0f7', 100: '#b8e7f3', 200: '#9edeee', 300: '#83d5e9', 400: '#69cce5', 500: '#4ec3e0', 600: '#42a6be', 700: '#37899d', 800: '#2b6b7b', 900: '#1f4e5a', 950: '#143138' },
+    blue: { 50: '#DEEFFF', 100: '#C9E8FF', 150: '#99D3ED', 200: '#73c3e6', 300: '#4db3df', 400: '#26a2d8', 500: '#0092d1', 600: '#007cb2', 700: '#006692', 800: '#005073', 900: '#003a54', 950: '#002534' },
+    darkblue: { 50: '#D0EEFF', 100: '#B7E2F9', 200: '#73abc7', 300: '#4d94b8', 400: '#267da9', 500: '#00669a', 600: '#005783', 700: '#00476c', 800: '#003855', 900: '#00293e', 950: '#001a27' },
+    midnight: { 50: '#bfd2dd', 100: '#99b6c8', 200: '#739bb4', 300: '#4d809f', 400: '#26648b', 500: '#004976', 600: '#003e64', 700: '#003353', 800: '#002841', 850: '#001E31', 900: '#001d2f', 950: '#00121e' },
+    cherry: { 50: '#e6c7d9', 100: '#d6a5c2', 200: '#c783ab', 300: '#b86294', 400: '#a8407d', 500: '#991e66', 600: '#821a57', 700: '#6b1547', 800: '#541138', 900: '#3d0c29', 950: '#26081a' }
+};
+const brandOverrides = {
+    primitive: {
+        ...brandPrimitives,
+        slate: brandPrimitives.gray,
+        zinc: brandPrimitives.deepsea,
+        neutral: brandPrimitives.gray,
+        stone: brandPrimitives.gray,
+        emerald: brandPrimitives.green,
+        amber: brandPrimitives.yellow,
+        cyan: brandPrimitives.ocean,
+        sky: brandPrimitives.blue,
+        indigo: brandPrimitives.darkblue,
+        violet: brandPrimitives.midnight,
+        purple: brandPrimitives.cherry,
+        fuchsia: brandPrimitives.cherry,
+        pink: brandPrimitives.cherry,
+        rose: brandPrimitives.red
+    },
+    semantic: {
+        fontFamily: '"Noto Sans", sans-serif',
+        primary: {
+            50: '{darkblue.50}',
+            100: '{darkblue.100}',
+            200: '{darkblue.200}',
+            300: '{darkblue.300}',
+            400: '{darkblue.400}',
+            500: '{darkblue.500}',
+            600: '{darkblue.600}',
+            700: '{darkblue.700}',
+            800: '{darkblue.800}',
+            900: '{darkblue.900}',
+            950: '{darkblue.950}'
+        },
+        colorScheme: {
+            light: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{deepsea.50}',
+                    100: '{deepsea.100}',
+                    200: '{deepsea.200}',
+                    300: '{deepsea.300}',
+                    400: '{deepsea.400}',
+                    500: '{deepsea.500}',
+                    600: '{deepsea.600}',
+                    700: '{deepsea.700}',
+                    800: '{deepsea.800}',
+                    900: '{deepsea.900}',
+                    950: '{deepsea.950}'
+                }
+            },
+            dark: {
+                surface: {
+                    0: '#ffffff',
+                    50: '{darkblue.50}',
+                    100: '{darkblue.100}',
+                    200: '{darkblue.200}',
+                    300: '{darkblue.200}',
+                    400: '{darkblue.300}',
+                    500: '{darkblue.400}',
+                    600: '{darkblue.500}',
+                    700: '{darkblue.600}',
+                    800: '{darkblue.700}',
+                    900: '{darkblue.900}',
+                    950: '{darkblue.950}'
+                }
+            }
+        }
+    },
+    components: {
+        button: {
+            colorScheme: {
+                light: {
+                    root: {
+                        primary: {
+                            background: '{primary.600}',
+                            borderColor: '{primary.600}'
+                        }
+                    }
+                }
+            }
+        },
+        datatable: {
+            colorScheme: {
+                light: {
+                    row: {
+                        hoverBackground: '{surface.100}',
+                        hoverColor: '{surface.950}'
+                    }
+                },
+                dark: {
+                    row: {
+                        hoverBackground: '{surface.900}',
+                        hoverColor: '{surface.0}'
+                    }
+                }
+            }
+        },
+        paginator: {
+            root: {
+                background: 'transparent'
+            }
+        },
+        tag: {
+            root: {
+                padding: '0.25rem 0.5rem',
+                fontWeight: '500'
+            },
+            colorScheme: {
+                light: {
+                    secondary: { color: '{surface.800}' },
+                    success: { color: '{green.800}' },
+                    active: { color: '{green.800}' },
+                    inactive: { color: '{gray.800}' },
+                    info: { color: '{blue.800}' },
+                    warn: { color: '{orange.800}' },
+                    error: { color: '{red.800}' }
+                },
+                dark: {
+                    secondary: { color: '{surface.100}' },
+                    success: { color: '{green.100}' },
+                    active: { color: '{green.100}' },
+                    info: { color: '{blue.100}' },
+                    inactive: { color: '{gray.100}' },
+                    warn: { color: '{orange.100}' },
+                    error: { color: '{red.100}' }
+                }
+            }
+        }
+    }
+};
+const BrandSoft = definePreset(SoftBase, brandOverrides);
+const BrandCrisp = definePreset(CrispBase, brandOverrides);
+const BrandContrast = definePreset(ContrastBase, brandOverrides);
+const brandPresets = {
+    Soft: BrandSoft,
+    Crisp: BrandCrisp,
+    Contrast: BrandContrast
+};
+
+const MENU_MODEL = new InjectionToken('UNOPS_UX_MENU_MODEL', {
+    factory: () => {
+        throw new Error('MENU_MODEL is not provided. Add { provide: MENU_MODEL, useFactory: ... } or useValue to app.config.ts providers.');
+    }
+});
+const SIDEBAR_LOGO = new InjectionToken('UNOPS_UX_SIDEBAR_LOGO', {
+    factory: () => ({
+        expanded: 'assets/opp/AppLogo/AppLogo-onDark_H.svg',
+        compact: 'assets/opp/AppLogo/AppLogo-onDark_compact.svg',
+        alt: 'UNOPS'
+    })
+});
+const TOPBAR_MOBILE_LOGO = new InjectionToken('UNOPS_UX_TOPBAR_MOBILE_LOGO', {
+    factory: () => ({
+        dark: 'assets/opp/AppLogo/AppLogo-onDark_H.svg',
+        light: 'assets/opp/AppLogo/AppLogo-onLight_H.svg',
+        alt: 'UNOPS'
+    })
+});
+
+class LayoutService {
+    layoutConfig = signal({
+        preset: 'Soft',
+        primary: 'blue',
+        surface: null,
+        darkTheme: true,
+        menuMode: 'static',
+        menuTheme: 'primary',
+        cardStyle: 'transparent'
+    }, ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
+    layoutState = signal({
+        staticMenuInactive: false,
+        overlayMenuActive: false,
+        rightMenuVisible: false,
+        configSidebarVisible: false,
+        mobileMenuActive: false,
+        searchBarActive: false,
+        sidebarExpanded: false,
+        sidebarPinned: true,
+        menuHoverActive: false,
+        activePath: null,
+        anchored: false
+    }, ...(ngDevMode ? [{ debugName: "layoutState" }] : []));
+    router = inject(Router);
+    currentUrl = signal('', ...(ngDevMode ? [{ debugName: "currentUrl" }] : []));
+    isDarkTheme = computed(() => this.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    isSlim = computed(() => this.layoutConfig().menuMode === 'slim', ...(ngDevMode ? [{ debugName: "isSlim" }] : []));
+    isHorizontal = computed(() => this.layoutConfig().menuMode === 'horizontal', ...(ngDevMode ? [{ debugName: "isHorizontal" }] : []));
+    isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
+    isCompact = computed(() => this.layoutConfig().menuMode === 'compact', ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
+    isStatic = computed(() => this.layoutConfig().menuMode === 'static', ...(ngDevMode ? [{ debugName: "isStatic" }] : []));
+    isReveal = computed(() => this.layoutConfig().menuMode === 'reveal', ...(ngDevMode ? [{ debugName: "isReveal" }] : []));
+    isDrawer = computed(() => this.layoutConfig().menuMode === 'drawer', ...(ngDevMode ? [{ debugName: "isDrawer" }] : []));
+    isSidebarPinned = computed(() => this.layoutState().sidebarPinned, ...(ngDevMode ? [{ debugName: "isSidebarPinned" }] : []));
+    isRail = computed(() => !this.layoutState().sidebarPinned && this.isStatic(), ...(ngDevMode ? [{ debugName: "isRail" }] : []));
+    hasOverlaySubmenu = computed(() => this.isSlim() || this.isCompact() || this.isHorizontal(), ...(ngDevMode ? [{ debugName: "hasOverlaySubmenu" }] : []));
+    hasOpenOverlay = computed(() => this.layoutState().overlayMenuActive || this.hasOpenOverlaySubmenu(), ...(ngDevMode ? [{ debugName: "hasOpenOverlay" }] : []));
+    hasOpenOverlaySubmenu = computed(() => {
+        return this.hasOverlaySubmenu() && !!this.layoutState().activePath;
+    }, ...(ngDevMode ? [{ debugName: "hasOpenOverlaySubmenu" }] : []));
+    isSidebarStateChanged = computed(() => {
+        const layoutConfig = this.layoutConfig();
+        return layoutConfig.menuMode === 'horizontal' || layoutConfig.menuMode === 'slim' || layoutConfig.menuMode === 'slim-plus';
+    }, ...(ngDevMode ? [{ debugName: "isSidebarStateChanged" }] : []));
+    initialized = false;
+    previousMenuMode = undefined;
+    constructor() {
+        effect(() => {
+            const config = this.layoutConfig();
+            if (!this.initialized || !config) {
+                this.initialized = true;
+                return;
+            }
+            this.handleDarkModeTransition(config);
+        });
+        effect(() => {
+            this.updateMenuState();
+        });
+    }
+    updateMenuState() {
+        const menuMode = this.layoutConfig().menuMode;
+        if (this.previousMenuMode === undefined) {
+            this.previousMenuMode = menuMode;
+            return;
+        }
+        if (this.previousMenuMode === menuMode) {
+            return;
+        }
+        this.previousMenuMode = menuMode;
+        const isOverlaySubmenu = menuMode === 'slim' || menuMode === 'slim-plus' || menuMode === 'horizontal' || menuMode === 'compact';
+        this.layoutState.update((prev) => ({
+            ...prev,
+            staticMenuInactive: false,
+            overlayMenuActive: false,
+            mobileMenuActive: false,
+            sidebarExpanded: false,
+            menuHoverActive: false,
+            anchored: false,
+            activePath: this.isDesktop() ? (isOverlaySubmenu ? null : this.router.url) : prev.activePath
+        }));
+    }
+    handleDarkModeTransition(config) {
+        const supportsViewTransition = 'startViewTransition' in document;
+        if (supportsViewTransition) {
+            this.startViewTransition(config);
+        }
+        else {
+            this.toggleDarkMode(config);
+        }
+    }
+    startViewTransition(config) {
+        const transition = document.startViewTransition(() => {
+            this.toggleDarkMode(config);
+        });
+    }
+    toggleDarkMode(config) {
+        const _config = config || this.layoutConfig();
+        if (_config.darkTheme) {
+            document.documentElement.classList.add('app-dark');
+        }
+        else {
+            document.documentElement.classList.remove('app-dark');
+        }
+    }
+    toggleMenu() {
+        if (this.isDesktop()) {
+            this.toggleSidebarPin();
+        }
+        else {
+            this.layoutState.update((prev) => ({ ...prev, mobileMenuActive: !prev.mobileMenuActive }));
+        }
+    }
+    toggleSidebarPin() {
+        this.layoutState.update((prev) => ({
+            ...prev,
+            sidebarPinned: !prev.sidebarPinned,
+            sidebarExpanded: false
+        }));
+    }
+    changeMenuMode(mode) {
+        this.layoutConfig.update((prev) => ({ ...prev, menuMode: mode }));
+        this.layoutState.update((prev) => ({ ...prev, staticMenuInactive: false, overlayMenuActive: false, mobileMenuActive: false, sidebarExpanded: false, sidebarPinned: true, menuHoverActive: false, anchored: false }));
+        if (this.isDesktop()) {
+            this.layoutState.update((prev) => ({ ...prev, activePath: this.hasOverlaySubmenu() ? null : this.router.url }));
+        }
+    }
+    toggleRightMenu() {
+        this.layoutState.update((prev) => ({
+            ...prev,
+            rightMenuVisible: !prev.rightMenuVisible
+        }));
+    }
+    toggleConfigSidebar() {
+        this.layoutState.update((prev) => ({
+            ...prev,
+            configSidebarVisible: !prev.configSidebarVisible
+        }));
+    }
+    toggleSearchBar() {
+        this.layoutState.update((prev) => ({
+            ...prev,
+            searchBarActive: !prev.searchBarActive
+        }));
+    }
+    isDesktop() {
+        return window.innerWidth > 991;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class AppBreadcrumb {
+    router;
+    _breadcrumbs$ = new BehaviorSubject([]);
+    breadcrumbs$ = this._breadcrumbs$.asObservable();
+    constructor(router) {
+        this.router = router;
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+            const root = this.router.routerState.snapshot.root;
+            const breadcrumbs = [];
+            this.addBreadcrumb(root, [], breadcrumbs);
+            this._breadcrumbs$.next(breadcrumbs);
+        });
+    }
+    addBreadcrumb(route, parentUrl, breadcrumbs) {
+        const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
+        const breadcrumb = route.data['breadcrumb'];
+        const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+        if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+            breadcrumbs.push({
+                label: route.data['breadcrumb'],
+                url: '/' + routeUrl.join('/')
+            });
+        }
+        if (route.firstChild) {
+            this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppBreadcrumb, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppBreadcrumb, isStandalone: true, selector: "[app-breadcrumb]", ngImport: i0, template: `<nav class="layout-breadcrumb" aria-label="Breadcrumb">
+        <ol>
+            @for (item of breadcrumbs$ | async; track item.url; let last = $last) {
+                <li class="text-sm font-medium text-surface-700 dark:text-surface-100">
+                    @if (!last && item.url) {
+                        <a [routerLink]="item.url" class="text-surface-700 dark:text-surface-100 cursor-pointer">{{ item.label }}</a>
+                    } @else {
+                        {{ item.label }}
+                    }
+                </li>
+                @if (!last) {
+                    <li class="text-sm font-medium text-surface-400 dark:text-surface-400">/</li>
+                }
+            }
+        </ol>
+    </nav> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppBreadcrumb, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-breadcrumb]',
+                    imports: [CommonModule, RouterModule],
+                    template: `<nav class="layout-breadcrumb" aria-label="Breadcrumb">
+        <ol>
+            @for (item of breadcrumbs$ | async; track item.url; let last = $last) {
+                <li class="text-sm font-medium text-surface-700 dark:text-surface-100">
+                    @if (!last && item.url) {
+                        <a [routerLink]="item.url" class="text-surface-700 dark:text-surface-100 cursor-pointer">{{ item.label }}</a>
+                    } @else {
+                        {{ item.label }}
+                    }
+                </li>
+                @if (!last) {
+                    <li class="text-sm font-medium text-surface-400 dark:text-surface-400">/</li>
+                }
+            }
+        </ol>
+    </nav> `
+                }]
+        }], ctorParameters: () => [{ type: i1.Router }] });
+
+class AppConfigurator {
+    simple = false;
+    location = 'app';
+    router = inject(Router);
+    config = inject(PrimeNG);
+    layoutService = inject(LayoutService);
+    platformId = inject(PLATFORM_ID);
+    primeng = inject(PrimeNG);
+    presetKeys = Object.keys(brandPresets);
+    themeOptions = [
+        { name: 'Light', value: false },
+        { name: 'Dark', value: true }
+    ];
+    menuThemeOptions = [];
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.onPresetChange(this.layoutService.layoutConfig().preset);
+        }
+        this.updateMenuThemeOptions();
+    }
+    updateMenuThemeOptions() {
+        if (this.darkTheme()) {
+            this.menuThemeOptions = [
+                { name: 'Dark', value: 'dark' },
+                { name: 'Primary', value: 'primary' }
+            ];
+        }
+        else {
+            this.menuThemeOptions = [
+                { name: 'Light', value: 'light' },
+                { name: 'Dark', value: 'dark' },
+                { name: 'Primary', value: 'primary' }
+            ];
+        }
+    }
+    surfaces = [
+        {
+            name: 'gray',
+            palette: {
+                0: '#ffffff',
+                50: '#e5e6e6',
+                100: '#d5d6d7',
+                200: '#c6c7c8',
+                300: '#b6b8b9',
+                400: '#a7a8aa',
+                500: '#97999b',
+                600: '#808284',
+                700: '#6a6b6d',
+                800: '#535455',
+                900: '#3c3d3e',
+                950: '#262627'
+            }
+        },
+        {
+            name: 'darkblue',
+            palette: {
+                0: '#ffffff',
+                50: '#D0EEFF',
+                100: '#B7E2F9',
+                200: '#73abc7',
+                300: '#73abc7',
+                400: '#4d94b8',
+                500: '#267da9',
+                600: '#00669a',
+                700: '#005783',
+                800: '#00476c',
+                900: '#00293e',
+                950: '#001a27'
+            }
+        }
+    ];
+    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(() => {
+        const mode = this.layoutService.layoutConfig().menuMode;
+        const pinned = this.layoutService.layoutState().sidebarPinned;
+        return mode === 'static' && !pinned ? 'rail' : mode;
+    }, ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
+    cardStyle = model(this.layoutService.layoutConfig().cardStyle, ...(ngDevMode ? [{ debugName: "cardStyle" }] : []));
+    get configSidebarVisible() {
+        return this.layoutService.layoutState().configSidebarVisible;
+    }
+    set configSidebarVisible(val) {
+        this.layoutService.layoutState.update((prev) => ({ ...prev, configSidebarVisible: val }));
+    }
+    darkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "darkTheme" }] : []));
+    selectedSurface = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurface" }] : []));
+    cardStyleOptions = [
+        { name: 'Transparent', value: 'transparent' },
+        { name: 'Filled', value: 'filled' }
+    ];
+    primaryColors = computed(() => {
+        const presetPalette = brandPresets[this.layoutService.layoutConfig().preset].primitive;
+        const colors = ['red', 'orange', 'yellow', 'lemon', 'lime', 'babygreen', 'green', 'olive', 'teal', 'ocean', 'blue', 'darkblue', 'midnight', 'cherry'];
+        const palettes = [{ name: 'noir', palette: {} }];
+        colors.forEach((color) => {
+            palettes.push({
+                name: color,
+                palette: presetPalette?.[color]
+            });
+        });
+        return palettes;
+    }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
+    menuTheme = computed(() => this.layoutService.layoutConfig().menuTheme, ...(ngDevMode ? [{ debugName: "menuTheme" }] : []));
+    getPresetExt() {
+        const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
+        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 {
+            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 = brandPresets[event];
+        const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
+        $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
+    }
+    onCardStyleChange(value) {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            cardStyle: value
+        }));
+    }
+    onMenuThemeChange(value) {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            menuTheme: value
+        }));
+    }
+    setMenuMode(mode) {
+        const isRail = mode === 'rail';
+        const actualMode = isRail ? 'static' : mode;
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            menuMode: actualMode
+        }));
+        this.layoutService.layoutState.update((state) => ({
+            ...state,
+            staticMenuInactive: false,
+            overlayMenuActive: false,
+            mobileMenuActive: false,
+            sidebarExpanded: false,
+            sidebarPinned: !isRail,
+            menuHoverActive: false,
+            anchored: false
+        }));
+    }
+    toggleDarkMode() {
+        this.executeDarkModeToggle();
+    }
+    executeDarkModeToggle() {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            darkTheme: !state.darkTheme
+        }));
+        if (this.darkTheme()) {
+            this.setMenuTheme('dark');
+        }
+        this.updateMenuThemeOptions();
+    }
+    toggleConfigSidebar() {
+        this.layoutService.layoutState.update((val) => ({ ...val, configSidebarVisible: !val.configSidebarVisible }));
+    }
+    setMenuTheme(theme) {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            menuTheme: theme
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppConfigurator, isStandalone: true, selector: "app-configurator", inputs: { simple: { classPropertyName: "simple", publicName: "simple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, location: { classPropertyName: "location", publicName: "location", isSignal: false, isRequired: false, transformFunction: null }, cardStyle: { classPropertyName: "cardStyle", publicName: "cardStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardStyle: "cardStyleChange" }, ngImport: i0, template: `
+        <p-drawer [(visible)]="configSidebarVisible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-80" header="Settings" appendTo="body">
+            <div class="flex flex-col gap-6">
+                <div>
+                    <span class="text-lg text-muted-color font-semibold">Primary</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (primaryColor of primaryColors(); track primaryColor.name) {
+                            <button
+                                type="button"
+                                [title]="primaryColor.name"
+                                (click)="updateColors($event, 'primary', primaryColor)"
+                                class="w-6 h-6 cursor-pointer hover:shadow-lg rounded duration-150 flex items-center justify-center"
+                                [style]="{
+                                    'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                                }"
+                            >
+                                <i *ngIf="primaryColor.name === selectedPrimaryColor()" class="pi pi-check text-white"></i>
+                            </button>
+                        }
+                    </div>
+                </div>
+
+                <div>
+                    <span class="text-lg text-muted-color font-semibold">Surface</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (surface of surfaces; track surface.name) {
+                            <button
+                                type="button"
+                                [title]="surface.name"
+                                (click)="updateColors($event, 'surface', surface)"
+                                class="w-6 h-6 cursor-pointer hover:shadow-lg rounded duration-150 flex items-center justify-center"
+                                [style]="{
+                                    'background-color': surface?.palette?.['500']
+                                }"
+                            >
+                                <i *ngIf="selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : darkTheme() ? surface.name === 'darkblue' : surface.name === 'gray'" class="pi pi-check text-white"></i>
+                            </button>
+                        }
+                    </div>
+                </div>
+                <div>
+                    <div class="flex flex-col gap-2">
+                        <span class="text-lg text-muted-color font-semibold">Presets</span>
+                        <p-selectbutton [options]="presetKeys" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false"></p-selectbutton>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex flex-col gap-2">
+                        <span class="text-lg text-muted-color font-semibold">Color Scheme</span>
+                        <p-selectbutton [ngModel]="darkTheme()" (ngModelChange)="toggleDarkMode()" [options]="themeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false"></p-selectbutton>
+                    </div>
+                </div>
+                <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
+                    <span class="text-lg text-muted-color font-semibold">Card Style</span>
+                    <p-selectbutton [ngModel]="cardStyle()" (ngModelChange)="onCardStyleChange($event)" [options]="cardStyleOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                </div>
+
+                <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
+                    <span class="text-lg text-muted-color font-semibold">Menu Theme</span>
+                    <p-selectbutton [ngModel]="menuTheme()" (ngModelChange)="onMenuThemeChange($event)" [options]="menuThemeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                </div>
+
+                <div *ngIf="!simple && location === 'app'">
+                    <div class="flex flex-col gap-2">
+                        <span class="text-lg text-muted-color font-semibold">Menu Type</span>
+                        <div class="flex flex-wrap flex-col gap-3">
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="static" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('static')" inputId="static"></p-radiobutton>
+                                    <label for="static">Static</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="rail" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('rail')" inputId="rail"></p-radiobutton>
+                                    <label for="rail">Rail</label>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="overlay" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('overlay')" inputId="overlay"></p-radiobutton>
+                                    <label for="overlay">Overlay</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="slim" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('slim')" inputId="slim"></p-radiobutton>
+                                    <label for="slim">Slim</label>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="compact" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('compact')" inputId="compact"></p-radiobutton>
+                                    <label for="compact">Compact</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="reveal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('reveal')" inputId="reveal"></p-radiobutton>
+                                    <label for="reveal">Reveal</label>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="drawer" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('drawer')" inputId="drawer"></p-radiobutton>
+                                    <label for="drawer">Drawer</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="horizontal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('horizontal')" inputId="horizontal"></p-radiobutton>
+                                    <label for="horizontal">Horizontal</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </p-drawer>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i4.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i5$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppConfigurator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-configurator',
+                    imports: [CommonModule, FormsModule, SelectButtonModule, DrawerModule, ToggleSwitchModule, RadioButtonModule],
+                    template: `
+        <p-drawer [(visible)]="configSidebarVisible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-80" header="Settings" appendTo="body">
+            <div class="flex flex-col gap-6">
+                <div>
+                    <span class="text-lg text-muted-color font-semibold">Primary</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (primaryColor of primaryColors(); track primaryColor.name) {
+                            <button
+                                type="button"
+                                [title]="primaryColor.name"
+                                (click)="updateColors($event, 'primary', primaryColor)"
+                                class="w-6 h-6 cursor-pointer hover:shadow-lg rounded duration-150 flex items-center justify-center"
+                                [style]="{
+                                    'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                                }"
+                            >
+                                <i *ngIf="primaryColor.name === selectedPrimaryColor()" class="pi pi-check text-white"></i>
+                            </button>
+                        }
+                    </div>
+                </div>
+
+                <div>
+                    <span class="text-lg text-muted-color font-semibold">Surface</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (surface of surfaces; track surface.name) {
+                            <button
+                                type="button"
+                                [title]="surface.name"
+                                (click)="updateColors($event, 'surface', surface)"
+                                class="w-6 h-6 cursor-pointer hover:shadow-lg rounded duration-150 flex items-center justify-center"
+                                [style]="{
+                                    'background-color': surface?.palette?.['500']
+                                }"
+                            >
+                                <i *ngIf="selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : darkTheme() ? surface.name === 'darkblue' : surface.name === 'gray'" class="pi pi-check text-white"></i>
+                            </button>
+                        }
+                    </div>
+                </div>
+                <div>
+                    <div class="flex flex-col gap-2">
+                        <span class="text-lg text-muted-color font-semibold">Presets</span>
+                        <p-selectbutton [options]="presetKeys" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false"></p-selectbutton>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex flex-col gap-2">
+                        <span class="text-lg text-muted-color font-semibold">Color Scheme</span>
+                        <p-selectbutton [ngModel]="darkTheme()" (ngModelChange)="toggleDarkMode()" [options]="themeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false"></p-selectbutton>
+                    </div>
+                </div>
+                <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
+                    <span class="text-lg text-muted-color font-semibold">Card Style</span>
+                    <p-selectbutton [ngModel]="cardStyle()" (ngModelChange)="onCardStyleChange($event)" [options]="cardStyleOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                </div>
+
+                <div *ngIf="!simple && location === 'app'" class="flex flex-col gap-2">
+                    <span class="text-lg text-muted-color font-semibold">Menu Theme</span>
+                    <p-selectbutton [ngModel]="menuTheme()" (ngModelChange)="onMenuThemeChange($event)" [options]="menuThemeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false" [allowEmpty]="false" />
+                </div>
+
+                <div *ngIf="!simple && location === 'app'">
+                    <div class="flex flex-col gap-2">
+                        <span class="text-lg text-muted-color font-semibold">Menu Type</span>
+                        <div class="flex flex-wrap flex-col gap-3">
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="static" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('static')" inputId="static"></p-radiobutton>
+                                    <label for="static">Static</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="rail" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('rail')" inputId="rail"></p-radiobutton>
+                                    <label for="rail">Rail</label>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="overlay" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('overlay')" inputId="overlay"></p-radiobutton>
+                                    <label for="overlay">Overlay</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="slim" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('slim')" inputId="slim"></p-radiobutton>
+                                    <label for="slim">Slim</label>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="compact" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('compact')" inputId="compact"></p-radiobutton>
+                                    <label for="compact">Compact</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="reveal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('reveal')" inputId="reveal"></p-radiobutton>
+                                    <label for="reveal">Reveal</label>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="drawer" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('drawer')" inputId="drawer"></p-radiobutton>
+                                    <label for="drawer">Drawer</label>
+                                </div>
+                                <div class="flex items-center gap-2 w-6/12">
+                                    <p-radiobutton name="menuMode" value="horizontal" [ngModel]="menuMode()" (ngModelChange)="setMenuMode('horizontal')" inputId="horizontal"></p-radiobutton>
+                                    <label for="horizontal">Horizontal</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </p-drawer>
+    `
+                }]
+        }], propDecorators: { simple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], location: [{
+                type: Input
+            }], cardStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardStyle", required: false }] }, { type: i0.Output, args: ["cardStyleChange"] }] } });
+
+class AppFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppFooter, isStandalone: true, selector: "[app-footer]", ngImport: i0, template: `
+        <footer class="layout-footer">
+            <span class="footer-copyright">&#169; UNOPS 2026</span>
+        </footer>
+    `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-footer]',
+                    template: `
+        <footer class="layout-footer">
+            <span class="footer-copyright">&#169; UNOPS 2026</span>
+        </footer>
+    `
+                }]
+        }] });
+
+class AppRightMenu {
+    layoutService = inject(LayoutService);
+    cards = [
+        { label: '*****24', value: { id: 1, name: '*****24', code: 'A1' } },
+        { label: '*****75', value: { id: 2, name: '*****75', code: 'A2' } }
+    ];
+    selectedCard;
+    amountValue = '';
+    get rightMenuVisible() {
+        return this.layoutService.layoutState().rightMenuVisible;
+    }
+    set rightMenuVisible(_val) {
+        this.layoutService.layoutState.update((prev) => ({ ...prev, rightMenuVisible: _val }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppRightMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppRightMenu, isStandalone: true, selector: "[app-rightmenu]", ngImport: i0, template: ` <p-drawer header="Menu" [(visible)]="rightMenuVisible" position="right" styleClass="layout-rightmenu w-full! sm:w-xl!">
+        <div>
+            <h2 class="title-h7 text-left">Activity</h2>
+            <div class="flex flex-col mt-7">
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-dollar text-blue-600 text-2xl!"></i>
+                        </span>
+                        <span class="min-h-14 w-px bg-(--surface-border)"></span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">New Sale</h5>
+                        <p class="md:label-small mt-1">Richard Jones has purchased a blue t-shirt for <b class="body-small text-surface-950 dark:text-surface-0">$79</b></p>
+                    </div>
+                </div>
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-download text-orange-600 text-2xl!"></i>
+                        </span>
+                        <span class="min-h-14 w-px bg-(--surface-border)"></span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">Withdrawal Initiated</h5>
+                        <p class="md:label-small mt-1">Your request for withdrawal of <b class="body-small text-surface-950 dark:text-surface-0">$2500</b> has been initiated.</p>
+                    </div>
+                </div>
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-question-circle text-violet-600 text-2xl!"></i>
+                        </span>
+                        <span class="min-h-14 w-px bg-(--surface-border)"></span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">Question Received</h5>
+                        <p class="md:label-small mt-1">Jane Davis has posted a <b class="body-small text-surface-950 dark:text-surface-0">new question</b> about your product.</p>
+                    </div>
+                </div>
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-comment text-blue-600 text-2xl!"></i>
+                        </span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">Comment Received</h5>
+                        <p class="md:label-small mt-1">Claire Smith has upvoted your store along with a <b class="body-small text-surface-950 dark:text-surface-0">comment.</b></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p-divider class="my-10!" />
+        <div>
+            <h2 class="title-h7 text-left">Quick Withdraw</h2>
+            <div class="flex flex-col gap-3.5 mt-7 mb-6">
+                <input pInputText type="text" [(ngModel)]="amountValue" placeholder="Amount" />
+                <p-select [(ngModel)]="selectedCard" [options]="cards" optionLabel="label" placeholder="Select a Card" class="w-full" />
+            </div>
+            <button pButton label="Confirm" severity="success" class="w-full!"></button>
+        </div>
+        <p-divider class="my-10!" />
+        <div>
+            <h2 class="title-h7 text-left">Shipment Tracking</h2>
+            <p class="body-small mt-1 text-left">Track your ongoing shipments to customers.</p>
+            <img class="w-full h-full max-h-60 object-cover border border-surface rounded-2xl mt-4" src="layout/images/sidebar-right/staticmap.png" alt="unops-ng_ux" />
+        </div>
+    </p-drawer>`, isInline: true, dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i4.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.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"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppRightMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-rightmenu]',
+                    imports: [DrawerModule, DividerModule, SelectModule, InputTextModule, FormsModule, ButtonModule],
+                    template: ` <p-drawer header="Menu" [(visible)]="rightMenuVisible" position="right" styleClass="layout-rightmenu w-full! sm:w-xl!">
+        <div>
+            <h2 class="title-h7 text-left">Activity</h2>
+            <div class="flex flex-col mt-7">
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-dollar text-blue-600 text-2xl!"></i>
+                        </span>
+                        <span class="min-h-14 w-px bg-(--surface-border)"></span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">New Sale</h5>
+                        <p class="md:label-small mt-1">Richard Jones has purchased a blue t-shirt for <b class="body-small text-surface-950 dark:text-surface-0">$79</b></p>
+                    </div>
+                </div>
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-download text-orange-600 text-2xl!"></i>
+                        </span>
+                        <span class="min-h-14 w-px bg-(--surface-border)"></span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">Withdrawal Initiated</h5>
+                        <p class="md:label-small mt-1">Your request for withdrawal of <b class="body-small text-surface-950 dark:text-surface-0">$2500</b> has been initiated.</p>
+                    </div>
+                </div>
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-question-circle text-violet-600 text-2xl!"></i>
+                        </span>
+                        <span class="min-h-14 w-px bg-(--surface-border)"></span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">Question Received</h5>
+                        <p class="md:label-small mt-1">Jane Davis has posted a <b class="body-small text-surface-950 dark:text-surface-0">new question</b> about your product.</p>
+                    </div>
+                </div>
+                <div class="flex gap-6">
+                    <div class="flex flex-col items-center">
+                        <span class="w-14 h-14 flex items-center justify-center border border-surface rounded-xl shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05);]">
+                            <i class="pi pi-comment text-blue-600 text-2xl!"></i>
+                        </span>
+                    </div>
+                    <div class="mt-2">
+                        <h5 class="label-large">Comment Received</h5>
+                        <p class="md:label-small mt-1">Claire Smith has upvoted your store along with a <b class="body-small text-surface-950 dark:text-surface-0">comment.</b></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p-divider class="my-10!" />
+        <div>
+            <h2 class="title-h7 text-left">Quick Withdraw</h2>
+            <div class="flex flex-col gap-3.5 mt-7 mb-6">
+                <input pInputText type="text" [(ngModel)]="amountValue" placeholder="Amount" />
+                <p-select [(ngModel)]="selectedCard" [options]="cards" optionLabel="label" placeholder="Select a Card" class="w-full" />
+            </div>
+            <button pButton label="Confirm" severity="success" class="w-full!"></button>
+        </div>
+        <p-divider class="my-10!" />
+        <div>
+            <h2 class="title-h7 text-left">Shipment Tracking</h2>
+            <p class="body-small mt-1 text-left">Track your ongoing shipments to customers.</p>
+            <img class="w-full h-full max-h-60 object-cover border border-surface rounded-2xl mt-4" src="layout/images/sidebar-right/staticmap.png" alt="unops-ng_ux" />
+        </div>
+    </p-drawer>`
+                }]
+        }] });
+
+class AppSearch {
+    layoutService = inject(LayoutService);
+    toggleSearchBar() {
+        this.layoutService.layoutState.update((value) => ({ ...value, searchBarActive: !value.searchBarActive }));
+    }
+    get searchBarActive() {
+        return this.layoutService.layoutState().searchBarActive;
+    }
+    set searchBarActive(_val) {
+        this.layoutService.layoutState.update((prev) => ({ ...prev, searchBarActive: _val }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppSearch, isStandalone: true, selector: "[app-search]", ngImport: i0, template: ` <p-dialog [(visible)]="searchBarActive" [breakpoints]="{ '992px': '75vw', '576px': '90vw' }" modal dismissableMask styleClass="w-1/2 search-container">
+        <ng-template #headless>
+            <div class="w-full">
+                <i class="pi pi-search"></i>
+                <input pInputText type="text" [pAutoFocus]="true" class="p-inputtext search-input" placeholder="Search" (keydown.enter)="toggleSearchBar()" />
+            </div>
+        </ng-template>
+    </p-dialog>`, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3$2.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSearch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-search]',
+                    imports: [DialogModule, InputTextModule, AutoFocusModule],
+                    template: ` <p-dialog [(visible)]="searchBarActive" [breakpoints]="{ '992px': '75vw', '576px': '90vw' }" modal dismissableMask styleClass="w-1/2 search-container">
+        <ng-template #headless>
+            <div class="w-full">
+                <i class="pi pi-search"></i>
+                <input pInputText type="text" [pAutoFocus]="true" class="p-inputtext search-input" placeholder="Search" (keydown.enter)="toggleSearchBar()" />
+            </div>
+        </ng-template>
+    </p-dialog>`
+                }]
+        }] });
+
+class AppMenuitem {
+    layoutService = inject(LayoutService);
+    router = inject(Router);
+    hoverExpandTimer = null;
+    item = input(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
+    root = input(true, ...(ngDevMode ? [{ debugName: "root" }] : []));
+    parentPath = input(null, ...(ngDevMode ? [{ debugName: "parentPath" }] : []));
+    preventAutoActivate = input(false, ...(ngDevMode ? [{ debugName: "preventAutoActivate" }] : []));
+    isDisabled = computed(() => this.item()?.disabled ?? false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isSlim = computed(() => this.layoutService.layoutConfig().menuMode === 'slim', ...(ngDevMode ? [{ debugName: "isSlim" }] : []));
+    isHorizontal = computed(() => this.layoutService.layoutConfig().menuMode === 'horizontal', ...(ngDevMode ? [{ debugName: "isHorizontal" }] : []));
+    isCompact = computed(() => this.layoutService.layoutConfig().menuMode === 'compact', ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
+    isRailCollapsed = computed(() => this.layoutService.isRail() && !this.layoutService.layoutState().sidebarExpanded, ...(ngDevMode ? [{ debugName: "isRailCollapsed" }] : []));
+    isVisible = computed(() => this.item()?.visible !== false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    hasChildren = computed(() => !!this.item()?.items && (this.item()?.items?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+    hasCommand = computed(() => typeof this.item()?.command === 'function', ...(ngDevMode ? [{ debugName: "hasCommand" }] : []));
+    hasRouterLink = computed(() => !!this.item()?.routerLink, ...(ngDevMode ? [{ debugName: "hasRouterLink" }] : []));
+    fullPath = computed(() => {
+        const itemPath = this.item()?.path;
+        if (!itemPath)
+            return this.parentPath();
+        const parent = this.parentPath();
+        if (parent && !itemPath.startsWith(parent)) {
+            return parent + itemPath;
+        }
+        return itemPath;
+    }, ...(ngDevMode ? [{ debugName: "fullPath" }] : []));
+    menuHoverActive = computed(() => this.layoutService.layoutState().menuHoverActive, ...(ngDevMode ? [{ debugName: "menuHoverActive" }] : []));
+    isActive = computed(() => {
+        const activePath = this.layoutService.layoutState().activePath;
+        if (this.item()?.path) {
+            return activePath?.startsWith(this.fullPath() ?? '') ?? false;
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    isRouteWithin = computed(() => {
+        this.layoutService.currentUrl();
+        if (!this.root() || !this.hasChildren())
+            return false;
+        return this.hasMatchingChildRoute(this.item());
+    }, ...(ngDevMode ? [{ debugName: "isRouteWithin" }] : []));
+    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+    constructor() {
+        effect(() => {
+            this.updateActivePath();
+        });
+    }
+    defaultMatchOptions = {
+        paths: 'exact',
+        queryParams: 'ignored',
+        matrixParams: 'ignored',
+        fragment: 'ignored'
+    };
+    itemMatchOptions(item) {
+        return item?.routerLinkActiveOptions ?? this.defaultMatchOptions;
+    }
+    updateActivePath() {
+        if (this.layoutService.hasOverlaySubmenu() && this.layoutService.isDesktop()) {
+            return;
+        }
+        if (this.preventAutoActivate()) {
+            return;
+        }
+        const item = this.item();
+        const parentPath = this.parentPath();
+        if (item?.routerLink && !item?.items) {
+            const isRouteActive = this.router.isActive(item.routerLink[0], this.itemMatchOptions(item));
+            if (isRouteActive && parentPath) {
+                this.layoutService.layoutState.update((val) => ({
+                    ...val,
+                    activePath: parentPath
+                }));
+            }
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.initialized.set(true);
+        });
+    }
+    itemClick(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            return;
+        }
+        if (this.hasCommand()) {
+            this.item()?.command?.({ originalEvent: event, item: this.item() ?? undefined });
+        }
+        if (this.hasChildren()) {
+            if (this.isActive()) {
+                const deactivateHover = this.root() && this.layoutService.hasOverlaySubmenu() && this.layoutService.isDesktop();
+                this.layoutService.layoutState.update((val) => ({
+                    ...val,
+                    activePath: this.parentPath(),
+                    menuHoverActive: deactivateHover ? false : val.menuHoverActive
+                }));
+            }
+            else {
+                this.layoutService.layoutState.update((val) => ({
+                    ...val,
+                    activePath: this.fullPath(),
+                    menuHoverActive: true
+                }));
+            }
+        }
+        else {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                overlayMenuActive: false,
+                mobileMenuActive: false,
+                menuHoverActive: false
+            }));
+            if (this.layoutService.hasOverlaySubmenu() && this.layoutService.isDesktop()) {
+                this.layoutService.layoutState.update((val) => ({
+                    ...val,
+                    activePath: null
+                }));
+            }
+        }
+        if (this.layoutService.isDesktop() && this.layoutService.isRail() && !this.layoutService.layoutState().sidebarExpanded) {
+            this.layoutService.toggleSidebarPin();
+        }
+    }
+    onMouseEnter() {
+        if (this.layoutService.isDesktop() && this.root() && this.hasChildren() && this.menuHoverActive() && !this.isActive()) {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                activePath: this.fullPath(),
+                menuHoverActive: true
+            }));
+        }
+    }
+    onMouseLeave() { }
+    ngOnDestroy() {
+        this.clearHoverTimer();
+    }
+    scheduleRailExpand() {
+        this.clearHoverTimer();
+        this.hoverExpandTimer = setTimeout(() => {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                sidebarExpanded: true
+            }));
+        }, 500);
+    }
+    clearHoverTimer() {
+        if (this.hoverExpandTimer !== null) {
+            clearTimeout(this.hoverExpandTimer);
+            this.hoverExpandTimer = null;
+        }
+    }
+    hasMatchingChildRoute(item) {
+        if (!item)
+            return false;
+        if (item.routerLink) {
+            return this.router.isActive(item.routerLink[0], this.itemMatchOptions(item));
+        }
+        return item.items?.some((child) => this.hasMatchingChildRoute(child)) ?? false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, parentPath: { classPropertyName: "parentPath", publicName: "parentPath", isSignal: true, isRequired: false, transformFunction: null }, preventAutoActivate: { classPropertyName: "preventAutoActivate", publicName: "preventAutoActivate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "isActive()", "class.layout-root-menuitem": "root()", "class.route-active-within": "isRouteWithin()" } }, ngImport: i0, template: `
+        @if (root() && isVisible() && hasChildren()) {
+            <div class="layout-menuitem-root-text">{{ item()?.label }}</div>
+        }
+        @if ((!hasRouterLink() || hasChildren()) && isVisible()) {
+            <a
+                [attr.href]="item()?.url"
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                (mouseleave)="onMouseLeave()"
+                [ngClass]="item()?.class"
+                [attr.target]="item()?.target"
+                tabindex="0"
+                pRipple
+                [pTooltip]="item()?.label"
+                [tooltipDisabled]="!((isCompact() || isRailCollapsed()) && !isActive() && root())"
+            >
+                <i [ngClass]="item()?.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text label-small text-inherit">{{ item()?.label }}</span>
+                @if (hasChildren()) {
+                    <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+                }
+            </a>
+        }
+        @if (hasRouterLink() && !hasChildren() && isVisible()) {
+            <a
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                (mouseleave)="onMouseLeave()"
+                [ngClass]="item()?.class"
+                [routerLink]="item()?.routerLink"
+                routerLinkActive="active-route"
+                [routerLinkActiveOptions]="item()?.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
+                [fragment]="item()?.fragment"
+                [queryParamsHandling]="item()?.queryParamsHandling"
+                [preserveFragment]="item()?.preserveFragment"
+                [skipLocationChange]="item()?.skipLocationChange"
+                [replaceUrl]="item()?.replaceUrl"
+                [state]="item()?.state"
+                [queryParams]="item()?.queryParams"
+                [attr.target]="item()?.target"
+                tabindex="0"
+                [pTooltip]="item()?.label"
+                [tooltipDisabled]="!((isCompact() || isRailCollapsed()) && !isActive() && root())"
+            >
+                <i [ngClass]="item()?.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text label-small text-inherit">{{ item()?.label }}</span>
+                @if (hasChildren()) {
+                    <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+                }
+            </a>
+        }
+        @if (hasChildren() && isVisible()) {
+            <ul [animate.enter]="initialized() ? 'p-submenu-enter' : null" [animate.leave]="'p-submenu-leave'" [class.layout-root-submenulist]="root()">
+                @for (child of item()?.items; track child?.label) {
+                    <li app-menuitem [item]="child" [root]="false" [parentPath]="fullPath()" [preventAutoActivate]="preventAutoActivate() || !!item()?.preventAutoActivate" [class]="child?.['badgeClass']"></li>
+                }
+            </ul>
+        }
+    `, isInline: true, styles: [".p-submenu-enter{animation:p-animate-submenu-expand .15s cubic-bezier(.4,0,.2,1) forwards;overflow:hidden}.p-submenu-leave{animation:p-animate-submenu-collapse .15s cubic-bezier(.4,0,.2,1) forwards;overflow:hidden}@keyframes p-animate-submenu-expand{0%{max-height:0}to{max-height:1000px}}@keyframes p-animate-submenu-collapse{0%{max-height:1000px}to{max-height:0}}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "root", "parentPath", "preventAutoActivate"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppMenuitem, decorators: [{
+            type: Component,
+            args: [{ selector: '[app-menuitem]', imports: [CommonModule, RouterModule, TooltipModule, RippleModule], template: `
+        @if (root() && isVisible() && hasChildren()) {
+            <div class="layout-menuitem-root-text">{{ item()?.label }}</div>
+        }
+        @if ((!hasRouterLink() || hasChildren()) && isVisible()) {
+            <a
+                [attr.href]="item()?.url"
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                (mouseleave)="onMouseLeave()"
+                [ngClass]="item()?.class"
+                [attr.target]="item()?.target"
+                tabindex="0"
+                pRipple
+                [pTooltip]="item()?.label"
+                [tooltipDisabled]="!((isCompact() || isRailCollapsed()) && !isActive() && root())"
+            >
+                <i [ngClass]="item()?.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text label-small text-inherit">{{ item()?.label }}</span>
+                @if (hasChildren()) {
+                    <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+                }
+            </a>
+        }
+        @if (hasRouterLink() && !hasChildren() && isVisible()) {
+            <a
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                (mouseleave)="onMouseLeave()"
+                [ngClass]="item()?.class"
+                [routerLink]="item()?.routerLink"
+                routerLinkActive="active-route"
+                [routerLinkActiveOptions]="item()?.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
+                [fragment]="item()?.fragment"
+                [queryParamsHandling]="item()?.queryParamsHandling"
+                [preserveFragment]="item()?.preserveFragment"
+                [skipLocationChange]="item()?.skipLocationChange"
+                [replaceUrl]="item()?.replaceUrl"
+                [state]="item()?.state"
+                [queryParams]="item()?.queryParams"
+                [attr.target]="item()?.target"
+                tabindex="0"
+                [pTooltip]="item()?.label"
+                [tooltipDisabled]="!((isCompact() || isRailCollapsed()) && !isActive() && root())"
+            >
+                <i [ngClass]="item()?.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text label-small text-inherit">{{ item()?.label }}</span>
+                @if (hasChildren()) {
+                    <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+                }
+            </a>
+        }
+        @if (hasChildren() && isVisible()) {
+            <ul [animate.enter]="initialized() ? 'p-submenu-enter' : null" [animate.leave]="'p-submenu-leave'" [class.layout-root-submenulist]="root()">
+                @for (child of item()?.items; track child?.label) {
+                    <li app-menuitem [item]="child" [root]="false" [parentPath]="fullPath()" [preventAutoActivate]="preventAutoActivate() || !!item()?.preventAutoActivate" [class]="child?.['badgeClass']"></li>
+                }
+            </ul>
+        }
+    `, host: {
+                        '[class.active-menuitem]': 'isActive()',
+                        '[class.layout-root-menuitem]': 'root()',
+                        '[class.route-active-within]': 'isRouteWithin()'
+                    }, styles: [".p-submenu-enter{animation:p-animate-submenu-expand .15s cubic-bezier(.4,0,.2,1) forwards;overflow:hidden}.p-submenu-leave{animation:p-animate-submenu-collapse .15s cubic-bezier(.4,0,.2,1) forwards;overflow:hidden}@keyframes p-animate-submenu-expand{0%{max-height:0}to{max-height:1000px}}@keyframes p-animate-submenu-collapse{0%{max-height:1000px}to{max-height:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], parentPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentPath", required: false }] }], preventAutoActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventAutoActivate", required: false }] }] } });
+
+class AppMenu {
+    /** Injected menu tree from the host application. */
+    menuItems = inject(MENU_MODEL);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppMenu, isStandalone: true, selector: "[app-menu]", ngImport: i0, template: `<ul class="layout-menu">
+        @for (item of menuItems; track $index) {
+            @if (!item.separator) {
+                <li app-menuitem [item]="item" [root]="true"></li>
+            } @else {
+                <li class="menu-separator"></li>
+            }
+        }
+    </ul> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "root", "parentPath", "preventAutoActivate"] }, { kind: "ngmodule", type: RouterModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-menu]',
+                    imports: [CommonModule, AppMenuitem, RouterModule],
+                    template: `<ul class="layout-menu">
+        @for (item of menuItems; track $index) {
+            @if (!item.separator) {
+                <li app-menuitem [item]="item" [root]="true"></li>
+            } @else {
+                <li class="menu-separator"></li>
+            }
+        }
+    </ul> `
+                }]
+        }] });
+
+class AppTopbar {
+    layoutService = inject(LayoutService);
+    mobileLogoConfig = inject(TOPBAR_MOBILE_LOGO);
+    mobileLogo = computed(() => this.layoutService.isDarkTheme() ? this.mobileLogoConfig.dark : this.mobileLogoConfig.light, ...(ngDevMode ? [{ debugName: "mobileLogo" }] : []));
+    desktopLogo = computed(() => this.layoutService.isDarkTheme() ? this.mobileLogoConfig.dark : this.mobileLogoConfig.light, ...(ngDevMode ? [{ debugName: "desktopLogo" }] : []));
+    isDarkTheme = computed(() => this.layoutService.isDarkTheme(), ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    isSidebarPinned = computed(() => this.layoutService.isSidebarPinned(), ...(ngDevMode ? [{ debugName: "isSidebarPinned" }] : []));
+    searchActive = signal(false, ...(ngDevMode ? [{ debugName: "searchActive" }] : []));
+    profileMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "profileMenuOpen" }] : []));
+    shouldFocusSearch = false;
+    menuButton;
+    searchInput;
+    profileItem;
+    profilePanel;
+    notificationsBars = signal([
+        {
+            id: 'inbox',
+            label: 'Inbox',
+            badge: '2'
+        },
+        {
+            id: 'general',
+            label: 'General'
+        },
+        {
+            id: 'archived',
+            label: 'Archived'
+        }
+    ], ...(ngDevMode ? [{ debugName: "notificationsBars" }] : []));
+    notifications = signal([
+        {
+            id: 'inbox',
+            data: [
+                {
+                    image: 'demo/images/avatar/avatar-square-m-2.jpg',
+                    name: 'Michael Lee',
+                    description: 'You have a new message from the support team regarding your recent inquiry.',
+                    time: '1 hour ago',
+                    new: true
+                },
+                {
+                    image: 'demo/images/avatar/avatar-square-f-1.jpg',
+                    name: 'Alice Johnson',
+                    description: 'Your report has been successfully submitted and is under review.',
+                    time: '10 minutes ago',
+                    new: true
+                },
+                {
+                    image: 'demo/images/avatar/avatar-square-f-2.jpg',
+                    name: 'Emily Davis',
+                    description: 'The project deadline has been updated to September 30th. Please check the details.',
+                    time: 'Yesterday at 4:35 PM',
+                    new: false
+                }
+            ]
+        },
+        {
+            id: 'general',
+            data: [
+                {
+                    image: 'demo/images/avatar/avatar-square-f-1.jpg',
+                    name: 'Alice Johnson',
+                    description: 'Reminder: Your subscription is about to expire in 3 days. Renew now to avoid interruption.',
+                    time: '30 minutes ago',
+                    new: true
+                },
+                {
+                    image: 'demo/images/avatar/avatar-square-m-2.jpg',
+                    name: 'Michael Lee',
+                    description: 'The server maintenance has been completed successfully. No further downtime is expected.',
+                    time: 'Yesterday at 2:15 PM',
+                    new: false
+                }
+            ]
+        },
+        {
+            id: 'archived',
+            data: [
+                {
+                    image: 'demo/images/avatar/avatar-square-m-1.jpg',
+                    name: 'Lucas Brown',
+                    description: 'Your appointment with Dr. Anderson has been confirmed for October 12th at 10:00 AM.',
+                    time: '1 week ago',
+                    new: true
+                },
+                {
+                    image: 'demo/images/avatar/avatar-square-f-2.jpg',
+                    name: 'Emily Davis',
+                    description: 'The document you uploaded has been successfully archived for future reference.',
+                    time: '2 weeks ago',
+                    new: false
+                }
+            ]
+        }
+    ], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    languages = signal([
+        { code: 'en', label: 'English', flag: '🇬🇧' },
+        { code: 'fr', label: 'French', flag: '🇫🇷' },
+        { code: 'es', label: 'Spanish', flag: '🇪🇸' }
+    ], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    selectedLanguage = signal('en', ...(ngDevMode ? [{ debugName: "selectedLanguage" }] : []));
+    selectedNotificationBar = model(this.notificationsBars()[0].id ?? 'inbox', ...(ngDevMode ? [{ debugName: "selectedNotificationBar" }] : []));
+    selectedNotificationsBarData = computed(() => this.notifications().find((f) => f.id === this.selectedNotificationBar()).data, ...(ngDevMode ? [{ debugName: "selectedNotificationsBarData" }] : []));
+    onMenuButtonClick() {
+        this.layoutService.toggleMenu();
+    }
+    toggleSidebarPin() {
+        this.layoutService.toggleSidebarPin();
+    }
+    toggleDarkMode() {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            darkTheme: !state.darkTheme
+        }));
+    }
+    showRightMenu() {
+        this.layoutService.toggleRightMenu();
+    }
+    onConfigButtonClick() {
+        this.layoutService.toggleConfigSidebar();
+    }
+    selectLanguage(code) {
+        this.selectedLanguage.set(code);
+    }
+    toggleProfileMenu(event) {
+        event.stopPropagation();
+        this.profileMenuOpen.update((open) => !open);
+    }
+    onDocumentClick(event) {
+        if (!this.profileMenuOpen())
+            return;
+        const target = event.target;
+        const insideProfile = this.profileItem?.nativeElement?.contains(target);
+        if (!insideProfile) {
+            this.profileMenuOpen.set(false);
+        }
+    }
+    openSearch() {
+        this.searchActive.set(true);
+        this.shouldFocusSearch = true;
+    }
+    closeSearch() {
+        this.searchActive.set(false);
+    }
+    ngAfterViewChecked() {
+        if (this.shouldFocusSearch && this.searchInput) {
+            this.searchInput.nativeElement.focus();
+            this.shouldFocusSearch = false;
+        }
+    }
+    toggleSearchBar() {
+        this.layoutService.toggleSearchBar();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AppTopbar, isStandalone: true, selector: "[app-topbar]", inputs: { selectedNotificationBar: { classPropertyName: "selectedNotificationBar", publicName: "selectedNotificationBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedNotificationBar: "selectedNotificationBarChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "profileItem", first: true, predicate: ["profileItem"], descendants: true }, { propertyName: "profilePanel", first: true, predicate: ["profilePanel"], descendants: true }], ngImport: i0, template: `<div class="layout-topbar">
+        <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="onMenuButtonClick()">
+            <i class="pi pi-bars"></i>
+        </button>
+        <div class="topbar-left">
+            <button
+                type="button"
+                class="topbar-menu-toggle"
+                [class.active]="isSidebarPinned()"
+                [attr.aria-label]="isSidebarPinned() ? 'Collapse sidebar' : 'Expand sidebar'"
+                (click)="toggleSidebarPin()"
+            >
+                <i class="pi pi-bars"></i>
+            </button>
+            <a class="topbar-logo" [routerLink]="['/']">
+                <img [src]="desktopLogo()" [attr.alt]="mobileLogoConfig.alt" />
+            </a>
+            <span class="topbar-logo-separator"></span>
+            <div app-breadcrumb></div>
+            @if (searchActive()) {
+                <div class="flex items-center gap-2 ml-auto">
+                    <p-iconfield class="w-48 sm:w-80">
+                        <p-inputicon styleClass="pi pi-search" />
+                        <input #searchInput type="text" pInputText placeholder="Search..." aria-label="Search" class="w-full !py-2 !text-sm" (keydown.escape)="closeSearch()" />
+                    </p-iconfield>
+                    <button type="button" class="flex items-center justify-center w-8 h-8 rounded-md cursor-pointer hover:bg-emphasis transition-colors" aria-label="Close search" (click)="closeSearch()">
+                        <i class="pi pi-times text-sm"></i>
+                    </button>
+                </div>
+            }
+        </div>
+
+        <a class="mobile-logo" [routerLink]="['/landing']">
+            <img [src]="mobileLogo()" [attr.alt]="mobileLogoConfig.alt" />
+        </a>
+
+        <div class="topbar-right">
+            <ul class="topbar-menu">
+                <li class="right-sidebar-item" [class.hidden]="searchActive()">
+                    <a class="right-sidebar-button" aria-label="Open search" (click)="openSearch()">
+                        <i class="pi pi-search"></i>
+                    </a>
+                </li>
+                <li class="right-sidebar-item" [class.hidden]="searchActive()">
+                    <a
+                        class="right-sidebar-button"
+                        [attr.aria-label]="isDarkTheme() ? 'Switch to light mode' : 'Switch to dark mode'"
+                        (click)="toggleDarkMode()"
+                    >
+                        <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
+                    </a>
+                </li>
+                <li class="right-sidebar-item static sm:relative z-50">
+                    <a class="right-sidebar-button" aria-label="Notifications" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                        <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
+                        <i class="pi pi-bell"></i>
+                    </a>
+                    <div
+                        class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
+                    >
+                        <div class="p-4 flex items-center justify-between border-b border-surface">
+                            <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
+                            <button pRipple class="py-1 px-2 text-surface-950 dark:text-surface-0 label-x-small hover:bg-emphasis border border-surface rounded-lg shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05)] transition-all">Mark all as read</button>
+                        </div>
+                        <div class="flex items-center border-b border-surface">
+                            @for (item of notificationsBars(); track item.id; let i = $index) {
+                                <button
+                                    [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
+                                    class="px-3.5 py-2 inline-flex items-center border-b gap-2"
+                                    (click)="selectedNotificationBar.set(item.id)"
+                                >
+                                    <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
+                                    <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
+                                </button>
+                            }
+                        </div>
+                        <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
+                            @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
+                                <li>
+                                    <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
+                                        <p-overlay-badge value="" severity="danger" class="inline-flex">
+                                            <p-avatar size="large">
+                                                <img [src]="item.image" [alt]="item.name" class="rounded-lg" />
+                                            </p-avatar>
+                                        </p-overlay-badge>
+                                        <div class="flex items-center gap-3">
+                                            <div class="flex flex-col">
+                                                <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
+                                                <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
+                                                <span class="label-xsmall text-left">{{ item.time }}</span>
+                                            </div>
+                                            <p-badge *ngIf="item.new" value="" severity="success" />
+                                        </div>
+                                    </div>
+                                    <span *ngIf="i !== notifications().length - 1"></span>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                </li>
+                <li class="right-sidebar-item static sm:relative">
+                    <a class="right-sidebar-button relative z-50" aria-label="Change language" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="m5 8 6 6"/>
+                            <path d="m4 14 6-6 2-3"/>
+                            <path d="M2 5h12"/>
+                            <path d="M7 2h1"/>
+                            <path d="m22 22-5-10-5 10"/>
+                            <path d="M14 18h6"/>
+                        </svg>
+                    </a>
+                    <div
+                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
+                    >
+                        <ul class="flex flex-col gap-1">
+                            @for (lang of languages(); track lang.code) {
+                                <li>
+                                    <a
+                                        class="label-small dark:text-surface-400 flex gap-2.5 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                        [class.text-surface-950]="selectedLanguage() === lang.code"
+                                        [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                        [class.font-semibold]="selectedLanguage() === lang.code"
+                                        (click)="selectLanguage(lang.code)"
+                                    >
+                                        <span class="text-lg">{{ lang.flag }}</span>
+                                        <span>{{ lang.label }}</span>
+                                    </a>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                </li>
+                <li class="profile-item static sm:relative" #profileItem>
+                    <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleProfileMenu($event)">
+                        <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
+                    </a>
+                    <div
+                        #profilePanel
+                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-52 mt-2 right-4 sm:right-0 z-999 top-auto shadow-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
+                        [class.hidden]="!profileMenuOpen()"
+                        [class.animate-scalein]="profileMenuOpen()"
+                    >
+                        <ul class="flex flex-col gap-1">
+                            <div class="mobile-profile-actions">
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); openSearch()">
+                                        <i class="pi pi-search"></i>
+                                        <span>Search</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); toggleDarkMode()">
+                                        <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
+                                        <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer relative" (click)="profileMenuOpen.set(false)">
+                                        <i class="pi pi-bell"></i>
+                                        <span>Notifications</span>
+                                        <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
+                                    </a>
+                                </li>
+                                <li class="border-b border-surface pb-1 mb-1">
+                                    <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
+                                    @for (lang of languages(); track lang.code) {
+                                        <a
+                                            class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                            [class.text-surface-950]="selectedLanguage() === lang.code"
+                                            [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                            [class.font-semibold]="selectedLanguage() === lang.code"
+                                            (click)="profileMenuOpen.set(false); selectLanguage(lang.code)"
+                                        >
+                                            <span class="text-lg">{{ lang.flag }}</span>
+                                            <span>{{ lang.label }}</span>
+                                            @if (selectedLanguage() === lang.code) {
+                                                <i class="pi pi-check ml-auto text-xs"></i>
+                                            }
+                                        </a>
+                                    }
+                                </li>
+                            </div>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-user"></i>
+                                    <span>Profile</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-cog"></i>
+                                    <span>Settings</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-calendar"></i>
+                                    <span>Calendar</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-inbox"></i>
+                                    <span>Inbox</span>
+                                </a>
+                            </li>
+                            <li class="border-t border-surface mt-1 pt-1">
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-power-off"></i>
+                                    <span>Log out</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$4.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i5$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i6$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i8.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i9.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i10.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppTopbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-topbar]',
+                    imports: [RouterModule, CommonModule, StyleClassModule, AppBreadcrumb, InputTextModule, ButtonModule, IconFieldModule, InputIconModule, RippleModule, BadgeModule, OverlayBadgeModule, AvatarModule],
+                    template: `<div class="layout-topbar">
+        <button type="button" class="mobile-menu-button" aria-label="Toggle navigation menu" (click)="onMenuButtonClick()">
+            <i class="pi pi-bars"></i>
+        </button>
+        <div class="topbar-left">
+            <button
+                type="button"
+                class="topbar-menu-toggle"
+                [class.active]="isSidebarPinned()"
+                [attr.aria-label]="isSidebarPinned() ? 'Collapse sidebar' : 'Expand sidebar'"
+                (click)="toggleSidebarPin()"
+            >
+                <i class="pi pi-bars"></i>
+            </button>
+            <a class="topbar-logo" [routerLink]="['/']">
+                <img [src]="desktopLogo()" [attr.alt]="mobileLogoConfig.alt" />
+            </a>
+            <span class="topbar-logo-separator"></span>
+            <div app-breadcrumb></div>
+            @if (searchActive()) {
+                <div class="flex items-center gap-2 ml-auto">
+                    <p-iconfield class="w-48 sm:w-80">
+                        <p-inputicon styleClass="pi pi-search" />
+                        <input #searchInput type="text" pInputText placeholder="Search..." aria-label="Search" class="w-full !py-2 !text-sm" (keydown.escape)="closeSearch()" />
+                    </p-iconfield>
+                    <button type="button" class="flex items-center justify-center w-8 h-8 rounded-md cursor-pointer hover:bg-emphasis transition-colors" aria-label="Close search" (click)="closeSearch()">
+                        <i class="pi pi-times text-sm"></i>
+                    </button>
+                </div>
+            }
+        </div>
+
+        <a class="mobile-logo" [routerLink]="['/landing']">
+            <img [src]="mobileLogo()" [attr.alt]="mobileLogoConfig.alt" />
+        </a>
+
+        <div class="topbar-right">
+            <ul class="topbar-menu">
+                <li class="right-sidebar-item" [class.hidden]="searchActive()">
+                    <a class="right-sidebar-button" aria-label="Open search" (click)="openSearch()">
+                        <i class="pi pi-search"></i>
+                    </a>
+                </li>
+                <li class="right-sidebar-item" [class.hidden]="searchActive()">
+                    <a
+                        class="right-sidebar-button"
+                        [attr.aria-label]="isDarkTheme() ? 'Switch to light mode' : 'Switch to dark mode'"
+                        (click)="toggleDarkMode()"
+                    >
+                        <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
+                    </a>
+                </li>
+                <li class="right-sidebar-item static sm:relative z-50">
+                    <a class="right-sidebar-button" aria-label="Notifications" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                        <span class="w-2 h-2 rounded-full bg-red-500 absolute top-2 right-2.5"></span>
+                        <i class="pi pi-bell"></i>
+                    </a>
+                    <div
+                        class="list-none m-0 rounded-2xl border border-surface fixed sm:absolute bg-surface-0 dark:bg-surface-900 overflow-hidden hidden origin-top w-[calc(100vw-2rem)] sm:w-88 mt-2 z-50 top-auto left-4 sm:left-auto sm:right-0 shadow-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
+                    >
+                        <div class="p-4 flex items-center justify-between border-b border-surface">
+                            <span class="label-small text-surface-950 dark:text-surface-0">Notifications</span>
+                            <button pRipple class="py-1 px-2 text-surface-950 dark:text-surface-0 label-x-small hover:bg-emphasis border border-surface rounded-lg shadow-[0px_1px_2px_0px_rgba(18,18,23,0.05)] transition-all">Mark all as read</button>
+                        </div>
+                        <div class="flex items-center border-b border-surface">
+                            @for (item of notificationsBars(); track item.id; let i = $index) {
+                                <button
+                                    [ngClass]="{ 'border-surface-950 dark:border-surface-0': selectedNotificationBar() === item.id, 'border-transparent': selectedNotificationBar() !== item.id }"
+                                    class="px-3.5 py-2 inline-flex items-center border-b gap-2"
+                                    (click)="selectedNotificationBar.set(item.id)"
+                                >
+                                    <span [ngClass]="{ 'text-surface-950 dark:text-surface-0': selectedNotificationBar() === item.id }" class="label-small">{{ item.label }}</span>
+                                    <p-badge *ngIf="item?.badge" [value]="item.badge" severity="success" size="small" class="rounded-md!" />
+                                </button>
+                            }
+                        </div>
+                        <ul class="flex flex-col divide-y divide-(--surface-border) max-h-80 overflow-auto">
+                            @for (item of selectedNotificationsBarData(); track item.name; let i = $index) {
+                                <li>
+                                    <div class="flex items-center gap-3 px-4 sm:px-6 py-3.5 cursor-pointer hover:bg-emphasis transition-all">
+                                        <p-overlay-badge value="" severity="danger" class="inline-flex">
+                                            <p-avatar size="large">
+                                                <img [src]="item.image" [alt]="item.name" class="rounded-lg" />
+                                            </p-avatar>
+                                        </p-overlay-badge>
+                                        <div class="flex items-center gap-3">
+                                            <div class="flex flex-col">
+                                                <span class="label-small text-left text-surface-950 dark:text-surface-0">{{ item.name }}</span>
+                                                <span class="label-xsmall text-left line-clamp-1">{{ item.description }}</span>
+                                                <span class="label-xsmall text-left">{{ item.time }}</span>
+                                            </div>
+                                            <p-badge *ngIf="item.new" value="" severity="success" />
+                                        </div>
+                                    </div>
+                                    <span *ngIf="i !== notifications().length - 1"></span>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                </li>
+                <li class="right-sidebar-item static sm:relative">
+                    <a class="right-sidebar-button relative z-50" aria-label="Change language" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveActiveClass="animate-fadeout" leaveToClass="hidden" [hideOnOutsideClick]="true">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="m5 8 6 6"/>
+                            <path d="m4 14 6-6 2-3"/>
+                            <path d="M2 5h12"/>
+                            <path d="M7 2h1"/>
+                            <path d="m22 22-5-10-5 10"/>
+                            <path d="M14 18h6"/>
+                        </svg>
+                    </a>
+                    <div
+                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-44 mt-2 right-4 sm:right-0 z-999 top-auto shadow-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
+                    >
+                        <ul class="flex flex-col gap-1">
+                            @for (lang of languages(); track lang.code) {
+                                <li>
+                                    <a
+                                        class="label-small dark:text-surface-400 flex gap-2.5 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                        [class.text-surface-950]="selectedLanguage() === lang.code"
+                                        [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                        [class.font-semibold]="selectedLanguage() === lang.code"
+                                        (click)="selectLanguage(lang.code)"
+                                    >
+                                        <span class="text-lg">{{ lang.flag }}</span>
+                                        <span>{{ lang.label }}</span>
+                                    </a>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                </li>
+                <li class="profile-item static sm:relative" #profileItem>
+                    <a class="right-sidebar-button relative z-50" aria-label="User profile menu" (click)="toggleProfileMenu($event)">
+                        <p-avatar icon="pi pi-user" styleClass="w-10! h-10!" />
+                    </a>
+                    <div
+                        #profilePanel
+                        class="list-none p-2 m-0 rounded-2xl border border-surface overflow-hidden fixed sm:absolute bg-surface-0 dark:bg-surface-900 origin-top w-52 mt-2 right-4 sm:right-0 z-999 top-auto shadow-[0px_56px_16px_0px_rgba(0,0,0,0.00),0px_36px_14px_0px_rgba(0,0,0,0.01),0px_20px_12px_0px_rgba(0,0,0,0.02),0px_9px_9px_0px_rgba(0,0,0,0.03),0px_2px_5px_0px_rgba(0,0,0,0.04)]"
+                        [class.hidden]="!profileMenuOpen()"
+                        [class.animate-scalein]="profileMenuOpen()"
+                    >
+                        <ul class="flex flex-col gap-1">
+                            <div class="mobile-profile-actions">
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); openSearch()">
+                                        <i class="pi pi-search"></i>
+                                        <span>Search</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false); toggleDarkMode()">
+                                        <i [class]="isDarkTheme() ? 'pi pi-sun' : 'pi pi-moon'"></i>
+                                        <span>{{ isDarkTheme() ? 'Light Mode' : 'Dark Mode' }}</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer relative" (click)="profileMenuOpen.set(false)">
+                                        <i class="pi pi-bell"></i>
+                                        <span>Notifications</span>
+                                        <span class="w-2 h-2 rounded-full bg-red-500 ml-auto"></span>
+                                    </a>
+                                </li>
+                                <li class="border-b border-surface pb-1 mb-1">
+                                    <span class="label-xsmall px-2.5 py-1 text-surface-400">Language</span>
+                                    @for (lang of languages(); track lang.code) {
+                                        <a
+                                            class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer"
+                                            [class.text-surface-950]="selectedLanguage() === lang.code"
+                                            [class.dark:text-surface-0]="selectedLanguage() === lang.code"
+                                            [class.font-semibold]="selectedLanguage() === lang.code"
+                                            (click)="profileMenuOpen.set(false); selectLanguage(lang.code)"
+                                        >
+                                            <span class="text-lg">{{ lang.flag }}</span>
+                                            <span>{{ lang.label }}</span>
+                                            @if (selectedLanguage() === lang.code) {
+                                                <i class="pi pi-check ml-auto text-xs"></i>
+                                            }
+                                        </a>
+                                    }
+                                </li>
+                            </div>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-user"></i>
+                                    <span>Profile</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-cog"></i>
+                                    <span>Settings</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-calendar"></i>
+                                    <span>Calendar</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-inbox"></i>
+                                    <span>Inbox</span>
+                                </a>
+                            </li>
+                            <li class="border-t border-surface mt-1 pt-1">
+                                <a class="label-small dark:text-surface-400 flex gap-2 py-2 px-2.5 rounded-lg items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer" (click)="profileMenuOpen.set(false)">
+                                    <i class="pi pi-power-off"></i>
+                                    <span>Log out</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>`
+                }]
+        }], propDecorators: { menuButton: [{
+                type: ViewChild,
+                args: ['menubutton']
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], profileItem: [{
+                type: ViewChild,
+                args: ['profileItem']
+            }], profilePanel: [{
+                type: ViewChild,
+                args: ['profilePanel']
+            }], selectedNotificationBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNotificationBar", required: false }] }, { type: i0.Output, args: ["selectedNotificationBarChange"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+const BREAKPOINT = 992;
+class AppSidebar {
+    layoutService = inject(LayoutService);
+    router = inject(Router);
+    el = inject(ElementRef);
+    menuContainer;
+    sidebarRef;
+    timeout = null;
+    observer = null;
+    outsideClickListener = null;
+    mediaQuery = window.matchMedia(`(min-width: ${BREAKPOINT}px)`);
+    destroy$ = new Subject();
+    isHorizontal = computed(() => this.layoutService.isHorizontal(), ...(ngDevMode ? [{ debugName: "isHorizontal" }] : []));
+    constructor() {
+        effect(() => {
+            const hasOpenOverlay = this.layoutService.hasOpenOverlay();
+            const mobileMenuActive = this.layoutService.layoutState().mobileMenuActive;
+            if (this.layoutService.isDesktop()) {
+                if (hasOpenOverlay) {
+                    this.bindOutsideClickListener();
+                }
+                else {
+                    this.unbindOutsideClickListener();
+                }
+            }
+            else {
+                if (mobileMenuActive) {
+                    this.bindOutsideClickListener();
+                }
+                else {
+                    this.unbindOutsideClickListener();
+                }
+            }
+        });
+        effect(() => {
+            const hasOpenOverlaySubmenu = this.layoutService.hasOpenOverlaySubmenu();
+            if (this.layoutService.isDesktop()) {
+                if (hasOpenOverlaySubmenu) {
+                    setTimeout(() => this.setupIntersectionObserver());
+                }
+                else {
+                    this.unbindObserver();
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
+            .subscribe((event) => {
+            const navEvent = event;
+            this.onRouteChange(navEvent.urlAfterRedirects);
+        });
+        this.onRouteChange(this.router.url);
+        this.mediaQuery.addEventListener('change', this.screenChangeListener);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.unbindOutsideClickListener();
+        this.unbindObserver();
+        this.mediaQuery.removeEventListener('change', this.screenChangeListener);
+    }
+    onRouteChange(path) {
+        this.layoutService.currentUrl.set(path);
+        let newActivePath;
+        if (this.layoutService.hasOverlaySubmenu() && this.layoutService.isDesktop()) {
+            newActivePath = null;
+        }
+        else {
+            newActivePath = path;
+        }
+        this.layoutService.layoutState.update((val) => ({
+            ...val,
+            activePath: newActivePath,
+            overlayMenuActive: false,
+            staticMenuMobileActive: false,
+            menuHoverActive: false
+        }));
+    }
+    screenChangeListener = () => {
+        if (this.layoutService.hasOverlaySubmenu()) {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                activePath: this.layoutService.isDesktop() ? null : this.router.url,
+                menuHoverActive: false
+            }));
+            this.unbindOutsideClickListener();
+            this.unbindObserver();
+        }
+    };
+    bindOutsideClickListener() {
+        if (!this.outsideClickListener) {
+            this.outsideClickListener = (event) => {
+                if (this.isOutsideClicked(event)) {
+                    if (this.layoutService.isDesktop()) {
+                        this.layoutService.layoutState.update((val) => ({
+                            ...val,
+                            overlayMenuActive: false
+                        }));
+                        if (this.layoutService.hasOverlaySubmenu()) {
+                            this.layoutService.layoutState.update((val) => ({
+                                ...val,
+                                activePath: null,
+                                menuHoverActive: false
+                            }));
+                        }
+                    }
+                    else {
+                        this.layoutService.layoutState.update((val) => ({
+                            ...val,
+                            mobileMenuActive: false
+                        }));
+                    }
+                }
+            };
+            document.addEventListener('click', this.outsideClickListener);
+        }
+    }
+    unbindOutsideClickListener() {
+        if (this.outsideClickListener) {
+            document.removeEventListener('click', this.outsideClickListener);
+            this.outsideClickListener = null;
+        }
+    }
+    isOutsideClicked(event) {
+        const topbarButtonEl = document.querySelector('.mobile-menu-button');
+        const sidebarEl = this.el.nativeElement;
+        return !(sidebarEl?.isSameNode(event.target) ||
+            sidebarEl?.contains(event.target) ||
+            topbarButtonEl?.isSameNode(event.target) ||
+            topbarButtonEl?.contains(event.target));
+    }
+    onMouseEnter() { }
+    onMouseLeave() {
+        if (!this.layoutService.isDesktop() || !this.layoutService.isRail())
+            return;
+        if (this.layoutService.layoutState().sidebarPinned)
+            return;
+        if (this.timeout)
+            clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                sidebarExpanded: false
+            }));
+        }, 300);
+    }
+    onAnchorToggle() {
+        this.layoutService.layoutState.update((state) => ({
+            ...state,
+            anchored: !state.anchored
+        }));
+    }
+    onMenuScroll() {
+        if (this.menuContainer?.nativeElement) {
+            if (this.layoutService.isHorizontal()) {
+                const scrollLeft = this.menuContainer.nativeElement.scrollLeft;
+                this.menuContainer.nativeElement.style.setProperty('--menu-scroll-x', `-${scrollLeft}px`);
+            }
+            else {
+                const scrollTop = this.menuContainer.nativeElement.scrollTop;
+                this.menuContainer.nativeElement.style.setProperty('--menu-scroll-y', `-${scrollTop}px`);
+            }
+        }
+        if (this.layoutService.hasOverlaySubmenu() && this.layoutService.isDesktop()) {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                activePath: null,
+                menuHoverActive: false
+            }));
+        }
+    }
+    setupIntersectionObserver() {
+        if (!this.menuContainer?.nativeElement)
+            return;
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        const activeMenuItem = this.menuContainer.nativeElement.querySelector('.layout-root-menuitem.active-menuitem');
+        if (!activeMenuItem)
+            return;
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (this.layoutService.isDesktop() &&
+                    !entry.isIntersecting &&
+                    this.layoutService.hasOverlaySubmenu() &&
+                    this.layoutService.layoutState().activePath) {
+                    this.layoutService.layoutState.update((val) => ({
+                        ...val,
+                        activePath: null
+                    }));
+                }
+            });
+        }, {
+            root: this.menuContainer.nativeElement,
+            threshold: 0
+        });
+        this.observer.observe(activeMenuItem);
+    }
+    unbindObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppSidebar, isStandalone: true, selector: "[app-sidebar]", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }, { propertyName: "sidebarRef", first: true, predicate: ["sidebarRef"], descendants: true }], ngImport: i0, template: `<nav class="layout-sidebar" aria-label="Main navigation" (mouseleave)="onMouseLeave()">
+        <div #menuContainer class="layout-menu-container" (scroll)="onMenuScroll()">
+            <div app-menu></div>
+        </div>
+        <div app-topbar *ngIf="isHorizontal()"></div>
+    </nav>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AppMenu, selector: "[app-menu]" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: AppTopbar, selector: "[app-topbar]", inputs: ["selectedNotificationBar"], outputs: ["selectedNotificationBarChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-sidebar]',
+                    imports: [CommonModule, AppMenu, RouterModule, AppTopbar],
+                    template: `<nav class="layout-sidebar" aria-label="Main navigation" (mouseleave)="onMouseLeave()">
+        <div #menuContainer class="layout-menu-container" (scroll)="onMenuScroll()">
+            <div app-menu></div>
+        </div>
+        <div app-topbar *ngIf="isHorizontal()"></div>
+    </nav>`
+                }]
+        }], ctorParameters: () => [], propDecorators: { menuContainer: [{
+                type: ViewChild,
+                args: ['menuContainer']
+            }], sidebarRef: [{
+                type: ViewChild,
+                args: ['sidebarRef']
+            }] } });
+
+class AppLayout {
+    layoutService = inject(LayoutService);
+    constructor() {
+        effect(() => {
+            const state = this.layoutService.layoutState();
+            if (state.mobileMenuActive) {
+                document.body.classList.add('blocked-scroll');
+            }
+            else {
+                document.body.classList.remove('blocked-scroll');
+            }
+        });
+    }
+    containerClass = computed(() => {
+        const layoutConfig = this.layoutService.layoutConfig();
+        const layoutState = this.layoutService.layoutState();
+        return {
+            'layout-overlay': layoutConfig.menuMode === 'overlay',
+            'layout-static': layoutConfig.menuMode === 'static',
+            'layout-slim': layoutConfig.menuMode === 'slim',
+            'layout-horizontal': layoutConfig.menuMode === 'horizontal',
+            'layout-compact': layoutConfig.menuMode === 'compact',
+            'layout-reveal': layoutConfig.menuMode === 'reveal',
+            'layout-drawer': layoutConfig.menuMode === 'drawer',
+            'layout-overlay-active': layoutState.overlayMenuActive,
+            'layout-mobile-active': layoutState.mobileMenuActive,
+            'layout-sidebar-expanded': layoutState.sidebarExpanded,
+            'layout-sidebar-rail': !layoutState.sidebarPinned && layoutConfig.menuMode === 'static',
+            'layout-sidebar-anchored': layoutState.anchored,
+            [`layout-card-${layoutConfig.cardStyle}`]: true,
+            [`layout-sidebar-${layoutConfig.menuTheme}`]: true
+        };
+    }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `<div class="layout-wrapper" [ngClass]="containerClass()">
+        <div app-topbar></div>
+        <div class="layout-body">
+            <div app-sidebar></div>
+            <div class="layout-content-wrapper">
+                <div class="layout-content-wrapper-inside">
+                    <main class="layout-content">
+                        <div app-breadcrumb></div>
+                        <router-outlet></router-outlet>
+                    </main>
+                    <div app-footer></div>
+                </div>
+            </div>
+        </div>
+        <app-configurator />
+        <div app-search></div>
+        <div app-rightmenu></div>
+        <div class="layout-mask"></div>
+    </div> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "[app-topbar]", inputs: ["selectedNotificationBar"], outputs: ["selectedNotificationBarChange"] }, { kind: "component", type: AppSidebar, selector: "[app-sidebar]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator", inputs: ["simple", "location", "cardStyle"], outputs: ["cardStyleChange"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }, { kind: "component", type: AppFooter, selector: "[app-footer]" }, { kind: "component", type: AppSearch, selector: "[app-search]" }, { kind: "component", type: AppRightMenu, selector: "[app-rightmenu]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AppLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-layout',
+                    imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppConfigurator, AppBreadcrumb, AppFooter, AppSearch, AppRightMenu],
+                    template: `<div class="layout-wrapper" [ngClass]="containerClass()">
+        <div app-topbar></div>
+        <div class="layout-body">
+            <div app-sidebar></div>
+            <div class="layout-content-wrapper">
+                <div class="layout-content-wrapper-inside">
+                    <main class="layout-content">
+                        <div app-breadcrumb></div>
+                        <router-outlet></router-outlet>
+                    </main>
+                    <div app-footer></div>
+                </div>
+            </div>
+        </div>
+        <app-configurator />
+        <div app-search></div>
+        <div app-rightmenu></div>
+        <div class="layout-mask"></div>
+    </div> `
+                }]
+        }], ctorParameters: () => [] });
+
+class AuthLayout {
+    layoutService = inject(LayoutService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AuthLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AuthLayout, isStandalone: true, selector: "auth-layout", ngImport: i0, template: `
+        <main>
+            <router-outlet></router-outlet>
+        </main>
+        <button class="layout-config-button config-link" (click)="layoutService.toggleConfigSidebar()">
+            <i class="pi pi-cog"></i>
+        </button>
+        <app-configurator location="landing" />
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator", inputs: ["simple", "location", "cardStyle"], outputs: ["cardStyleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AuthLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'auth-layout',
+                    imports: [RouterModule, AppConfigurator],
+                    template: `
+        <main>
+            <router-outlet></router-outlet>
+        </main>
+        <button class="layout-config-button config-link" (click)="layoutService.toggleConfigSidebar()">
+            <i class="pi pi-cog"></i>
+        </button>
+        <app-configurator location="landing" />
+    `
+                }]
+        }] });
+
+let aiCardBgFilterId = 0;
+/**
+ * Animated brand-tinted background for AI insight cards: shifting host background
+ * plus soft blurred SVG blobs with staggered fill animation.
+ *
+ * Project card content with `<ng-content />` so it stacks above the SVG layer.
+ */
+class AiCardBgComponent {
+    blurFilterId = `uxAiBlur_${++aiCardBgFilterId}`;
+    get blurFilterUrl() {
+        return `url(#${this.blurFilterId})`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AiCardBgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AiCardBgComponent, isStandalone: true, selector: "ux-ai-card-bg", host: { properties: { "attr.data-ai-bg": "true" }, classAttribute: "ux-ai-card-bg block box-border" }, ngImport: i0, template: `
+        <svg
+            class="ux-ai-card-bg__svg"
+            viewBox="0 0 400 300"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+        >
+            <defs>
+                <filter [attr.id]="blurFilterId" x="-50%" y="-50%" width="200%" height="200%">
+                    <feGaussianBlur stdDeviation="30" />
+                </filter>
+            </defs>
+            <ellipse
+                class="ux-ai-fg ux-ai-fg--1"
+                cx="60"
+                cy="50"
+                rx="120"
+                ry="100"
+                opacity="0.35"
+                [attr.filter]="blurFilterUrl"
+            />
+            <ellipse
+                class="ux-ai-fg ux-ai-fg--2"
+                cx="320"
+                cy="80"
+                rx="100"
+                ry="80"
+                opacity="0.3"
+                [attr.filter]="blurFilterUrl"
+            />
+            <ellipse
+                class="ux-ai-fg ux-ai-fg--3"
+                cx="200"
+                cy="240"
+                rx="140"
+                ry="90"
+                opacity="0.25"
+                [attr.filter]="blurFilterUrl"
+            />
+        </svg>
+        <ng-content />
+    `, isInline: true, styles: [":host{--ux-ai-bg-from: #cce5ff;--ux-ai-bg-to:rgb(255, 236, 254);--ux-ai-fg-from:rgb(188, 214, 255);--ux-ai-fg-to:rgb(246, 216, 255);position:relative;overflow:hidden;isolation:isolate;contain:paint;animation:ux-ai-bg-move 5s ease-in-out infinite;will-change:background-color}:host-context([class*=\"app-dark\"]){--ux-ai-bg-from:rgb(0, 32, 69);--ux-ai-bg-to:rgb(47, 18, 116);--ux-ai-fg-from:rgb(0, 20, 47);--ux-ai-fg-to:rgb(76, 1, 71)}:host>:not(svg){position:relative;z-index:1}:host svg.ux-ai-card-bg__svg{position:absolute;inset:0;z-index:0;height:100%;width:100%;max-height:100%;overflow:hidden;pointer-events:none}.ux-ai-fg{will-change:fill;animation:ux-ai-fg-move 6s ease-in-out infinite}.ux-ai-fg--1{animation-delay:0s}.ux-ai-fg--2{animation-delay:2s}.ux-ai-fg--3{animation-delay:4s}@keyframes ux-ai-bg-move{0%,to{background-color:var(--ux-ai-bg-from)}50%{background-color:var(--ux-ai-bg-to)}}@keyframes ux-ai-fg-move{0%,to{fill:var(--ux-ai-fg-from)}50%{fill:var(--ux-ai-fg-to)}}@media(prefers-reduced-motion:reduce){:host{animation:none;background-color:var(--ux-ai-bg-from)}.ux-ai-fg{animation:none;fill:var(--ux-ai-fg-from)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AiCardBgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ux-ai-card-bg', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ux-ai-card-bg block box-border',
+                        '[attr.data-ai-bg]': 'true'
+                    }, template: `
+        <svg
+            class="ux-ai-card-bg__svg"
+            viewBox="0 0 400 300"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+        >
+            <defs>
+                <filter [attr.id]="blurFilterId" x="-50%" y="-50%" width="200%" height="200%">
+                    <feGaussianBlur stdDeviation="30" />
+                </filter>
+            </defs>
+            <ellipse
+                class="ux-ai-fg ux-ai-fg--1"
+                cx="60"
+                cy="50"
+                rx="120"
+                ry="100"
+                opacity="0.35"
+                [attr.filter]="blurFilterUrl"
+            />
+            <ellipse
+                class="ux-ai-fg ux-ai-fg--2"
+                cx="320"
+                cy="80"
+                rx="100"
+                ry="80"
+                opacity="0.3"
+                [attr.filter]="blurFilterUrl"
+            />
+            <ellipse
+                class="ux-ai-fg ux-ai-fg--3"
+                cx="200"
+                cy="240"
+                rx="140"
+                ry="90"
+                opacity="0.25"
+                [attr.filter]="blurFilterUrl"
+            />
+        </svg>
+        <ng-content />
+    `, styles: [":host{--ux-ai-bg-from: #cce5ff;--ux-ai-bg-to:rgb(255, 236, 254);--ux-ai-fg-from:rgb(188, 214, 255);--ux-ai-fg-to:rgb(246, 216, 255);position:relative;overflow:hidden;isolation:isolate;contain:paint;animation:ux-ai-bg-move 5s ease-in-out infinite;will-change:background-color}:host-context([class*=\"app-dark\"]){--ux-ai-bg-from:rgb(0, 32, 69);--ux-ai-bg-to:rgb(47, 18, 116);--ux-ai-fg-from:rgb(0, 20, 47);--ux-ai-fg-to:rgb(76, 1, 71)}:host>:not(svg){position:relative;z-index:1}:host svg.ux-ai-card-bg__svg{position:absolute;inset:0;z-index:0;height:100%;width:100%;max-height:100%;overflow:hidden;pointer-events:none}.ux-ai-fg{will-change:fill;animation:ux-ai-fg-move 6s ease-in-out infinite}.ux-ai-fg--1{animation-delay:0s}.ux-ai-fg--2{animation-delay:2s}.ux-ai-fg--3{animation-delay:4s}@keyframes ux-ai-bg-move{0%,to{background-color:var(--ux-ai-bg-from)}50%{background-color:var(--ux-ai-bg-to)}}@keyframes ux-ai-fg-move{0%,to{fill:var(--ux-ai-fg-from)}50%{fill:var(--ux-ai-fg-to)}}@media(prefers-reduced-motion:reduce){:host{animation:none;background-color:var(--ux-ai-bg-from)}.ux-ai-fg{animation:none;fill:var(--ux-ai-fg-from)}}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of @unopsitg/ux
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AiCardBgComponent, AppBreadcrumb, AppConfigurator, AppFooter, AppLayout, AppMenu, AppMenuitem, AppRightMenu, AppSearch, AppSidebar, AppTopbar, AuthLayout, BrandContrast, BrandCrisp, BrandSoft, LayoutService, MENU_MODEL, SIDEBAR_LOGO, TOPBAR_MOBILE_LOGO, brandPresets, brandPrimitives };
+//# sourceMappingURL=unopsitg-ux.mjs.map