@taon-dev/ui 21.0.11 → 21.0.13

package/browser/fesm2022/ui-browser.mjs

@@ -2,13 +2,15 @@ import { Translation } from '@taon-dev/i18n/browser';
 import { UtilsJson, _ } from 'tnp-core/browser';
 import { BaseCommandLineFeature } from 'tnp-helpers/browser';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, signal, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, Injectable, DestroyRef, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
+import { inject, ElementRef, Directive, signal, Injectable, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, DestroyRef, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
 import * as i2$1 from '@angular/common';
-import { CommonModule, NgIf } from '@angular/common';
-import * as i3 from '@angular/material/expansion';
+import { CommonModule, NgTemplateOutlet, NgIf } from '@angular/common';
+import * as i3$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@angular/router';
 import { NavigationEnd, RouterOutlet, RouterLink } from '@angular/router';
 import { filter, BehaviorSubject, Subject, switchMap, debounceTime, distinctUntilChanged, tap, of, from, map, catchError, finalize, firstValueFrom, take } from 'rxjs';
@@ -20,9 +22,9 @@ import { TaonAdminService, getHttpStatus, ClassHelpers, Symbols } from 'taon/bro
 import { HotToastRef, HotToastService } from '@ngneat/hot-toast';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import * as i3$1 from '@angular/material/button';
+import * as i3$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$2 from '@angular/material/button-toggle';
+import * as i3$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -35,8 +37,6 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i7 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i4$2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
 
 // THIS FILE IS GENERATED - DO NOT MODIFY
 // THIS FILE IS GENERATED - DO NOT MODIFY
@@ -68,7 +68,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.11';
+const CURRENT_PACKAGE_VERSION = '21.0.13';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 const t$1 = Translation.for('src/lib/my-organization-proj.ts', { "src/lib/my-organization-proj.ts": { "en-US": async () => (await import('./ui-browser-my-organization-proj.ts.en-US.i18n.data-CoSik70Y.mjs')).default, "pl-PL": async () => (await import('./ui-browser-my-organization-proj.ts.pl-PL.i18n.data-BZPsT3Zk.mjs')).default } });
@@ -229,9 +229,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 ;
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
+class TaonAdminMenuContext {
+    constructor() {
+        this.context = signal(undefined, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    }
+    isVisible(route) {
+        return (!route.data?.['hideInNavigation'] &&
+            this.callbacks(route)?.isVisible?.({ context: this.context() }) !== false);
+    }
+    isDisabled(route) {
+        return (this.callbacks(route)?.isDisabled?.({ context: this.context() }) === true);
+    }
+    disabledTooltip(route) {
+        return this.isDisabled(route)
+            ? (this.callbacks(route)?.isDisabledTooltip?.({
+                context: this.context(),
+            }) ?? '')
+            : '';
+    }
+    callbacks(route) {
+        // Angular Route.data erases the application's context type at the router boundary.
+        return route.data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminMenuContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminMenuContext }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminMenuContext, decorators: [{
+            type: Injectable
+        }] });
+
 class TaonAdminPageTabsComponent {
     constructor(router) {
         this.router = router;
+        this.menuContext = inject(TaonAdminMenuContext, { optional: true }) ??
+            new TaonAdminMenuContext();
         this.basePath = '';
         this.levels = signal([], ...(ngDevMode ? [{ debugName: "levels" }] : []));
     }
@@ -261,7 +292,9 @@ class TaonAdminPageTabsComponent {
         return expected.every((segment, index) => current[index] === segment);
     }
     async tabClicked(level, route) {
-        if (!route.path) {
+        if (!route.path ||
+            !this.menuContext.isVisible(route) ||
+            this.menuContext.isDisabled(route)) {
             return;
         }
         await this.navigateTo([
@@ -472,11 +505,11 @@ class TaonAdminPageTabsComponent {
             .replace(/\b\w/g, char => char.toUpperCase());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminPageTabsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminPageTabsComponent, isStandalone: true, selector: "taon-admin-page-tabs", inputs: { routes: "routes", basePath: "basePath", outlet: "outlet" }, ngImport: i0, template: "@if (levels().length) {\n  <div class=\"shrink-0 border-b border-gray-200 bg-white\">\n    @for (level of levels(); track level.level) {\n      <nav\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (route of level.routes; track route.path) {\n          <a\n            mat-tab-link\n            class=\"cursor-pointer\"\n            [active]=\"isActive(level, route)\"\n            (click)=\"tabClicked(level, route)\">\n            {{ label(route) }}\n          </a>\n        }\n      </nav>\n    }\n  </div>\n}\n\n<mat-tab-nav-panel #tabPanel> </mat-tab-nav-panel>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminPageTabsComponent, isStandalone: true, selector: "taon-admin-page-tabs", inputs: { routes: "routes", basePath: "basePath", outlet: "outlet" }, ngImport: i0, template: "@if (levels().length) {\n  <div class=\"shrink-0 border-b border-gray-200 bg-white\">\n    @for (level of levels(); track level.level) {\n      <nav\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (route of level.routes; track route.path) {\n          @if (menuContext.isVisible(route)) {\n            <a\n              mat-tab-link\n              class=\"cursor-pointer\"\n              [disabled]=\"menuContext.isDisabled(route)\"\n              [class.admin-tab-disabled]=\"menuContext.isDisabled(route)\"\n              [matTooltip]=\"menuContext.disabledTooltip(route)\"\n              [active]=\"isActive(level, route)\"\n              (click)=\"tabClicked(level, route)\">\n              {{ label(route) }}\n            </a>\n          }\n        }\n      </nav>\n    }\n  </div>\n}\n\n<mat-tab-nav-panel #tabPanel> </mat-tab-nav-panel>\n", styles: [".mat-mdc-tab-link.admin-tab-disabled{pointer-events:auto;cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i2.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i2.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminPageTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'taon-admin-page-tabs', standalone: true, imports: [MatTabsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (levels().length) {\n  <div class=\"shrink-0 border-b border-gray-200 bg-white\">\n    @for (level of levels(); track level.level) {\n      <nav\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (route of level.routes; track route.path) {\n          <a\n            mat-tab-link\n            class=\"cursor-pointer\"\n            [active]=\"isActive(level, route)\"\n            (click)=\"tabClicked(level, route)\">\n            {{ label(route) }}\n          </a>\n        }\n      </nav>\n    }\n  </div>\n}\n\n<mat-tab-nav-panel #tabPanel> </mat-tab-nav-panel>\n" }]
+            args: [{ selector: 'taon-admin-page-tabs', standalone: true, imports: [MatTabsModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (levels().length) {\n  <div class=\"shrink-0 border-b border-gray-200 bg-white\">\n    @for (level of levels(); track level.level) {\n      <nav\n        mat-tab-nav-bar\n        [tabPanel]=\"tabPanel\">\n        @for (route of level.routes; track route.path) {\n          @if (menuContext.isVisible(route)) {\n            <a\n              mat-tab-link\n              class=\"cursor-pointer\"\n              [disabled]=\"menuContext.isDisabled(route)\"\n              [class.admin-tab-disabled]=\"menuContext.isDisabled(route)\"\n              [matTooltip]=\"menuContext.disabledTooltip(route)\"\n              [active]=\"isActive(level, route)\"\n              (click)=\"tabClicked(level, route)\">\n              {{ label(route) }}\n            </a>\n          }\n        }\n      </nav>\n    }\n  </div>\n}\n\n<mat-tab-nav-panel #tabPanel> </mat-tab-nav-panel>\n", styles: [".mat-mdc-tab-link.admin-tab-disabled{pointer-events:auto;cursor:not-allowed;opacity:.5}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { routes: [{
                 type: Input,
                 args: [{ required: true }]
@@ -508,6 +541,9 @@ class TaonAdminLayoutComponent {
     constructor(router, hostElement) {
         this.router = router;
         this.hostElement = hostElement;
+        //#region fields and getters
+        this.menuContext = inject(TaonAdminMenuContext, { optional: true }) ??
+            new TaonAdminMenuContext();
         this.basePath = '';
         this.layoutWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "layoutWidth" }] : []));
         this.layoutHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "layoutHeight" }] : []));
@@ -706,7 +742,9 @@ class TaonAdminLayoutComponent {
     //#endregion
     //#region level 1
     async level1Clicked(route) {
-        if (!route.path) {
+        if (!route.path ||
+            !this.menuContext.isVisible(route) ||
+            this.menuContext.isDisabled(route)) {
             return;
         }
         await this.navigateTo([route.path]);
@@ -716,7 +754,9 @@ class TaonAdminLayoutComponent {
         }
     }
     async panelExpanded(route, expanded) {
-        if (!expanded) {
+        if (!expanded ||
+            !this.menuContext.isVisible(route) ||
+            this.menuContext.isDisabled(route)) {
             return;
         }
         await this.ensureLevel2Loaded(route);
@@ -730,7 +770,12 @@ class TaonAdminLayoutComponent {
     //#endregion
     //#region level 2
     async level2Clicked(level1, level2) {
-        if (!level1.path || !level2.path) {
+        if (!level1.path ||
+            !level2.path ||
+            !this.menuContext.isVisible(level1) ||
+            this.menuContext.isDisabled(level1) ||
+            !this.menuContext.isVisible(level2) ||
+            this.menuContext.isDisabled(level2)) {
             return;
         }
         await this.navigateTo([level1.path, level2.path]);
@@ -889,7 +934,7 @@ class TaonAdminLayoutComponent {
             .replace(/\b\w/g, char => char.toUpperCase());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminLayoutComponent, deps: [{ token: i1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminLayoutComponent, isStandalone: true, selector: "taon-admin-layout", inputs: { routes: "routes", basePath: "basePath", outlet: "outlet" }, host: { listeners: { "window:resize": "windowResized()" } }, ngImport: i0, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (isExpandable(level1)) {\n              <mat-expansion-panel\n                [expanded]=\"isLevel1Active(level1)\"\n                (expandedChange)=\"panelExpanded(level1, $event)\">\n                <mat-expansion-panel-header (click)=\"level1Clicked(level1)\">\n                  <mat-panel-title>\n                    <div class=\"admin-menu-item\">\n                      @if (icon(level1)) {\n                        <mat-icon\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ icon(level1) }}\n                        </mat-icon>\n                      }\n\n                      <span\n                        [class.font-semibold]=\"isLevel1Active(level1)\"\n                        [ngStyle]=\"{\n                          color: color(level1),\n                        }\">\n                        {{ label(level1) }}\n                      </span>\n                    </div>\n                  </mat-panel-title>\n                </mat-expansion-panel-header>\n\n                <div class=\"admin-level2\">\n                  @if (isLoading(level1)) {\n                    <div class=\"admin-loading\">Loading...</div>\n                  } @else {\n                    @for (\n                      level2 of getLevel2Routes(level1);\n                      track level2.path\n                    ) {\n                      <a\n                        class=\"admin-level2-item\"\n                        [class.admin-level2-item-active]=\"\n                          isLevel2Active(level1, level2)\n                        \"\n                        (click)=\"level2Clicked(level1, level2)\">\n                        @if (icon(level2)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level2),\n                            }\">\n                            {{ icon(level2) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [ngStyle]=\"{\n                            color: color(level2),\n                          }\">\n                          {{ label(level2) }}\n                        </span>\n                      </a>\n                    }\n                  }\n                </div>\n              </mat-expansion-panel>\n            } @else {\n              <a\n                class=\"admin-level1-item\"\n                [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                (click)=\"level1Clicked(level1)\">\n                @if (icon(level1)) {\n                  <mat-icon\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ icon(level1) }}\n                  </mat-icon>\n                }\n\n                <span\n                  [ngStyle]=\"{\n                    color: color(level1),\n                  }\">\n                  {{ label(level1) }}\n                </span>\n              </a>\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TaonAdminPageTabsComponent, selector: "taon-admin-page-tabs", inputs: ["routes", "basePath", "outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminLayoutComponent, isStandalone: true, selector: "taon-admin-layout", inputs: { routes: "routes", basePath: "basePath", outlet: "outlet" }, host: { listeners: { "window:resize": "windowResized()" } }, ngImport: i0, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">Loading...</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TaonAdminPageTabsComponent, selector: "taon-admin-page-tabs", inputs: ["routes", "basePath", "outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminLayoutComponent, decorators: [{
             type: Component,
@@ -899,8 +944,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         RouterLink,
                         MatExpansionModule,
                         MatIconModule,
+                        MatTooltipModule,
                         TaonAdminPageTabsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (isExpandable(level1)) {\n              <mat-expansion-panel\n                [expanded]=\"isLevel1Active(level1)\"\n                (expandedChange)=\"panelExpanded(level1, $event)\">\n                <mat-expansion-panel-header (click)=\"level1Clicked(level1)\">\n                  <mat-panel-title>\n                    <div class=\"admin-menu-item\">\n                      @if (icon(level1)) {\n                        <mat-icon\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ icon(level1) }}\n                        </mat-icon>\n                      }\n\n                      <span\n                        [class.font-semibold]=\"isLevel1Active(level1)\"\n                        [ngStyle]=\"{\n                          color: color(level1),\n                        }\">\n                        {{ label(level1) }}\n                      </span>\n                    </div>\n                  </mat-panel-title>\n                </mat-expansion-panel-header>\n\n                <div class=\"admin-level2\">\n                  @if (isLoading(level1)) {\n                    <div class=\"admin-loading\">Loading...</div>\n                  } @else {\n                    @for (\n                      level2 of getLevel2Routes(level1);\n                      track level2.path\n                    ) {\n                      <a\n                        class=\"admin-level2-item\"\n                        [class.admin-level2-item-active]=\"\n                          isLevel2Active(level1, level2)\n                        \"\n                        (click)=\"level2Clicked(level1, level2)\">\n                        @if (icon(level2)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level2),\n                            }\">\n                            {{ icon(level2) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [ngStyle]=\"{\n                            color: color(level2),\n                          }\">\n                          {{ label(level2) }}\n                        </span>\n                      </a>\n                    }\n                  }\n                </div>\n              </mat-expansion-panel>\n            } @else {\n              <a\n                class=\"admin-level1-item\"\n                [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                (click)=\"level1Clicked(level1)\">\n                @if (icon(level1)) {\n                  <mat-icon\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ icon(level1) }}\n                  </mat-icon>\n                }\n\n                <span\n                  [ngStyle]=\"{\n                    color: color(level1),\n                  }\">\n                  {{ label(level1) }}\n                </span>\n              </a>\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">Loading...</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i0.ElementRef }], propDecorators: { routes: [{
                 type: Input,
                 args: [{ required: true }]
@@ -914,8 +960,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             }] } });
 
 const TaonBaselineBackofficeOutletName = 'admin';
+//#region @browser
 function adminLazyRoute(options) {
-    const { path, loader, menuItem, icon, color, expandable, hideInNavigation } = options;
+    const { path, loader, menuItem, icon, color, expandable, hideInNavigation, isDisabled, isDisabledTooltip, isVisible, } = options;
     return {
         path,
         data: {
@@ -924,11 +971,15 @@ function adminLazyRoute(options) {
             icon,
             expandable,
             hideInNavigation,
+            isDisabled,
+            isDisabledTooltip,
+            isVisible,
         },
         loadChildren: loader,
         loadAdminChildren: loader,
     };
 }
+//#endregion
 
 class TaonBaseAdminLayoutPage {
     get hasActiveChildRoute() {
@@ -1022,7 +1073,7 @@ class TaonErrorDetailsDialogComponent {
         return `${protocol}://file${location}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonErrorDetailsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonErrorDetailsDialogComponent, isStandalone: true, selector: "taon-error-details-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Error details</h2>\n\n<mat-dialog-content>\n  <div class=\"error-message\">\n    {{ data.message }}\n  </div>\n\n  <div class=\"editor-selector\">\n    <span class=\"editor-selector-label\"> I am using editor: </span>\n\n    <mat-button-toggle-group\n      [value]=\"editor\"\n      (change)=\"setEditor($event.value)\"\n      aria-label=\"Code editor\">\n      <mat-button-toggle value=\"vscode\"> VS Code </mat-button-toggle>\n\n      <mat-button-toggle value=\"vscodium\"> VSCodium </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <pre\n    class=\"error-details\"><code>@for (stackLine of stackLines; track $index) {\n@if (stackLine.file) {<a\n  class=\"stack-link\"\n  title=\"Open {{ stackLine.file }}:{{ stackLine.line }}:{{ stackLine.column }}\"\n  (click)=\"openStackLine(stackLine)\">{{ stackLine.text }}</a>} @else {{{ stackLine.text }}}{{ '\\n' }}\n}</code></pre>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button\n    mat-button\n    mat-dialog-close>\n    Close\n  </button>\n</mat-dialog-actions>\n", styles: [".error-message{margin-bottom:16px;font-weight:500}.editor-selector{display:flex;align-items:center;gap:12px;margin-bottom:12px}.editor-selector-label{font-size:13px}.error-details{box-sizing:border-box;max-width:100%;max-height:60vh;margin:0;padding:16px;overflow-y:auto;overflow-x:hidden;border-radius:6px;background:#0000000f;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.stack-link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}.stack-link:hover{background:#00000014}.stack-line{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonErrorDetailsDialogComponent, isStandalone: true, selector: "taon-error-details-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Error details</h2>\n\n<mat-dialog-content>\n  <div class=\"error-message\">\n    {{ data.message }}\n  </div>\n\n  <div class=\"editor-selector\">\n    <span class=\"editor-selector-label\"> I am using editor: </span>\n\n    <mat-button-toggle-group\n      [value]=\"editor\"\n      (change)=\"setEditor($event.value)\"\n      aria-label=\"Code editor\">\n      <mat-button-toggle value=\"vscode\"> VS Code </mat-button-toggle>\n\n      <mat-button-toggle value=\"vscodium\"> VSCodium </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <pre\n    class=\"error-details\"><code>@for (stackLine of stackLines; track $index) {\n@if (stackLine.file) {<a\n  class=\"stack-link\"\n  title=\"Open {{ stackLine.file }}:{{ stackLine.line }}:{{ stackLine.column }}\"\n  (click)=\"openStackLine(stackLine)\">{{ stackLine.text }}</a>} @else {{{ stackLine.text }}}{{ '\\n' }}\n}</code></pre>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button\n    mat-button\n    mat-dialog-close>\n    Close\n  </button>\n</mat-dialog-actions>\n", styles: [".error-message{margin-bottom:16px;font-weight:500}.editor-selector{display:flex;align-items:center;gap:12px;margin-bottom:12px}.editor-selector-label{font-size:13px}.error-details{box-sizing:border-box;max-width:100%;max-height:60vh;margin:0;padding:16px;overflow-y:auto;overflow-x:hidden;border-radius:6px;background:#0000000f;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.stack-link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}.stack-link:hover{background:#00000014}.stack-line{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonErrorDetailsDialogComponent, decorators: [{
             type: Component,
@@ -1143,13 +1194,13 @@ class TaonBackofficeNotificationsComponent {
                 console.log({ error });
             }
             const statusCode = jsonMsg.status ?? error.statusCode;
-            const httpStatus = getHttpStatus(statusCode, jsonMsg.message);
-            if (this.taonAdminService.shouldSkipShowingError(httpStatus)) {
+            const code = jsonMsg?.code || getHttpStatus(statusCode);
+            if (this.taonAdminService.shouldSkipShowingError(code)) {
                 console.log(`[@taon-dev/sudo] Skipping notificaiton for message "${jsonMsg.message}" (code=${statusCode})`);
             }
             else {
                 this.notification.error({
-                    title: jsonMsg?.message || t.gettext('Unknown error'),
+                    title: t.translate(jsonMsg.message) || t.gettext('Unknown error'),
                     details: jsonMsg?.details,
                 });
             }
@@ -1177,7 +1228,7 @@ class TaonConfirmDialogComponent {
         this.dialogRef.close(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonConfirmDialogComponent, isStandalone: true, selector: "taon-confirm-dialog", ngImport: i0, template: "<div\n  class=\"flex min-w-[320px] max-w-[560px] flex-col gap-6 p-6 text-gray-900 dark:text-gray-100 sm:p-7\">\n  <!-- Header -->\n  <h2 class=\"m-0 text-xl leading-snug font-medium sm:text-2xl\">\n    {{ data.title }}\n  </h2>\n\n  <!-- Message -->\n  @if (data.message) {\n    <p\n      class=\"m-0 whitespace-pre-line text-base leading-relaxed text-gray-600 dark:text-gray-300 sm:text-lg\">\n      {{ data.message }}\n    </p>\n  }\n\n  <!-- Actions -->\n  <div class=\"flex flex-wrap items-center justify-end gap-3\">\n    <button\n      mat-button\n      type=\"button\"\n      (click)=\"cancel()\">\n      {{ data.cancelText || 'Cancel' }}\n    </button>\n\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      class=\"!rounded-full !px-6\"\n      (click)=\"confirm()\">\n      {{ data.confirmText || 'OK' }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonConfirmDialogComponent, isStandalone: true, selector: "taon-confirm-dialog", ngImport: i0, template: "<div\n  class=\"flex min-w-[320px] max-w-[560px] flex-col gap-6 p-6 text-gray-900 dark:text-gray-100 sm:p-7\">\n  <!-- Header -->\n  <h2 class=\"m-0 text-xl leading-snug font-medium sm:text-2xl\">\n    {{ data.title }}\n  </h2>\n\n  <!-- Message -->\n  @if (data.message) {\n    <p\n      class=\"m-0 whitespace-pre-line text-base leading-relaxed text-gray-600 dark:text-gray-300 sm:text-lg\">\n      {{ data.message }}\n    </p>\n  }\n\n  <!-- Actions -->\n  <div class=\"flex flex-wrap items-center justify-end gap-3\">\n    <button\n      mat-button\n      type=\"button\"\n      (click)=\"cancel()\">\n      {{ data.cancelText || 'Cancel' }}\n    </button>\n\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      class=\"!rounded-full !px-6\"\n      (click)=\"confirm()\">\n      {{ data.confirmText || 'OK' }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonConfirmDialogComponent, decorators: [{
             type: Component,
@@ -1501,7 +1552,7 @@ class TaonDatatableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDatatableComponent, isStandalone: true, selector: "taon-datatable", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", entityCrudController: "entityCrudController", columns: "columns", hideSearch: "hideSearch", hideAddButton: "hideAddButton", safe: "safe", searchMode: "searchMode", callQueryMethod: "callQueryMethod", data: "data", showPaginator: "showPaginator" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-3\">\n  <!-- #region toolbar -->\n  @if (!hideSearch) {\n    <div\n      class=\"flex w-full flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:flex-row md:items-center\">\n      <!-- global search -->\n      <mat-form-field\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        class=\"min-w-0 flex-1\">\n        <mat-icon matPrefix> search </mat-icon>\n\n        <input\n          matInput\n          placeholder=\"Search...\"\n          [value]=\"searchValue\"\n          (input)=\"searchChanged($any($event.target).value)\" />\n\n        @if (searchValue) {\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            (click)=\"clearSearch()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </mat-form-field>\n\n      <!-- advanced search -->\n      @if (searchMode === 'advanced') {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          (click)=\"toggleAdvancedSearch()\">\n          <mat-icon> tune </mat-icon>\n\n          Filters\n\n          @if (advancedSearchOpened) {\n            <mat-icon> expand_less </mat-icon>\n          } @else {\n            <mat-icon> expand_more </mat-icon>\n          }\n        </button>\n      }\n\n      <!-- refresh -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        title=\"Refresh\"\n        (click)=\"reload()\">\n        <mat-icon> refresh </mat-icon>\n      </button>\n\n      <!-- add -->\n      @if (!hideAddButton) {\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"addingItem.emit()\">\n          <mat-icon> add </mat-icon>\n\n          Add\n        </button>\n      }\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region advanced filters -->\n  @if (!hideSearch && searchMode === 'advanced' && advancedSearchOpened) {\n    <div\n      class=\"grid grid-cols-1 gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n      @for (column of filterableColumns; track column.field) {\n        <mat-form-field\n          appearance=\"outline\"\n          subscriptSizing=\"dynamic\"\n          class=\"w-full\">\n          <mat-label>\n            {{ column.header }}\n          </mat-label>\n\n          <input\n            matInput\n            [(ngModel)]=\"columnFilters[$any(column.field)]\"\n            (keyup.enter)=\"applyAdvancedFilters()\" />\n        </mat-form-field>\n      }\n\n      <div\n        class=\"flex items-center justify-end gap-2 md:col-span-2 lg:col-span-3 xl:col-span-4\">\n        <button\n          mat-button\n          type=\"button\"\n          (click)=\"clearSearch()\">\n          <mat-icon> filter_alt_off </mat-icon>\n\n          Clear\n        </button>\n\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"applyAdvancedFilters()\">\n          <mat-icon> filter_alt </mat-icon>\n\n          Apply filters\n        </button>\n      </div>\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region grid -->\n  <div\n    class=\"relative min-h-[250px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900\">\n    @if (isLoading) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center bg-white/60 backdrop-blur-[1px] dark:bg-gray-900/60\">\n        <div\n          class=\"flex items-center gap-2 rounded-md bg-white px-4 py-2 shadow dark:bg-gray-800\">\n          <mat-icon class=\"animate-spin\"> refresh </mat-icon>\n\n          Loading...\n        </div>\n      </div>\n    }\n\n    <mtx-grid\n      [data]=\"rows\"\n      [columns]=\"columns\"\n      [expandable]=\"expandable\"\n      [expansionTemplate]=\"lazyExpansionTemplate\"\n      [length]=\"totalElements\"\n      [pageOnFront]=\"false\"\n      [pageIndex]=\"pageNumber - 1\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [showPaginator]=\"showPaginator\"\n      (expansionChange)=\"onExpansionChange($event)\"\n      (page)=\"getNextPage($event)\"\n      (sortChange)=\"sortChanged($event)\">\n    </mtx-grid>\n\n    <ng-template\n      #lazyExpansionTemplate\n      let-row>\n      @if (isExpanded(row)) {\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: row }\">\n        </ng-container>\n      }\n    </ng-template>\n  </div>\n  <!-- #endregion -->\n</div>\n", styles: [":host{display:block;width:100%;min-height:250px}:host ::ng-deep .mat-mdc-form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MtxGridModule }, { kind: "component", type: i7.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDatatableComponent, isStandalone: true, selector: "taon-datatable", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", entityCrudController: "entityCrudController", columns: "columns", hideSearch: "hideSearch", hideAddButton: "hideAddButton", safe: "safe", searchMode: "searchMode", callQueryMethod: "callQueryMethod", data: "data", showPaginator: "showPaginator" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-3\">\n  <!-- #region toolbar -->\n  @if (!hideSearch) {\n    <div\n      class=\"flex w-full flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:flex-row md:items-center\">\n      <!-- global search -->\n      <mat-form-field\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        class=\"min-w-0 flex-1\">\n        <mat-icon matPrefix> search </mat-icon>\n\n        <input\n          matInput\n          placeholder=\"Search...\"\n          [value]=\"searchValue\"\n          (input)=\"searchChanged($any($event.target).value)\" />\n\n        @if (searchValue) {\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            (click)=\"clearSearch()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </mat-form-field>\n\n      <!-- advanced search -->\n      @if (searchMode === 'advanced') {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          (click)=\"toggleAdvancedSearch()\">\n          <mat-icon> tune </mat-icon>\n\n          Filters\n\n          @if (advancedSearchOpened) {\n            <mat-icon> expand_less </mat-icon>\n          } @else {\n            <mat-icon> expand_more </mat-icon>\n          }\n        </button>\n      }\n\n      <!-- refresh -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        title=\"Refresh\"\n        (click)=\"reload()\">\n        <mat-icon> refresh </mat-icon>\n      </button>\n\n      <!-- add -->\n      @if (!hideAddButton) {\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"addingItem.emit()\">\n          <mat-icon> add </mat-icon>\n\n          Add\n        </button>\n      }\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region advanced filters -->\n  @if (!hideSearch && searchMode === 'advanced' && advancedSearchOpened) {\n    <div\n      class=\"grid grid-cols-1 gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n      @for (column of filterableColumns; track column.field) {\n        <mat-form-field\n          appearance=\"outline\"\n          subscriptSizing=\"dynamic\"\n          class=\"w-full\">\n          <mat-label>\n            {{ column.header }}\n          </mat-label>\n\n          <input\n            matInput\n            [(ngModel)]=\"columnFilters[$any(column.field)]\"\n            (keyup.enter)=\"applyAdvancedFilters()\" />\n        </mat-form-field>\n      }\n\n      <div\n        class=\"flex items-center justify-end gap-2 md:col-span-2 lg:col-span-3 xl:col-span-4\">\n        <button\n          mat-button\n          type=\"button\"\n          (click)=\"clearSearch()\">\n          <mat-icon> filter_alt_off </mat-icon>\n\n          Clear\n        </button>\n\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"applyAdvancedFilters()\">\n          <mat-icon> filter_alt </mat-icon>\n\n          Apply filters\n        </button>\n      </div>\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region grid -->\n  <div\n    class=\"relative min-h-[250px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900\">\n    @if (isLoading) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center bg-white/60 backdrop-blur-[1px] dark:bg-gray-900/60\">\n        <div\n          class=\"flex items-center gap-2 rounded-md bg-white px-4 py-2 shadow dark:bg-gray-800\">\n          <mat-icon class=\"animate-spin\"> refresh </mat-icon>\n\n          Loading...\n        </div>\n      </div>\n    }\n\n    <mtx-grid\n      [data]=\"rows\"\n      [columns]=\"columns\"\n      [expandable]=\"expandable\"\n      [expansionTemplate]=\"lazyExpansionTemplate\"\n      [length]=\"totalElements\"\n      [pageOnFront]=\"false\"\n      [pageIndex]=\"pageNumber - 1\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [showPaginator]=\"showPaginator\"\n      (expansionChange)=\"onExpansionChange($event)\"\n      (page)=\"getNextPage($event)\"\n      (sortChange)=\"sortChanged($event)\">\n    </mtx-grid>\n\n    <ng-template\n      #lazyExpansionTemplate\n      let-row>\n      @if (isExpanded(row)) {\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: row }\">\n        </ng-container>\n      }\n    </ng-template>\n  </div>\n  <!-- #endregion -->\n</div>\n", styles: [":host{display:block;width:100%;min-height:250px}:host ::ng-deep .mat-mdc-form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MtxGridModule }, { kind: "component", type: i7.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDatatableComponent, decorators: [{
             type: Component,
@@ -1591,12 +1642,19 @@ var TaonDraggableButtonPanelState;
 //#region imports
 //#endregion
 class TaonDraggableButtonPanelComponent {
+    set context(context) {
+        this.menuContext.context.set(context);
+    }
     set state(state) {
         this.currentState.set(state);
     }
+    //#endregion
+    //#region constructor
     constructor(router) {
         this.router = router;
+        //#region fields and getters
         this.State = TaonDraggableButtonPanelState;
+        this.menuContext = inject(TaonAdminMenuContext);
         this.basePath = '';
         this.buttonIcon = 'admin_panel_settings';
         this.title = 'Admin';
@@ -1616,7 +1674,10 @@ class TaonDraggableButtonPanelComponent {
             }
         };
         this.currentState = signal(TaonDraggableButtonPanelState.CLICKABLE_BUTTON, ...(ngDevMode ? [{ debugName: "currentState" }] : []));
+        this.autoHideIcon = true;
     }
+    //#endregion
+    //#region methods / ng on init
     async ngOnInit() {
         window.addEventListener('resize', this.resizeListener);
         /**
@@ -1665,10 +1726,14 @@ class TaonDraggableButtonPanelComponent {
             this.restoreStateFromUrl();
         });
     }
+    //#endregion
+    //#region methods / ng on destroy
     ngOnDestroy() {
         window.removeEventListener('resize', this.resizeListener);
         this.routerSubscription?.unsubscribe();
     }
+    //#endregion
+    //#region methods / toogle fullscreen
     toogleFullscreen(event) {
         event.stopImmediatePropagation();
         event.stopPropagation();
@@ -1688,6 +1753,8 @@ class TaonDraggableButtonPanelComponent {
             void this.setState(TaonDraggableButtonPanelState.WINDOW);
         }
     }
+    //#endregion
+    //#region methods / effective state
     effectiveState() {
         if (this.forceFullScreen() &&
             this.currentState() !== TaonDraggableButtonPanelState.CLICKABLE_BUTTON) {
@@ -1695,9 +1762,11 @@ class TaonDraggableButtonPanelComponent {
         }
         return this.currentState();
     }
+    //#endregion
     // ===========================================================================
     // INITIAL ROUTING
     // ===========================================================================
+    //#region methods / wait for initial navigation
     async waitForInitialNavigation() {
         /**
          * Router already completed at least one navigation.
@@ -1711,6 +1780,8 @@ class TaonDraggableButtonPanelComponent {
          */
         await firstValueFrom(this.router.events.pipe(filter(event => event instanceof NavigationEnd), take(1)));
     }
+    //#endregion
+    //#region methods / ensure outlet base path
     async ensureOutletBasePath() {
         if (!this.outlet || !this.basePath) {
             return;
@@ -1767,9 +1838,11 @@ class TaonDraggableButtonPanelComponent {
             replaceUrl: true,
         });
     }
+    //#endregion
     // ===========================================================================
     // STATE
     // ===========================================================================
+    //#region methods / set state
     async setState(next) {
         if (!this.isTransitionAllowed(next)) {
             return;
@@ -1778,23 +1851,44 @@ class TaonDraggableButtonPanelComponent {
         this.stateChange.emit(next);
         await this.saveStateToUrl(next);
     }
+    //#endregion
+    //#region methods / open
     open() {
         void this.setState(TaonDraggableButtonPanelState.WINDOW);
     }
+    toggle() {
+        if (this.currentState() === this.State.CLICKABLE_BUTTON) {
+            this.open();
+        }
+        else {
+            this.returnToButton();
+        }
+    }
+    //#endregion
+    //#region methods / return to button
     returnToButton() {
+        this.resetDragPosition();
         void this.setState(TaonDraggableButtonPanelState.CLICKABLE_BUTTON);
     }
+    //#endregion
+    //#region methods / window mode
     windowMode() {
         void this.setState(TaonDraggableButtonPanelState.WINDOW);
     }
+    //#endregion
+    //#region methods / full screen draggable
     fullScreenDraggable() {
         this.resetDragPosition();
         void this.setState(TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE);
     }
+    //#endregion
+    //#region methods / lock full screen
     lockFullScreen() {
         this.resetDragPosition();
         void this.setState(TaonDraggableButtonPanelState.FULL_SCREEN_LOCKED);
     }
+    //#endregion
+    //#region methods / is dragging enabled
     isDraggingEnabled() {
         if (this.forceFullScreen()) {
             return false;
@@ -1803,9 +1897,11 @@ class TaonDraggableButtonPanelComponent {
             this.currentState() ===
                 TaonDraggableButtonPanelState.FULL_SCREEN_DRAGGABLE);
     }
+    //#endregion
     // ===========================================================================
     // URL STATE
     // ===========================================================================
+    //#region methods / restore state from url
     restoreStateFromUrl() {
         if (!this.outlet) {
             return;
@@ -1848,6 +1944,8 @@ class TaonDraggableButtonPanelComponent {
             });
         }
     }
+    //#endregion
+    //#region methods / save state to url
     async saveStateToUrl(state) {
         if (!this.outlet) {
             return;
@@ -1875,18 +1973,24 @@ class TaonDraggableButtonPanelComponent {
             replaceUrl: true,
         });
     }
+    //#endregion
+    //#region methods / is valid state
     isValidState(value) {
         return Object.values(TaonDraggableButtonPanelState).includes(value);
     }
+    //#endregion
     // ===========================================================================
     // DRAG
     // ===========================================================================
+    //#region methods / reset drag position
     resetDragPosition() {
         this.drag?.reset();
     }
+    //#endregion
     // ===========================================================================
     // TRANSITIONS
     // ===========================================================================
+    //#region methods / is transition allowed
     isTransitionAllowed(next) {
         const current = this.currentState();
         const transitions = {
@@ -1912,7 +2016,7 @@ class TaonDraggableButtonPanelComponent {
         return transitions[current].includes(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDraggableButtonPanelComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDraggableButtonPanelComponent, isStandalone: true, selector: "taon-draggable-button-panel", inputs: { basePath: "basePath", buttonIcon: "buttonIcon", title: "title", outlet: "outlet", stateParamName: "stateParamName", state: "state" }, outputs: { stateChange: "stateChange" }, viewQueries: [{ propertyName: "drag", first: true, predicate: CdkDrag, descendants: true }], ngImport: i0, template: "@if (currentState() === State.CLICKABLE_BUTTON) {\n  <!-- #region BUTTON - works on desktop AND mobile -->\n  <button\n    class=\"taon-admin-panel-toogle-open-button\"\n    mat-icon-button\n    type=\"button\"\n    [matTooltip]=\"title\"\n    (click)=\"open()\">\n    <mat-icon>\n      {{ buttonIcon }}\n    </mat-icon>\n  </button>\n  <!-- #endregion -->\n} @else {\n  <section\n    cdkDrag\n    [cdkDragDisabled]=\"!isDraggingEnabled()\"\n    class=\"taon-draggable-panel\"\n    [class.taon-window]=\"effectiveState() === State.WINDOW\"\n    [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n    [class.taon-fullscreen]=\"\n      effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n      effectiveState() === State.FULL_SCREEN_LOCKED\n    \">\n    <header\n      cdkDragHandle\n      (dblclick)=\"toogleFullscreen($event)\"\n      class=\"taon-window-bar\">\n      <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n        <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n        <span class=\"truncate font-medium\">\n          {{ title }}\n        </span>\n      </div>\n\n      <!-- #region window buttons -->\n      <div class=\"flex shrink-0 items-center\">\n        <!-- Desktop-only window/fullscreen controls -->\n        @if (!forceFullScreen()) {\n          @if (currentState() !== State.WINDOW) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Window mode\"\n              (click)=\"windowMode()\">\n              <mat-icon>filter_none</mat-icon>\n            </button>\n          }\n\n          @if (currentState() === State.WINDOW) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Full screen\"\n              (click)=\"fullScreenDraggable()\">\n              <mat-icon>fullscreen</mat-icon>\n            </button>\n          }\n\n          @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Lock full screen\"\n              (click)=\"lockFullScreen()\">\n              <mat-icon>lock_open</mat-icon>\n            </button>\n          } @else {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Unlock\"\n              (click)=\"fullScreenDraggable()\">\n              <mat-icon>lock</mat-icon>\n            </button>\n          }\n        }\n\n        <!-- ALWAYS available -->\n        <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Close admin panel\"\n          (click)=\"returnToButton()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <!-- #endregion -->\n    </header>\n\n    <div class=\"min-h-0 flex-1 overflow-hidden\">\n      <ng-content />\n    </div>\n  </section>\n}\n", styles: [":host{display:contents}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:flex;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDraggableButtonPanelComponent, isStandalone: true, selector: "taon-draggable-button-panel", inputs: { context: "context", basePath: "basePath", buttonIcon: "buttonIcon", title: "title", outlet: "outlet", stateParamName: "stateParamName", state: "state", autoHideIcon: "autoHideIcon", iconTemplate: "iconTemplate", headerCenterTemplate: "headerCenterTemplate" }, outputs: { stateChange: "stateChange" }, providers: [TaonAdminMenuContext], viewQueries: [{ propertyName: "drag", first: true, predicate: CdkDrag, descendants: true }], ngImport: i0, template: "@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {\n  @if (iconTemplate) {\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\" />\n  } @else {\n    <button\n      class=\"taon-admin-panel-toogle-open-button\"\n      [class.taon-admin-panel-toogle-button-dimmer-opacity]=\"\n        effectiveState() !== State.CLICKABLE_BUTTON\n      \"\n      mat-icon-button\n      type=\"button\"\n      [matTooltip]=\"title\"\n      (click)=\"toggle()\">\n      <mat-icon>{{ buttonIcon }}</mat-icon>\n    </button>\n  }\n}\n\n<section\n  cdkDrag\n  [hidden]=\"currentState() === State.CLICKABLE_BUTTON\"\n  [cdkDragDisabled]=\"!isDraggingEnabled()\"\n  class=\"taon-draggable-panel\"\n  [class.taon-window]=\"effectiveState() === State.WINDOW\"\n  [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n  [class.taon-fullscreen]=\"\n    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n    effectiveState() === State.FULL_SCREEN_LOCKED\n  \">\n  <header\n    cdkDragHandle\n    (dblclick)=\"toogleFullscreen($event)\"\n    class=\"taon-window-bar\">\n    <!-- LEFT -->\n    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n      <span class=\"truncate font-medium\">\n        {{ title }}\n      </span>\n    </div>\n\n    <!-- EXACT CENTER -->\n    <div class=\"flex min-w-0 items-center justify-center\">\n      @if (headerCenterTemplate) {\n        <ng-container [ngTemplateOutlet]=\"headerCenterTemplate\" />\n      }\n    </div>\n\n    <!-- #region window buttons -->\n    <div class=\"flex shrink-0 items-center\">\n      <!-- Desktop-only window/fullscreen controls -->\n      @if (!forceFullScreen()) {\n        @if (currentState() !== State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Window mode\"\n            (click)=\"windowMode()\">\n            <mat-icon>filter_none</mat-icon>\n          </button>\n        }\n\n        @if (currentState() === State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Full screen\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>fullscreen</mat-icon>\n          </button>\n        }\n\n        @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Lock full screen\"\n            (click)=\"lockFullScreen()\">\n            <mat-icon>lock_open</mat-icon>\n          </button>\n        } @else {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Unlock\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>lock</mat-icon>\n          </button>\n        }\n      }\n\n      <!-- ALWAYS available -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        matTooltip=\"Close admin panel\"\n        (click)=\"returnToButton()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <!-- #endregion -->\n  </header>\n\n  <div class=\"min-h-0 flex-1 overflow-hidden\">\n    <ng-content />\n  </div>\n</section>\n", styles: [":host{display:contents}.taon-admin-panel-toogle-button-dimmer-opacity{opacity:.6}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDraggableButtonPanelComponent, decorators: [{
             type: Component,
@@ -1920,11 +2024,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         CdkDrag,
                         CdkDragHandle,
                         NgIf,
+                        NgTemplateOutlet,
                         MatButtonModule,
                         MatIconModule,
                         MatTooltipModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (currentState() === State.CLICKABLE_BUTTON) {\n  <!-- #region BUTTON - works on desktop AND mobile -->\n  <button\n    class=\"taon-admin-panel-toogle-open-button\"\n    mat-icon-button\n    type=\"button\"\n    [matTooltip]=\"title\"\n    (click)=\"open()\">\n    <mat-icon>\n      {{ buttonIcon }}\n    </mat-icon>\n  </button>\n  <!-- #endregion -->\n} @else {\n  <section\n    cdkDrag\n    [cdkDragDisabled]=\"!isDraggingEnabled()\"\n    class=\"taon-draggable-panel\"\n    [class.taon-window]=\"effectiveState() === State.WINDOW\"\n    [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n    [class.taon-fullscreen]=\"\n      effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n      effectiveState() === State.FULL_SCREEN_LOCKED\n    \">\n    <header\n      cdkDragHandle\n      (dblclick)=\"toogleFullscreen($event)\"\n      class=\"taon-window-bar\">\n      <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n        <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n        <span class=\"truncate font-medium\">\n          {{ title }}\n        </span>\n      </div>\n\n      <!-- #region window buttons -->\n      <div class=\"flex shrink-0 items-center\">\n        <!-- Desktop-only window/fullscreen controls -->\n        @if (!forceFullScreen()) {\n          @if (currentState() !== State.WINDOW) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Window mode\"\n              (click)=\"windowMode()\">\n              <mat-icon>filter_none</mat-icon>\n            </button>\n          }\n\n          @if (currentState() === State.WINDOW) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Full screen\"\n              (click)=\"fullScreenDraggable()\">\n              <mat-icon>fullscreen</mat-icon>\n            </button>\n          }\n\n          @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Lock full screen\"\n              (click)=\"lockFullScreen()\">\n              <mat-icon>lock_open</mat-icon>\n            </button>\n          } @else {\n            <button\n              mat-icon-button\n              type=\"button\"\n              matTooltip=\"Unlock\"\n              (click)=\"fullScreenDraggable()\">\n              <mat-icon>lock</mat-icon>\n            </button>\n          }\n        }\n\n        <!-- ALWAYS available -->\n        <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Close admin panel\"\n          (click)=\"returnToButton()\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      <!-- #endregion -->\n    </header>\n\n    <div class=\"min-h-0 flex-1 overflow-hidden\">\n      <ng-content />\n    </div>\n  </section>\n}\n", styles: [":host{display:contents}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:flex;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { drag: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TaonAdminMenuContext], template: "@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {\n  @if (iconTemplate) {\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\" />\n  } @else {\n    <button\n      class=\"taon-admin-panel-toogle-open-button\"\n      [class.taon-admin-panel-toogle-button-dimmer-opacity]=\"\n        effectiveState() !== State.CLICKABLE_BUTTON\n      \"\n      mat-icon-button\n      type=\"button\"\n      [matTooltip]=\"title\"\n      (click)=\"toggle()\">\n      <mat-icon>{{ buttonIcon }}</mat-icon>\n    </button>\n  }\n}\n\n<section\n  cdkDrag\n  [hidden]=\"currentState() === State.CLICKABLE_BUTTON\"\n  [cdkDragDisabled]=\"!isDraggingEnabled()\"\n  class=\"taon-draggable-panel\"\n  [class.taon-window]=\"effectiveState() === State.WINDOW\"\n  [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n  [class.taon-fullscreen]=\"\n    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n    effectiveState() === State.FULL_SCREEN_LOCKED\n  \">\n  <header\n    cdkDragHandle\n    (dblclick)=\"toogleFullscreen($event)\"\n    class=\"taon-window-bar\">\n    <!-- LEFT -->\n    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n      <span class=\"truncate font-medium\">\n        {{ title }}\n      </span>\n    </div>\n\n    <!-- EXACT CENTER -->\n    <div class=\"flex min-w-0 items-center justify-center\">\n      @if (headerCenterTemplate) {\n        <ng-container [ngTemplateOutlet]=\"headerCenterTemplate\" />\n      }\n    </div>\n\n    <!-- #region window buttons -->\n    <div class=\"flex shrink-0 items-center\">\n      <!-- Desktop-only window/fullscreen controls -->\n      @if (!forceFullScreen()) {\n        @if (currentState() !== State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Window mode\"\n            (click)=\"windowMode()\">\n            <mat-icon>filter_none</mat-icon>\n          </button>\n        }\n\n        @if (currentState() === State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Full screen\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>fullscreen</mat-icon>\n          </button>\n        }\n\n        @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Lock full screen\"\n            (click)=\"lockFullScreen()\">\n            <mat-icon>lock_open</mat-icon>\n          </button>\n        } @else {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Unlock\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>lock</mat-icon>\n          </button>\n        }\n      }\n\n      <!-- ALWAYS available -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        matTooltip=\"Close admin panel\"\n        (click)=\"returnToButton()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <!-- #endregion -->\n  </header>\n\n  <div class=\"min-h-0 flex-1 overflow-hidden\">\n    <ng-content />\n  </div>\n</section>\n", styles: [":host{display:contents}.taon-admin-panel-toogle-button-dimmer-opacity{opacity:.6}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { context: [{
+                type: Input
+            }], drag: [{
                 type: ViewChild,
                 args: [CdkDrag]
             }], basePath: [{
@@ -1941,6 +2048,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Input
             }], stateChange: [{
                 type: Output
+            }], autoHideIcon: [{
+                type: Input
+            }], iconTemplate: [{
+                type: Input
+            }], headerCenterTemplate: [{
+                type: Input
             }] } });
 
 //#endregion
@@ -1972,5 +2085,5 @@ var index = {};
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, PROJECT_NPM_NAME, TaonAdminLayoutComponent, TaonAdminPageTabsComponent, TaonBackofficeNotificationsComponent, TaonBackofficeNotificationsService, TaonBaseAdminLayoutPage, TaonBaselineBackofficeOutletName, TaonConfirmDialogComponent, TaonDatatableComponent, TaonDatatableRoutes, TaonDraggableButtonPanelComponent, TaonDraggableButtonPanelRoutes, TaonDraggableButtonPanelState, TaonErrorDetailsDialogComponent, TaonErrorToastComponent, TaonHorizontalWheelScrollDirective, adminLazyRoute, myOrgProj, startCli };
+export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, PROJECT_NPM_NAME, TaonAdminLayoutComponent, TaonAdminMenuContext, TaonAdminPageTabsComponent, TaonBackofficeNotificationsComponent, TaonBackofficeNotificationsService, TaonBaseAdminLayoutPage, TaonBaselineBackofficeOutletName, TaonConfirmDialogComponent, TaonDatatableComponent, TaonDatatableRoutes, TaonDraggableButtonPanelComponent, TaonDraggableButtonPanelRoutes, TaonDraggableButtonPanelState, TaonErrorDetailsDialogComponent, TaonErrorToastComponent, TaonHorizontalWheelScrollDirective, adminLazyRoute, myOrgProj, startCli };
 //# sourceMappingURL=ui-browser.mjs.map