@taon-dev/ui 21.0.4 → 21.0.6

package/websql-prod/fesm2022/ui-websql-prod.mjs

@@ -2,7 +2,7 @@ import { decodeEnv, UtilsJson__NS__getValue, ___NS__isFunction, ___NS__isBoolean
 import { Translation } from '@taon-dev/i18n/websql-prod';
 import { BaseCommandLineFeature } from 'tnp-helpers/websql-prod';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, signal, Input, ChangeDetectionStrategy, Component, ViewChild, Injectable, DestroyRef, ChangeDetectorRef, EventEmitter, Output } from '@angular/core';
+import { inject, ElementRef, Directive, signal, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, Injectable, 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';
@@ -16,26 +16,26 @@ import * as i2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Resource__NS__listenErrors, getDefaultModel } from 'ng2-rest/websql-prod';
+import { TaonAdminService, getHttpStatus, ClassHelpers__NS__getName, Symbols__NS__old__NS__X_TOTAL_COUNT } from 'taon/websql-prod';
 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 i2$2 from '@angular/material/button';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$1 from '@angular/material/button-toggle';
+import * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i1$2 from '@angular/forms';
+import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$2 from '@angular/material/form-field';
+import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
+import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
-import * as i6 from '@ng-matero/extensions/grid';
+import * as i7 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
-import { ClassHelpers__NS__getName, Symbols__NS__old } from 'taon/websql-prod';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i4$1 from '@angular/material/tooltip';
+import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 // THIS FILE IS GENERATED - DO NOT MODIFY
@@ -902,7 +902,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.4';
+const CURRENT_PACKAGE_VERSION = '21.0.6';
 // 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-websql-prod-my-organization-proj.ts.en-US.i18n.data-CoSik70Y.mjs')).default, "pl-PL": async () => (await import('./ui-websql-prod-my-organization-proj.ts.pl-PL.i18n.data-BZPsT3Zk.mjs')).default } });
@@ -1323,33 +1323,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 //#region imports
 //#endregion
 class TaonAdminLayoutComponent {
+    get isDialogMode() {
+        const windowElement = this.getWindowElement();
+        if (!windowElement) {
+            return false;
+        }
+        return !windowElement.classList.contains('taon-fullscreen');
+    }
     get basePathSegments() {
         return this.basePath.split('/').filter(Boolean);
     }
+    get normalizedBasePath() {
+        const value = '/' + this.basePath.split('/').filter(Boolean).join('/');
+        return value === '/' ? '/' : value;
+    }
     //#endregion
     //#region constructor
-    constructor(router) {
+    constructor(router, hostElement) {
         this.router = router;
+        this.hostElement = hostElement;
         this.basePath = '';
-        /**
-         * Children discovered for each level-1 route.
-         *
-         * Session -> [Tracking, Providers]
-         * Users   -> [Manager]
-         */
+        this.layoutWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "layoutWidth" }] : []));
+        this.layoutHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "layoutHeight" }] : []));
         this.level2Routes = signal(new Map(), ...(ngDevMode ? [{ debugName: "level2Routes" }] : []));
         this.currentUrl = signal('', ...(ngDevMode ? [{ debugName: "currentUrl" }] : []));
         this.loadingRoutes = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingRoutes" }] : []));
         this.asideOpened = signal(window.innerWidth >= 768, ...(ngDevMode ? [{ debugName: "asideOpened" }] : []));
+        this.resizing = false;
+        this.resizeStartX = 0;
+        this.resizeStartY = 0;
+        this.resizeStartWidth = 0;
+        this.resizeStartHeight = 0;
+        this.minDialogWidth = 500;
+        this.minDialogHeight = 350;
+        this.resize = (event) => {
+            if (!this.resizing) {
+                return;
+            }
+            const windowElement = this.getWindowElement();
+            if (!windowElement) {
+                return;
+            }
+            const windowRect = windowElement.getBoundingClientRect();
+            const deltaX = event.clientX - this.resizeStartX;
+            const deltaY = event.clientY - this.resizeStartY;
+            const maxWidth = window.innerWidth - windowRect.left;
+            const maxHeight = window.innerHeight - windowRect.top;
+            const width = Math.min(maxWidth, Math.max(this.minDialogWidth, this.resizeStartWidth + deltaX));
+            const height = Math.min(maxHeight, Math.max(this.minDialogHeight, this.resizeStartHeight + deltaY));
+            windowElement.style.width = `${width}px`;
+            windowElement.style.height = `${height}px`;
+        };
+        this.stopResize = () => {
+            if (!this.resizing) {
+                return;
+            }
+            this.resizing = false;
+            window.removeEventListener('pointermove', this.resize);
+            window.removeEventListener('pointerup', this.stopResize);
+        };
     }
     //#endregion
