@es.framework/ng.ui.theme 2.0.60 → 2.0.61

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

@@ -4,12 +4,12 @@ import { Subject, Observable, lastValueFrom, BehaviorSubject, map, filter } from
 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$1 from '@angular/router';
+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$2 from 'primeng/avatar';
+import * as i3$1 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import * as i5 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
@@ -18,8 +18,8 @@ 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 i3 from '@angular/forms';
+import { toSignal, takeUntilDestroyed } 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';
@@ -30,11 +30,11 @@ 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$1 from 'primeng/selectbutton';
+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 i4$1 from 'primeng/tooltip';
+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';
@@ -721,7 +721,7 @@ class AppConfigurator {
             </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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
+        `, isInline: true, dependencies: [{ kind: "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,
@@ -1067,7 +1067,7 @@ class NavItemsComponent {
       </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$1.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$2.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" }] });
+    `, 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,
@@ -1255,91 +1255,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class RoutesComponent {
-    subSidebarVisible = false;
-    sidebarVisible = true;
-    isMobile = false;
-    searchText = ''; // ✅ البحث
+class RoutesMenuService {
     router = inject(Router);
-    localization = inject(LocalizationService);
-    layoutService = inject(LayoutService);
     routesService = inject(RoutesService);
-    configState = inject(ConfigStateService);
-    secondToLastLevel$;
+    layoutService = inject(LayoutService);
+    sidebarVisible = true;
+    subSidebarVisible = false;
+    isMobile = false;
+    showTreeSearch = false;
+    searchText = '';
     _menuItemsSubject = new BehaviorSubject([]);
+    expandedStateBeforeSearch = null;
     menuItems$ = this._menuItemsSubject.asObservable();
-    constructor() {
-        this.routesService.visible$.pipe(map(routes => {
-            const items = this.buildItems(routes);
-            // ✅ فتح الشجرة كاملة عند الدخول للنظام
-            // this.setExpandedRecursive(items, true);
-            return items;
-        })).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;
-        }));
-        // ✅ إظهار الشجرة الفرعية مفتوحة في الديسكتوب عند الدخول
-        if (!this.isMobile) {
-            this.sidebarVisible = true;
-            this.subSidebarVisible = true;
-        }
-    }
-    setExpandedRecursive(items, expanded) {
+    secondToLastLevel$ = this.menuItems$.pipe(map((items) => {
+        const result = [];
         for (const item of items) {
-            item.expanded = expanded;
             if (item.items?.length) {
-                this.setExpandedRecursive(item.items, expanded);
+                result.push(...item.items);
             }
         }
+        return result;
+    }));
+    constructor() {
+        this.routesService.visible$
+            .pipe(map((routes) => this.buildItems(routes)), takeUntilDestroyed())
+            .subscribe((items) => this.setItems(items));
+    }
+    get items() {
+        return this._menuItemsSubject.value;
+    }
+    setItems(items) {
+        this.setExpandedByLevel(items);
+        this._menuItemsSubject.next(items);
+    }
+    refresh() {
+        this._menuItemsSubject.next([...this.items]);
     }
     expandAll() {
-        const items = this._menuItemsSubject.value;
-        this.setExpandedRecursive(items, true);
+        this.setExpandedRecursive(this.items, true);
         this.subSidebarVisible = true;
-        this._menuItemsSubject.next([...items]);
+        this.refresh();
     }
     collapseAll() {
-        const items = this._menuItemsSubject.value;
-        this.setExpandedRecursive(items, false);
-        this._menuItemsSubject.next([...items]);
+        this.setExpandedRecursive(this.items, false);
+        this.refresh();
     }
-    onSearchChange() {
-        const items = this._menuItemsSubject.value;
+    search(keyword) {
+        if (!this.expandedStateBeforeSearch) {
+            this.expandedStateBeforeSearch = this.captureExpandedState(this.items);
+        }
+        this.searchText = keyword;
         if (!this.searchText.trim()) {
-            // ✅ عند مسح البحث ترجع مغلقة مثل البداية
-            this.setExpandedRecursive(items, false);
-            this._menuItemsSubject.next([...items]);
+            this.restoreExpandedStateBeforeSearch();
+            this.refresh();
             return;
         }
-        // ✅ أثناء البحث يفتح فقط المسارات المطابقة
-        this.expandMatchedParents(items, this.searchText);
-        this._menuItemsSubject.next([...items]);
+        this.expandMatchedParents(this.items, this.searchText);
+        this.refresh();
     }
-    expandMatchedParents(items, keyword) {
-        const term = keyword.trim().toLowerCase();
-        let hasMatch = false;
-        for (const item of items) {
-            const label = String(item.label ?? '').toLowerCase();
-            const title = String(item.title ?? '').toLowerCase();
-            const selfMatch = label.includes(term) || title.includes(term);
-            const childMatch = item.items?.length
-                ? this.expandMatchedParents(item.items, keyword)
-                : false;
-            item.expanded = !!childMatch || !!selfMatch;
-            if (selfMatch || childMatch) {
-                hasMatch = true;
-            }
+    clearSearch() {
+        this.searchText = '';
+        this.restoreExpandedStateBeforeSearch();
+        this.refresh();
+    }
+    toggleSearch() {
+        this.showTreeSearch = !this.showTreeSearch;
+        if (!this.showTreeSearch) {
+            this.clearSearch();
         }
-        return hasMatch;
     }
     isSearchMatch(item) {
         const term = this.searchText.trim().toLowerCase();
@@ -1349,86 +1332,39 @@ class RoutesComponent {
         const title = String(item.title ?? '').toLowerCase();
         return label.includes(term) || title.includes(term);
     }
-    clearSearch() {
-        this.searchText = '';
-        const items = this._menuItemsSubject.value;
-        // ✅ لا تفتح الكل عند مسح البحث
-        this.setExpandedRecursive(items, false);
-        this._menuItemsSubject.next([...items]);
-    }
-    getSecondToLastLevel(items) {
-        const result = [];
-        const traverse = (nodes) => {
-            for (const node of nodes) {
-                if (node.items && node.items.length > 0) {
-                    const hasGrandChildren = node.items.some(c => c.items && c.items.length > 0);
-                    if (!hasGrandChildren) {
-                        result.push(node);
-                    }
-                    else {
-                        traverse(node.items);
-                    }
-                }
-            }
-        };
-        traverse(items);
-        return result;
-    }
-    onParentClick(item) {
-        item.expanded = !item.expanded;
+    closeMenu() {
+        this.subSidebarVisible = false;
+        this.sidebarVisible = false;
     }
-    onResize() {
-        this.checkViewport();
+    openMenu() {
+        this.sidebarVisible = true;
+        this.subSidebarVisible = true;
     }
-    checkViewport() {
+    syncViewport() {
         this.isMobile = window.innerWidth < 1024;
+        this.layoutService.smallScreen = this.isMobile;
         if (this.isMobile) {
             this.sidebarVisible = false;
             this.subSidebarVisible = false;
+            return;
         }
-        else {
-            this.sidebarVisible = true;
-            // ✅ خلي الشجرة ظاهرة في الديسكتوب
-            this.subSidebarVisible = true;
-        }
+        this.sidebarVisible = true;
+        this.subSidebarVisible = true;
     }
-    toggleAll() {
+    toggleSidebar() {
         if (this.isMobile) {
             this.sidebarVisible = !this.sidebarVisible;
             this.subSidebarVisible = this.sidebarVisible;
+            return;
         }
-        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;
-                    return true;
-                }
-            }
-        }
-        return false;
+        this.subSidebarVisible = !this.subSidebarVisible;
     }
-    onMainClick(target) {
-        const items = this._menuItemsSubject.value;
+    activateItem(target) {
         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]);
+                this.afterNavigate(target);
                 return;
             }
             if (target.routerLink) {
@@ -1437,42 +1373,93 @@ class RoutesComponent {
                     ? target.routerLink[0]
                     : target.routerLink;
                 if (currentUrl !== targetUrl) {
-                    this.router.navigate(Array.isArray(target.routerLink) ? target.routerLink : [target.routerLink]);
+                    this.router.navigate(Array.isArray(target.routerLink)
+                        ? target.routerLink
+                        : [target.routerLink]);
                 }
-                if (this.isMobile)
-                    this.closeMenu();
-                this.expandPath(items, target);
-                this._menuItemsSubject.next([...items]);
+                this.afterNavigate(target);
                 return;
             }
         }
         target.expanded = !target.expanded;
-        this.subSidebarVisible = target.expanded;
-        this._menuItemsSubject.next([...items]);
+        this.subSidebarVisible = true;
+        this.refresh();
+    }
+    closeAfterNavigate() {
+        if (this.isMobile) {
+            this.closeMenu();
+        }
     }
-    toggleExpand(item) {
+    getLinkProps(item) {
+        const isExternal = item.isExternal ?? false;
+        return {
+            isExternal,
+            href: isExternal ? (item.url ?? null) : null,
+            routerLink: !isExternal ? (item.routerLink ?? null) : null,
+            addRoute: item.addRoute ?? '',
+        };
+    }
+    expandPath(target) {
+        const found = this.expandPathRecursive(this.items, target);
+        this.refresh();
+        return found;
+    }
+    toggleItem(item) {
         item.expanded = !item.expanded;
+        this.refresh();
     }
-    closeMenu() {
-        this.subSidebarVisible = false;
-        this.sidebarVisible = false;
+    setExpandedByLevel(items, level = 1) {
+        for (const item of items) {
+            item.expanded = level === 1;
+            if (item.items?.length) {
+                this.setExpandedByLevel(item.items, level + 1);
+            }
+        }
     }
-    onNavigate() {
+    captureExpandedState(items) {
+        const state = new WeakMap();
+        const traverse = (nodes) => {
+            for (const node of nodes) {
+                state.set(node, node.expanded === true);
+                if (node.items?.length) {
+                    traverse(node.items);
+                }
+            }
+        };
+        traverse(items);
+        return state;
+    }
+    restoreExpandedStateBeforeSearch() {
+        if (!this.expandedStateBeforeSearch)
+            return;
+        const traverse = (nodes) => {
+            for (const node of nodes) {
+                node.expanded = this.expandedStateBeforeSearch?.get(node) ?? false;
+                if (node.items?.length) {
+                    traverse(node.items);
+                }
+            }
+        };
+        traverse(this.items);
+        this.expandedStateBeforeSearch = null;
+    }
+    afterNavigate(target) {
         if (this.isMobile) {
             this.closeMenu();
         }
+        this.expandPath(target);
     }
     buildItems(routes) {
         return routes
-            .filter(r => !r.requiredPolicy || this.hasPermission(r.requiredPolicy))
-            .map(r => this.createItem(r));
+            .filter((route) => !route.requiredPolicy || this.hasPermission(route.requiredPolicy))
+            .map((route) => this.createItem(route));
     }
     createItem(route) {
         const item = {
             label: route.name,
             icon: route.iconClass,
             title: route.name,
-            expanded: false // ✅ بدل false، افتح كل عنصر افتراضياً
+            expanded: false,
         };
         if (route.isExternal) {
             item.url = route.path;
@@ -1491,38 +1478,104 @@ class RoutesComponent {
     hasPermission(policy) {
         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 ?? ''
-        };
+    setExpandedRecursive(items, expanded) {
+        for (const item of items) {
+            item.expanded = expanded;
+            if (item.items?.length) {
+                this.setExpandedRecursive(item.items, expanded);
+            }
+        }
     }
-    showTreeSearch = false;
-    toggleTreeSearch() {
-        this.showTreeSearch = !this.showTreeSearch;
-        if (!this.showTreeSearch) {
-            this.clearSearch();
+    expandMatchedParents(items, keyword) {
+        const term = keyword.trim().toLowerCase();
+        let hasMatch = false;
+        for (const item of items) {
+            const label = String(item.label ?? '').toLowerCase();
+            const title = String(item.title ?? '').toLowerCase();
+            const selfMatch = label.includes(term) || title.includes(term);
+            const childMatch = item.items?.length
+                ? this.expandMatchedParents(item.items, keyword)
+                : false;
+            item.expanded = !!childMatch || !!selfMatch;
+            if (selfMatch || childMatch) {
+                hasMatch = true;
+            }
         }
+        return hasMatch;
+    }
+    expandPathRecursive(items, target) {
+        for (const item of items) {
+            if (item === target)
+                return true;
+            if (item.items?.length) {
+                const found = this.expandPathRecursive(item.items, target);
+                if (found) {
+                    item.expanded = true;
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesMenuService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesMenuService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class RoutesSearchComponent {
+    menu = inject(RoutesMenuService);
+    closeMenu() {
+        this.menu.closeMenu();
+    }
+    expandAll() {
+        this.menu.expandAll();
+    }
+    collapseAll() {
+        this.menu.collapseAll();
+    }
+    toggleSearch() {
+        this.menu.toggleSearch();
+    }
+    onSearchTextChange(value) {
+        this.menu.search(value);
+    }
+    clearSearch() {
+        this.menu.clearSearch();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoutesSearchComponent, isStandalone: true, selector: "app-routes-search", ngImport: i0, template: "<div class=\"mb-4 space-y-3\">\r\n  <div class=\"flex items-center justify-between gap-3\">\r\n    <button\r\n      type=\"button\"\r\n      (click)=\"closeMenu()\"\r\n      class=\"inline-flex h-9 items-center gap-1.5 rounded-full px-2 ps-1.5 pe-3 text-sm font-bold text-slate-500 transition hover:bg-primary-50 hover:text-primary-600 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n    >\r\n      <i class=\"pi pi-angle-right text-sm\"></i>\r\n      <span>{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"inline-flex items-center gap-1\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 items-center justify-center rounded-xl border border-slate-300/25 bg-slate-50/85 text-slate-500 transition hover:-translate-y-px hover:border-primary-500/25 hover:bg-primary-50 hover:text-primary-600 dark:border-slate-400/15 dark:bg-gray-800/75 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n        (click)=\"expandAll()\"\r\n        pTooltip=\"\u0641\u062A\u062D \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n        tooltipPosition=\"top\"\r\n      >\r\n        <i class=\"pi pi-plus text-xs\"></i>\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 items-center justify-center rounded-xl border border-slate-300/25 bg-slate-50/85 text-slate-500 transition hover:-translate-y-px hover:border-primary-500/25 hover:bg-primary-50 hover:text-primary-600 dark:border-slate-400/15 dark:bg-gray-800/75 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n        (click)=\"collapseAll()\"\r\n        pTooltip=\"\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n        tooltipPosition=\"top\"\r\n      >\r\n        <i class=\"pi pi-minus text-xs\"></i>\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 items-center justify-center rounded-xl border transition hover:-translate-y-px\"\r\n        [ngClass]=\"\r\n          menu.showTreeSearch\r\n            ? 'border-transparent bg-primary-600 text-white shadow-lg shadow-primary-500/20'\r\n            : 'border-primary-500/20 bg-primary-500/10 text-primary-600 hover:bg-primary-50 dark:text-primary-300 dark:hover:bg-primary-500/10'\r\n        \"\r\n        (click)=\"toggleSearch()\"\r\n        pTooltip=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A\"\r\n        tooltipPosition=\"top\"\r\n      >\r\n        <i class=\"pi pi-search text-xs\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  @if (menu.showTreeSearch) {\r\n    <div\r\n      class=\"animate-slideIn rounded-2xl border border-white/45 bg-white/60 p-2 shadow-lg shadow-slate-900/10 backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70\"\r\n    >\r\n      <div class=\"relative flex items-center\">\r\n        <i\r\n          class=\"pi pi-search pointer-events-none absolute right-3 text-sm text-primary-500 dark:text-primary-300\"\r\n        ></i>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [ngModel]=\"menu.searchText\"\r\n          (ngModelChange)=\"onSearchTextChange($event)\"\r\n          placeholder=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A...\"\r\n          class=\"h-10 w-full rounded-2xl border border-slate-300/30 bg-slate-50/85 py-0 pl-9 pr-10 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-primary-500/50 focus:bg-white focus:ring-4 focus:ring-primary-500/10 dark:border-slate-400/20 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-slate-500 dark:focus:bg-gray-900\"\r\n        />\r\n\r\n        @if (menu.searchText) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"absolute left-2 inline-flex h-7 w-7 items-center justify-center rounded-full text-slate-400 transition hover:bg-primary-50 hover:text-primary-600 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n            (click)=\"clearSearch()\"\r\n          >\r\n            <i class=\"pi pi-times text-xs\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: 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: 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: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-routes-search', standalone: true, imports: [CommonModule, FormsModule, TooltipModule, TranslatePipe], template: "<div class=\"mb-4 space-y-3\">\r\n  <div class=\"flex items-center justify-between gap-3\">\r\n    <button\r\n      type=\"button\"\r\n      (click)=\"closeMenu()\"\r\n      class=\"inline-flex h-9 items-center gap-1.5 rounded-full px-2 ps-1.5 pe-3 text-sm font-bold text-slate-500 transition hover:bg-primary-50 hover:text-primary-600 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n    >\r\n      <i class=\"pi pi-angle-right text-sm\"></i>\r\n      <span>{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"inline-flex items-center gap-1\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 items-center justify-center rounded-xl border border-slate-300/25 bg-slate-50/85 text-slate-500 transition hover:-translate-y-px hover:border-primary-500/25 hover:bg-primary-50 hover:text-primary-600 dark:border-slate-400/15 dark:bg-gray-800/75 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n        (click)=\"expandAll()\"\r\n        pTooltip=\"\u0641\u062A\u062D \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n        tooltipPosition=\"top\"\r\n      >\r\n        <i class=\"pi pi-plus text-xs\"></i>\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 items-center justify-center rounded-xl border border-slate-300/25 bg-slate-50/85 text-slate-500 transition hover:-translate-y-px hover:border-primary-500/25 hover:bg-primary-50 hover:text-primary-600 dark:border-slate-400/15 dark:bg-gray-800/75 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n        (click)=\"collapseAll()\"\r\n        pTooltip=\"\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n        tooltipPosition=\"top\"\r\n      >\r\n        <i class=\"pi pi-minus text-xs\"></i>\r\n      </button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"inline-flex h-8 w-8 items-center justify-center rounded-xl border transition hover:-translate-y-px\"\r\n        [ngClass]=\"\r\n          menu.showTreeSearch\r\n            ? 'border-transparent bg-primary-600 text-white shadow-lg shadow-primary-500/20'\r\n            : 'border-primary-500/20 bg-primary-500/10 text-primary-600 hover:bg-primary-50 dark:text-primary-300 dark:hover:bg-primary-500/10'\r\n        \"\r\n        (click)=\"toggleSearch()\"\r\n        pTooltip=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A\"\r\n        tooltipPosition=\"top\"\r\n      >\r\n        <i class=\"pi pi-search text-xs\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  @if (menu.showTreeSearch) {\r\n    <div\r\n      class=\"animate-slideIn rounded-2xl border border-white/45 bg-white/60 p-2 shadow-lg shadow-slate-900/10 backdrop-blur-xl dark:border-white/10 dark:bg-gray-900/70\"\r\n    >\r\n      <div class=\"relative flex items-center\">\r\n        <i\r\n          class=\"pi pi-search pointer-events-none absolute right-3 text-sm text-primary-500 dark:text-primary-300\"\r\n        ></i>\r\n\r\n        <input\r\n          type=\"text\"\r\n          [ngModel]=\"menu.searchText\"\r\n          (ngModelChange)=\"onSearchTextChange($event)\"\r\n          placeholder=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A...\"\r\n          class=\"h-10 w-full rounded-2xl border border-slate-300/30 bg-slate-50/85 py-0 pl-9 pr-10 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-primary-500/50 focus:bg-white focus:ring-4 focus:ring-primary-500/10 dark:border-slate-400/20 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder:text-slate-500 dark:focus:bg-gray-900\"\r\n        />\r\n\r\n        @if (menu.searchText) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"absolute left-2 inline-flex h-7 w-7 items-center justify-center rounded-full text-slate-400 transition hover:bg-primary-50 hover:text-primary-600 dark:text-slate-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300\"\r\n            (click)=\"clearSearch()\"\r\n          >\r\n            <i class=\"pi pi-times text-xs\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }] });
+
+class RoutesComponent {
+    menu = inject(RoutesMenuService);
+    ngOnInit() {
+        this.checkViewport();
+    }
+    onResize() {
+        this.checkViewport();
+    }
+    checkViewport() {
+        this.menu.syncViewport();
     }
     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\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\r\n\r\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\r\n  <div\r\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\r\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\r\n             text-white rounded-r-3xl\">\r\n\r\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\r\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\r\n      <button (click)=\"toggleAll()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n\r\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\r\n      @for (item of secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\r\n          <div (click)=\"onMainClick(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\r\n                        hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\r\n  @if (subSidebarVisible) {\r\n    <div\r\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\r\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\r\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\r\n     <!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<div class=\"tree-header mb-1\">\r\n\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"closeMenu()\"\r\n    class=\"tree-back-btn\">\r\n    <i class=\"pi pi-angle-right\"></i>\r\n    <span>{{ 'back' | translate }}</span>\r\n  </button>\r\n\r\n  <div class=\"tree-header-actions\">\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"expandAll()\"\r\n      pTooltip=\"\u0641\u062A\u062D \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-plus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"collapseAll()\"\r\n      pTooltip=\"\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-minus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-search-toggle\"\r\n      [ngClass]=\"{ 'active': showTreeSearch }\"\r\n      (click)=\"toggleTreeSearch()\"\r\n      pTooltip=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-search\"></i>\r\n    </button>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (showTreeSearch) {\r\n  <div class=\"tree-search-panel mb-4 animate-slideIn\">\r\n    <div class=\"tree-search\">\r\n      <i class=\"pi pi-search\"></i>\r\n\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"searchText\"\r\n        (input)=\"onSearchChange()\"\r\n        placeholder=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A...\"\r\n        class=\"tree-search-input\" />\r\n\r\n      @if (searchText) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"tree-search-clear\"\r\n          (click)=\"clearSearch()\">\r\n          <i class=\"pi pi-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n\r\n      <!-- Recursive rendering -->\r\n     @if (menuItems$ | async; as menuItems) {\r\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\r\n}\r\n\r\n<ng-template #renderMenu let-items let-level=\"level\">\r\n  @for (item of items; track item) {\r\n\r\n   @if (!item.items?.length) {\r\n  @let link = getLinkProps(item);\r\n <div class=\"mb-1\">\r\n  @if (link.isExternal) {\r\n    <a [href]=\"link.href\"\r\n       target=\"_blank\"\r\n       rel=\"noopener noreferrer\"\r\n       (click)=\"$event.stopPropagation()\"\r\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\">\r\n      <i [class]=\"item.icon + ' text-base'\"></i>\r\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\r\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n    </a>\r\n  } @else {\r\n    <div class=\"flex items-center gap-2\">\r\n      <a [routerLink]=\"link.routerLink\"\r\n         (click)=\"onNavigate()\"\r\n         routerLinkActive=\"active-link\"\r\n         [ngClass]=\"{ 'search-match': isSearchMatch(item) }\"\r\n         class=\"flex-1 min-w-0 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\">\r\n        <i [class]=\"item.icon + ' text-base'\"></i>\r\n        <span class=\"min-w-0 break-words whitespace-normal\">\r\n          {{ item.label | translate }}</span>\r\n      </a>\r\n\r\n@if (link.addRoute) {\r\n  <a\r\n    [routerLink]=\"[link.addRoute]\"\r\n    (click)=\"$event.stopPropagation(); onNavigate()\"\r\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\"\r\n    [pTooltip]=\"'ADD' | translate\"\r\n    tooltipPosition=\"top\">\r\n    <i class=\"pi pi-plus text-xs\"></i>\r\n  </a>\r\n}\r\n    </div>\r\n  }\r\n</div>\r\n}\r\n\r\n    @if (item.items?.length) {\r\n      <div class=\"mb-1\">\r\n\r\n        <div\r\n          (click)=\"onParentClick(item)\"\r\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\r\n[ngClass]=\"{\r\n  'font-bold': level === 1,\r\n  'font-semibold': level === 2,\r\n  'font-medium': level >= 3,\r\n  'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded,\r\n  'search-match': isSearchMatch(item)\r\n}\"\r\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\">\r\n\r\n          <div class=\"flex items-center gap-2\">\r\n\r\n            <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n            <span>\r\n              {{ item.label | translate }}\r\n            </span>\r\n\r\n          </div>\r\n\r\n          <i\r\n            class=\"pi\"\r\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\r\n            style=\"font-size:0.6rem;\">\r\n          </i>\r\n\r\n        </div>\r\n\r\n        @if (item.expanded) {\r\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\r\n            </ng-container>\r\n\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n  }\r\n</ng-template>\r\n\r\n  </div>\r\n}\r\n\r\n</aside>\r\n\r\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\r\n@if (isMobile && !sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\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}.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}.tree-back-btn{height:2.25rem;padding:0 .35rem 0 .75rem;display:inline-flex;align-items:center;gap:.35rem;color:#64748b;font-weight:700;border-radius:999px;transition:all .2s ease}.tree-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.tree-back-btn{height:2.35rem;padding:0 .45rem 0 .85rem;display:inline-flex;align-items:center;gap:.4rem;color:#64748b;font-size:.86rem;font-weight:700;border-radius:999px;transition:all .22s ease}.tree-back-btn:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-back-btn i{font-size:.85rem}.tree-header-actions{display:inline-flex;align-items:center;gap:.3rem}.tree-mini-btn,.tree-search-toggle{width:2rem;height:2rem;border-radius:.8rem;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f8fafcd9;border:1px solid rgba(148,163,184,.24);transition:all .2s ease}.tree-mini-btn i,.tree-search-toggle i{font-size:.72rem}.tree-mini-btn:hover,.tree-search-toggle:hover{color:var(--p-primary-600);background:var(--p-primary-50);border-color:rgba(var(--p-primary-500-rgb),.25);transform:translateY(-1px)}.tree-search-toggle{color:var(--p-primary-600);background:rgba(var(--p-primary-500-rgb),.08);border-color:rgba(var(--p-primary-500-rgb),.18)}.tree-search-toggle.active{color:#fff;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-600));border-color:transparent;box-shadow:0 8px 18px rgba(var(--p-primary-500-rgb),.22)}.tree-search-panel{padding:.65rem;border-radius:1.15rem;background:#ffffff94;border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 30px #0f172a14;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}.tree-search{position:relative;display:flex;align-items:center}.tree-search i.pi-search{position:absolute;right:.85rem;color:var(--p-primary-500);font-size:.85rem;z-index:1}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#ffffffd1;color:#334155;font-size:.86rem;outline:none;transition:all .25s ease}.tree-search-input:focus{border-color:var(--p-primary-400);box-shadow:0 0 0 4px rgba(var(--p-primary-500-rgb),.12);background:#fff}.tree-search-clear{position:absolute;left:.55rem;width:1.75rem;height:1.75rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f1f5f9e6;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50);transform:scale(1.05)}.tree-search-icon{position:absolute;right:.85rem;color:#94a3b8;font-size:.85rem;pointer-events:none}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:.95rem;border:1px solid rgba(148,163,184,.28);background:#f8fafcd1;color:#334155;font-size:.86rem;outline:none;transition:all .22s ease}.tree-search-input:focus{border-color:rgba(var(--p-primary-500-rgb),.45);background:#fff;box-shadow:0 0 0 3px rgba(var(--p-primary-500-rgb),.1)}.tree-search-input::placeholder{color:#94a3b8}.tree-search-clear{position:absolute;left:.55rem;width:1.65rem;height:1.65rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#94a3b8;background:transparent;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-search-clear i{font-size:.7rem}.dark .tree-back-btn{color:#cbd5e1}.dark .tree-back-btn:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.dark .tree-header-actions{background:#1f2937b8;border-color:#94a3b824}.dark .tree-icon-btn{color:#cbd5e1}.dark .tree-icon-btn:hover{color:#fff;background:var(--p-primary-600)}.dark .tree-search-icon{color:#64748b}.dark .tree-search-input{background:#1f2937bd;border-color:#94a3b829;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827eb;border-color:rgba(var(--p-primary-500-rgb),.48)}.dark .tree-search-input::placeholder{color:#64748b}.dark .tree-search-clear{color:#94a3b8}.dark .tree-search-clear:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.search-match{background:linear-gradient(to left,rgba(var(--p-primary-500-rgb),.16),transparent)!important;color:var(--p-primary-700)!important;border-right:3px solid var(--p-primary-500)!important;box-shadow:inset 0 0 0 1px rgba(var(--p-primary-500-rgb),.08)}.search-match span{font-weight:800!important}.search-match i{color:var(--p-primary-600)!important}.dark .tree-toolbar{background:#111827b8;border-color:#ffffff14}.dark .tree-search-input{background:#1f2937cc;border-color:#94a3b82e;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827f2}.dark .tree-search-clear{background:#374151e6;color:#cbd5e1}.dark .tree-action-btn{background:rgba(var(--p-primary-500-rgb),.12);color:var(--p-primary-300);border-color:rgba(var(--p-primary-500-rgb),.22)}.dark .tree-action-btn:hover{background:var(--p-primary-600);color:#fff}.dark .search-match{background:rgba(var(--p-primary-500-rgb),.18)!important;color:var(--p-primary-300)!important}\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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: // ✅ أضف هذا
-                TooltipModule }, { kind: "directive", type: i4$1.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: "ngmodule", type: ButtonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoutesComponent, isStandalone: true, selector: "app-routes", host: { listeners: { "window:resize": "onResize()" } }, providers: [RoutesMenuService], ngImport: i0, template: "<aside\r\n  class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !menu.sidebarVisible && menu.isMobile }\"\r\n>\r\n  <div\r\n    class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700 text-white rounded-r-3xl\"\r\n  >\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img\r\n        src=\"/assets/logo.png\"\r\n        alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"\r\n      />\r\n\r\n      <button\r\n        (click)=\"menu.toggleSidebar()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\"\r\n      >\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n      @for (item of menu.secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <div\r\n            (click)=\"menu.activateItem(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n            class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\"\r\n          >\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i\r\n        class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"\r\n      ></i>\r\n    </div>\r\n  </div>\r\n  @if (menu.subSidebarVisible) {\r\n    <div\r\n      class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': menu.isMobile }\"\r\n    >\r\n      <app-routes-search></app-routes-search>\r\n\r\n      <!-- Recursive rendering -->\r\n      @if (menu.menuItems$ | async; as menuItems) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            renderMenu;\r\n            context: { $implicit: menuItems, level: 1 }\r\n          \"\r\n        ></ng-container>\r\n      }\r\n\r\n      <ng-template #renderMenu let-items let-level=\"level\">\r\n        @for (item of items; track item) {\r\n          @if (!item.items?.length) {\r\n            @let link = menu.getLinkProps(item);\r\n            <div class=\"mb-1\">\r\n              @if (link.isExternal) {\r\n                <a\r\n                  [href]=\"link.href\"\r\n                  target=\"_blank\"\r\n                  rel=\"noopener noreferrer\"\r\n                  (click)=\"$event.stopPropagation()\"\r\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\"\r\n                >\r\n                  <i [class]=\"item.icon + ' text-base'\"></i>\r\n                  <span class=\"min-w-0 break-words whitespace-normal\">{{\r\n                    item.label | translate\r\n                  }}</span>\r\n                  <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n                </a>\r\n              } @else {\r\n                <div class=\"flex items-center gap-2\">\r\n                  <a\r\n                    [routerLink]=\"link.routerLink\"\r\n                    (click)=\"menu.closeAfterNavigate()\"\r\n                    routerLinkActive=\"active-link\"\r\n                    [ngClass]=\"{ 'search-match': menu.isSearchMatch(item) }\"\r\n                    class=\"flex-1 min-w-0 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\"\r\n                  >\r\n                    <i [class]=\"item.icon + ' text-base'\"></i>\r\n                    <span class=\"min-w-0 break-words whitespace-normal\">\r\n                      {{ item.label | translate }}</span\r\n                    >\r\n                  </a>\r\n\r\n                  @if (link.addRoute) {\r\n                    <a\r\n                      [routerLink]=\"[link.addRoute]\"\r\n                      (click)=\"\r\n                        $event.stopPropagation(); menu.closeAfterNavigate()\r\n                      \"\r\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\"\r\n                      [pTooltip]=\"'ADD' | translate\"\r\n                      tooltipPosition=\"top\"\r\n                    >\r\n                      <i class=\"pi pi-plus text-xs\"></i>\r\n                    </a>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (item.items?.length) {\r\n            <div class=\"mb-1\">\r\n              <div\r\n                (click)=\"menu.toggleItem(item)\"\r\n                [style.font-size.rem]=\"1.1 - level * 0.05\"\r\n                [ngClass]=\"{\r\n                  'font-bold': level === 1,\r\n                  'font-semibold': level === 2,\r\n                  'font-medium': level >= 3,\r\n                  'bg-primary-50 text-primary-700 border-r-4 border-primary-500':\r\n                    item.expanded,\r\n                  'search-match': menu.isSearchMatch(item),\r\n                }\"\r\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\"\r\n              >\r\n                <div class=\"flex items-center gap-2\">\r\n                  <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n                  <span>\r\n                    {{ item.label | translate }}\r\n                  </span>\r\n                </div>\r\n\r\n                <i\r\n                  class=\"pi\"\r\n                  [ngClass]=\"\r\n                    item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\r\n                  \"\r\n                  style=\"font-size: 0.6rem\"\r\n                >\r\n                </i>\r\n              </div>\r\n\r\n              @if (item.expanded) {\r\n                <div\r\n                  class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      renderMenu;\r\n                      context: { $implicit: item.items, level: level + 1 }\r\n                    \"\r\n                  >\r\n                  </ng-container>\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  }\r\n</aside>\r\n@if (menu.isMobile && !menu.sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"menu.openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\"\r\n  >\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\n", styles: ["@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-slideIn{animation:slideIn .3s ease-out}.glass-bg{background-color:#ffffffbf;--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.glass-bg:is(.dark *){background-color:#111827cc}.glass-bg{-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#94a3b84d}@media(max-width:1024px){aside{position:fixed;right:0;top:0;z-index:50;height:100vh}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;display:flex;height:60px;width:60px;align-items:center;justify-content:center;border-radius:9999px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700))}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{height:1.75rem;width:1.75rem;border-radius:.5rem}.active-link{border-radius:.5rem;--tw-bg-opacity: 1;background-color:color-mix(in srgb,var(--p-primary-50) calc(100% * var(--tw-bg-opacity, 1)),transparent);font-weight:600;--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-700) calc(100% * var(--tw-text-opacity, 1)),transparent);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.active-link:is(.dark *){background-color:color-mix(in srgb,var(--p-primary-500) 15%,transparent);--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-300) calc(100% * var(--tw-text-opacity, 1)),transparent)}.active-link{border-right:4px solid var(--p-primary-500)}.active-link span{font-weight:800}.active-link i{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-600) calc(100% * var(--tw-text-opacity, 1)),transparent)}.active-link i:is(.dark *){--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-300) calc(100% * var(--tw-text-opacity, 1)),transparent)}.search-match{color:var(--p-primary-700)!important;background:linear-gradient(to left,rgba(var(--p-primary-500-rgb),.16),transparent)!important;border-right:3px solid var(--p-primary-500)!important;box-shadow:inset 0 0 0 1px rgba(var(--p-primary-500-rgb),.08)}.search-match span{font-weight:800}.search-match i{color:var(--p-primary-600)!important}.dark .search-match{color:var(--p-primary-300)!important;background:rgba(var(--p-primary-500-rgb),.18)!important}\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: "component", type: RoutesSearchComponent, selector: "app-routes-search" }, { 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,
-                        FormsModule, // ✅ أضف هذا
                         TooltipModule,
                         TranslatePipe,
-                        StyleClassModule,
-                        ButtonModule
-                    ], template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\r\n\r\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\r\n  <div\r\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\r\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\r\n             text-white rounded-r-3xl\">\r\n\r\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\r\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\r\n      <button (click)=\"toggleAll()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n\r\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\r\n      @for (item of secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\r\n          <div (click)=\"onMainClick(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\r\n                        hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\r\n  @if (subSidebarVisible) {\r\n    <div\r\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\r\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\r\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\r\n     <!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<!-- \uD83D\uDD1D \u0631\u0623\u0633 \u0627\u0644\u0634\u062C\u0631\u0629 -->\r\n<div class=\"tree-header mb-1\">\r\n\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"closeMenu()\"\r\n    class=\"tree-back-btn\">\r\n    <i class=\"pi pi-angle-right\"></i>\r\n    <span>{{ 'back' | translate }}</span>\r\n  </button>\r\n\r\n  <div class=\"tree-header-actions\">\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"expandAll()\"\r\n      pTooltip=\"\u0641\u062A\u062D \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-plus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-mini-btn\"\r\n      (click)=\"collapseAll()\"\r\n      pTooltip=\"\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0634\u062C\u0631\u0629 \u0643\u0627\u0645\u0644\u0629\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-minus\"></i>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"tree-search-toggle\"\r\n      [ngClass]=\"{ 'active': showTreeSearch }\"\r\n      (click)=\"toggleTreeSearch()\"\r\n      pTooltip=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A\"\r\n      tooltipPosition=\"top\">\r\n      <i class=\"pi pi-search\"></i>\r\n    </button>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (showTreeSearch) {\r\n  <div class=\"tree-search-panel mb-4 animate-slideIn\">\r\n    <div class=\"tree-search\">\r\n      <i class=\"pi pi-search\"></i>\r\n\r\n      <input\r\n        type=\"text\"\r\n        [(ngModel)]=\"searchText\"\r\n        (input)=\"onSearchChange()\"\r\n        placeholder=\"\u0628\u062D\u062B \u062F\u0627\u062E\u0644 \u0627\u0644\u0634\u0627\u0634\u0627\u062A...\"\r\n        class=\"tree-search-input\" />\r\n\r\n      @if (searchText) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"tree-search-clear\"\r\n          (click)=\"clearSearch()\">\r\n          <i class=\"pi pi-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n\r\n      <!-- Recursive rendering -->\r\n     @if (menuItems$ | async; as menuItems) {\r\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\r\n}\r\n\r\n<ng-template #renderMenu let-items let-level=\"level\">\r\n  @for (item of items; track item) {\r\n\r\n   @if (!item.items?.length) {\r\n  @let link = getLinkProps(item);\r\n <div class=\"mb-1\">\r\n  @if (link.isExternal) {\r\n    <a [href]=\"link.href\"\r\n       target=\"_blank\"\r\n       rel=\"noopener noreferrer\"\r\n       (click)=\"$event.stopPropagation()\"\r\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\">\r\n      <i [class]=\"item.icon + ' text-base'\"></i>\r\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\r\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n    </a>\r\n  } @else {\r\n    <div class=\"flex items-center gap-2\">\r\n      <a [routerLink]=\"link.routerLink\"\r\n         (click)=\"onNavigate()\"\r\n         routerLinkActive=\"active-link\"\r\n         [ngClass]=\"{ 'search-match': isSearchMatch(item) }\"\r\n         class=\"flex-1 min-w-0 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\">\r\n        <i [class]=\"item.icon + ' text-base'\"></i>\r\n        <span class=\"min-w-0 break-words whitespace-normal\">\r\n          {{ item.label | translate }}</span>\r\n      </a>\r\n\r\n@if (link.addRoute) {\r\n  <a\r\n    [routerLink]=\"[link.addRoute]\"\r\n    (click)=\"$event.stopPropagation(); onNavigate()\"\r\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\"\r\n    [pTooltip]=\"'ADD' | translate\"\r\n    tooltipPosition=\"top\">\r\n    <i class=\"pi pi-plus text-xs\"></i>\r\n  </a>\r\n}\r\n    </div>\r\n  }\r\n</div>\r\n}\r\n\r\n    @if (item.items?.length) {\r\n      <div class=\"mb-1\">\r\n\r\n        <div\r\n          (click)=\"onParentClick(item)\"\r\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\r\n[ngClass]=\"{\r\n  'font-bold': level === 1,\r\n  'font-semibold': level === 2,\r\n  'font-medium': level >= 3,\r\n  'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded,\r\n  'search-match': isSearchMatch(item)\r\n}\"\r\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\">\r\n\r\n          <div class=\"flex items-center gap-2\">\r\n\r\n            <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n            <span>\r\n              {{ item.label | translate }}\r\n            </span>\r\n\r\n          </div>\r\n\r\n          <i\r\n            class=\"pi\"\r\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\r\n            style=\"font-size:0.6rem;\">\r\n          </i>\r\n\r\n        </div>\r\n\r\n        @if (item.expanded) {\r\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\r\n            </ng-container>\r\n\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n  }\r\n</ng-template>\r\n\r\n  </div>\r\n}\r\n\r\n</aside>\r\n\r\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\r\n@if (isMobile && !sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\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}.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}.tree-back-btn{height:2.25rem;padding:0 .35rem 0 .75rem;display:inline-flex;align-items:center;gap:.35rem;color:#64748b;font-weight:700;border-radius:999px;transition:all .2s ease}.tree-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.tree-back-btn{height:2.35rem;padding:0 .45rem 0 .85rem;display:inline-flex;align-items:center;gap:.4rem;color:#64748b;font-size:.86rem;font-weight:700;border-radius:999px;transition:all .22s ease}.tree-back-btn:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-back-btn i{font-size:.85rem}.tree-header-actions{display:inline-flex;align-items:center;gap:.3rem}.tree-mini-btn,.tree-search-toggle{width:2rem;height:2rem;border-radius:.8rem;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f8fafcd9;border:1px solid rgba(148,163,184,.24);transition:all .2s ease}.tree-mini-btn i,.tree-search-toggle i{font-size:.72rem}.tree-mini-btn:hover,.tree-search-toggle:hover{color:var(--p-primary-600);background:var(--p-primary-50);border-color:rgba(var(--p-primary-500-rgb),.25);transform:translateY(-1px)}.tree-search-toggle{color:var(--p-primary-600);background:rgba(var(--p-primary-500-rgb),.08);border-color:rgba(var(--p-primary-500-rgb),.18)}.tree-search-toggle.active{color:#fff;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-600));border-color:transparent;box-shadow:0 8px 18px rgba(var(--p-primary-500-rgb),.22)}.tree-search-panel{padding:.65rem;border-radius:1.15rem;background:#ffffff94;border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 30px #0f172a14;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}.tree-search{position:relative;display:flex;align-items:center}.tree-search i.pi-search{position:absolute;right:.85rem;color:var(--p-primary-500);font-size:.85rem;z-index:1}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#ffffffd1;color:#334155;font-size:.86rem;outline:none;transition:all .25s ease}.tree-search-input:focus{border-color:var(--p-primary-400);box-shadow:0 0 0 4px rgba(var(--p-primary-500-rgb),.12);background:#fff}.tree-search-clear{position:absolute;left:.55rem;width:1.75rem;height:1.75rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#f1f5f9e6;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50);transform:scale(1.05)}.tree-search-icon{position:absolute;right:.85rem;color:#94a3b8;font-size:.85rem;pointer-events:none}.tree-search-input{width:100%;height:2.45rem;padding:0 2.35rem 0 2.2rem;border-radius:.95rem;border:1px solid rgba(148,163,184,.28);background:#f8fafcd1;color:#334155;font-size:.86rem;outline:none;transition:all .22s ease}.tree-search-input:focus{border-color:rgba(var(--p-primary-500-rgb),.45);background:#fff;box-shadow:0 0 0 3px rgba(var(--p-primary-500-rgb),.1)}.tree-search-input::placeholder{color:#94a3b8}.tree-search-clear{position:absolute;left:.55rem;width:1.65rem;height:1.65rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#94a3b8;background:transparent;transition:all .2s ease}.tree-search-clear:hover{color:var(--p-primary-600);background:var(--p-primary-50)}.tree-search-clear i{font-size:.7rem}.dark .tree-back-btn{color:#cbd5e1}.dark .tree-back-btn:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.dark .tree-header-actions{background:#1f2937b8;border-color:#94a3b824}.dark .tree-icon-btn{color:#cbd5e1}.dark .tree-icon-btn:hover{color:#fff;background:var(--p-primary-600)}.dark .tree-search-icon{color:#64748b}.dark .tree-search-input{background:#1f2937bd;border-color:#94a3b829;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827eb;border-color:rgba(var(--p-primary-500-rgb),.48)}.dark .tree-search-input::placeholder{color:#64748b}.dark .tree-search-clear{color:#94a3b8}.dark .tree-search-clear:hover{color:var(--p-primary-300);background:rgba(var(--p-primary-500-rgb),.12)}.search-match{background:linear-gradient(to left,rgba(var(--p-primary-500-rgb),.16),transparent)!important;color:var(--p-primary-700)!important;border-right:3px solid var(--p-primary-500)!important;box-shadow:inset 0 0 0 1px rgba(var(--p-primary-500-rgb),.08)}.search-match span{font-weight:800!important}.search-match i{color:var(--p-primary-600)!important}.dark .tree-toolbar{background:#111827b8;border-color:#ffffff14}.dark .tree-search-input{background:#1f2937cc;border-color:#94a3b82e;color:#e5e7eb}.dark .tree-search-input:focus{background:#111827f2}.dark .tree-search-clear{background:#374151e6;color:#cbd5e1}.dark .tree-action-btn{background:rgba(var(--p-primary-500-rgb),.12);color:var(--p-primary-300);border-color:rgba(var(--p-primary-500-rgb),.22)}.dark .tree-action-btn:hover{background:var(--p-primary-600);color:#fff}.dark .search-match{background:rgba(var(--p-primary-500-rgb),.18)!important;color:var(--p-primary-300)!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onResize: [{
+                        RoutesSearchComponent,
+                    ], providers: [RoutesMenuService], template: "<aside\r\n  class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !menu.sidebarVisible && menu.isMobile }\"\r\n>\r\n  <div\r\n    class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700 text-white rounded-r-3xl\"\r\n  >\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img\r\n        src=\"/assets/logo.png\"\r\n        alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"\r\n      />\r\n\r\n      <button\r\n        (click)=\"menu.toggleSidebar()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\"\r\n      >\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n      @for (item of menu.secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <div\r\n            (click)=\"menu.activateItem(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n            class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\"\r\n          >\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i\r\n        class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"\r\n      ></i>\r\n    </div>\r\n  </div>\r\n  @if (menu.subSidebarVisible) {\r\n    <div\r\n      class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': menu.isMobile }\"\r\n    >\r\n      <app-routes-search></app-routes-search>\r\n\r\n      <!-- Recursive rendering -->\r\n      @if (menu.menuItems$ | async; as menuItems) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            renderMenu;\r\n            context: { $implicit: menuItems, level: 1 }\r\n          \"\r\n        ></ng-container>\r\n      }\r\n\r\n      <ng-template #renderMenu let-items let-level=\"level\">\r\n        @for (item of items; track item) {\r\n          @if (!item.items?.length) {\r\n            @let link = menu.getLinkProps(item);\r\n            <div class=\"mb-1\">\r\n              @if (link.isExternal) {\r\n                <a\r\n                  [href]=\"link.href\"\r\n                  target=\"_blank\"\r\n                  rel=\"noopener noreferrer\"\r\n                  (click)=\"$event.stopPropagation()\"\r\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\"\r\n                >\r\n                  <i [class]=\"item.icon + ' text-base'\"></i>\r\n                  <span class=\"min-w-0 break-words whitespace-normal\">{{\r\n                    item.label | translate\r\n                  }}</span>\r\n                  <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n                </a>\r\n              } @else {\r\n                <div class=\"flex items-center gap-2\">\r\n                  <a\r\n                    [routerLink]=\"link.routerLink\"\r\n                    (click)=\"menu.closeAfterNavigate()\"\r\n                    routerLinkActive=\"active-link\"\r\n                    [ngClass]=\"{ 'search-match': menu.isSearchMatch(item) }\"\r\n                    class=\"flex-1 min-w-0 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\"\r\n                  >\r\n                    <i [class]=\"item.icon + ' text-base'\"></i>\r\n                    <span class=\"min-w-0 break-words whitespace-normal\">\r\n                      {{ item.label | translate }}</span\r\n                    >\r\n                  </a>\r\n\r\n                  @if (link.addRoute) {\r\n                    <a\r\n                      [routerLink]=\"[link.addRoute]\"\r\n                      (click)=\"\r\n                        $event.stopPropagation(); menu.closeAfterNavigate()\r\n                      \"\r\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\"\r\n                      [pTooltip]=\"'ADD' | translate\"\r\n                      tooltipPosition=\"top\"\r\n                    >\r\n                      <i class=\"pi pi-plus text-xs\"></i>\r\n                    </a>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (item.items?.length) {\r\n            <div class=\"mb-1\">\r\n              <div\r\n                (click)=\"menu.toggleItem(item)\"\r\n                [style.font-size.rem]=\"1.1 - level * 0.05\"\r\n                [ngClass]=\"{\r\n                  'font-bold': level === 1,\r\n                  'font-semibold': level === 2,\r\n                  'font-medium': level >= 3,\r\n                  'bg-primary-50 text-primary-700 border-r-4 border-primary-500':\r\n                    item.expanded,\r\n                  'search-match': menu.isSearchMatch(item),\r\n                }\"\r\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\"\r\n              >\r\n                <div class=\"flex items-center gap-2\">\r\n                  <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n                  <span>\r\n                    {{ item.label | translate }}\r\n                  </span>\r\n                </div>\r\n\r\n                <i\r\n                  class=\"pi\"\r\n                  [ngClass]=\"\r\n                    item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\r\n                  \"\r\n                  style=\"font-size: 0.6rem\"\r\n                >\r\n                </i>\r\n              </div>\r\n\r\n              @if (item.expanded) {\r\n                <div\r\n                  class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\"\r\n                >\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      renderMenu;\r\n                      context: { $implicit: item.items, level: level + 1 }\r\n                    \"\r\n                  >\r\n                  </ng-container>\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  }\r\n</aside>\r\n@if (menu.isMobile && !menu.sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"menu.openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\"\r\n  >\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\n", styles: ["@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-slideIn{animation:slideIn .3s ease-out}.glass-bg{background-color:#ffffffbf;--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.glass-bg:is(.dark *){background-color:#111827cc}.glass-bg{-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{border-radius:9999px;background-color:#94a3b84d}@media(max-width:1024px){aside{position:fixed;right:0;top:0;z-index:50;height:100vh}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;display:flex;height:60px;width:60px;align-items:center;justify-content:center;border-radius:9999px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700))}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{height:1.75rem;width:1.75rem;border-radius:.5rem}.active-link{border-radius:.5rem;--tw-bg-opacity: 1;background-color:color-mix(in srgb,var(--p-primary-50) calc(100% * var(--tw-bg-opacity, 1)),transparent);font-weight:600;--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-700) calc(100% * var(--tw-text-opacity, 1)),transparent);--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.active-link:is(.dark *){background-color:color-mix(in srgb,var(--p-primary-500) 15%,transparent);--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-300) calc(100% * var(--tw-text-opacity, 1)),transparent)}.active-link{border-right:4px solid var(--p-primary-500)}.active-link span{font-weight:800}.active-link i{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-600) calc(100% * var(--tw-text-opacity, 1)),transparent)}.active-link i:is(.dark *){--tw-text-opacity: 1;color:color-mix(in srgb,var(--p-primary-300) calc(100% * var(--tw-text-opacity, 1)),transparent)}.search-match{color:var(--p-primary-700)!important;background:linear-gradient(to left,rgba(var(--p-primary-500-rgb),.16),transparent)!important;border-right:3px solid var(--p-primary-500)!important;box-shadow:inset 0 0 0 1px rgba(var(--p-primary-500-rgb),.08)}.search-match span{font-weight:800}.search-match i{color:var(--p-primary-600)!important}.dark .search-match{color:var(--p-primary-300)!important;background:rgba(var(--p-primary-500-rgb),.18)!important}\n"] }]
+        }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
@@ -1728,18 +1781,18 @@ class ApplicationLayoutComponent {
         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$1.Router }, { token: i0.NgZone }, { token: i3$3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    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: "\r\n\r\n<div class=\"flex h-screen overflow-hidden\">\r\n\r\n      <!-- Sidebar stays fixed -->\r\n\r\n     <app-routes\r\n            *abpReplaceableTemplate=\"{\r\n              componentKey: service.routesComponentKey,\r\n              inputs: { smallScreen: { value: service.smallScreen } }\r\n            }\"\r\n            class=\"mb-2 md:mb-0\"\r\n          ></app-routes>\r\n\r\n      <!-- Main content scrolls -->\r\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\r\n\r\n        <!-- Optional Topbar -->\r\n          <!-- @if (showTopbar) { -->\r\n\r\n           <app-nav-items\r\n          *abpReplaceableTemplate=\"{\r\n            componentKey: service.navItemsComponentKey\r\n          }\"\r\n        ></app-nav-items>\r\n\r\n        <!-- p-6 space-y-6 -->\r\n        <div class=\"flex-1 overflow-y-auto\">\r\n          <router-outlet #outlet=\"outlet\"></router-outlet>\r\n        </div>\r\n\r\n        <!-- <app-footer></app-footer> -->\r\n\r\n      </main>\r\n\r\n    </div>\r\n\r\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: "\r\n\r\n<div class=\"flex h-screen overflow-hidden\">\r\n\r\n      <!-- Sidebar stays fixed -->\r\n\r\n     <app-routes\r\n            *abpReplaceableTemplate=\"{\r\n              componentKey: service.routesComponentKey,\r\n              inputs: { smallScreen: { value: service.smallScreen } }\r\n            }\"\r\n            class=\"mb-2 md:mb-0\"\r\n          ></app-routes>\r\n\r\n      <!-- Main content scrolls -->\r\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\r\n\r\n        <!-- Optional Topbar -->\r\n          <!-- @if (showTopbar) { -->\r\n\r\n           <app-nav-items\r\n          *abpReplaceableTemplate=\"{\r\n            componentKey: service.navItemsComponentKey\r\n          }\"\r\n        ></app-nav-items>\r\n\r\n        <!-- p-6 space-y-6 -->\r\n        <div class=\"flex-1 overflow-y-auto\">\r\n          <router-outlet #outlet=\"outlet\"></router-outlet>\r\n        </div>\r\n\r\n        <!-- <app-footer></app-footer> -->\r\n\r\n      </main>\r\n\r\n    </div>\r\n\r\n" }]
-        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.Renderer2 }, { type: i2$1.Router }, { type: i0.NgZone }, { type: i3$3.LocalizationService }] });
+        }], 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$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    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,