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

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

@@ -18,7 +18,7 @@ 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 { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { SelectModule } from 'primeng/select';
@@ -210,36 +210,36 @@ class LanguagesComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LanguagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LanguagesComponent, isStandalone: true, selector: "abp-languages", ngImport: i0, template: `
-   @if (languages(); as langs) {
-     <div>
-       <!--  -->
-       <button
-         pButton
-         type="button"
-         icon="pi pi-globe"
-         class="p-button-text"
-         [title]="'اختر اللغة'"
-         (click)="overlay.toggle($event)"
-       ></button>
-       <p-popover #overlay >
-         <ul class="w-48">
-           @for (lang of langs; track lang) {
-             <li
-               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
-               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
-               >
-               <span>{{ lang.displayName }}</span>
-               @if (lang.cultureName === selectedLang()) {
-                 <i class="pi pi-check text-green-500"></i>
-               }
-             </li>
-           }
-         </ul>
-       </p-popover>
-     </div>
-   }
-   
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LanguagesComponent, isStandalone: true, selector: "abp-languages", ngImport: i0, template: `
+   @if (languages(); as langs) {
+     <div>
+       <!--  -->
+       <button
+         pButton
+         type="button"
+         icon="pi pi-globe"
+         class="p-button-text"
+         [title]="'اختر اللغة'"
+         (click)="overlay.toggle($event)"
+       ></button>
+       <p-popover #overlay >
+         <ul class="w-48">
+           @for (lang of langs; track lang) {
+             <li
+               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
+               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
+               >
+               <span>{{ lang.displayName }}</span>
+               @if (lang.cultureName === selectedLang()) {
+                 <i class="pi pi-check text-green-500"></i>
+               }
+             </li>
+           }
+         </ul>
+       </p-popover>
+     </div>
+   }
+   
    `, isInline: true, dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LanguagesComponent, decorators: [{
@@ -248,36 +248,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     selector: 'abp-languages',
                     standalone: true,
                     imports: [SelectModule, FormsModule, PopoverModule, ButtonModule],
-                    template: `
-   @if (languages(); as langs) {
-     <div>
-       <!--  -->
-       <button
-         pButton
-         type="button"
-         icon="pi pi-globe"
-         class="p-button-text"
-         [title]="'اختر اللغة'"
-         (click)="overlay.toggle($event)"
-       ></button>
-       <p-popover #overlay >
-         <ul class="w-48">
-           @for (lang of langs; track lang) {
-             <li
-               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
-               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
-               >
-               <span>{{ lang.displayName }}</span>
-               @if (lang.cultureName === selectedLang()) {
-                 <i class="pi pi-check text-green-500"></i>
-               }
-             </li>
-           }
-         </ul>
-       </p-popover>
-     </div>
-   }
-   
+                    template: `
+   @if (languages(); as langs) {
+     <div>
+       <!--  -->
+       <button
+         pButton
+         type="button"
+         icon="pi pi-globe"
+         class="p-button-text"
+         [title]="'اختر اللغة'"
+         (click)="overlay.toggle($event)"
+       ></button>
+       <p-popover #overlay >
+         <ul class="w-48">
+           @for (lang of langs; track lang) {
+             <li
+               class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-gray-100"
+               (click)="onSelectLanguage(lang.cultureName ?? ''); overlay.hide()"
+               >
+               <span>{{ lang.displayName }}</span>
+               @if (lang.cultureName === selectedLang()) {
+                 <i class="pi pi-check text-green-500"></i>
+               }
+             </li>
+           }
+         </ul>
+       </p-popover>
+     </div>
+   }
+   
    `
                 }]
         }], ctorParameters: () => [] });