-    //#region methods
-    toggleAside() {
-        this.asideOpened.update(opened => !opened);
-    }
-    closeAside() {
-        this.asideOpened.set(false);
-    }
+    //#region lifecycle
     async ngOnInit() {
         await this.loadCurrentLevel1Route();
         this.router.events
@@ -1358,9 +1393,152 @@ class TaonAdminLayoutComponent {
             await this.loadCurrentLevel1Route();
         });
     }
-    // ---------------------------------------------------------------------------
-    // LEVEL 1
-    // ---------------------------------------------------------------------------
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const windowElement = this.getWindowElement();
+            // console.log('[windowElement] should not be undefined', windowElement);
+            this.updateLayoutSize();
+            this.startWindowObservers();
+        }, 500); // TODO QUICK_FIX
+    }
+    // private waitForWindowElement(
+    //   callback: (windowElement: HTMLElement) => void,
+    // ): void {
+    //   const check = () => {
+    //     console.log('Waiting for window element...');
+    //     const windowElement = this.getWindowElement();
+    //     if (windowElement) {
+    //       callback(windowElement);
+    //       return;
+    //     }
+    //     requestAnimationFrame(check);
+    //   };
+    //   check();
+    // }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        window.removeEventListener('pointermove', this.resize);
+        window.removeEventListener('pointerup', this.stopResize);
+    }
+    //#endregion
+    //#region window / layout
+    getWindowElement() {
+        return (document.querySelector('.taon-window') ??
+            document.querySelector('.taon-window-full') ??
+            undefined);
+    }
+    getDraggablePanelElement() {
+        return (document.querySelector('.taon-draggable-panel') ?? undefined);
+    }
+    startWindowObservers() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        const host = this.hostElement.nativeElement;
+        const windowElement = this.getWindowElement();
+        // console.log('WINDOW', this.getWindowElement());
+        // console.log('PANEL', this.getDraggablePanelElement());
+        // ================================================================
+        // SIZE CHANGES
+        // ================================================================
+        const observedElement = windowElement ?? host.parentElement;
+        if (observedElement) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateLayoutSize();
+            });
+            this.resizeObserver.observe(observedElement);
+        }
+        // ================================================================
+        // DIALOG <-> FULLSCREEN STATE CHANGES
+        // ================================================================
+        if (windowElement) {
+            this.mutationObserver = new MutationObserver(mutations => {
+                const classChanged = mutations.some(mutation => mutation.type === 'attributes' &&
+                    mutation.attributeName === 'class');
+                // console.log('Class changed:', classChanged);
+                if (!classChanged) {
+                    return;
+                }
+                this.windowModeChanged(windowElement);
+            });
+            this.mutationObserver.observe(windowElement, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+    }
+    windowModeChanged(windowElement) {
+        const fullscreen = windowElement.classList.contains('taon-fullscreen');
+        if (fullscreen) {
+            this.clearWindowResize(windowElement);
+        }
+        requestAnimationFrame(() => {
+            this.updateLayoutSize();
+        });
+    }
+    clearWindowResize(windowElement) {
+        windowElement.style.removeProperty('width');
+        windowElement.style.removeProperty('height');
+    }
+    windowResized() {
+        this.updateLayoutSize();
+    }
+    updateLayoutSize() {
+        const host = this.hostElement.nativeElement;
+        const hostRect = host.getBoundingClientRect();
+        const windowElement = this.getWindowElement();
+        const dialogMode = !!windowElement && !windowElement.classList.contains('taon-fullscreen');
+        // ================================================================
+        // NORMAL / FULLSCREEN
+        // ================================================================
+        if (!dialogMode) {
+            this.layoutWidth.set(Math.floor(hostRect.width));
+            this.layoutHeight.set(Math.max(0, Math.floor(window.innerHeight - hostRect.top)));
+            return;
+        }
+        // ================================================================
+        // DIALOG
+        // ================================================================
+        const windowRect = windowElement.getBoundingClientRect();
+        this.layoutWidth.set(Math.max(0, Math.floor(windowRect.right - hostRect.left)));
+        this.layoutHeight.set(Math.max(0, Math.floor(windowRect.bottom - hostRect.top)));
+    }
+    //#endregion
+    //#region dialog resizing
+    startResize(event) {
+        if (!this.isDialogMode) {
+            return;
+        }
+        const windowElement = this.getWindowElement();
+        if (!windowElement) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const windowRect = windowElement.getBoundingClientRect();
+        this.resizing = true;
+        this.resizeStartX = event.clientX;
+        this.resizeStartY = event.clientY;
+        this.resizeStartWidth = windowRect.width;
+        this.resizeStartHeight = windowRect.height;
+        window.addEventListener('pointermove', this.resize);
+        window.addEventListener('pointerup', this.stopResize);
+    }
+    //#endregion
+    //#region aside
+    toggleAside() {
+        this.asideOpened.update(opened => !opened);
+    }
+    closeAside() {
+        this.asideOpened.set(false);
+    }
+    closeAsideOnMobile() {
+        if (window.innerWidth < 768) {
+            this.closeAside();
+        }
+    }
+    //#endregion
+    //#region level 1
     async level1Clicked(route) {
         if (!route.path) {
             return;
@@ -1371,6 +1549,20 @@ class TaonAdminLayoutComponent {
             this.closeAsideOnMobile();
         }
     }
+    async panelExpanded(route, expanded) {
+        if (!expanded) {
+            return;
+        }
+        await this.ensureLevel2Loaded(route);
+    }
+    isLevel1Active(route) {
+        if (!route.path) {
+            return false;
+        }
+        return this.isPathActive([route.path]);
+    }
+    //#endregion
+    //#region level 2
     async level2Clicked(level1, level2) {
         if (!level1.path || !level2.path) {
             return;
@@ -1378,6 +1570,20 @@ class TaonAdminLayoutComponent {
         await this.navigateTo([level1.path, level2.path]);
         this.closeAsideOnMobile();
     }
+    getLevel2Routes(route) {
+        return this.level2Routes().get(route) ?? [];
+    }
+    isLevel2Active(level1, level2) {
+        if (!level1.path || !level2.path) {
+            return false;
+        }
+        return this.isPathActive([level1.path, level2.path]);
+    }
+    level2Link(level1, level2) {
+        return [this.normalizedBasePath, level1.path, level2.path];
+    }
+    //#endregion
+    //#region navigation
     outletBaseMatrixParams() {
         if (!this.outlet) {
             return {};
@@ -1390,11 +1596,6 @@ class TaonAdminLayoutComponent {
     }
     async navigateTo(routeSegments) {
         const segments = [...this.basePathSegments, ...routeSegments];
-        /**
-         * Named / auxiliary outlet:
-         *
-         * /products/123(admin:main/session/providers)
-         */
         if (this.outlet) {
             const [firstSegment, ...remainingSegments] = segments;
             if (!firstSegment) {
@@ -1404,61 +1605,15 @@ class TaonAdminLayoutComponent {
             return this.router.navigate([
                 {
                     outlets: {
-                        [this.outlet]: [
-                            firstSegment,
-                            /**
-                             * Angular interprets an object following
-                             * a segment as matrix parameters.
-                             */
-                            matrixParams,
-                            ...remainingSegments,
-                        ],
+                        [this.outlet]: [firstSegment, matrixParams, ...remainingSegments],
                     },
                 },
             ]);
         }
-        /**
-         * Normal primary outlet:
-         *
-         * /main/session/providers
-         */
         return this.router.navigate(['/', ...segments]);
     }
-    closeAsideOnMobile() {
-        if (window.innerWidth < 768) {
-            this.closeAside();
-        }
-    }
-    async panelExpanded(route, expanded) {
-        if (!expanded) {
-            return;
-        }
-        await this.ensureLevel2Loaded(route);
-    }
-    isLevel1Active(route) {
-        if (!route.path) {
-            return false;
-        }
-        return this.isPathActive([route.path]);
-    }
-    // ---------------------------------------------------------------------------
-    // LEVEL 2
-    // ---------------------------------------------------------------------------
-    getLevel2Routes(route) {
-        return this.level2Routes().get(route) ?? [];
-    }
-    isLevel2Active(level1, level2) {
-        if (!level1.path || !level2.path) {
-            return false;
-        }
-        return this.isPathActive([level1.path, level2.path]);
-    }
-    level2Link(level1, level2) {
-        return [this.normalizedBasePath, level1.path, level2.path];
-    }
-    // ---------------------------------------------------------------------------
-    // ROUTE LOADING
-    // ---------------------------------------------------------------------------
+    //#endregion
+    //#region route loading
     async ensureLevel2Loaded(level1) {
         if (this.level2Routes().has(level1)) {
             return;
@@ -1469,23 +1624,6 @@ class TaonAdminLayoutComponent {
         this.setLoading(level1, true);
         try {
             const lazyRoutes = await this.loadRouteChildren(level1);
-            /**
-             * Your lazy modules have this shape:
-             *
-             * [
-             *   {
-             *     path: '',
-             *     component: SessionComponent,
-             *     children: [
-             *       { path: 'tracking' },
-             *       { path: 'providers' }
-             *     ]
-             *   }
-             * ]
-             *
-             * The path:'' wrapper DOES NOT represent a navigation
-             * level, so unwrap it.
-             */
             const level2 = this.unwrapEmptyPathRoutes(lazyRoutes);
             const map = new Map(this.level2Routes());
             map.set(level1, level2);
@@ -1505,21 +1643,6 @@ class TaonAdminLayoutComponent {
         }
         return [];
     }
-    /**
-     * Removes structural path:'' wrappers.
-     *
-     * [
-     *   {
-     *     path: '',
-     *     component: SessionComponent,
-     *     children: [...]
-     *   }
-     * ]
-     *
-     * becomes:
-     *
-     * [...]
-     */
     unwrapEmptyPathRoutes(routes) {
         const result = [];
         for (const route of routes) {
@@ -1527,9 +1650,6 @@ class TaonAdminLayoutComponent {
                 result.push(...this.unwrapEmptyPathRoutes(route.children));
                 continue;
             }
-            /**
-             * redirects etc. shouldn't become menu entries.
-             */
             if (route.redirectTo !== undefined || route.data?.['hideInNavigation']) {
                 continue;
             }
@@ -1537,9 +1657,8 @@ class TaonAdminLayoutComponent {
         }
         return result;
     }
-    // ---------------------------------------------------------------------------
-    // DIRECT URL SUPPORT
-    // ---------------------------------------------------------------------------
+    //#endregion
+    //#region direct url support
     async loadCurrentLevel1Route() {
         const relativeSegments = this.currentRelativeSegments();
         const level1Path = relativeSegments[0];
@@ -1551,9 +1670,8 @@ class TaonAdminLayoutComponent {
             await this.ensureLevel2Loaded(level1);
         }
     }
-    // ---------------------------------------------------------------------------
-    // HELPERS
-    // ---------------------------------------------------------------------------
+    //#endregion
+    //#region helpers
     label(route) {
         return route.data?.['menuItem'] ?? this.startCase(route.path ?? '');
     }
@@ -1566,6 +1684,9 @@ class TaonAdminLayoutComponent {
     isLoading(route) {
         return this.loadingRoutes().has(route);
     }
+    isExpandable(route) {
+        return route.data?.['expandable'] !== false;
+    }
     isPathActive(routeSegments) {
         const current = this.currentRelativeSegments();
         if (current.length < routeSegments.length) {
@@ -1586,16 +1707,6 @@ class TaonAdminLayoutComponent {
         }
         return group.segments.map(segment => segment.path);
     }
-    isExpandable(route) {
-        return route.data?.['expandable'] !== false;
-    }
-    get normalizedBasePath() {
-        const value = '/' + this.basePath.split('/').filter(Boolean).join('/');
-        return value === '/' ? '/' : value;
-    }
-    cleanUrl(url) {
-        return url.split('?')[0].split('#')[0];
-    }
     setLoading(route, loading) {
         const set = new Set(this.loadingRoutes());
         if (loading) {
@@ -1611,8 +1722,8 @@ class TaonAdminLayoutComponent {
             .replace(/[-_]+/g, ' ')
             .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 }], 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" }, ngImport: i0, template: "<div class=\"flex h-dvh min-h-0 flex-col overflow-hidden\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header\n    class=\"flex h-16 shrink-0 items-center border-b border-gray-200 bg-white\">\n    <!-- hamburger ALWAYS visible -->\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"mx-2 shrink-0 cursor-pointer\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"min-w-0 flex-1\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"relative flex min-h-0 flex-1 overflow-hidden\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"absolute inset-0 z-20 bg-black/30 md:hidden\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"absolute inset-y-0 left-0 z-30 flex min-h-0 flex-col border-r border-gray-200 bg-white transition-[width,transform] duration-200 md:relative md:inset-auto md:z-auto md:translate-x-0\"\n      [class.w-72]=\"asideOpened()\"\n      [class.-translate-x-full]=\"!asideOpened()\"\n      [class.translate-x-0]=\"asideOpened()\"\n      [class.md:w-72]=\"asideOpened()\"\n      [class.md:w-0]=\"!asideOpened()\"\n      [class.md:overflow-hidden]=\"!asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"min-h-0 flex-1 overflow-y-auto\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            <!-- =================================================== -->\n            <!-- EXPANDABLE LEVEL 1 -->\n            <!-- =================================================== -->\n\n            @if (isExpandable(level1)) {\n              <mat-expansion-panel\n                [expanded]=\"isLevel1Active(level1)\"\n                (expandedChange)=\"panelExpanded(level1, $event)\">\n                <!-- ================================================= -->\n                <!-- LEVEL 1 -->\n                <!-- ================================================= -->\n\n                <mat-expansion-panel-header (click)=\"level1Clicked(level1)\">\n                  <mat-panel-title>\n                    <div class=\"flex items-center gap-3\">\n                      @if (icon(level1)) {\n                        <mat-icon [ngStyle]=\"{ color: color(level1) }\">\n                          {{ icon(level1) }}\n                        </mat-icon>\n                      }\n\n                      <span\n                        [class.font-semibold]=\"isLevel1Active(level1)\"\n                        [ngStyle]=\"{ color: color(level1) }\">\n                        {{ label(level1) }}\n                      </span>\n                    </div>\n                  </mat-panel-title>\n                </mat-expansion-panel-header>\n\n                <!-- ================================================= -->\n                <!-- LEVEL 2 -->\n                <!-- ================================================= -->\n\n                <div class=\"flex flex-col\">\n                  @if (isLoading(level1)) {\n                    <div class=\"px-4 py-2 text-sm text-gray-400\">\n                      Loading...\n                    </div>\n                  } @else {\n                    @for (\n                      level2 of getLevel2Routes(level1);\n                      track level2.path\n                    ) {\n                      <a\n                        (click)=\"level2Clicked(level1, level2)\"\n                        class=\"flex cursor-pointer items-center gap-3 px-6 py-2.5 text-sm transition-colors hover:bg-gray-100\"\n                        [class.bg-gray-100]=\"isLevel2Active(level1, level2)\"\n                        [class.font-semibold]=\"isLevel2Active(level1, level2)\">\n                        @if (icon(level2)) {\n                          <mat-icon [ngStyle]=\"{ color: color(level2) }\">\n                            {{ icon(level2) }}\n                          </mat-icon>\n                        }\n\n                        <span [ngStyle]=\"{ color: color(level2) }\">\n                          {{ label(level2) }}\n                        </span>\n                      </a>\n                    }\n                  }\n                </div>\n              </mat-expansion-panel>\n            } @else {\n              <!-- ================================================= -->\n              <!-- NON-EXPANDABLE LEVEL 1 -->\n              <!-- ================================================= -->\n\n              <a\n                (click)=\"level1Clicked(level1)\"\n                class=\"flex h-14 cursor-pointer items-center gap-3 px-6 transition-colors hover:bg-gray-100\"\n                [class.bg-gray-100]=\"isLevel1Active(level1)\"\n                [class.font-semibold]=\"isLevel1Active(level1)\">\n                @if (icon(level1)) {\n                  <mat-icon [ngStyle]=\"{ color: color(level1) }\">\n                    {{ icon(level1) }}\n                  </mat-icon>\n                }\n\n                <span [ngStyle]=\"{ color: color(level1) }\">\n                  {{ label(level1) }}\n                </span>\n              </a>\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER - ALWAYS VISIBLE -->\n      <!-- ========================================================= -->\n\n      <footer class=\"shrink-0 border-t border-gray-200 bg-white p-3\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"shrink-0\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- ROUTER CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 md:p-6\">\n        <router-outlet />\n      </div>\n    </main>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.admin-menu mat-expansion-panel{border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant);margin-top:0!important;margin-bottom:0!important}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type{border-radius:0!important}.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-aside{position:absolute;inset-block:0;left:0;z-index:30;display:flex;flex-direction:column;width:18rem;min-height:0;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease;overflow:hidden}.admin-aside-open{transform:translate(0)}@media(min-width:768px){.admin-aside{position:relative;inset:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:18rem}}\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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminLayoutComponent, decorators: [{
             type: Component,
@@ -1623,14 +1734,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatExpansionModule,
                         MatIconModule,
                         TaonAdminPageTabsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex h-dvh min-h-0 flex-col overflow-hidden\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header\n    class=\"flex h-16 shrink-0 items-center border-b border-gray-200 bg-white\">\n    <!-- hamburger ALWAYS visible -->\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"mx-2 shrink-0 cursor-pointer\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"min-w-0 flex-1\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"relative flex min-h-0 flex-1 overflow-hidden\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"absolute inset-0 z-20 bg-black/30 md:hidden\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"absolute inset-y-0 left-0 z-30 flex min-h-0 flex-col border-r border-gray-200 bg-white transition-[width,transform] duration-200 md:relative md:inset-auto md:z-auto md:translate-x-0\"\n      [class.w-72]=\"asideOpened()\"\n      [class.-translate-x-full]=\"!asideOpened()\"\n      [class.translate-x-0]=\"asideOpened()\"\n      [class.md:w-72]=\"asideOpened()\"\n      [class.md:w-0]=\"!asideOpened()\"\n      [class.md:overflow-hidden]=\"!asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"min-h-0 flex-1 overflow-y-auto\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            <!-- =================================================== -->\n            <!-- EXPANDABLE LEVEL 1 -->\n            <!-- =================================================== -->\n\n            @if (isExpandable(level1)) {\n              <mat-expansion-panel\n                [expanded]=\"isLevel1Active(level1)\"\n                (expandedChange)=\"panelExpanded(level1, $event)\">\n                <!-- ================================================= -->\n                <!-- LEVEL 1 -->\n                <!-- ================================================= -->\n\n                <mat-expansion-panel-header (click)=\"level1Clicked(level1)\">\n                  <mat-panel-title>\n                    <div class=\"flex items-center gap-3\">\n                      @if (icon(level1)) {\n                        <mat-icon [ngStyle]=\"{ color: color(level1) }\">\n                          {{ icon(level1) }}\n                        </mat-icon>\n                      }\n\n                      <span\n                        [class.font-semibold]=\"isLevel1Active(level1)\"\n                        [ngStyle]=\"{ color: color(level1) }\">\n                        {{ label(level1) }}\n                      </span>\n                    </div>\n                  </mat-panel-title>\n                </mat-expansion-panel-header>\n\n                <!-- ================================================= -->\n                <!-- LEVEL 2 -->\n                <!-- ================================================= -->\n\n                <div class=\"flex flex-col\">\n                  @if (isLoading(level1)) {\n                    <div class=\"px-4 py-2 text-sm text-gray-400\">\n                      Loading...\n                    </div>\n                  } @else {\n                    @for (\n                      level2 of getLevel2Routes(level1);\n                      track level2.path\n                    ) {\n                      <a\n                        (click)=\"level2Clicked(level1, level2)\"\n                        class=\"flex cursor-pointer items-center gap-3 px-6 py-2.5 text-sm transition-colors hover:bg-gray-100\"\n                        [class.bg-gray-100]=\"isLevel2Active(level1, level2)\"\n                        [class.font-semibold]=\"isLevel2Active(level1, level2)\">\n                        @if (icon(level2)) {\n                          <mat-icon [ngStyle]=\"{ color: color(level2) }\">\n                            {{ icon(level2) }}\n                          </mat-icon>\n                        }\n\n                        <span [ngStyle]=\"{ color: color(level2) }\">\n                          {{ label(level2) }}\n                        </span>\n                      </a>\n                    }\n                  }\n                </div>\n              </mat-expansion-panel>\n            } @else {\n              <!-- ================================================= -->\n              <!-- NON-EXPANDABLE LEVEL 1 -->\n              <!-- ================================================= -->\n\n              <a\n                (click)=\"level1Clicked(level1)\"\n                class=\"flex h-14 cursor-pointer items-center gap-3 px-6 transition-colors hover:bg-gray-100\"\n                [class.bg-gray-100]=\"isLevel1Active(level1)\"\n                [class.font-semibold]=\"isLevel1Active(level1)\">\n                @if (icon(level1)) {\n                  <mat-icon [ngStyle]=\"{ color: color(level1) }\">\n                    {{ icon(level1) }}\n                  </mat-icon>\n                }\n\n                <span [ngStyle]=\"{ color: color(level1) }\">\n                  {{ label(level1) }}\n                </span>\n              </a>\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER - ALWAYS VISIBLE -->\n      <!-- ========================================================= -->\n\n      <footer class=\"shrink-0 border-t border-gray-200 bg-white p-3\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"shrink-0\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- ROUTER CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"min-h-0 flex-1 overflow-y-auto p-4 md:p-6\">\n        <router-outlet />\n      </div>\n    </main>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;min-height:0}.admin-menu mat-expansion-panel{border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant);margin-top:0!important;margin-bottom:0!important}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type{border-radius:0!important}.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-aside{position:absolute;inset-block:0;left:0;z-index:30;display:flex;flex-direction:column;width:18rem;min-height:0;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease;overflow:hidden}.admin-aside-open{transform:translate(0)}@media(min-width:768px){.admin-aside{position:relative;inset:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:18rem}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { routes: [{
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i0.ElementRef }], propDecorators: { routes: [{
                 type: Input,
                 args: [{ required: true }]
             }], basePath: [{
                 type: Input
             }], outlet: [{
                 type: Input
+            }], windowResized: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 const TaonBaselineBackofficeOutletName = 'admin';
@@ -1742,7 +1856,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: i2$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$1.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$1.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$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonErrorDetailsDialogComponent, decorators: [{
             type: Component,
@@ -1842,7 +1956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-const t = Translation.for('src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts', { "src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts": { "en-US": async () => (await import('./ui-websql-prod-taon-backoffice-notifications.component.ts.en-US.i18n.data-uyZjV7Qx.mjs')).default, "pl-PL": async () => (await import('./ui-websql-prod-taon-backoffice-notifications.component.ts.pl-PL.i18n.data-s0tK5HDk.mjs')).default } });
+const t = Translation.for('src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts', { "src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts": { "en-US": async () => (await import('./ui-websql-prod-taon-backoffice-notifications.component.ts.en-US.i18n.data-DdHr5V8R.mjs')).default, "pl-PL": async () => (await import('./ui-websql-prod-taon-backoffice-notifications.component.ts.pl-PL.i18n.data-CD5ZqDCD.mjs')).default } });
 class TaonBackofficeNotificationsComponent {
     //#endregion
     //#region constructor
@@ -1851,6 +1965,7 @@ class TaonBackofficeNotificationsComponent {
         this.t = t.for(this);
         this.notification = inject(TaonBackofficeNotificationsService);
         this.destroyRef = inject(DestroyRef);
+        this.taonAdminService = inject(TaonAdminService);
         Resource__NS__listenErrors
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((error) => {
@@ -1861,10 +1976,17 @@ class TaonBackofficeNotificationsComponent {
             if (!jsonMsg?.message) {
                 console.log({ error });
             }
-            this.notification.error({
-                title: jsonMsg?.message || t.gettext('Unknown error'),
-                details: jsonMsg?.details,
-            });
+            const statusCode = jsonMsg.status ?? error.statusCode;
+            const httpStatus = getHttpStatus(statusCode, jsonMsg.message);
+            if (this.taonAdminService.shouldSkipShowingError(httpStatus)) {
+                console.log(`[@taon-dev/sudo] Skipping notificaiton for message "${jsonMsg.message}" (code=${statusCode})`);
+            }
+            else {
+                this.notification.error({
+                    title: jsonMsg?.message || t.gettext('Unknown error'),
+                    details: jsonMsg?.details,
+                });
+            }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonBackofficeNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1889,7 +2011,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: i2$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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonConfirmDialogComponent, decorators: [{
             type: Component,
@@ -1913,6 +2035,7 @@ const defaultColumns = [
 ];
 class TaonDatatableComponent {
     constructor() {
+        //#region fields & getters
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
         //#region inputs
@@ -1941,6 +2064,7 @@ class TaonDatatableComponent {
         this.reload$ = new BehaviorSubject(undefined);
         this.searchChange$ = new Subject();
         this.data$ = this.reload$.pipe(switchMap(() => this.loadData()));
+        this.expandedRows = new Set();
     }
     set data(value) {
         this._data = value ?? undefined;
@@ -1964,7 +2088,24 @@ class TaonDatatableComponent {
         return this.columns.filter(column => Boolean(column.field));
     }
     //#endregion
-    //#region init
+    //#endregion
+    //#region expansion
+    onExpansionChange(event) {
+        // console.log(event);
+        // adapt this depending on exact MtxGrid event shape
+        if (event.expanded) {
+            this.expandedRows.add(event.data);
+        }
+        else {
+            this.expandedRows.delete(event.data);
+        }
+        this.expansionChange.emit(event);
+    }
+    isExpanded(row) {
+        return this.expandedRows.has(row);
+    }
+    //#endregion
+    //#region hooks
     ngOnInit() {
         this.prepareColumns();
         // console.log({ columns: this.columns });
@@ -2131,7 +2272,7 @@ class TaonDatatableComponent {
             : this.entityCrudController.paginationQuery)(query).request()
             .observable).pipe(tap(response => {
             this.totalElements =
-                Number(response.headers.get(Symbols__NS__old.X_TOTAL_COUNT)) || 0;
+                Number(response.headers.get(Symbols__NS__old__NS__X_TOTAL_COUNT)) || 0;
         }), map(response => this.prepareRows(response.body.json)), catchError(error => {
             console.error(`[taon-datatable] Unable to load data from ` +
                 `${ClassHelpers__NS__getName(this.entityCrudController)} ${this.safe ? 'paginationQuerySafe' : 'paginationQuery'}`, error);
@@ -2197,7 +2338,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  <!-- 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\n  <!-- 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\n  <!-- 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]=\"expansionTemplate\"\n      [length]=\"totalElements\"\n      [pageOnFront]=\"false\"\n      [pageIndex]=\"pageNumber - 1\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [showPaginator]=\"showPaginator\"\n      (expansionChange)=\"expansionChange.emit($event)\"\n      (page)=\"getNextPage($event)\"\n      (sortChange)=\"sortChanged($event)\">\n    </mtx-grid>\n  </div>\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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: i2$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: i2$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: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.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: i5.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: i6.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDatatableComponent, decorators: [{
             type: Component,
@@ -2212,7 +2353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatPaginatorModule,
                         MatSelectModule,
                         MtxGridModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full flex-col gap-3\">\n  <!-- 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\n  <!-- 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\n  <!-- 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]=\"expansionTemplate\"\n      [length]=\"totalElements\"\n      [pageOnFront]=\"false\"\n      [pageIndex]=\"pageNumber - 1\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [showPaginator]=\"showPaginator\"\n      (expansionChange)=\"expansionChange.emit($event)\"\n      (page)=\"getNextPage($event)\"\n      (sortChange)=\"sortChanged($event)\">\n    </mtx-grid>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-height:250px}:host ::ng-deep .mat-mdc-form-field{margin:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { pageNumber: [{
                 type: Input
             }], pageSize: [{
@@ -2613,7 +2754,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-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: i2$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: i4$1.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: { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDraggableButtonPanelComponent, decorators: [{
             type: Component,
@@ -2624,7 +2765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         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-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"] }]
+                    ], 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: [{
                 type: ViewChild,
                 args: [CdkDrag]