@es.framework/ng.ui.theme 2.0.56 → 2.0.57

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

@@ -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: () => [] });
@@ -636,53 +636,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 +691,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 +868,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,167 +1052,167 @@ 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: () => [] });
@@ -1434,11 +1434,11 @@ class RoutesComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoutesComponent, isStandalone: true, selector: "app-routes", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n     class=\"w-65 border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n            shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n  <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span>{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span>{{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.render-menu-container span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RoutesComponent, isStandalone: true, selector: "app-routes", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\r\n\r\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\r\n  <div\r\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\r\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\r\n             text-white rounded-r-3xl\">\r\n\r\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\r\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\r\n      <button (click)=\"toggleAll()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n\r\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\r\n      @for (item of secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\r\n          <div (click)=\"onMainClick(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\r\n                        hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\r\n  @if (subSidebarVisible) {\r\n    <div\r\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\r\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\r\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\r\n      <button (click)=\"closeMenu()\"\r\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\r\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\r\n        <span>{{ 'back' | translate }}</span>\r\n      </button>\r\n      <!-- Recursive rendering -->\r\n     @if (menuItems$ | async; as menuItems) {\r\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\r\n}\r\n\r\n<ng-template #renderMenu let-items let-level=\"level\">\r\n  @for (item of items; track item) {\r\n\r\n   @if (!item.items?.length) {\r\n  @let link = getLinkProps(item);\r\n <div class=\"mb-1\">\r\n  @if (link.isExternal) {\r\n    <a [href]=\"link.href\"\r\n       target=\"_blank\"\r\n       rel=\"noopener noreferrer\"\r\n       (click)=\"$event.stopPropagation()\"\r\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n      <i [class]=\"item.icon + ' text-base'\"></i>\r\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\r\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n    </a>\r\n  } @else {\r\n    <div class=\"flex items-center gap-2\">\r\n      <a [routerLink]=\"link.routerLink\"\r\n         (click)=\"onNavigate()\"\r\n         routerLinkActive=\"active-link\"\r\n         class=\"flex-1 min-w-0 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n        <i [class]=\"item.icon + ' text-base'\"></i>\r\n        <span class=\"min-w-0 break-words whitespace-normal\">\r\n          {{ item.label | translate }}</span>\r\n      </a>\r\n\r\n@if (link.addRoute) {\r\n  <a\r\n    [routerLink]=\"[link.addRoute]\"\r\n    (click)=\"$event.stopPropagation(); onNavigate()\"\r\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\r\n    [pTooltip]=\"'ADD' | translate\"\r\n    tooltipPosition=\"top\">\r\n    <i class=\"pi pi-plus text-xs\"></i>\r\n  </a>\r\n}\r\n    </div>\r\n  }\r\n</div>\r\n}\r\n\r\n    @if (item.items?.length) {\r\n      <div class=\"mb-1\">\r\n\r\n        <div\r\n          (click)=\"onParentClick(item)\"\r\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\r\n          [ngClass]=\"{\r\n            'font-bold': level === 1,\r\n            'font-semibold': level === 2,\r\n            'font-medium': level >= 3,\r\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\r\n          }\"\r\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\r\n\r\n          <div class=\"flex items-center gap-2\">\r\n\r\n            <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n            <span>\r\n              {{ item.label | translate }}\r\n            </span>\r\n\r\n          </div>\r\n\r\n          <i\r\n            class=\"pi\"\r\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\r\n            style=\"font-size:0.6rem;\">\r\n          </i>\r\n\r\n        </div>\r\n\r\n        @if (item.expanded) {\r\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\r\n            </ng-container>\r\n\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n  }\r\n</ng-template>\r\n\r\n  </div>\r\n}\r\n\r\n</aside>\r\n\r\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\r\n@if (isMobile && !sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RoutesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-routes', standalone: true, imports: [CommonModule, RouterModule, TooltipModule, TranslatePipe, StyleClassModule], template: "<aside class=\"flex h-screen bg-white dark:bg-gray-900 transition-all duration-300\"\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\n\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\n  <div\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\n             text-white rounded-r-3xl\">\n\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\n    <div class=\"flex flex-col items-center gap-4\">\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\n\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\n      <button (click)=\"toggleAll()\"\n        tooltipPosition=\"right\"\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\n        <i class=\"pi pi-bars text-lg\"></i>\n      </button>\n\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\n      @for (item of secondToLastLevel$ | async; track item) {\n        <div class=\"relative flex flex-col items-center\">\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\n          <div (click)=\"onMainClick(item)\"\n            [pTooltip]=\"item.label | translate\"\n            tooltipPosition=\"right\"\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\n                        hover:bg-white/20 transition-all duration-200\"\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\n            <i [class]=\"item.icon + ' text-xl'\"></i>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\n    </div>\n  </div>\n\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\n  @if (subSidebarVisible) {\n    <div\n     class=\"w-65 border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\n            shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto transition-all duration-300\"\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\n      <button (click)=\"closeMenu()\"\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\n        <span>{{ 'back' | translate }}</span>\n      </button>\n      <!-- Recursive rendering -->\n     @if (menuItems$ | async; as menuItems) {\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\n}\n\n<ng-template #renderMenu let-items let-level=\"level\">\n  @for (item of items; track item) {\n\n   @if (!item.items?.length) {\n  @let link = getLinkProps(item);\n  <div class=\"mb-1\">\n  @if (link.isExternal) {\n    <a [href]=\"link.href\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       (click)=\"$event.stopPropagation()\"\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n      <i [class]=\"item.icon + ' text-base'\"></i>\n      <span>{{ item.label | translate }}</span>\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\n    </a>\n  } @else {\n    <div class=\"flex items-center gap-2\">\n      <a [routerLink]=\"link.routerLink\"\n         (click)=\"onNavigate()\"\n         routerLinkActive=\"active-link\"\n         class=\"flex-1 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\n        <i [class]=\"item.icon + ' text-base'\"></i>\n        <span>{{ item.label | translate }}</span>\n      </a>\n\n@if (link.addRoute) {\n  <a\n    [routerLink]=\"[link.addRoute]\"\n    (click)=\"$event.stopPropagation(); onNavigate()\"\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\n    [pTooltip]=\"'ADD' | translate\"\n    tooltipPosition=\"top\">\n    <i class=\"pi pi-plus text-xs\"></i>\n  </a>\n}\n    </div>\n  }\n</div>\n}\n\n    @if (item.items?.length) {\n      <div class=\"mb-1\">\n\n        <div\n          (click)=\"onParentClick(item)\"\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\n          [ngClass]=\"{\n            'font-bold': level === 1,\n            'font-semibold': level === 2,\n            'font-medium': level >= 3,\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\n          }\"\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\n\n          <div class=\"flex items-center gap-2\">\n\n            <i [class]=\"item.icon + ' text-base'\"></i>\n\n            <span>\n              {{ item.label | translate }}\n            </span>\n\n          </div>\n\n          <i\n            class=\"pi\"\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\n            style=\"font-size:0.6rem;\">\n          </i>\n\n        </div>\n\n        @if (item.expanded) {\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\n\n            <ng-container\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\n            </ng-container>\n\n          </div>\n        }\n\n      </div>\n    }\n\n  }\n</ng-template>\n\n  </div>\n}\n\n</aside>\n\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\n@if (isMobile && !sidebarVisible) {\n  <button\n    class=\"floating-btn\"\n    (click)=\"openMenu()\"\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\n    tooltipPosition=\"top\">\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\n  </button>\n}\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.render-menu-container span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"] }]
+            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\"\r\n  [ngClass]=\"{ 'w-0 overflow-hidden': !sidebarVisible && isMobile }\">\r\n\r\n  <!-- \uD83C\uDFA8 \u0627\u0644\u0634\u0631\u064A\u0637 \u0627\u0644\u062C\u0627\u0646\u0628\u064A \u0627\u0644\u0631\u0626\u064A\u0633\u064A -->\r\n  <div\r\n      class=\"flex flex-col justify-between pt-4 pb-2 w-16 border-l shadow-xl\r\n             bg-gradient-to-b from-primary-500 via-primary-600 to-primary-700\r\n             text-white rounded-r-3xl\">\r\n\r\n    <!-- \uD83D\uDD1D \u0627\u0644\u0623\u0639\u0644\u0649 -->\r\n    <div class=\"flex flex-col items-center gap-4\">\r\n      <img src=\"/assets/logo.png\" alt=\"Logo\"\r\n        class=\"w-9 h-9 mt-1 rounded-lg shadow-sm\"/>\r\n\r\n      <!-- \u0632\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 -->\r\n      <!-- [pTooltip]=\"'TOGGLE_MENU' | translate\" -->\r\n      <button (click)=\"toggleAll()\"\r\n        tooltipPosition=\"right\"\r\n        class=\"text-white hover:scale-110 transition-transform duration-200\">\r\n        <i class=\"pi pi-bars text-lg\"></i>\r\n      </button>\r\n\r\n      <!-- \u0623\u064A\u0642\u0648\u0646\u0627\u062A -->\r\n      @for (item of secondToLastLevel$ | async; track item) {\r\n        <div class=\"relative flex flex-col items-center\">\r\n          <!-- \u0627\u0644\u0623\u064A\u0642\u0648\u0646\u0629 -->\r\n          <div (click)=\"onMainClick(item)\"\r\n            [pTooltip]=\"item.label | translate\"\r\n            tooltipPosition=\"right\"\r\n                 class=\"relative flex items-center justify-center w-10 h-10 rounded-xl cursor-pointer\r\n                        hover:bg-white/20 transition-all duration-200\"\r\n            [ngClass]=\"{ 'bg-white/30 scale-105 shadow-inner': item.expanded }\">\r\n            <i [class]=\"item.icon + ' text-xl'\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- \u2699\uFE0F \u0627\u0644\u0623\u0633\u0641\u0644 -->\r\n    <div class=\"flex flex-col items-center pb-3 text-white/80\">\r\n      <i class=\"pi pi-cog text-lg hover:text-white cursor-pointer transition\"></i>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \uD83D\uDCCB \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0641\u0631\u0639\u064A\u0629 -->\r\n  @if (subSidebarVisible) {\r\n    <div\r\n    class=\"w-[290px] max-w-[290px] min-w-[260px] border-l border-gray-200 dark:border-gray-700 glass-bg animate-slideIn\r\n       shadow-2xl rounded-l-3xl p-4 rtl:text-right overflow-y-auto overflow-x-hidden transition-all duration-300\"\r\n      [ngClass]=\"{ 'absolute top-0 right-16 h-full z-40': isMobile }\">\r\n      <!-- \u0632\u0631 \u0631\u062C\u0648\u0639 -->\r\n      <button (click)=\"closeMenu()\"\r\n        class=\"flex items-center gap-2 mb-4 text-gray-500 dark:text-gray-300 hover:text-primary-600 transition\">\r\n        <i class=\"pi\" [ngClass]=\"isMobile ? 'pi-angle-right' : 'pi-angle-right'\"></i>\r\n        <span>{{ 'back' | translate }}</span>\r\n      </button>\r\n      <!-- Recursive rendering -->\r\n     @if (menuItems$ | async; as menuItems) {\r\n  <ng-container *ngTemplateOutlet=\"renderMenu; context:{ $implicit: menuItems, level: 1 }\"></ng-container>\r\n}\r\n\r\n<ng-template #renderMenu let-items let-level=\"level\">\r\n  @for (item of items; track item) {\r\n\r\n   @if (!item.items?.length) {\r\n  @let link = getLinkProps(item);\r\n <div class=\"mb-1\">\r\n  @if (link.isExternal) {\r\n    <a [href]=\"link.href\"\r\n       target=\"_blank\"\r\n       rel=\"noopener noreferrer\"\r\n       (click)=\"$event.stopPropagation()\"\r\n       class=\"flex items-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n      <i [class]=\"item.icon + ' text-base'\"></i>\r\n      <span class=\"min-w-0 break-words whitespace-normal\">{{ item.label | translate }}</span>\r\n      <i class=\"pi pi-external-link text-[10px] opacity-50\"></i>\r\n    </a>\r\n  } @else {\r\n    <div class=\"flex items-center gap-2\">\r\n      <a [routerLink]=\"link.routerLink\"\r\n         (click)=\"onNavigate()\"\r\n         routerLinkActive=\"active-link\"\r\n         class=\"flex-1 min-w-0 flex items-center gap-2 px-2 py-1 rounded-lg transition-all hover:bg-primary-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200\">\r\n        <i [class]=\"item.icon + ' text-base'\"></i>\r\n        <span class=\"min-w-0 break-words whitespace-normal\">\r\n          {{ item.label | translate }}</span>\r\n      </a>\r\n\r\n@if (link.addRoute) {\r\n  <a\r\n    [routerLink]=\"[link.addRoute]\"\r\n    (click)=\"$event.stopPropagation(); onNavigate()\"\r\n    class=\"shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full text-gray-400 hover:text-primary-500 hover:bg-primary-50 dark:text-gray-500 dark:hover:text-primary-400 dark:hover:bg-primary-900/20 transition-all duration-200\"\r\n    [pTooltip]=\"'ADD' | translate\"\r\n    tooltipPosition=\"top\">\r\n    <i class=\"pi pi-plus text-xs\"></i>\r\n  </a>\r\n}\r\n    </div>\r\n  }\r\n</div>\r\n}\r\n\r\n    @if (item.items?.length) {\r\n      <div class=\"mb-1\">\r\n\r\n        <div\r\n          (click)=\"onParentClick(item)\"\r\n          [style.font-size.rem]=\"1.1 - (level * 0.05)\"\r\n          [ngClass]=\"{\r\n            'font-bold': level === 1,\r\n            'font-semibold': level === 2,\r\n            'font-medium': level >= 3,\r\n            'bg-primary-50 text-primary-700 border-r-4 border-primary-500': item.expanded\r\n          }\"\r\n          class=\"flex justify-between items-center py-2 px-3 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-800 dark:text-gray-200\">\r\n\r\n          <div class=\"flex items-center gap-2\">\r\n\r\n            <i [class]=\"item.icon + ' text-base'\"></i>\r\n\r\n            <span>\r\n              {{ item.label | translate }}\r\n            </span>\r\n\r\n          </div>\r\n\r\n          <i\r\n            class=\"pi\"\r\n            [ngClass]=\"item.expanded ? 'pi-chevron-down' : 'pi-chevron-left'\"\r\n            style=\"font-size:0.6rem;\">\r\n          </i>\r\n\r\n        </div>\r\n\r\n        @if (item.expanded) {\r\n          <div class=\"mr-4 border-r border-gray-200 dark:border-gray-700 pr-2 mt-1\">\r\n\r\n            <ng-container\r\n              *ngTemplateOutlet=\"renderMenu; context:{ $implicit: item.items, level: level + 1 }\">\r\n            </ng-container>\r\n\r\n          </div>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n  }\r\n</ng-template>\r\n\r\n  </div>\r\n}\r\n\r\n</aside>\r\n\r\n<!-- \uD83C\uDF1F \u0627\u0644\u0632\u0631 \u0627\u0644\u0639\u0627\u0626\u0645 \u0627\u0644\u062D\u062F\u064A\u062B -->\r\n@if (isMobile && !sidebarVisible) {\r\n  <button\r\n    class=\"floating-btn\"\r\n    (click)=\"openMenu()\"\r\n    pTooltip=\"{{ 'MENU.OPEN' | translate }}\"\r\n    tooltipPosition=\"top\">\r\n    <img src=\"/assets/logo.png\" alt=\"App Icon\" />\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";@keyframes slideIn{0%{transform:translate(60px);opacity:0}to{transform:translate(0);opacity:1}}.animate-slideIn{animation:slideIn .35s cubic-bezier(.25,1,.5,1)}.glass-bg{background:#ffffffbf;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.25)}@media(max-width:1024px){aside{position:fixed;top:0;right:0;height:100vh;z-index:50}}.floating-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--p-primary-500),var(--p-primary-700));box-shadow:0 4px 18px #00000040;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.floating-btn:hover{transform:scale(1.1) rotate(5deg)}.floating-btn img{width:28px;height:28px;border-radius:10px}.active-link{background-color:var(--p-primary-500)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 6px -1px #0000001a;transform:translate(-3px)}.active-link i{color:#fff!important}.active-item-link{background:linear-gradient(to left,var(--p-primary-50),transparent);color:var(--p-primary-600)!important;position:relative;border-right:3px solid var(--p-primary-500);border-radius:0 12px 12px 0}.active-item-link i{color:var(--p-primary-500);filter:drop-shadow(0 0 5px rgba(var(--p-primary-500-rgb),.4))}.active-item-link span{font-weight:700}.animate-slideIn{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.glass-bg::-webkit-scrollbar{width:4px}.glass-bg::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.active-link{background-color:var(--p-primary-50)!important;color:var(--p-primary-700)!important;border-right:4px solid var(--p-primary-500)!important;border-radius:4px 12px 12px 4px!important}.active-link span{font-weight:800!important}.active-link i{color:var(--p-primary-600)!important;transform:scale(1.1)}aside{-webkit-font-smoothing:antialiased;letter-spacing:-.01em}.dark .active-link{background-color:rgba(var(--p-primary-500-rgb),.15)!important;color:var(--p-primary-300)!important}.submenu{animation:menuOpen .25s ease}@keyframes menuOpen{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}aside{box-shadow:0 10px 40px #00000026}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -1447,11 +1447,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 +1466,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 +1646,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 {