@@ -452,7 +452,45 @@ class AppConfigurator {
     primaryColors = computed(() => {
         const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
         const colors = ['blue', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'emerald', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
-        const palettes = [{ name: 'noir', palette: {} }];
+        const customColors = [
+            {
+                name: 'ghazali',
+                palette: {
+                    50: '#fbf7f2',
+                    100: '#f4eadf',
+                    200: '#e8d3bf',
+                    300: '#d8b596',
+                    400: '#c99572',
+                    500: '#b97855',
+                    600: '#a45f3f',
+                    700: '#884a34',
+                    800: '#713d2f',
+                    900: '#5e342b',
+                    950: '#351914'
+                }
+            },
+            {
+                name: 'brown',
+                palette: {
+                    50: '#faf6f3',
+                    100: '#f1e5dc',
+                    200: '#e2c9b8',
+                    300: '#cea58a',
+                    400: '#b97e5d',
+                    500: '#9f6244',
+                    600: '#814a34',
+                    700: '#6a3d2e',
+                    800: '#59342a',
+                    900: '#4c2e27',
+                    950: '#2b1712'
+                }
+            },
+        ];
+        // const palettes: SurfacesType[] = [{ name: 'noir', palette: {} }];
+        const palettes = [
+            { name: 'noir', palette: {} },
+            ...customColors
+        ];
         colors.forEach((color) => {
             palettes.push({
                 name: color,
@@ -636,53 +674,53 @@ class AppConfigurator {
         this.layoutService.layoutConfig.update((prev) => ({ ...prev, menuMode: event }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", ngImport: i0, template: `
-        <div class="flex flex-col gap-4">
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Primary</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (primaryColor of primaryColors(); track primaryColor.name) {
-                <button
-                  type="button"
-                  [title]="primaryColor.name"
-                  (click)="updateColors($event, 'primary', primaryColor)"
-                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Surface</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (surface of surfaces; track surface.name) {
-                <button
-                  type="button"
-                  [title]="surface.name"
-                  (click)="updateColors($event, 'surface', surface)"
-                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div class="flex flex-col gap-2">
-            <span class="text-sm text-muted-color font-semibold">Presets</span>
-            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
-          </div>
-          @if (showMenuModeButton()) {
-            <div class="flex flex-col gap-2">
-              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
-            </div>
-          }
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", ngImport: i0, template: `
+        <div class="flex flex-col gap-4">
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Primary</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (primaryColor of primaryColors(); track primaryColor.name) {
+                <button
+                  type="button"
+                  [title]="primaryColor.name"
+                  (click)="updateColors($event, 'primary', primaryColor)"
+                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Surface</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (surface of surfaces; track surface.name) {
+                <button
+                  type="button"
+                  [title]="surface.name"
+                  (click)="updateColors($event, 'surface', surface)"
+                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-sm text-muted-color font-semibold">Presets</span>
+            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+          </div>
+          @if (showMenuModeButton()) {
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+            </div>
+          }
+        </div>
         `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, decorators: [{
@@ -691,53 +729,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     selector: 'app-configurator',
                     standalone: true,
                     imports: [CommonModule, FormsModule, SelectButtonModule],
-                    template: `
-        <div class="flex flex-col gap-4">
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Primary</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (primaryColor of primaryColors(); track primaryColor.name) {
-                <button
-                  type="button"
-                  [title]="primaryColor.name"
-                  (click)="updateColors($event, 'primary', primaryColor)"
-                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div>
-            <span class="text-sm text-muted-color font-semibold">Surface</span>
-            <div class="pt-2 flex gap-2 flex-wrap justify-start">
-              @for (surface of surfaces; track surface.name) {
-                <button
-                  type="button"
-                  [title]="surface.name"
-                  (click)="updateColors($event, 'surface', surface)"
-                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
-                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                            [style]="{
-                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-                            }"
-                ></button>
-              }
-            </div>
-          </div>
-          <div class="flex flex-col gap-2">
-            <span class="text-sm text-muted-color font-semibold">Presets</span>
-            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
-          </div>
-          @if (showMenuModeButton()) {
-            <div class="flex flex-col gap-2">
-              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
-            </div>
-          }
-        </div>
+                    template: `
+        <div class="flex flex-col gap-4">
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Primary</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (primaryColor of primaryColors(); track primaryColor.name) {
+                <button
+                  type="button"
+                  [title]="primaryColor.name"
+                  (click)="updateColors($event, 'primary', primaryColor)"
+                  [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div>
+            <span class="text-sm text-muted-color font-semibold">Surface</span>
+            <div class="pt-2 flex gap-2 flex-wrap justify-start">
+              @for (surface of surfaces; track surface.name) {
+                <button
+                  type="button"
+                  [title]="surface.name"
+                  (click)="updateColors($event, 'surface', surface)"
+                  [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                  class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+                            }"
+                ></button>
+              }
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-sm text-muted-color font-semibold">Presets</span>
+            <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+          </div>
+          @if (showMenuModeButton()) {
+            <div class="flex flex-col gap-2">
+              <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+              <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+            </div>
+          }
+        </div>
         `,
                 }]
         }] });
@@ -868,167 +906,167 @@ class NavItemsComponent {
         this.authService.navigateToLogin();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NavItemsComponent, isStandalone: true, selector: "app-nav-items", ngImport: i0, template: `
-    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
-      <!-- Left: Logo / Title -->
-      <div class="flex items-center space-x-3 rtl:space-x-reverse">
-        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
-        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
-      </div>
-    
-      <!-- Center: Nav Items -->
-      <div class="flex items-center space-x-4 rtl:space-x-reverse">
-        <ul class="flex space-x-4">
-          @for (item of navItems.items$ | async; track item.id) {
-            @if (!item.visible || item.visible(item)) {
-              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
-                <li class="flex items-center">
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <button
-                      pButton
-                      type="button"
-                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
-                      (click)="item.action?.()"
-                      >
-                      <span [innerHTML]="item.html"></span>
-                    </button>
-                  }
-                </li>
-              </ng-container>
-            }
-          }
-        </ul>
-      </div>
-    
-      <!-- Right: Actions -->
-      <div class="flex items-center  rtl:space-x-reverse">
-        <!-- Configurator -->
-    
-        <div>
-          <!--  -->
-          <button
-            pButton
-            type="button"
-            icon="pi pi-palette"
-            class="p-button-text"
-            [title]="''"
-            (click)="overlay.toggle($event)"
-            >
-          </button>
-    
-          <p-popover #overlay >
-            <app-configurator />
-          </p-popover>
-        </div>
-    
-    
-        <!-- Dark Mode Toggle -->
-        <button
-          pButton
-          type="button"
-          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
-          class="p-button-text"
-          (click)="toggleDarkMode()">
-        </button>
-    
-        <!-- Language Switcher -->
-        <abp-languages></abp-languages>
-    
-        <!-- User Menu -->
-        <div class="relative">
-          <button
-            class="p-link p-2"
-            (click)="menu.toggle($event)"
-            aria-label="User menu"
-            >
-            <p-avatar
-              [label]="loading ? '' : userName"
-              [icon]="loading ? 'pi pi-spinner' : ''"
-              [class]="{'pi-spin': loading}"
-              shape="circle"
-              class="bg-blue-600 text-white cursor-pointer"
-              [title]="(currentUser$ | async)?.name || ''"
-            ></p-avatar>
-          </button>
-    
-          <p-menu
-            #menu
-            [model]="userMenuItems"
-            [popup]="true"
-            [appendTo]="'body'"
-            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
-            >
-            <ng-template pTemplate="start">
-              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
-                <p-avatar
-                  [label]="userName"
-                  shape="circle"
-                  size="xlarge"
-                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
-                  [title]="(currentUser$ | async)?.name || ''"
-                ></p-avatar>
-                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
-                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
-                </h5>
-                <p class="text-sm text-gray-600 truncate max-w-full">
-                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
-                </p>
-                @if ((selectedTenant$ | async); as tenant) {
-                  <span
-                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
-                  [ngClass]="{
-                    'bg-green-100 text-green-800': true
-                  }"
-                    >
-                    {{ tenant?.name || '_' }}
-                  </span>
-                }
-              </div>
-            </ng-template>
-    
-            <ng-template pTemplate="item" let-item>
-              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
-              <ng-container >
-                <!-- *hasPermission="item.requiredPolicy" -->
-                <a
-    
-                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
-                  [ngClass]="item.styleClass || ''"
-                  (click)="item.command ? item.command() : null"
-                  [routerLink]="item.routerLink ? item.routerLink : null"
-                  tabindex="0"
-                  >
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
-                    <span class="text-gray-700">{{ item.label | translate }}</span>
-                  }
-                </a>
-              </ng-container>
-            </ng-template>
-          </p-menu>
-        </div>
-    
-        <!-- Logout Button (separate from menu) -->
-        <!-- <button
-        type="button"
-        class="layout-topbar-action"
-        (click)="logout()"
-        title="تسجيل الخروج"
-        >
-        <i class="pi pi-sign-out"></i>
-      </button> -->
-    </div>
-    </header>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: NavItemsComponent, isStandalone: true, selector: "app-nav-items", ngImport: i0, template: `
+    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
+      <!-- Left: Logo / Title -->
+      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
+        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
+      </div>
+    
+      <!-- Center: Nav Items -->
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+        <ul class="flex space-x-4">
+          @for (item of navItems.items$ | async; track item.id) {
+            @if (!item.visible || item.visible(item)) {
+              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
+                <li class="flex items-center">
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <button
+                      pButton
+                      type="button"
+                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
+                      (click)="item.action?.()"
+                      >
+                      <span [innerHTML]="item.html"></span>
+                    </button>
+                  }
+                </li>
+              </ng-container>
+            }
+          }
+        </ul>
+      </div>
+    
+      <!-- Right: Actions -->
+      <div class="flex items-center  rtl:space-x-reverse">
+        <!-- Configurator -->
+    
+        <div>
+          <!--  -->
+          <button
+            pButton
+            type="button"
+            icon="pi pi-palette"
+            class="p-button-text"
+            [title]="''"
+            (click)="overlay.toggle($event)"
+            >
+          </button>
+    
+          <p-popover #overlay >
+            <app-configurator />
+          </p-popover>
+        </div>
+    
+    
+        <!-- Dark Mode Toggle -->
+        <button
+          pButton
+          type="button"
+          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
+          class="p-button-text"
+          (click)="toggleDarkMode()">
+        </button>
+    
+        <!-- Language Switcher -->
+        <abp-languages></abp-languages>
+    
+        <!-- User Menu -->
+        <div class="relative">
+          <button
+            class="p-link p-2"
+            (click)="menu.toggle($event)"
+            aria-label="User menu"
+            >
+            <p-avatar
+              [label]="loading ? '' : userName"
+              [icon]="loading ? 'pi pi-spinner' : ''"
+              [class]="{'pi-spin': loading}"
+              shape="circle"
+              class="bg-blue-600 text-white cursor-pointer"
+              [title]="(currentUser$ | async)?.name || ''"
+            ></p-avatar>
+          </button>
+    
+          <p-menu
+            #menu
+            [model]="userMenuItems"
+            [popup]="true"
+            [appendTo]="'body'"
+            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
+            >
+            <ng-template pTemplate="start">
+              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
+                <p-avatar
+                  [label]="userName"
+                  shape="circle"
+                  size="xlarge"
+                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
+                  [title]="(currentUser$ | async)?.name || ''"
+                ></p-avatar>
+                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
+                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
+                </h5>
+                <p class="text-sm text-gray-600 truncate max-w-full">
+                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
+                </p>
+                @if ((selectedTenant$ | async); as tenant) {
+                  <span
+                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
+                  [ngClass]="{
+                    'bg-green-100 text-green-800': true
+                  }"
+                    >
+                    {{ tenant?.name || '_' }}
+                  </span>
+                }
+              </div>
+            </ng-template>
+    
+            <ng-template pTemplate="item" let-item>
+              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
+              <ng-container >
+                <!-- *hasPermission="item.requiredPolicy" -->
+                <a
+    
+                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
+                  [ngClass]="item.styleClass || ''"
+                  (click)="item.command ? item.command() : null"
+                  [routerLink]="item.routerLink ? item.routerLink : null"
+                  tabindex="0"
+                  >
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
+                    <span class="text-gray-700">{{ item.label | translate }}</span>
+                  }
+                </a>
+              </ng-container>
+            </ng-template>
+          </p-menu>
+        </div>
+    
+        <!-- Logout Button (separate from menu) -->
+        <!-- <button
+        type="button"
+        class="layout-topbar-action"
+        (click)="logout()"
+        title="تسجيل الخروج"
+        >
+        <i class="pi pi-sign-out"></i>
+      </button> -->
+    </div>
+    </header>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: LanguagesComponent, selector: "abp-languages" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i3$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: VisibleDirective, selector: "[frameworkVisible]", inputs: ["frameworkVisible"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ToInjectorPipe, name: "toInjector" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NavItemsComponent, decorators: [{
@@ -1052,292 +1090,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         ToInjectorPipe,
                         PopoverModule
                     ],
-                    template: `
-    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
-      <!-- Left: Logo / Title -->
-      <div class="flex items-center space-x-3 rtl:space-x-reverse">
-        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
-        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
-      </div>
-    
-      <!-- Center: Nav Items -->
-      <div class="flex items-center space-x-4 rtl:space-x-reverse">
-        <ul class="flex space-x-4">
-          @for (item of navItems.items$ | async; track item.id) {
-            @if (!item.visible || item.visible(item)) {
-              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
-                <li class="flex items-center">
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <button
-                      pButton
-                      type="button"
-                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
-                      (click)="item.action?.()"
-                      >
-                      <span [innerHTML]="item.html"></span>
-                    </button>
-                  }
-                </li>
-              </ng-container>
-            }
-          }
-        </ul>
-      </div>
-    
-      <!-- Right: Actions -->
-      <div class="flex items-center  rtl:space-x-reverse">
-        <!-- Configurator -->
-    
-        <div>
-          <!--  -->
-          <button
-            pButton
-            type="button"
-            icon="pi pi-palette"
-            class="p-button-text"
-            [title]="''"
-            (click)="overlay.toggle($event)"
-            >
-          </button>
-    
-          <p-popover #overlay >
-            <app-configurator />
-          </p-popover>
-        </div>
-    
-    
-        <!-- Dark Mode Toggle -->
-        <button
-          pButton
-          type="button"
-          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
-          class="p-button-text"
-          (click)="toggleDarkMode()">
-        </button>
-    
-        <!-- Language Switcher -->
-        <abp-languages></abp-languages>
-    
-        <!-- User Menu -->
-        <div class="relative">
-          <button
-            class="p-link p-2"
-            (click)="menu.toggle($event)"
-            aria-label="User menu"
-            >
-            <p-avatar
-              [label]="loading ? '' : userName"
-              [icon]="loading ? 'pi pi-spinner' : ''"
-              [class]="{'pi-spin': loading}"
-              shape="circle"
-              class="bg-blue-600 text-white cursor-pointer"
-              [title]="(currentUser$ | async)?.name || ''"
-            ></p-avatar>
-          </button>
-    
-          <p-menu
-            #menu
-            [model]="userMenuItems"
-            [popup]="true"
-            [appendTo]="'body'"
-            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
-            >
-            <ng-template pTemplate="start">
-              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
-                <p-avatar
-                  [label]="userName"
-                  shape="circle"
-                  size="xlarge"
-                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
-                  [title]="(currentUser$ | async)?.name || ''"
-                ></p-avatar>
-                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
-                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
-                </h5>
-                <p class="text-sm text-gray-600 truncate max-w-full">
-                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
-                </p>
-                @if ((selectedTenant$ | async); as tenant) {
-                  <span
-                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
-                  [ngClass]="{
-                    'bg-green-100 text-green-800': true
-                  }"
-                    >
-                    {{ tenant?.name || '_' }}
-                  </span>
-                }
-              </div>
-            </ng-template>
-    
-            <ng-template pTemplate="item" let-item>
-              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
-              <ng-container >
-                <!-- *hasPermission="item.requiredPolicy" -->
-                <a
-    
-                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
-                  [ngClass]="item.styleClass || ''"
-                  (click)="item.command ? item.command() : null"
-                  [routerLink]="item.routerLink ? item.routerLink : null"
-                  tabindex="0"
-                  >
-                  @if (item.component) {
-                    <ng-container
-                      [ngComponentOutlet]="item.component"
-                      [ngComponentOutletInjector]="item | toInjector"
-                    ></ng-container>
-                  } @else {
-                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
-                    <span class="text-gray-700">{{ item.label | translate }}</span>
-                  }
-                </a>
-              </ng-container>
-            </ng-template>
-          </p-menu>
-        </div>
-    
-        <!-- Logout Button (separate from menu) -->
-        <!-- <button
-        type="button"
-        class="layout-topbar-action"
-        (click)="logout()"
-        title="تسجيل الخروج"
-        >
-        <i class="pi pi-sign-out"></i>
-      </button> -->
-    </div>
-    </header>
+                    template: `
+    <header class="flex items-center justify-between px-6 h-16 bg-white shadow sticky top-0 z-9">
+      <!-- Left: Logo / Title -->
+      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+        <img src="assets/logo.png" alt="Logo" class="h-8 w-8" />
+        <span class="text-lg font-semibold text-gray-800">{{ '' | translate }}</span>
+      </div>
+    
+      <!-- Center: Nav Items -->
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+        <ul class="flex space-x-4">
+          @for (item of navItems.items$ | async; track item.id) {
+            @if (!item.visible || item.visible(item)) {
+              <ng-container *frameworkVisible="!item.visible || item.visible(item)">
+                <li class="flex items-center">
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <button
+                      pButton
+                      type="button"
+                      class="p-button-text hover:bg-gray-100 focus:outline-none flex items-center"
+                      (click)="item.action?.()"
+                      >
+                      <span [innerHTML]="item.html"></span>
+                    </button>
+                  }
+                </li>
+              </ng-container>
+            }
+          }
+        </ul>
+      </div>
+    
+      <!-- Right: Actions -->
+      <div class="flex items-center  rtl:space-x-reverse">
+        <!-- Configurator -->
+    
+        <div>
+          <!--  -->
+          <button
+            pButton
+            type="button"
+            icon="pi pi-palette"
+            class="p-button-text"
+            [title]="''"
+            (click)="overlay.toggle($event)"
+            >
+          </button>
+    
+          <p-popover #overlay >
+            <app-configurator />
+          </p-popover>
+        </div>
+    
+    
+        <!-- Dark Mode Toggle -->
+        <button
+          pButton
+          type="button"
+          [icon]="layoutService.isDarkTheme() ?'pi pi-moon': 'pi pi-sun'"
+          class="p-button-text"
+          (click)="toggleDarkMode()">
+        </button>
+    
+        <!-- Language Switcher -->
+        <abp-languages></abp-languages>
+    
+        <!-- User Menu -->
+        <div class="relative">
+          <button
+            class="p-link p-2"
+            (click)="menu.toggle($event)"
+            aria-label="User menu"
+            >
+            <p-avatar
+              [label]="loading ? '' : userName"
+              [icon]="loading ? 'pi pi-spinner' : ''"
+              [class]="{'pi-spin': loading}"
+              shape="circle"
+              class="bg-blue-600 text-white cursor-pointer"
+              [title]="(currentUser$ | async)?.name || ''"
+            ></p-avatar>
+          </button>
+    
+          <p-menu
+            #menu
+            [model]="userMenuItems"
+            [popup]="true"
+            [appendTo]="'body'"
+            styleClass="w-64 sm:w-72 shadow-lg rounded-md"
+            >
+            <ng-template pTemplate="start">
+              <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex flex-col items-center text-center">
+                <p-avatar
+                  [label]="userName"
+                  shape="circle"
+                  size="xlarge"
+                  styleClass="bg-blue-600 text-white mb-3 shadow-lg"
+                  [title]="(currentUser$ | async)?.name || ''"
+                ></p-avatar>
+                <h5 class="text-xl font-semibold text-gray-800 leading-tight">
+                  {{ (currentUser$ | async)?.name || 'اسم المستخدم' }}
+                </h5>
+                <p class="text-sm text-gray-600 truncate max-w-full">
+                  {{ (currentUser$ | async)?.email || 'لا يوجد بريد إلكتروني' }}
+                </p>
+                @if ((selectedTenant$ | async); as tenant) {
+                  <span
+                    class="inline-block mt-2 px-3 py-1 text-xs rounded-full font-semibold"
+                  [ngClass]="{
+                    'bg-green-100 text-green-800': true
+                  }"
+                    >
+                    {{ tenant?.name || '_' }}
+                  </span>
+                }
+              </div>
+            </ng-template>
+    
+            <ng-template pTemplate="item" let-item>
+              <!-- *frameworkVisible="!item.visible || item.visible(item)" -->
+              <ng-container >
+                <!-- *hasPermission="item.requiredPolicy" -->
+                <a
+    
+                  class="p-menuitem-link flex items-center space-x-3 rtl:space-x-reverse px-5 py-2 hover:bg-gray-100 rounded-md"
+                  [ngClass]="item.styleClass || ''"
+                  (click)="item.command ? item.command() : null"
+                  [routerLink]="item.routerLink ? item.routerLink : null"
+                  tabindex="0"
+                  >
+                  @if (item.component) {
+                    <ng-container
+                      [ngComponentOutlet]="item.component"
+                      [ngComponentOutletInjector]="item | toInjector"
+                    ></ng-container>
+                  } @else {
+                    <i [class]="item.icon + ' text-lg text-gray-600'"></i>
+                    <span class="text-gray-700">{{ item.label | translate }}</span>
+                  }
+                </a>
+              </ng-container>
+            </ng-template>
+          </p-menu>
+        </div>
+    
+        <!-- Logout Button (separate from menu) -->
+        <!-- <button
+        type="button"
+        class="layout-topbar-action"
+        (click)="logout()"
+        title="تسجيل الخروج"
+        >
+        <i class="pi pi-sign-out"></i>
+      </button> -->
+    </div>
+    </header>
     `
                 }]
         }], ctorParameters: () => [] });
 
-class RoutesComponent {
-    subSidebarVisible = false;
-    sidebarVisible = true;
-    isMobile = false;
+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([]);
-    // menuItems$!: Observable<MenuItem[]>;
+    expandedStateBeforeSearch = null;
     menuItems$ = this._menuItemsSubject.asObservable();
-    constructor() {
-        // this.menuItems$ = this.routesService.visible$.pipe(
-        //   map(routes => this.buildItems(routes).map(item => ({ ...item, expanded: true })))
-        // );
-        this.routesService.visible$.pipe(map(routes => this.buildItems(routes).map(item => ({ ...item, expanded: true })))).subscribe(items => this._menuItemsSubject.next(items));
-    }
-    ngOnInit() {
-        this.checkViewport();
-        this.secondToLastLevel$ = this.menuItems$.pipe(map(items => {
-            const result = [];
-            for (const item of items) {
-                if (item.items && item.items.length > 0) {
-                    // إضافة جميع الأبناء المباشرين (المستوى الثاني)
-                    result.push(...item.items);
-                }
-            }
-            return result;
-        }));
-        //   this.secondToLastLevel$ = this.menuItems$.pipe(
-        //   map(items => this.getSecondToLastLevel(items))
-        // );
-    }
-    getSecondToLastLevel(items) {
+    secondToLastLevel$ = this.menuItems$.pipe(map((items) => {
         const result = [];
-        const traverse = (nodes) => {
-            for (const node of nodes) {
-                if (node.items && node.items.length > 0) {
-                    // Check if any child has its own children
-                    const hasGrandChildren = node.items.some(c => c.items && c.items.length > 0);
-                    if (!hasGrandChildren) {
-                        // Node is right before the last level
-                        result.push(node);
-                    }
-                    else {
-                        traverse(node.items);
-                    }
-                }
+        for (const item of items) {
+            if (item.items?.length) {
+                result.push(...item.items);
             }
-        };
-        traverse(items);
+        }
         return result;
+    }));
+    constructor() {
+        this.routesService.visible$
+            .pipe(map((routes) => this.buildItems(routes)), takeUntilDestroyed())
+            .subscribe((items) => this.setItems(items));
     }
-    onParentClick(item) {
-        // toggle expand
-        item.expanded = !item.expanded;
-        // TODO: Navigate to shell route if needed
-        // if (item.items?.length) {
-        //   // Navigate to shell route
-        //   // Split the path into segments for Angular
-        //   const pathSegments = item.routerLink
-        //     ? (Array.isArray(item.routerLink) ? item.routerLink : item.routerLink.split('/').filter(Boolean))
-        //     : [];
-        //   this.router.navigate(pathSegments);
-        // } else if (item.routerLink) {
-        //   const pathSegments = Array.isArray(item.routerLink) ? item.routerLink : item.routerLink.split('/').filter(Boolean);
-        //   this.router.navigate(pathSegments);
-        // }
-        // this.subSidebarVisible = true;
-    }
-    onResize() { this.checkViewport(); }
-    checkViewport() {
-        this.isMobile = window.innerWidth < 1024;
-        if (this.isMobile) {
-            this.sidebarVisible = false;
-            this.subSidebarVisible = false;
+    get items() {
+        return this._menuItemsSubject.value;
+    }
+    setItems(items) {
+        this.setExpandedByLevel(items);
+        this._menuItemsSubject.next(items);
+    }
+    refresh() {
+        this._menuItemsSubject.next([...this.items]);
+    }
+    expandAll() {
+        this.setExpandedRecursive(this.items, true);
+        this.subSidebarVisible = true;
+        this.refresh();
+    }
+    collapseAll() {
+        this.setExpandedRecursive(this.items, false);
+        this.refresh();
+    }
+    search(keyword) {
+        if (!this.expandedStateBeforeSearch) {
+            this.expandedStateBeforeSearch = this.captureExpandedState(this.items);
         }
-        else {
-            this.sidebarVisible = true;
-            this.subSidebarVisible = true;
+        this.searchText = keyword;
+        if (!this.searchText.trim()) {
+            this.restoreExpandedStateBeforeSearch();
+            this.refresh();
+            return;
         }
+        this.expandMatchedParents(this.items, this.searchText);
+        this.refresh();
     }
-    toggleAll() {
-        if (this.isMobile) {
-            this.sidebarVisible = !this.sidebarVisible;
-            this.subSidebarVisible = this.sidebarVisible;
-        }
-        else {
-            this.subSidebarVisible = !this.subSidebarVisible;
+    clearSearch() {
+        this.searchText = '';
+        this.restoreExpandedStateBeforeSearch();
+        this.refresh();
+    }
+    toggleSearch() {
+        this.showTreeSearch = !this.showTreeSearch;
+        if (!this.showTreeSearch) {
+            this.clearSearch();
         }
     }
+    isSearchMatch(item) {
+        const term = this.searchText.trim().toLowerCase();
+        if (!term)
+            return false;
+        const label = String(item.label ?? '').toLowerCase();
+        const title = String(item.title ?? '').toLowerCase();
+        return label.includes(term) || title.includes(term);
+    }
+    closeMenu() {
+        this.subSidebarVisible = false;
+        this.sidebarVisible = false;
+    }
     openMenu() {
         this.sidebarVisible = true;
         this.subSidebarVisible = true;
     }
-    expandPath(items, target) {
-        for (const item of items) {
-            if (item === target)
-                return true;
-            if (item.items && item.items.length > 0) {
-                const found = this.expandPath(item.items, target);
-                if (found) {
-                    item.expanded = true; // expand parent
-                    return true;
-                }
-            }
+    syncViewport() {
+        this.isMobile = window.innerWidth < 1024;
+        this.layoutService.smallScreen = this.isMobile;
+        if (this.isMobile) {
+            this.sidebarVisible = false;
+            this.subSidebarVisible = false;
+            return;
         }
-        return false;
+        this.sidebarVisible = true;
+        this.subSidebarVisible = true;
+    }
+    toggleSidebar() {
+        if (this.isMobile) {
+            this.sidebarVisible = !this.sidebarVisible;
+            this.subSidebarVisible = this.sidebarVisible;
+            return;
+        }
+        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) {
@@ -1346,50 +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();
+        }
+    }
+    getLinkProps(item) {
+        const isExternal = item.isExternal ?? false;
+        return {
+            isExternal,
+            href: isExternal ? (item.url ?? null) : null,
+            routerLink: !isExternal ? (item.routerLink ?? null) : null,
+            addRoute: item.addRoute ?? '',
+        };
     }
-    toggleExpand(item) {
+    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;
-        // this.menuItems$.subscribe(items => {
-        //   items.forEach(item => item.expanded = false);
-        // });
-    }
-    // @HostListener('document:keydown.escape')
-    // onEsc() {
-    //   this.closeMenu();
-    //  }
-    onNavigate() {
+    setExpandedByLevel(items, level = 1) {
+        for (const item of items) {
+            item.expanded = level === 1;
+            if (item.items?.length) {
+                this.setExpandedByLevel(item.items, level + 1);
+            }
+        }
+    }
+    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,
-            // routerLink: route.path ? [route.path] : undefined,
             title: route.name,
-            expanded: false
+            expanded: false,
         };
         if (route.isExternal) {
             item.url = route.path;
@@ -1403,43 +1473,109 @@ class RoutesComponent {
         if (this.routesService.hasChildren(route.name)) {
             item.items = this.buildItems(route.children ?? []);
         }
-        else {
-            // TODO: check if grant permission
-            //     if(){
-            //       item['actionButtons']= [
-            //   {
-            //     icon: 'pi pi-plus',
-            //     tooltip: 'ADD',
-            //     click: (item:any, event:any) => {
-            //       this.router.navigate([route.path,'add']);
-            //     },
-            //     visible: (item:any) => true
-            //   }
-            // ];
-            //     }
-        }
         return item;
     }
     hasPermission(policy) {
-        // implement using  permission service
         return true;
     }
-    getLinkProps(item) {
-        const isExternal = item.isExternal ?? false;
-        return {
-            isExternal,
-            href: isExternal ? item.url ?? null : null,
-            routerLink: !isExternal ? item.routerLink ?? null : null,
-            addRoute: item.addRoute ?? ''
-        };
+    setExpandedRecursive(items, expanded) {
+        for (const item of items) {
+            item.expanded = expanded;
+            if (item.items?.length) {
+                this.setExpandedRecursive(item.items, expanded);
+            }
+        }
+    }
+    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\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 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\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span class=\"min-w-0 break-words whitespace-normal\">\n          {{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    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, TooltipModule, TranslatePipe, StyleClassModule], template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 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\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span class=\"min-w-0 break-words whitespace-normal\">\n          {{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onResize: [{
+            args: [{ selector: 'app-routes', standalone: true, imports: [
+                        CommonModule,
+                        RouterModule,
+                        TooltipModule,
+                        TranslatePipe,
+                        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']
             }] } });
@@ -1447,11 +1583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class AuthWrapperComponent {
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AuthWrapperComponent, isStandalone: true, selector: "abp-auth-wrapper", ngImport: i0, template: " <ng-content></ng-content>\n\n\n<!-- <div class=\"row\">\n  <div class=\"mx-auto col col-md-5\">\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\n      <abp-tenant-box\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\n      ></abp-tenant-box>\n    }\n\n    <div class=\"abp-account-container\">\n      @if (service.enableLocalLogin$ | async) {\n        <div class=\"card mt-3 shadow-sm rounded\">\n          <div class=\"card-body p-5\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      } @else {\n        <div class=\"alert alert-warning\">\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\n        </div>\n      }\n    </div>\n  </div>\n</div> -->\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AuthWrapperComponent, isStandalone: true, selector: "abp-auth-wrapper", ngImport: i0, template: " <ng-content></ng-content>\r\n\r\n\r\n<!-- <div class=\"row\">\r\n  <div class=\"mx-auto col col-md-5\">\r\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\r\n      <abp-tenant-box\r\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\r\n      ></abp-tenant-box>\r\n    }\r\n\r\n    <div class=\"abp-account-container\">\r\n      @if (service.enableLocalLogin$ | async) {\r\n        <div class=\"card mt-3 shadow-sm rounded\">\r\n          <div class=\"card-body p-5\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"alert alert-warning\">\r\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\r\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div> -->\r\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AuthWrapperComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [], selector: 'abp-auth-wrapper', template: " <ng-content></ng-content>\n\n\n<!-- <div class=\"row\">\n  <div class=\"mx-auto col col-md-5\">\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\n      <abp-tenant-box\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\n      ></abp-tenant-box>\n    }\n\n    <div class=\"abp-account-container\">\n      @if (service.enableLocalLogin$ | async) {\n        <div class=\"card mt-3 shadow-sm rounded\">\n          <div class=\"card-body p-5\">\n            <ng-content></ng-content>\n          </div>\n        </div>\n      } @else {\n        <div class=\"alert alert-warning\">\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\n        </div>\n      }\n    </div>\n  </div>\n</div> -->\n" }]
+            args: [{ standalone: true, imports: [], selector: 'abp-auth-wrapper', template: " <ng-content></ng-content>\r\n\r\n\r\n<!-- <div class=\"row\">\r\n  <div class=\"mx-auto col col-md-5\">\r\n    @if ((service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible) {\r\n      <abp-tenant-box\r\n        *abpReplaceableTemplate=\"{ componentKey: service.tenantBoxKey }\"\r\n      ></abp-tenant-box>\r\n    }\r\n\r\n    <div class=\"abp-account-container\">\r\n      @if (service.enableLocalLogin$ | async) {\r\n        <div class=\"card mt-3 shadow-sm rounded\">\r\n          <div class=\"card-body p-5\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"alert alert-warning\">\r\n          <strong>{{ 'AbpAccount::InvalidLoginRequest' | localize }}</strong>\r\n          {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | localize }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div> -->\r\n" }]
         }], ctorParameters: () => [] });
 
 class AccountLayoutComponent {
@@ -1466,11 +1602,11 @@ class AccountLayoutComponent {
         // this.service.subscribeWindowSize();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AccountLayoutComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AccountLayoutComponent, isStandalone: true, selector: "abp-layout-account", providers: [LayoutService, SubscriptionService], ngImport: i0, template: " <abp-auth-wrapper\n    *abpReplaceableTemplate=\"{\n      componentKey: authWrapperKey\n    }\"\n  >\n    <router-outlet #outlet=\"outlet\"></router-outlet>\n  </abp-auth-wrapper>\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AuthWrapperComponent, selector: "abp-auth-wrapper" }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AccountLayoutComponent, isStandalone: true, selector: "abp-layout-account", providers: [LayoutService, SubscriptionService], ngImport: i0, template: " <abp-auth-wrapper\r\n    *abpReplaceableTemplate=\"{\r\n      componentKey: authWrapperKey\r\n    }\"\r\n  >\r\n    <router-outlet #outlet=\"outlet\"></router-outlet>\r\n  </abp-auth-wrapper>\r\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AuthWrapperComponent, selector: "abp-auth-wrapper" }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AccountLayoutComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, AuthWrapperComponent, ReplaceableTemplateDirective], selector: 'abp-layout-account', providers: [LayoutService, SubscriptionService], template: " <abp-auth-wrapper\n    *abpReplaceableTemplate=\"{\n      componentKey: authWrapperKey\n    }\"\n  >\n    <router-outlet #outlet=\"outlet\"></router-outlet>\n  </abp-auth-wrapper>\n" }]
+            args: [{ standalone: true, imports: [RoutesComponent, NavItemsComponent, RouterOutlet, AuthWrapperComponent, ReplaceableTemplateDirective], selector: 'abp-layout-account', providers: [LayoutService, SubscriptionService], template: " <abp-auth-wrapper\r\n    *abpReplaceableTemplate=\"{\r\n      componentKey: authWrapperKey\r\n    }\"\r\n  >\r\n    <router-outlet #outlet=\"outlet\"></router-outlet>\r\n  </abp-auth-wrapper>\r\n" }]
         }], ctorParameters: () => [{ type: LayoutService }] });
 
 class ApplicationLayoutComponent {
@@ -1646,11 +1782,11 @@ class ApplicationLayoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ApplicationLayoutComponent, deps: [{ token: LayoutService }, { token: i0.Renderer2 }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i3$3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: ApplicationLayoutComponent, isStandalone: true, selector: "abp-layout-application", providers: [LayoutService, SubscriptionService], ngImport: i0, template: "\n\n<div class=\"flex h-screen overflow-hidden\">\n\n      <!-- Sidebar stays fixed -->\n\n     <app-routes\n            *abpReplaceableTemplate=\"{\n              componentKey: service.routesComponentKey,\n              inputs: { smallScreen: { value: service.smallScreen } }\n            }\"\n            class=\"mb-2 md:mb-0\"\n          ></app-routes>\n\n      <!-- Main content scrolls -->\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\n\n        <!-- Optional Topbar -->\n          <!-- @if (showTopbar) { -->\n\n           <app-nav-items\n          *abpReplaceableTemplate=\"{\n            componentKey: service.navItemsComponentKey\n          }\"\n        ></app-nav-items>\n\n        <!-- p-6 space-y-6 -->\n        <div class=\"flex-1 overflow-y-auto\">\n          <router-outlet #outlet=\"outlet\"></router-outlet>\n        </div>\n\n        <!-- <app-footer></app-footer> -->\n\n      </main>\n\n    </div>\n\n", dependencies: [{ kind: "component", type: RoutesComponent, selector: "app-routes" }, { kind: "component", type: NavItemsComponent, selector: "app-nav-items" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }], animations: [ /* slideFromBottom, */ /* appModuleAnimation() */] });
+    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: "\n\n<div class=\"flex h-screen overflow-hidden\">\n\n      <!-- Sidebar stays fixed -->\n\n     <app-routes\n            *abpReplaceableTemplate=\"{\n              componentKey: service.routesComponentKey,\n              inputs: { smallScreen: { value: service.smallScreen } }\n            }\"\n            class=\"mb-2 md:mb-0\"\n          ></app-routes>\n\n      <!-- Main content scrolls -->\n      <main class=\"flex-1 flex flex-col overflow-hidden\">\n\n        <!-- Optional Topbar -->\n          <!-- @if (showTopbar) { -->\n\n           <app-nav-items\n          *abpReplaceableTemplate=\"{\n            componentKey: service.navItemsComponentKey\n          }\"\n        ></app-nav-items>\n\n        <!-- p-6 space-y-6 -->\n        <div class=\"flex-1 overflow-y-auto\">\n          <router-outlet #outlet=\"outlet\"></router-outlet>\n        </div>\n\n        <!-- <app-footer></app-footer> -->\n\n      </main>\n\n    </div>\n\n" }]
+            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$2.Router }, { type: i0.NgZone }, { type: i3$3.LocalizationService }] });
 
 class EmptyLayoutComponent {