@es.framework/ng.ui.theme 2.0.56

package/fesm2022/es.framework-ng.ui.theme.mjs

@@ -0,0 +1,1850 @@
+import * as i0 from '@angular/core';
+import { signal, computed, effect, Injectable, inject, Component, PLATFORM_ID, HostListener, provideAppInitializer, Injector, makeEnvironmentProviders, InjectionToken } from '@angular/core';
+import { Subject, Observable, lastValueFrom, BehaviorSubject, map, filter } from 'rxjs';
+import * as i3$3 from '@es.framework/ng.core/services';
+import { ConfigStateService, SessionStateService, LocalizationService, LocalStorageService, NavItemsService, UserMenuService, RoutesService, SubscriptionService, ReplaceableComponentsService } from '@es.framework/ng.core/services';
+import { eLayoutType } from '@es.framework/ng.core/models';
+import * as i2$2 from '@angular/router';
+import { Router, RouterModule, RouterOutlet, NavigationEnd } from '@angular/router';
+import * as i1$1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { StyleClassModule } from 'primeng/styleclass';
+import * as i3$1 from 'primeng/avatar';
+import { AvatarModule } from 'primeng/avatar';
+import * as i5 from 'primeng/menu';
+import { MenuModule } from 'primeng/menu';
+import * as i2 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { OverlayModule } from 'primeng/overlay';
+import { VisibleDirective, HasPermissionDirective, ReplaceableTemplateDirective } from '@es.framework/ng.core/directives';
+import { TranslatePipe, ToInjectorPipe } from '@es.framework/ng.core/pipes';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { SelectModule } from 'primeng/select';
+import * as i1 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import { TranslateService } from '@ngx-translate/core';
+import { updatePreset, updateSurfacePalette } from '@primeng/themes';
+import Aura from '@primeng/themes/aura';
+import Lara from '@primeng/themes/lara';
+import Nora from '@primeng/themes/nora';
+import { PrimeNG } from 'primeng/config';
+import * as i3 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { AuthService } from '@es.framework/ng.core/abstracts';
+import * as i4 from 'primeng/api';
+import * as i3$2 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import Swal from 'sweetalert2';
+import { NAVIGATE_TO_MANAGE_PROFILE } from '@es.framework/ng.core/tokens';
+
+class LayoutService {
+    smallScreen = false;
+    logoComponentKey = "Theme.LogoComponent" /* eThemeBasicComponents.Logo */;
+    routesComponentKey = "Theme.RoutesComponent" /* eThemeBasicComponents.Routes */;
+    navItemsComponentKey = "Theme.NavItemsComponent" /* eThemeBasicComponents.NavItems */;
+    _config = {
+        preset: 'Aura',
+        primary: 'blue',
+        surface: null,
+        darkTheme: false,
+        menuMode: 'static'
+    };
+    _state = {
+        staticMenuDesktopInactive: false,
+        overlayMenuActive: false,
+        configSidebarVisible: false,
+        staticMenuMobileActive: false,
+        menuHoverActive: false
+    };
+    layoutConfig = signal(this._config, ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
+    layoutState = signal(this._state, ...(ngDevMode ? [{ debugName: "layoutState" }] : []));
+    configUpdate = new Subject();
+    overlayOpen = new Subject();
+    menuSource = new Subject();
+    resetSource = new Subject();
+    menuSource$ = this.menuSource.asObservable();
+    resetSource$ = this.resetSource.asObservable();
+    configUpdate$ = this.configUpdate.asObservable();
+    overlayOpen$ = this.overlayOpen.asObservable();
+    theme = computed(() => (this.layoutConfig()?.darkTheme ? 'light' : 'dark'), ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    isSidebarActive = computed(() => this.layoutState().overlayMenuActive || this.layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
+    isDarkTheme = computed(() => this.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    getPrimary = computed(() => this.layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
+    getSurface = computed(() => this.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
+    isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
+    transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "transitionComplete" }] : []));
+    initialized = false;
+    constructor() {
+        effect(() => {
+            const config = this.layoutConfig();
+            if (config) {
+                this.onConfigUpdate();
+            }
+        });
+        effect(() => {
+            const config = this.layoutConfig();
+            if (!this.initialized || !config) {
+                this.initialized = true;
+                return;
+            }
+            this.handleDarkModeTransition(config);
+        });
+    }
+    handleDarkModeTransition(config) {
+        if (document.startViewTransition) {
+            this.startViewTransition(config);
+        }
+        else {
+            this.toggleDarkMode(config);
+            this.onTransitionEnd();
+        }
+    }
+    startViewTransition(config) {
+        const transition = document.startViewTransition(() => {
+            this.toggleDarkMode(config);
+        });
+        transition.ready
+            .then(() => {
+            this.onTransitionEnd();
+        })
+            .catch(() => { });
+    }
+    toggleDarkMode(config) {
+        const _config = config || this.layoutConfig();
+        if (_config.darkTheme) {
+            document.documentElement.classList.add('app-dark');
+        }
+        else {
+            document.documentElement.classList.remove('app-dark');
+        }
+    }
+    onTransitionEnd() {
+        this.transitionComplete.set(true);
+        setTimeout(() => {
+            this.transitionComplete.set(false);
+        });
+    }
+    onMenuToggle() {
+        if (this.isOverlay()) {
+            this.layoutState.update((prev) => ({ ...prev, overlayMenuActive: !this.layoutState().overlayMenuActive }));
+            if (this.layoutState().overlayMenuActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+        if (this.isDesktop()) {
+            this.layoutState.update((prev) => ({ ...prev, staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive }));
+        }
+        else {
+            this.layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: !this.layoutState().staticMenuMobileActive }));
+            if (this.layoutState().staticMenuMobileActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+    }
+    isDesktop() {
+        return window.innerWidth > 991;
+    }
+    isMobile() {
+        return !this.isDesktop();
+    }
+    onConfigUpdate() {
+        this._config = { ...this.layoutConfig() };
+        this.configUpdate.next(this.layoutConfig());
+    }
+    onMenuStateChange(event) {
+        this.menuSource.next(event);
+    }
+    reset() {
+        this.resetSource.next(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class LanguagesComponent {
+    configState = inject(ConfigStateService);
+    sessionState = inject(SessionStateService);
+    translate = inject(LocalizationService);
+    localStorageService = inject(LocalStorageService);
+    in18Translate = inject(TranslateService);
+    // Convert observable to signal
+    languages$ = this.configState.getDeep$('localization.languages');
+    languages = toSignal(this.languages$, { initialValue: [] });
+    // selectedLangValue = this.sessionState.getLanguage();
+    selectedLang = signal(this.sessionState.getLanguage(), ...(ngDevMode ? [{ debugName: "selectedLang" }] : []));
+    constructor() {
+        // Update signal when language is changed from external source (optional)
+        effect(() => {
+            this.selectedLang.set(this.sessionState.getLanguage());
+        });
+    }
+    onSelectLanguage(cultureName) {
+        try {
+            this.in18Translate.use(cultureName).subscribe(() => {
+            });
+            this.localStorageService.setItem('language', cultureName);
+            this.sessionState.setLanguage(cultureName);
+            this.selectedLang.set(cultureName);
+        }
+        catch (error) {
+        }
+        this.updateHtmlDirection(cultureName);
+    }
+    updateHtmlDirection(languageCode) {
+        const htmlElement = document.documentElement;
+        if (languageCode === 'ar' || languageCode.includes('ar-')) {
+            htmlElement.setAttribute('dir', 'rtl');
+            htmlElement.classList.add('rtl');
+        }
+        else {
+            htmlElement.setAttribute('dir', 'ltr');
+            htmlElement.classList.remove('rtl');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LanguagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LanguagesComponent, isStandalone: true, selector: "abp-languages", ngImport: i0, template: `
+   @if (languages(); as langs) {
+     <div>
+       <!--  -->
+       <button
+         pButton
+         type="button"
+         icon="pi pi-globe"
+         class="p-button-text"
+         [title]="'اختر اللغة'"
+         (click)="overlay.toggle($event)"
+       ></button>
+       <p-popover #overlay >
+         <ul class="w-48">
+           @for (lang of langs; track lang) {
+             <li
+               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
+               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
+               >
+               <span>{{ lang.displayName }}</span>
+               @if (lang.cultureName === selectedLang()) {
+                 <i class="pi pi-check text-green-500"></i>
+               }
+             </li>
+           }
+         </ul>
+       </p-popover>
+     </div>
+   }
+   
+   `, isInline: true, dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LanguagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-languages',
+                    standalone: true,
+                    imports: [SelectModule, FormsModule, PopoverModule, ButtonModule],
+                    template: `
+   @if (languages(); as langs) {
+     <div>
+       <!--  -->
+       <button
+         pButton
+         type="button"
+         icon="pi pi-globe"
+         class="p-button-text"
+         [title]="'اختر اللغة'"
+         (click)="overlay.toggle($event)"
+       ></button>
+       <p-popover #overlay >
+         <ul class="w-48">
+           @for (lang of langs; track lang) {
+             <li
+               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
+               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
+               >
+               <span>{{ lang.displayName }}</span>
+               @if (lang.cultureName === selectedLang()) {
+                 <i class="pi pi-check text-green-500"></i>
+               }
+             </li>
+           }
+         </ul>
+       </p-popover>
+     </div>
+   }
+   
+   `
+                }]
+        }], ctorParameters: () => [] });
+
+const presets = {
+    Aura,
+    Lara,
+    Nora
+};
+class AppConfigurator {
+    router = inject(Router);
+    config = inject(PrimeNG);
+    layoutService = inject(LayoutService);
+    platformId = inject(PLATFORM_ID);
+    primeng = inject(PrimeNG);
+    presets = Object.keys(presets);
+    showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
+    menuModeOptions = [
+        { label: 'Static', value: 'static' },
+        { label: 'Overlay', value: 'overlay' }
+    ];
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            const preset = this.layoutService.layoutConfig().preset;
+            this.onPresetChange(preset ?? "Aura");
+        }
+    }
+    surfaces = [
+        {
+            name: 'slate',
+            palette: {
+                0: '#ffffff',
+                50: '#f8fafc',
+                100: '#f1f5f9',
+                200: '#e2e8f0',
+                300: '#cbd5e1',
+                400: '#94a3b8',
+                500: '#64748b',
+                600: '#475569',
+                700: '#334155',
+                800: '#1e293b',
+                900: '#0f172a',
+                950: '#020617'
+            }
+        },
+        {
+            name: 'gray',
+            palette: {
+                0: '#ffffff',
+                50: '#f9fafb',
+                100: '#f3f4f6',
+                200: '#e5e7eb',
+                300: '#d1d5db',
+                400: '#9ca3af',
+                500: '#6b7280',
+                600: '#4b5563',
+                700: '#374151',
+                800: '#1f2937',
+                900: '#111827',
+                950: '#030712'
+            }
+        },
+        {
+            name: 'zinc',
+            palette: {
+                0: '#ffffff',
+                50: '#fafafa',
+                100: '#f4f4f5',
+                200: '#e4e4e7',
+                300: '#d4d4d8',
+                400: '#a1a1aa',
+                500: '#71717a',
+                600: '#52525b',
+                700: '#3f3f46',
+                800: '#27272a',
+                900: '#18181b',
+                950: '#09090b'
+            }
+        },
+        {
+            name: 'neutral',
+            palette: {
+                0: '#ffffff',
+                50: '#fafafa',
+                100: '#f5f5f5',
+                200: '#e5e5e5',
+                300: '#d4d4d4',
+                400: '#a3a3a3',
+                500: '#737373',
+                600: '#525252',
+                700: '#404040',
+                800: '#262626',
+                900: '#171717',
+                950: '#0a0a0a'
+            }
+        },
+        {
+            name: 'stone',
+            palette: {
+                0: '#ffffff',
+                50: '#fafaf9',
+                100: '#f5f5f4',
+                200: '#e7e5e4',
+                300: '#d6d3d1',
+                400: '#a8a29e',
+                500: '#78716c',
+                600: '#57534e',
+                700: '#44403c',
+                800: '#292524',
+                900: '#1c1917',
+                950: '#0c0a09'
+            }
+        },
+        {
+            name: 'soho',
+            palette: {
+                0: '#ffffff',
+                50: '#ececec',
+                100: '#dedfdf',
+                200: '#c4c4c6',
+                300: '#adaeb0',
+                400: '#97979b',
+                500: '#7f8084',
+                600: '#6a6b70',
+                700: '#55565b',
+                800: '#3f4046',
+                900: '#2c2c34',
+                950: '#16161d'
+            }
+        },
+        {
+            name: 'viva',
+            palette: {
+                0: '#ffffff',
+                50: '#f3f3f3',
+                100: '#e7e7e8',
+                200: '#cfd0d0',
+                300: '#b7b8b9',
+                400: '#9fa1a1',
+                500: '#87898a',
+                600: '#6e7173',
+                700: '#565a5b',
+                800: '#3e4244',
+                900: '#262b2c',
+                950: '#0e1315'
+            }
+        },
+        {
+            name: 'ocean',
+            palette: {
+                0: '#ffffff',
+                50: '#fbfcfc',
+                100: '#F7F9F8',
+                200: '#EFF3F2',
+                300: '#DADEDD',
+                400: '#B1B7B6',
+                500: '#828787',
+                600: '#5F7274',
+                700: '#415B61',
+                800: '#29444E',
+                900: '#183240',
+                950: '#0c1920'
+            }
+        }
+    ];
+    selectedPrimaryColor = computed(() => {
+        return this.layoutService.layoutConfig().primary;
+    }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
+    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : []));
+    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, ...(ngDevMode ? [{ debugName: "selectedPreset" }] : []));
+    menuMode = computed(() => this.layoutService.layoutConfig().menuMode, ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
+    primaryColors = computed(() => {
+        const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
+        const colors = ['blue', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'emerald', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
+        const palettes = [{ name: 'noir', palette: {} }];
+        colors.forEach((color) => {
+            palettes.push({
+                name: color,
+                palette: presetPalette?.[color]
+            });
+        });
+        return palettes;
+    }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
+    getPresetExt() {
+        const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
+        const preset = this.layoutService.layoutConfig().preset;
+        if (color.name === 'noir') {
+            return {
+                semantic: {
+                    primary: {
+                        50: '{surface.50}',
+                        100: '{surface.100}',
+                        200: '{surface.200}',
+                        300: '{surface.300}',
+                        400: '{surface.400}',
+                        500: '{surface.500}',
+                        600: '{surface.600}',
+                        700: '{surface.700}',
+                        800: '{surface.800}',
+                        900: '{surface.900}',
+                        950: '{surface.950}'
+                    },
+                    colorScheme: {
+                        light: {
+                            primary: {
+                                color: '{primary.950}',
+                                contrastColor: '#ffffff',
+                                hoverColor: '{primary.800}',
+                                activeColor: '{primary.700}'
+                            },
+                            highlight: {
+                                background: '{primary.950}',
+                                focusBackground: '{primary.700}',
+                                color: '#ffffff',
+                                focusColor: '#ffffff'
+                            }
+                        },
+                        dark: {
+                            primary: {
+                                color: '{primary.50}',
+                                contrastColor: '{primary.950}',
+                                hoverColor: '{primary.200}',
+                                activeColor: '{primary.300}'
+                            },
+                            highlight: {
+                                background: '{primary.50}',
+                                focusBackground: '{primary.300}',
+                                color: '{primary.950}',
+                                focusColor: '{primary.950}'
+                            }
+                        }
+                    }
+                }
+            };
+        }
+        else {
+            if (preset === 'Nora') {
+                return {
+                    semantic: {
+                        primary: color.palette,
+                        colorScheme: {
+                            light: {
+                                primary: {
+                                    color: '{primary.600}',
+                                    contrastColor: '#ffffff',
+                                    hoverColor: '{primary.700}',
+                                    activeColor: '{primary.800}'
+                                },
+                                highlight: {
+                                    background: '{primary.600}',
+                                    focusBackground: '{primary.700}',
+                                    color: '#ffffff',
+                                    focusColor: '#ffffff'
+                                }
+                            },
+                            dark: {
+                                primary: {
+                                    color: '{primary.500}',
+                                    contrastColor: '{surface.900}',
+                                    hoverColor: '{primary.400}',
+                                    activeColor: '{primary.300}'
+                                },
+                                highlight: {
+                                    background: '{primary.500}',
+                                    focusBackground: '{primary.400}',
+                                    color: '{surface.900}',
+                                    focusColor: '{surface.900}'
+                                }
+                            }
+                        }
+                    }
+                };
+            }
+            else {
+                return {
+                    semantic: {
+                        primary: color.palette,
+                        colorScheme: {
+                            light: {
+                                primary: {
+                                    color: '{primary.500}',
+                                    contrastColor: '#ffffff',
+                                    hoverColor: '{primary.600}',
+                                    activeColor: '{primary.700}'
+                                },
+                                highlight: {
+                                    background: '{primary.50}',
+                                    focusBackground: '{primary.100}',
+                                    color: '{primary.700}',
+                                    focusColor: '{primary.800}'
+                                }
+                            },
+                            dark: {
+                                primary: {
+                                    color: '{primary.400}',
+                                    contrastColor: '{surface.900}',
+                                    hoverColor: '{primary.300}',
+                                    activeColor: '{primary.200}'
+                                },
+                                highlight: {
+                                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                                    color: 'rgba(255,255,255,.87)',
+                                    focusColor: 'rgba(255,255,255,.87)'
+                                }
+                            }
+                        }
+                    }
+                };
+            }
+        }
+    }
+    updateColors(event, type, color) {
+        if (type === 'primary') {
+            this.layoutService.layoutConfig.update(state => ({ ...state, primary: color.name }));
+            this.applyPalette('primary', color.palette || {});
+        }
+        else if (type === 'surface') {
+            this.layoutService.layoutConfig.update(state => ({ ...state, surface: color.name }));
+            this.applyPalette('surface', color.palette || {});
+        }
+        event.stopPropagation();
+    }
+    applyTheme(type, color) {
+        if (type === 'primary') {
+            updatePreset(this.getPresetExt());
+        }
+        else if (type === 'surface') {
+            updateSurfacePalette(color.palette);
+        }
+    }
+    applyPalette(type, palette = {}) {
+        if (!isPlatformBrowser(this.platformId))
+            return; // SSR-safe
+        const root = document.documentElement;
+        Object.entries(palette).forEach(([key, value]) => {
+            if (type === 'primary') {
+                root.style.setProperty(`--p-primary-${key}`, value);
+            }
+            else if (type === 'surface') {
+                root.style.setProperty(`--surface-${key}`, value);
+            }
+        });
+    }
+    onPresetChange(presetName) {
+        this.layoutService.layoutConfig.update(state => ({ ...state, preset: presetName }));
+        const preset = presets[presetName];
+        // اختر اللون الحالي
+        const surfacePalette = this.surfaces.find(s => s.name === this.selectedSurfaceColor())?.palette;
+        // تطبيق primary + surface
+        const primaryPalette = this.primaryColors().find(c => c.name === this.selectedPrimaryColor())?.palette;
+        this.applyPalette('primary', primaryPalette || {});
+        this.applyPalette('surface', surfacePalette || {});
+    }
+    onMenuModeChange(event) {
+        this.layoutService.layoutConfig.update((prev) => ({ ...prev, menuMode: event }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", ngImport: i0, template: `
+        <div class="flex flex-col gap-4">
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Primary</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (primaryColor of primaryColors(); track primaryColor.name) {
+                <button
+                  type="button"
+                  [title]="primaryColor.name"
+                  (click)="updateColors($event, 'primary', primaryColor)"
+                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Surface</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (surface of surfaces; track surface.name) {
+                <button
+                  type="button"
+                  [title]="surface.name"
+                  (click)="updateColors($event, 'surface', surface)"
+                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-sm text-muted-color font-semibold">Presets</span>
+            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+          </div>
+          @if (showMenuModeButton()) {
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+            </div>
+          }
+        </div>
+        `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-configurator',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, SelectButtonModule],
+                    template: `
+        <div class="flex flex-col gap-4">
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Primary</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (primaryColor of primaryColors(); track primaryColor.name) {
+                <button
+                  type="button"
+                  [title]="primaryColor.name"
+                  (click)="updateColors($event, 'primary', primaryColor)"
+                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Surface</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (surface of surfaces; track surface.name) {
+                <button
+                  type="button"
+                  [title]="surface.name"
+                  (click)="updateColors($event, 'surface', surface)"
+                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-sm text-muted-color font-semibold">Presets</span>
+            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+          </div>
+          @if (showMenuModeButton()) {
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+            </div>
+          }
+        </div>
+        `,
+                }]
+        }] });
+
+class NavItemsComponent {
+    translate = inject(LocalizationService);
+    authService = inject(AuthService);
+    configState = inject(ConfigStateService);
+    sessionState = inject(SessionStateService);
+    navItems = inject(NavItemsService);
+    userMenu = inject(UserMenuService);
+    layoutService = inject(LayoutService);
+    loading = false;
+    currentUser$;
+    selectedTenant$;
+    userMenuItems = [];
+    constructor() {
+        this.currentUser$ = this.configState.getOne$('currentUser');
+        this.selectedTenant$ = this.sessionState.getTenant$();
+    }
+    ngOnInit() {
+        // Get user menu items from the service and convert to PrimeNG format
+        this.userMenu.items$.subscribe(async (items) => {
+            this.userMenuItems = await this.convertToPrimeMenuItems(items);
+        });
+    }
+    async convertToPrimeMenuItems(userMenus) {
+        const primeItems = [];
+        for (const userMenu of userMenus) {
+            // Check visibility if defined
+            let isVisible = true;
+            if (userMenu.visible) {
+                const visibilityResult = userMenu.visible(userMenu);
+                if (visibilityResult instanceof Promise) {
+                    isVisible = await visibilityResult;
+                }
+                else if (visibilityResult instanceof Observable) {
+                    isVisible = await lastValueFrom(visibilityResult);
+                }
+                else {
+                    isVisible = !!visibilityResult;
+                }
+            }
+            if (!isVisible)
+                continue;
+            // Create PrimeNG menu item
+            const primeItem = {
+                id: userMenu.id?.toString(),
+                label: userMenu.textTemplate?.text || '',
+                icon: userMenu.textTemplate?.icon || '',
+                // routerLink: userMenu.component ? undefined : ['#'],
+                routerLink: null,
+                command: userMenu.action ? (event) => {
+                    if (userMenu.action) {
+                        userMenu.action();
+                        // if (this.menu) {
+                        //   this.menu.hide();
+                        // }
+                    }
+                } : undefined,
+                visible: isVisible,
+                data: {
+                    $implicit: userMenu // Pass the original userMenu as data
+                }
+            };
+            // If it has a component, set it up
+            if (userMenu.component) {
+                // primeItem.data = {
+                //   ...primeItem.data,
+                //   component: userMenu.component
+                // };
+            }
+            // Handle badge
+            if (userMenu.badge) {
+                primeItem.badge = userMenu.badge.count?.toString() || '';
+                primeItem.badgeStyleClass = `p-badge p-badge-${userMenu.badge.color || 'danger'}`;
+            }
+            primeItems.push(primeItem);
+        }
+        return primeItems;
+    }
+    toggleDarkMode() {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            darkTheme: !state.darkTheme
+        }));
+    }
+    get userName() {
+        // This will be updated when currentUser$ emits
+        let name = '?';
+        this.currentUser$.subscribe(user => {
+            if (user?.name) {
+                const names = user.name.split(' ');
+                if (names.length >= 2) {
+                    name = `${names[0][0]}`;
+                }
+                else if (names[0]) {
+                    name = names[0][0];
+                }
+            }
+        });
+        return name;
+    }
+    get userStatus() {
+        let status = this.translate.instant('UNKNOWN');
+        this.currentUser$.subscribe(user => {
+            if (!user)
+                return;
+            this.translate.instant('ACTIVE');
+        });
+        return status;
+    }
+    onProfileSettings() {
+        // Navigate to profile settings
+        console.log('Profile settings clicked');
+    }
+    onChangePassword() {
+        // Navigate to change password
+        console.log('Change password clicked');
+    }
+    logout() {
+        this.authService.logout().subscribe();
+    }
+    get smallScreen() {
+        return window.innerWidth < 992;
+    }
+    navigateToLogin() {
+        this.authService.navigateToLogin();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NavItemsComponent, isStandalone: true, selector: "app-nav-items", ngImport: i0, template: `
+    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
+      <!-- Left: Logo / Title -->
+      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
+        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
+      </div>
+    
+      <!-- Center: Nav Items -->
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+        <ul class="flex space-x-4">
+          @for (item of navItems.items$ | async; track item.id) {
+            @if (!item.visible || item.visible(item)) {
+              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
+                <li class="flex items-center">
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <button
+                      pButton
+                      type="button"
+                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
+                      (click)="item.action?.()"
+                      >
+                      <span [innerHTML]="item.html"></span>
+                    </button>
+                  }
+                </li>
+              </ng-container>
+            }
+          }
+        </ul>
+      </div>
+    
+      <!-- Right: Actions -->
+      <div class="flex items-center  rtl:space-x-reverse">
+        <!-- Configurator -->
+    
+        <div>
+          <!--  -->
+          <button
+            pButton
+            type="button"
+            icon="pi pi-palette"
+            class="p-button-text"
+            [title]="''"
+            (click)="overlay.toggle($event)"
+            >
+          </button>
+    
+          <p-popover #overlay >
+            <app-configurator />
+          </p-popover>
+        </div>
+    
+    
+        <!-- Dark Mode Toggle -->
+        <button
+          pButton
+          type="button"
+          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
+          class="p-button-text"
+          (click)="toggleDarkMode()">
+        </button>
+    
+        <!-- Language Switcher -->
+        <abp-languages></abp-languages>
+    
+        <!-- User Menu -->
+        <div class="relative">
+          <button
+            class="p-link p-2"
+            (click)="menu.toggle($event)"
+            aria-label="User menu"
+            >
+            <p-avatar
+              [label]="loading ? '' : userName"
+              [icon]="loading ? 'pi pi-spinner' : ''"
+              [class]="{'pi-spin': loading}"
+              shape="circle"
+              class="bg-blue-600 text-white cursor-pointer"
+              [title]="(currentUser$ | async)?.name || ''"
+            ></p-avatar>
+          </button>
+    
+          <p-menu
+            #menu
+            [model]="userMenuItems"
+            [popup]="true"
+            [appendTo]="'body'"
+            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
+            >
+            <ng-template pTemplate="start">
+              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
+                <p-avatar
+                  [label]="userName"
+                  shape="circle"
+                  size="xlarge"
+                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
+                  [title]="(currentUser$ | async)?.name || ''"
+                ></p-avatar>
+                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
+                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
+                </h5>
+                <p class="text-sm text-gray-600 truncate max-w-full">
+                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
+                </p>
+                @if ((selectedTenant$ | async); as tenant) {
+                  <span
+                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
+                  [ngClass]="{
+                    'bg-green-100 text-green-800': true
+                  }"
+                    >
+                    {{ tenant?.name || '_' }}
+                  </span>
+                }
+              </div>
+            </ng-template>
+    
+            <ng-template pTemplate="item" let-item>
+              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
+              <ng-container >
+                <!-- *hasPermission="item.requiredPolicy" -->
+                <a
+    
+                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
+                  [ngClass]="item.styleClass || ''"
+                  (click)="item.command ? item.command() : null"
+                  [routerLink]="item.routerLink ? item.routerLink : null"
+                  tabindex="0"
+                  >
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
+                    <span class="text-gray-700">{{ item.label | translate }}</span>
+                  }
+                </a>
+              </ng-container>
+            </ng-template>
+          </p-menu>
+        </div>
+    
+        <!-- Logout Button (separate from menu) -->
+        <!-- <button
+        type="button"
+        class="layout-topbar-action"
+        (click)="logout()"
+        title="تسجيل الخروج"
+        >
+        <i class="pi pi-sign-out"></i>
+      </button> -->
+    </div>
+    </header>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: LanguagesComponent, selector: "abp-languages" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i3$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: VisibleDirective, selector: "[frameworkVisible]", inputs: ["frameworkVisible"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ToInjectorPipe, name: "toInjector" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavItemsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-nav-items',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        StyleClassModule,
+                        AppConfigurator,
+                        LanguagesComponent,
+                        AvatarModule,
+                        MenuModule,
+                        ButtonModule,
+                        OverlayModule,
+                        TranslatePipe,
+                        VisibleDirective,
+                        HasPermissionDirective,
+                        ToInjectorPipe,
+                        PopoverModule
+                    ],
+                    template: `
+    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
+      <!-- Left: Logo / Title -->
+      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
+        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
+      </div>
+    
+      <!-- Center: Nav Items -->
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+        <ul class="flex space-x-4">
+          @for (item of navItems.items$ | async; track item.id) {
+            @if (!item.visible || item.visible(item)) {
+              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
+                <li class="flex items-center">
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <button
+                      pButton
+                      type="button"
+                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
+                      (click)="item.action?.()"
+                      >
+                      <span [innerHTML]="item.html"></span>
+                    </button>
+                  }
+                </li>
+              </ng-container>
+            }
+          }
+        </ul>
+      </div>
+    
+      <!-- Right: Actions -->
+      <div class="flex items-center  rtl:space-x-reverse">
+        <!-- Configurator -->
+    
+        <div>
+          <!--  -->
+          <button
+            pButton
+            type="button"
+            icon="pi pi-palette"
+            class="p-button-text"
+            [title]="''"
+            (click)="overlay.toggle($event)"
+            >
+          </button>
+    
+          <p-popover #overlay >
+            <app-configurator />
+          </p-popover>
+        </div>
+    
+    
+        <!-- Dark Mode Toggle -->
+        <button
+          pButton
+          type="button"
+          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
+          class="p-button-text"
+          (click)="toggleDarkMode()">
+        </button>
+    
+        <!-- Language Switcher -->
+        <abp-languages></abp-languages>
+    
+        <!-- User Menu -->
+        <div class="relative">
+          <button
+            class="p-link p-2"
+            (click)="menu.toggle($event)"
+            aria-label="User menu"
+            >
+            <p-avatar
+              [label]="loading ? '' : userName"
+              [icon]="loading ? 'pi pi-spinner' : ''"
+              [class]="{'pi-spin': loading}"
+              shape="circle"
+              class="bg-blue-600 text-white cursor-pointer"
+              [title]="(currentUser$ | async)?.name || ''"
+            ></p-avatar>
+          </button>
+    
+          <p-menu
+            #menu
+            [model]="userMenuItems"
+            [popup]="true"
+            [appendTo]="'body'"
+            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
+            >
+            <ng-template pTemplate="start">
+              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
+                <p-avatar
+                  [label]="userName"
+                  shape="circle"
+                  size="xlarge"
+                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
+                  [title]="(currentUser$ | async)?.name || ''"
+                ></p-avatar>
+                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
+                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
+                </h5>
+                <p class="text-sm text-gray-600 truncate max-w-full">
+                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
+                </p>
+                @if ((selectedTenant$ | async); as tenant) {
+                  <span
+                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
+                  [ngClass]="{
+                    'bg-green-100 text-green-800': true
+                  }"
+                    >
+                    {{ tenant?.name || '_' }}
+                  </span>
+                }
+              </div>
+            </ng-template>
+    
+            <ng-template pTemplate="item" let-item>
+              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
+              <ng-container >
+                <!-- *hasPermission="item.requiredPolicy" -->
+                <a
+    
+                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
+                  [ngClass]="item.styleClass || ''"
+                  (click)="item.command ? item.command() : null"
+                  [routerLink]="item.routerLink ? item.routerLink : null"
+                  tabindex="0"
+                  >
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
+                    <span class="text-gray-700">{{ item.label | translate }}</span>
+                  }
+                </a>
+              </ng-container>
+            </ng-template>
+          </p-menu>
+        </div>
+    
+        <!-- Logout Button (separate from menu) -->
+        <!-- <button
+        type="button"
+        class="layout-topbar-action"
+        (click)="logout()"
+        title="تسجيل الخروج"
+        >
+        <i class="pi pi-sign-out"></i>
+      </button> -->
+    </div>
+    </header>
+    `
+                }]
+        }], ctorParameters: () => [] });
+
+class RoutesComponent {
+    subSidebarVisible = false;
+    sidebarVisible = true;
+    isMobile = false;
+    router = inject(Router);
+    localization = inject(LocalizationService);
+    layoutService = inject(LayoutService);
+    routesService = inject(RoutesService);
+    configState = inject(ConfigStateService);
+    secondToLastLevel$;
+    _menuItemsSubject = new BehaviorSubject([]);
+    // menuItems$!: Observable<MenuItem[]>;
+    menuItems$ = this._menuItemsSubject.asObservable();
+    constructor() {
+        // this.menuItems$ = this.routesService.visible$.pipe(
+        //   map(routes => this.buildItems(routes).map(item => ({ ...item, expanded: true })))
+        // );
+        this.routesService.visible$.pipe(map(routes => this.buildItems(routes).map(item => ({ ...item, expanded: true })))).subscribe(items => this._menuItemsSubject.next(items));
+    }
+    ngOnInit() {
+        this.checkViewport();
+        this.secondToLastLevel$ = this.menuItems$.pipe(map(items => {
+            const result = [];
+            for (const item of items) {
+                if (item.items && item.items.length > 0) {
+                    // إضافة جميع الأبناء المباشرين (المستوى الثاني)
+                    result.push(...item.items);
+                }
+            }
+            return result;
+        }));
+        //   this.secondToLastLevel$ = this.menuItems$.pipe(
+        //   map(items => this.getSecondToLastLevel(items))
+        // );
+    }
+    getSecondToLastLevel(items) {
+        const result = [];
+        const traverse = (nodes) => {
+            for (const node of nodes) {
+                if (node.items && node.items.length > 0) {
+                    // Check if any child has its own children
+                    const hasGrandChildren = node.items.some(c => c.items && c.items.length > 0);
+                    if (!hasGrandChildren) {
+                        // Node is right before the last level
+                        result.push(node);
+                    }
+                    else {
+                        traverse(node.items);
+                    }
+                }
+            }
+        };
+        traverse(items);
+        return result;
+    }
+    onParentClick(item) {
+        // toggle expand
+        item.expanded = !item.expanded;
+        // TODO: Navigate to shell route if needed
+        // if (item.items?.length) {
+        //   // Navigate to shell route
+        //   // Split the path into segments for Angular
+        //   const pathSegments = item.routerLink
+        //     ? (Array.isArray(item.routerLink) ? item.routerLink : item.routerLink.split('/').filter(Boolean))
+        //     : [];
+        //   this.router.navigate(pathSegments);
+        // } else if (item.routerLink) {
+        //   const pathSegments = Array.isArray(item.routerLink) ? item.routerLink : item.routerLink.split('/').filter(Boolean);
+        //   this.router.navigate(pathSegments);
+        // }
+        // this.subSidebarVisible = true;
+    }
+    onResize() { this.checkViewport(); }
+    checkViewport() {
+        this.isMobile = window.innerWidth < 1024;
+        if (this.isMobile) {
+            this.sidebarVisible = false;
+            this.subSidebarVisible = false;
+        }
+        else {
+            this.sidebarVisible = true;
+            this.subSidebarVisible = true;
+        }
+    }
+    toggleAll() {
+        if (this.isMobile) {
+            this.sidebarVisible = !this.sidebarVisible;
+            this.subSidebarVisible = this.sidebarVisible;
+        }
+        else {
+            this.subSidebarVisible = !this.subSidebarVisible;
+        }
+    }
+    openMenu() {
+        this.sidebarVisible = true;
+        this.subSidebarVisible = true;
+    }
+    expandPath(items, target) {
+        for (const item of items) {
+            if (item === target)
+                return true;
+            if (item.items && item.items.length > 0) {
+                const found = this.expandPath(item.items, target);
+                if (found) {
+                    item.expanded = true; // expand parent
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    onMainClick(target) {
+        const items = this._menuItemsSubject.value;
+        const isExternal = target.isExternal ?? false;
+        if (!target.items?.length) {
+            if (isExternal && target.url) {
+                window.open(target.url, '_blank', 'noopener,noreferrer');
+                if (this.isMobile)
+                    this.closeMenu();
+                this.expandPath(items, target);
+                this._menuItemsSubject.next([...items]);
+                return;
+            }
+            if (target.routerLink) {
+                const currentUrl = this.router.url;
+                const targetUrl = Array.isArray(target.routerLink)
+                    ? target.routerLink[0]
+                    : target.routerLink;
+                if (currentUrl !== targetUrl) {
+                    this.router.navigate(Array.isArray(target.routerLink) ? target.routerLink : [target.routerLink]);
+                }
+                if (this.isMobile)
+                    this.closeMenu();
+                this.expandPath(items, target);
+                this._menuItemsSubject.next([...items]);
+                return;
+            }
+        }
+        target.expanded = !target.expanded;
+        this.subSidebarVisible = target.expanded;
+        this._menuItemsSubject.next([...items]);
+    }
+    toggleExpand(item) {
+        item.expanded = !item.expanded;
+    }
+    closeMenu() {
+        this.subSidebarVisible = false;
+        this.sidebarVisible = false;
+        this.menuItems$.subscribe(items => {
+            items.forEach(item => item.expanded = false);
+        });
+    }
+    // @HostListener('document:keydown.escape')
+    // onEsc() {
+    //   this.closeMenu();
+    //  }
+    onNavigate() {
+        if (this.isMobile) {
+            this.closeMenu();
+        }
+    }
+    buildItems(routes) {
+        return routes
+            .filter(r => !r.requiredPolicy || this.hasPermission(r.requiredPolicy))
+            .map(r => this.createItem(r));
+    }
+    createItem(route) {
+        const item = {
+            label: route.name,
+            icon: route.iconClass,
+            // routerLink: route.path ? [route.path] : undefined,
+            title: route.name,
+            expanded: false
+        };
+        if (route.isExternal) {
+            item.url = route.path;
+            item.target = '_blank';
+        }
+        else if (route.path) {
+            item.routerLink = [route.path];
+        }
+        item.isExternal = route.isExternal ?? false;
+        item.addRoute = route.addRoute ?? '';
+        if (this.routesService.hasChildren(route.name)) {
+            item.items = this.buildItems(route.children ?? []);
+        }
+        else {
+            // TODO: check if grant permission
+            //     if(){
+            //       item['actionButtons']= [
+            //   {
+            //     icon: 'pi pi-plus',
+            //     tooltip: 'ADD',
+            //     click: (item:any, event:any) => {
+            //       this.router.navigate([route.path,'add']);
+            //     },
+            //     visible: (item:any) => true
+            //   }
+            // ];
+            //     }
+        }
+        return item;
+    }
+    hasPermission(policy) {
+        // implement using  permission service
+        return true;
+    }
+    getLinkProps(item) {
+        const isExternal = item.isExternal ?? false;
+        return {
+            isExternal,
+            href: isExternal ? item.url ?? null : null,
+            routerLink: !isExternal ? item.routerLink ?? null : null,
+            addRoute: item.addRoute ?? ''
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoutesComponent, isStandalone: true, selector: "app-routes", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n     class=\"w-65 border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n            shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n  <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span>{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span>{{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.render-menu-container span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-routes', standalone: true, imports: [CommonModule, RouterModule, TooltipModule, TranslatePipe, StyleClassModule], template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n     class=\"w-65 border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n            shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n  <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span>{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span>{{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.render-menu-container span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class AuthWrapperComponent {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AuthWrapperComponent, isStandalone: true, selector: "abp-auth-wrapper", ngImport: i0, template: " <ng-content></ng-content>\n\n\n<!-- <div class=\"row\">\n  <div class=\"mx-auto col col-md-5\">\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\n      <abp-tenant-box\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\n      ></abp-tenant-box>\n    }\n\n    <div class=\"abp-account-container\">\n      @if (service.enableLocalLogin$ | async) {\n        <div class=\"card mt-3 shadow-sm rounded\">\n          <div class=\"card-body p-5\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      } @else {\n        <div class=\"alert alert-warning\">\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\n        </div>\n      }\n    </div>\n  </div>\n</div> -->\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [], selector: 'abp-auth-wrapper', template: " <ng-content></ng-content>\n\n\n<!-- <div class=\"row\">\n  <div class=\"mx-auto col col-md-5\">\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\n      <abp-tenant-box\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\n      ></abp-tenant-box>\n    }\n\n    <div class=\"abp-account-container\">\n      @if (service.enableLocalLogin$ | async) {\n        <div class=\"card mt-3 shadow-sm rounded\">\n          <div class=\"card-body p-5\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      } @else {\n        <div class=\"alert alert-warning\">\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\n        </div>\n      }\n    </div>\n  </div>\n</div> -->\n" }]
+        }], ctorParameters: () => [] });
+
+class AccountLayoutComponent {
+    service;
+    // required for dynamic component
+    static type = eLayoutType.account;
+    authWrapperKey = 'Account.AuthWrapperComponent';
+    constructor(service) {
+        this.service = service;
+    }
+    ngAfterViewInit() {
+        // this.service.subscribeWindowSize();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AccountLayoutComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AccountLayoutComponent, isStandalone: true, selector: "abp-layout-account", providers: [LayoutService, SubscriptionService], ngImport: i0, template: " <abp-auth-wrapper\n    *abpReplaceableTemplate=\"{\n      componentKey: authWrapperKey\n    }\"\n  >\n    <router-outlet #outlet=\"outlet\"></router-outlet>\n  </abp-auth-wrapper>\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AuthWrapperComponent, selector: "abp-auth-wrapper" }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AccountLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, AuthWrapperComponent, ReplaceableTemplateDirective], selector: 'abp-layout-account', providers: [LayoutService, SubscriptionService], template: " <abp-auth-wrapper\n    *abpReplaceableTemplate=\"{\n      componentKey: authWrapperKey\n    }\"\n  >\n    <router-outlet #outlet=\"outlet\"></router-outlet>\n  </abp-auth-wrapper>\n" }]
+        }], ctorParameters: () => [{ type: LayoutService }] });
+
+class ApplicationLayoutComponent {
+    layoutService;
+    renderer;
+    router;
+    _zone;
+    translate;
+    localization = inject(LocalizationService);
+    service = inject(LayoutService);
+    platformId = inject(PLATFORM_ID);
+    // required for dynamic component
+    static type = eLayoutType.application;
+    overlayMenuOpenSubscription;
+    // @Input() showTopbar= true;
+    menuOutsideClickListener;
+    sessionState = inject(SessionStateService);
+    constructor(layoutService, renderer, router, _zone, 
+    // private _signalRService:SignalRService,
+    translate) {
+        this.layoutService = layoutService;
+        this.renderer = renderer;
+        this.router = router;
+        this._zone = _zone;
+        this.translate = translate;
+        var isBrowser = isPlatformBrowser(this.platformId);
+        if (isBrowser) {
+            var currentLanguage = 'ar';
+            const savedLanguage = localStorage.getItem('language');
+            var lang = this.sessionState.getLanguage();
+            if (savedLanguage) {
+                currentLanguage = savedLanguage;
+            }
+            if (lang) {
+                currentLanguage = lang;
+            }
+            try {
+                // this.translate.use(currentLanguage).subscribe(() => {
+                //    this.sessionState.setLanguage(currentLanguage);
+                // });
+                this.sessionState.setLanguage(currentLanguage);
+            }
+            catch (error) {
+            }
+            this.updateHtmlDirection(currentLanguage);
+            const saved = localStorage.getItem('darkTheme');
+            this.layoutService.layoutConfig.update((state) => ({ ...state, darkTheme: saved === 'true' }));
+        }
+        this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
+                    if (this.isOutsideClicked(event)) {
+                        this.hideMenu();
+                    }
+                });
+            }
+            if (this.layoutService.layoutState().staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+            this.hideMenu();
+        });
+    }
+    updateHtmlDirection(languageCode) {
+        const htmlElement = document.documentElement;
+        if (languageCode === 'ar' || languageCode.includes('ar-')) {
+            htmlElement.setAttribute('dir', 'rtl');
+            htmlElement.classList.add('rtl');
+        }
+        else {
+            //TODO
+            htmlElement.setAttribute('dir', 'ltr');
+            htmlElement.classList.remove('rtl');
+        }
+    }
+    isOutsideClicked(event) {
+        if (typeof document === 'undefined')
+            return;
+        const sidebarEl = document.querySelector('.layout-sidebar');
+        const topbarEl = document.querySelector('.layout-menu-button');
+        const eventTarget = event.target;
+        return !(sidebarEl?.isSameNode(eventTarget) || sidebarEl?.contains(eventTarget) || topbarEl?.isSameNode(eventTarget) || topbarEl?.contains(eventTarget));
+    }
+    hideMenu() {
+        this.layoutService.layoutState.update((prev) => ({ ...prev, overlayMenuActive: false, staticMenuMobileActive: false, menuHoverActive: false }));
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+    blockBodyScroll() {
+        if (typeof document === 'undefined')
+            return;
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        }
+        else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+    unblockBodyScroll() {
+        if (typeof document === 'undefined')
+            return;
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        }
+        else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+    get containerClass() {
+        return {
+            'layout-overlay': this.layoutService.layoutConfig().menuMode === 'overlay',
+            'layout-static': this.layoutService.layoutConfig().menuMode === 'static',
+            'layout-static-inactive': this.layoutService.layoutState().staticMenuDesktopInactive && this.layoutService.layoutConfig().menuMode === 'static',
+            'layout-overlay-active': this.layoutService.layoutState().overlayMenuActive,
+            'layout-mobile-active': this.layoutService.layoutState().staticMenuMobileActive
+        };
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        if (this.overlayMenuOpenSubscription) {
+            this.overlayMenuOpenSubscription.unsubscribe();
+        }
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+        }
+    }
+    ngAfterViewInit() {
+        // this.service.subscribeWindowSize();
+        try {
+            var mainColor = "hsl(195,64.7%,26.2%";
+            document.body.style.setProperty('--main-theme-color', mainColor);
+            // document.documentElement.style.setProperty('--main-theme-color', this.apptheme.mainColor);
+            // Find the <meta> tag with the name "theme-color"
+            var metaTag = document.querySelector('meta[name="theme-color"]');
+            // Check if the <meta> tag exists
+            if (metaTag) {
+                // Update the value of the content attribute
+                metaTag.setAttribute('content', mainColor);
+            }
+            var metaTag1 = document.querySelector('meta[name="apple-mobile-web-status-bar"]');
+            // Check if the <meta> tag exists
+            if (metaTag1) {
+                // Update the value of the content attribute
+                metaTag1.setAttribute('content', mainColor);
+            }
+        }
+        catch (error) {
+        }
+        try {
+            Swal.close();
+        }
+        catch (error) {
+        }
+        try {
+            // new StyleLoaderService()
+            //       .load(
+            //         "https://site-assets.fontawesome.com/releases/v6.7.2/css/all.css",
+            //           "https://cdn.jsdelivr.net/npm/primeicons@7.0.0/primeicons.min.css",
+            //           // "/assets/filepond.min.css",
+            //           // "/assets/bootstrap-datepicker.min.css",
+            //           // "/assets/activereports/styles/ar-js-viewer.css",
+            //           // "/assets/activereports/styles/ar-js-ui.css",
+            //       )
+            //       .then(() => {
+            //       });
+        }
+        catch (error) {
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ApplicationLayoutComponent, deps: [{ token: LayoutService }, { token: i0.Renderer2 }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i3$3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ApplicationLayoutComponent, isStandalone: true, selector: "abp-layout-application", providers: [LayoutService, SubscriptionService], ngImport: i0, template: "\n\n<div class=\"flex h-screen overflow-hidden\">\n\n      <!-- Sidebar stays fixed -->\n\n     <app-routes\n            *abpReplaceableTemplate=\"{\n              componentKey: service.routesComponentKey,\n              inputs: { smallScreen: { value: service.smallScreen } }\n            }\"\n            class=\"mb-2 md:mb-0\"\n          ></app-routes>\n\n      <!-- Main content scrolls -->\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\n\n        <!-- Optional Topbar -->\n          <!-- @if (showTopbar) { -->\n\n           <app-nav-items\n          *abpReplaceableTemplate=\"{\n            componentKey: service.navItemsComponentKey\n          }\"\n        ></app-nav-items>\n\n        <!-- p-6 space-y-6 -->\n        <div class=\"flex-1 overflow-y-auto\">\n          <router-outlet #outlet=\"outlet\"></router-outlet>\n        </div>\n\n        <!-- <app-footer></app-footer> -->\n\n      </main>\n\n    </div>\n\n", dependencies: [{ kind: "component", type: RoutesComponent, selector: "app-routes" }, { kind: "component", type: NavItemsComponent, selector: "app-nav-items" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }], animations: [ /* slideFromBottom, */ /* appModuleAnimation() */] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ApplicationLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, ReplaceableTemplateDirective], selector: 'abp-layout-application', animations: [ /* slideFromBottom, */ /* appModuleAnimation() */], providers: [LayoutService, SubscriptionService], template: "\n\n<div class=\"flex h-screen overflow-hidden\">\n\n      <!-- Sidebar stays fixed -->\n\n     <app-routes\n            *abpReplaceableTemplate=\"{\n              componentKey: service.routesComponentKey,\n              inputs: { smallScreen: { value: service.smallScreen } }\n            }\"\n            class=\"mb-2 md:mb-0\"\n          ></app-routes>\n\n      <!-- Main content scrolls -->\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\n\n        <!-- Optional Topbar -->\n          <!-- @if (showTopbar) { -->\n\n           <app-nav-items\n          *abpReplaceableTemplate=\"{\n            componentKey: service.navItemsComponentKey\n          }\"\n        ></app-nav-items>\n\n        <!-- p-6 space-y-6 -->\n        <div class=\"flex-1 overflow-y-auto\">\n          <router-outlet #outlet=\"outlet\"></router-outlet>\n        </div>\n\n        <!-- <app-footer></app-footer> -->\n\n      </main>\n\n    </div>\n\n" }]
+        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.Renderer2 }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i3$3.LocalizationService }] });
+
+class EmptyLayoutComponent {
+    static type = eLayoutType.empty;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: EmptyLayoutComponent, isStandalone: true, selector: "abp-layout-empty", ngImport: i0, template: ` <router-outlet></router-outlet> `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [RouterModule],
+                    selector: 'abp-layout-empty',
+                    template: ` <router-outlet></router-outlet> `,
+                }]
+        }] });
+
+// export * from './validation-error/validation-error.component';
+
+const BASIC_THEME_NAV_ITEM_PROVIDERS = [
+    provideAppInitializer(() => {
+        configureNavItems();
+    }),
+];
+function configureNavItems() {
+    const navItems = inject(NavItemsService);
+    navItems.addItems([
+    // {
+    //   id: eThemeBasicComponents.Languages,
+    //   order: 100,
+    //   component: LanguagesComponent,
+    // },
+    // {
+    //   id: eThemeBasicComponents.CurrentUser,
+    //   order: 100,
+    //   component: CurrentUserComponent,
+    // },
+    ]);
+}
+
+const BASIC_THEME_STYLES_PROVIDERS = [
+    provideAppInitializer(() => {
+        const initializerFn = configureStyles(
+        // inject(DomInsertionService),
+        inject(ReplaceableComponentsService));
+        return initializerFn();
+    }),
+];
+function configureStyles(
+// domInsertion: DomInsertionService,
+replaceableComponents) {
+    return () => {
+        // domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
+        initLayouts(replaceableComponents);
+    };
+}
+function initLayouts(replaceableComponents) {
+    replaceableComponents.add({
+        key: "Theme.ApplicationLayoutComponent" /* eThemeBasicComponents.ApplicationLayout */,
+        component: ApplicationLayoutComponent,
+    });
+    replaceableComponents.add({
+        key: "Theme.AccountLayoutComponent" /* eThemeBasicComponents.AccountLayout */,
+        component: AccountLayoutComponent,
+    });
+    replaceableComponents.add({
+        key: "Theme.EmptyLayoutComponent" /* eThemeBasicComponents.EmptyLayout */,
+        component: EmptyLayoutComponent,
+    });
+}
+
+const BASIC_THEME_USER_MENU_PROVIDERS = [
+    provideAppInitializer(() => {
+        const initializerFn = configureUserMenu(inject(Injector));
+        return initializerFn();
+    }),
+];
+function configureUserMenu(injector) {
+    const sessionService = injector.get(SessionStateService);
+    const userMenu = injector.get(UserMenuService);
+    const authService = injector.get(AuthService);
+    const navigateToManageProfile = injector.get(NAVIGATE_TO_MANAGE_PROFILE);
+    return () => {
+        userMenu.addItems([
+            //   // Only show when impersonated
+            //  ...(sessionService.impersonatorUserId
+            // ? [{
+            //     id: eUserMenuItems.BackToMyAccount,
+            //     order: 0,
+            //     textTemplate: { text: 'BackToMyAccount', icon: 'pi pi-user-undo' },
+            //     action: () => {
+            //       // this.backToMyAccount()
+            //     },
+            //   }]
+            // : [])
+            //     ,
+            //   {
+            //     id: eUserMenuItems.ChangePassword,
+            //     order: 1,
+            //     textTemplate: {
+            //       text: 'ChangePassword',
+            //       icon: 'pi pi-lock',
+            //     },
+            //     action: () => {
+            //       // this.changePassword()
+            //     },
+            //   },
+            //   {
+            //     id: eUserMenuItems.LoginAttempts,
+            //     order: 2,
+            //     textTemplate: {
+            //       text: 'LoginAttempts',
+            //       icon: 'pi pi-history',
+            //     },
+            //     action: () => {
+            //       // this.showLoginAttempts()
+            //     },
+            //   },
+            //   {
+            //     id: eUserMenuItems.MySettings,
+            //     order: 3,
+            //     textTemplate: {
+            //       text: 'MySettings',
+            //       icon: 'pi pi-cog',
+            //     },
+            //     // action: () => this.changeMySettings(),
+            //   },
+            //   // your existing high-order items
+            //   {
+            //     id: eUserMenuItems.MyAccount,
+            //     order: 100,
+            //     textTemplate: {
+            //       text: 'Account::MyAccount',
+            //       icon: 'pi pi-user-cog',
+            //     },
+            //     action: () => navigateToManageProfile(),
+            //   },
+            {
+                id: "UserMenu.Logout" /* eUserMenuItems.Logout */,
+                order: 101,
+                visible: (item) => true,
+                textTemplate: {
+                    // text: 'تسجيل الخروج',
+                    text: 'Logout',
+                    icon: 'pi pi-sign-out',
+                },
+                action: () => {
+                    authService.logout().subscribe();
+                    try {
+                        location.href = '/account/login';
+                    }
+                    catch (error) {
+                    }
+                },
+            },
+        ]
+        // filter out any nulls (e.g. when not impersonated)
+        );
+    };
+}
+
+function provideThemeBasicConfig() {
+    return makeEnvironmentProviders([
+        // BrowserAnimationsModule
+        BASIC_THEME_NAV_ITEM_PROVIDERS,
+        BASIC_THEME_USER_MENU_PROVIDERS,
+        BASIC_THEME_STYLES_PROVIDERS,
+        // {
+        //   provide: VALIDATION_ERROR_TEMPLATE,
+        //   useValue: ValidationErrorComponent,
+        // },
+        // {
+        //   provide: VALIDATION_TARGET_SELECTOR,
+        //   useValue: '.form-group',
+        // },
+        // {
+        //   provide: VALIDATION_INVALID_CLASSES,
+        //   useValue: 'is-invalid',
+        // },
+        // LazyStyleHandler,
+        // provideAppInitializer(() => {
+        //   inject(LazyStyleHandler);
+        // }),
+    ]);
+}
+
+const LAZY_STYLES = new InjectionToken('LAZY_STYLES');
+
+// export * from './constants';
+// export * from './handlers';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccountLayoutComponent, ApplicationLayoutComponent, AuthWrapperComponent, BASIC_THEME_NAV_ITEM_PROVIDERS, BASIC_THEME_STYLES_PROVIDERS, BASIC_THEME_USER_MENU_PROVIDERS, EmptyLayoutComponent, LAZY_STYLES, LayoutService, NavItemsComponent, RoutesComponent, configureNavItems, configureStyles, configureUserMenu, provideThemeBasicConfig };
+//# sourceMappingURL=es.framework-ng.ui.theme.mjs.map