@taon-dev/ui 21.0.26 → 21.0.28

package/websql/fesm2022/{ui-websql-taon-datatable.component.ts.pl-PL.i18n.data-CrDbBs1M.mjs.map → ui-websql-taon-datatable.component.ts.pl-PL.i18n.data-CLuM0VTt.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ui-websql-taon-datatable.component.ts.pl-PL.i18n.data-CrDbBs1M.mjs","sources":["../../../tmp-libs-for-dist-websql/ui/projects/ui/src/lib/taon-datatable/i18n/taon-datatable.component.ts.pl-PL.i18n.data.ts"],"sourcesContent":["// THIS FILE IS GENERATED - DO NOT MODIFY\n\nexport interface PlPlTraslationOverrideSrcLibTaonDatatableTaonDatatableComponentTs {\n  \"pl-PL\": {\n  \"\": {\n    \"ID\"?: string;\n    \"NAME\"?: string;\n    \"No records found\"?: string;\n  };\n\n  };\n}\n// THIS FILE IS GENERATED - DO NOT MODIFY\nexport default {\n  \"fileRelativePath\": \"src/lib/taon-datatable/taon-datatable.component.ts\",\n  \"tags\": [\n    {\n      \"gettextString\": \"ID\",\n      \"lineNumber\": 59,\n      \"translation\": \"Posiadanie dowodu\"\n    },\n    {\n      \"gettextString\": \"NAME\",\n      \"lineNumber\": 63,\n      \"translation\": \"Nazwa\"\n    },\n    {\n      \"gettextString\": \"No records found\",\n      \"lineNumber\": 110,\n      \"translation\": \"Nie znalezionie nic\"\n    }\n  ]\n};\n// THIS FILE IS GENERATED - DO NOT MODIFY\n"],"names":[],"mappings":"AAAA;AAYA;AACA,gDAAe;AACb,IAAA,kBAAkB,EAAE,oDAAoD;AACxE,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,MAAM;AACvB,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,kBAAkB;AACnC,YAAA,YAAY,EAAE,GAAG;AACjB,YAAA,aAAa,EAAE;AAChB;AACF;CACF;AACD;;"}
+{"version":3,"file":"ui-websql-taon-datatable.component.ts.pl-PL.i18n.data-CLuM0VTt.mjs","sources":["../../../tmp-libs-for-dist-websql/ui/projects/ui/src/lib/taon-datatable/i18n/taon-datatable.component.ts.pl-PL.i18n.data.ts"],"sourcesContent":["// THIS FILE IS GENERATED - DO NOT MODIFY\n\nexport interface PlPlTraslationOverrideSrcLibTaonDatatableTaonDatatableComponentTs {\n  \"pl-PL\": {\n  \"\": {\n    \"ID\"?: string;\n    \"NAME\"?: string;\n    \"No records found\"?: string;\n  };\n\n  };\n}\n// THIS FILE IS GENERATED - DO NOT MODIFY\nexport default {\n  \"fileRelativePath\": \"src/lib/taon-datatable/taon-datatable.component.ts\",\n  \"tags\": [\n    {\n      \"gettextString\": \"ID\",\n      \"lineNumber\": 61,\n      \"translation\": \"Posiadanie dowodu\"\n    },\n    {\n      \"gettextString\": \"NAME\",\n      \"lineNumber\": 65,\n      \"translation\": \"Nazwa\"\n    },\n    {\n      \"gettextString\": \"No records found\",\n      \"lineNumber\": 135,\n      \"translation\": \"Nie znalezionie nic\"\n    }\n  ]\n};\n// THIS FILE IS GENERATED - DO NOT MODIFY\n"],"names":[],"mappings":"AAAA;AAYA;AACA,gDAAe;AACb,IAAA,kBAAkB,EAAE,oDAAoD;AACxE,IAAA,MAAM,EAAE;AACN,QAAA;AACE,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,MAAM;AACvB,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,aAAa,EAAE;AAChB,SAAA;AACD,QAAA;AACE,YAAA,eAAe,EAAE,kBAAkB;AACnC,YAAA,YAAY,EAAE,GAAG;AACjB,YAAA,aAAa,EAAE;AAChB;AACF;CACF;AACD;;"}

package/websql/fesm2022/ui-websql.mjs

@@ -36,6 +36,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
 import * as i7 from '@ng-matero/extensions/grid';
 import { MtxGridModule } from '@ng-matero/extensions/grid';
+import { TaonStor } from 'taon-storage/websql';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 
 // THIS FILE IS GENERATED - DO NOT MODIFY
@@ -68,7 +69,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.26';
+const CURRENT_PACKAGE_VERSION = '21.0.28';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 const t$c = Translation.for('src/lib/my-organization-proj.ts', { "src/lib/my-organization-proj.ts": { "en-US": async () => (await import('./ui-websql-my-organization-proj.ts.en-US.i18n.data-B6eQfqTW.mjs')).default, "pl-PL": async () => (await import('./ui-websql-my-organization-proj.ts.pl-PL.i18n.data-C2FZNfxx.mjs')).default, "de-DE": async () => (await import('./ui-websql-my-organization-proj.ts.de-DE.i18n.data-zpmbvuwX.mjs')).default }, "src/lib/start-cli.ts": { "en-US": async () => (await import('./ui-websql-start-cli.ts.en-US.i18n.data-BtpAWTsG.mjs')).default, "pl-PL": async () => (await import('./ui-websql-start-cli.ts.pl-PL.i18n.data-D8kU8T4d.mjs')).default, "de-DE": async () => (await import('./ui-websql-start-cli.ts.de-DE.i18n.data-ZDwwRGhS.mjs')).default } });
@@ -226,6 +227,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+class TaonAdminContentFooterService {
+    constructor() {
+        this.currentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "currentTemplate" }] : []));
+    }
+    setTemplate(template) {
+        this.currentTemplate.set(template);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminContentFooterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminContentFooterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminContentFooterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const TaonBaselineBackofficeOutletName = 'admin';
 function resolveTaonAdminMenuItem(menuItem) {
     return typeof menuItem === 'function' ? menuItem() : menuItem;
@@ -583,6 +599,7 @@ class TaonAdminLayoutComponent {
         this.t = t$a.for(this);
         this.menuContext = inject(TaonAdminMenuContext, { optional: true }) ??
             new TaonAdminMenuContext();
+        this.taonAdminContentFooterService = inject(TaonAdminContentFooterService);
         this._routes = [];
         this.basePath = '';
         this.layoutWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "layoutWidth" }] : []));
@@ -986,7 +1003,7 @@ class TaonAdminLayoutComponent {
             .replace(/\b\w/g, char => char.toUpperCase());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminLayoutComponent, deps: [{ token: i1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminLayoutComponent, isStandalone: true, selector: "taon-admin-layout", inputs: { routes: "routes", basePath: "basePath", outlet: "outlet" }, host: { listeners: { "window:resize": "windowResized()" } }, ngImport: i0, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      [attr.aria-label]=\"t.gettext('Toggle admin menu')\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">{{ t.gettext('Loading...') }}</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TaonAdminPageTabsComponent, selector: "taon-admin-page-tabs", inputs: ["routes", "basePath", "outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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      [attr.aria-label]=\"t.gettext('Toggle admin menu')\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">{{ t.gettext('Loading...') }}</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"\n            taonAdminContentFooterService.currentTemplate()\n          \" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TaonAdminPageTabsComponent, selector: "taon-admin-page-tabs", inputs: ["routes", "basePath", "outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminLayoutComponent, decorators: [{
             type: Component,
@@ -998,7 +1015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatIconModule,
                         MatTooltipModule,
                         TaonAdminPageTabsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      [attr.aria-label]=\"t.gettext('Toggle admin menu')\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">{{ t.gettext('Loading...') }}</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"] }]
+                    ], 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      [attr.aria-label]=\"t.gettext('Toggle admin menu')\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">{{ t.gettext('Loading...') }}</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"\n            taonAdminContentFooterService.currentTemplate()\n          \" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i0.ElementRef }], propDecorators: { routes: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1330,7 +1347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-const t$4 = Translation.for('src/lib/taon-datatable/taon-datatable.component.ts', { "src/lib/taon-datatable/taon-datatable.component.html": { "en-US": async () => (await import('./ui-websql-taon-datatable.component.html.en-US.i18n.data-B5Q6v4WG.mjs')).default, "pl-PL": async () => (await import('./ui-websql-taon-datatable.component.html.pl-PL.i18n.data-CHtCyNUI.mjs')).default, "de-DE": async () => (await import('./ui-websql-taon-datatable.component.html.de-DE.i18n.data-CRiuweZ1.mjs')).default }, "src/lib/taon-datatable/taon-datatable.component.ts": { "en-US": async () => (await import('./ui-websql-taon-datatable.component.ts.en-US.i18n.data-r_VW9bRw.mjs')).default, "pl-PL": async () => (await import('./ui-websql-taon-datatable.component.ts.pl-PL.i18n.data-CrDbBs1M.mjs')).default, "de-DE": async () => (await import('./ui-websql-taon-datatable.component.ts.de-DE.i18n.data-CLYbjFDi.mjs')).default } });
+const t$4 = Translation.for('src/lib/taon-datatable/taon-datatable.component.ts', { "src/lib/taon-datatable/taon-datatable.component.html": { "en-US": async () => (await import('./ui-websql-taon-datatable.component.html.en-US.i18n.data-BQRO2MVj.mjs')).default, "pl-PL": async () => (await import('./ui-websql-taon-datatable.component.html.pl-PL.i18n.data-cEIoFPC7.mjs')).default, "de-DE": async () => (await import('./ui-websql-taon-datatable.component.html.de-DE.i18n.data-akWKK_zH.mjs')).default }, "src/lib/taon-datatable/taon-datatable.component.ts": { "en-US": async () => (await import('./ui-websql-taon-datatable.component.ts.en-US.i18n.data-B3mI-Sqk.mjs')).default, "pl-PL": async () => (await import('./ui-websql-taon-datatable.component.ts.pl-PL.i18n.data-CLuM0VTt.mjs')).default, "de-DE": async () => (await import('./ui-websql-taon-datatable.component.ts.de-DE.i18n.data-kjuoNEZ4.mjs')).default } });
 const defaultColumns = [
     {
         header: t$4.gettext('ID'),
@@ -1347,6 +1364,8 @@ class TaonDatatableComponent {
         this.t = t$4.for(this);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
         //#region inputs
         this.pageNumber = 1;
         this.pageSize = 10;
@@ -1358,6 +1377,8 @@ class TaonDatatableComponent {
         this.hideAddButton = false;
         this.safe = false;
         this.searchMode = 'advanced';
+        this.storeTablePagination = 'none';
+        this.storeTableFilters = 'none';
         //#endregion
         //#region outputs
         this.expansionChange = new EventEmitter();
@@ -1418,15 +1439,21 @@ class TaonDatatableComponent {
     //#region hooks
     ngOnInit() {
         this.prepareColumns();
-        // console.log({ columns: this.columns });
         this.expandable = Boolean(this.expansionTemplate);
         this.showPaginator = _.isBoolean(this.showPaginator)
             ? this.showPaginator
             : Boolean(this.entity) || this.offlineMode;
+        if (this.storeTableFilters === 'query-params') {
+            this.columnFilters = this.readQueryFilters();
+        }
+        void this.restorePagination().then(() => this.subscribeToData());
+    }
+    subscribeToData() {
         this.searchChange$
             .pipe(debounceTime(400), distinctUntilChanged(), tap(search => {
             this.searchValue = search;
             this.pageNumber = 1;
+            this.persistPagination();
             this.reload();
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
@@ -1444,10 +1471,12 @@ class TaonDatatableComponent {
         this.searchValue = '';
         this.columnFilters = {};
         this.pageNumber = 1;
+        this.persistCurrentTableState();
         this.reload();
     }
     applyAdvancedFilters() {
         this.pageNumber = 1;
+        this.persistCurrentTableState();
         this.reload();
     }
     toggleAdvancedSearch() {
@@ -1458,8 +1487,147 @@ class TaonDatatableComponent {
     getNextPage(event) {
         this.pageNumber = event.pageIndex + 1;
         this.pageSize = event.pageSize;
+        this.persistPagination();
         this.reload();
     }
+    get tableIdentity() {
+        const explicitId = this.tableId?.trim();
+        if (explicitId) {
+            return explicitId;
+        }
+        const routePath = this.route.pathFromRoot
+            .map(route => route.snapshot.url.map(segment => segment.path).join('/'))
+            .filter(Boolean)
+            .join('/');
+        const entityName = this.entity ? ClassHelpers.getName(this.entity) : 'table';
+        return `${entityName}-${routePath || 'root'}`;
+    }
+    get queryParamPrefix() {
+        return `dt.${encodeURIComponent(this.tableIdentity)}`;
+    }
+    async restorePagination() {
+        const prefix = this.queryParamPrefix;
+        if (this.storeTablePagination === 'query-params') {
+            const pageNumber = Number(this.route.snapshot.queryParamMap.get(`${prefix}.page`));
+            const pageSize = Number(this.route.snapshot.queryParamMap.get(`${prefix}.pageSize`));
+            if (Number.isSafeInteger(pageNumber) && pageNumber > 0) {
+                this.pageNumber = pageNumber;
+            }
+            if (Number.isSafeInteger(pageSize) && pageSize > 0) {
+                this.pageSize = pageSize;
+            }
+            return;
+        }
+        if (this.storeTablePagination !== 'local-storage' &&
+            this.storeTablePagination !== 'session-storage') {
+            return;
+        }
+        const options = {
+            keyOrPath: `datatable-${this.tableIdentity}-pagination`,
+            defaultValue: {
+                pageNumber: this.pageNumber,
+                pageSize: this.pageSize,
+            },
+        };
+        this.paginationStorage =
+            this.storeTablePagination === 'local-storage'
+                ? TaonStor.inLocalstorage(options, TaonDatatableComponent)
+                : TaonStor.inSessionStorage(options, TaonDatatableComponent);
+        try {
+            await this.paginationStorage.ready();
+            const state = this.paginationStorage();
+            if (Number.isSafeInteger(state.pageNumber) && state.pageNumber > 0) {
+                this.pageNumber = state.pageNumber;
+            }
+            if (Number.isSafeInteger(state.pageSize) && state.pageSize > 0) {
+                this.pageSize = state.pageSize;
+            }
+        }
+        catch (error) {
+            console.error('[taon-datatable] Unable to restore pagination state', error);
+        }
+    }
+    persistPagination() {
+        const state = {
+            pageNumber: this.pageNumber,
+            pageSize: this.pageSize,
+        };
+        if (this.storeTablePagination === 'query-params') {
+            this.updateQueryParams({
+                [`${this.queryParamPrefix}.page`]: String(state.pageNumber),
+                [`${this.queryParamPrefix}.pageSize`]: String(state.pageSize),
+            });
+        }
+        else if (this.paginationStorage) {
+            void this.paginationStorage.set(state).catch(error => {
+                console.error('[taon-datatable] Unable to persist pagination state', error);
+            });
+        }
+    }
+    readQueryFilters() {
+        const filterPrefix = `${this.queryParamPrefix}.filter.`;
+        const filters = {};
+        for (const key of this.route.snapshot.queryParamMap.keys) {
+            if (!key.startsWith(filterPrefix)) {
+                continue;
+            }
+            try {
+                const field = decodeURIComponent(key.slice(filterPrefix.length));
+                const value = this.route.snapshot.queryParamMap.get(key);
+                if (field && value !== null) {
+                    filters[field] = value;
+                }
+            }
+            catch (error) {
+                console.error('[taon-datatable] Invalid filter query parameter', error);
+            }
+        }
+        return filters;
+    }
+    persistFilters() {
+        if (this.storeTableFilters !== 'query-params') {
+            return;
+        }
+        this.updateQueryParams(this.filterQueryUpdates());
+    }
+    persistCurrentTableState() {
+        if (this.storeTablePagination === 'query-params' &&
+            this.storeTableFilters === 'query-params') {
+            this.updateQueryParams({
+                [`${this.queryParamPrefix}.page`]: String(this.pageNumber),
+                [`${this.queryParamPrefix}.pageSize`]: String(this.pageSize),
+                ...this.filterQueryUpdates(),
+            });
+            return;
+        }
+        this.persistPagination();
+        this.persistFilters();
+    }
+    filterQueryUpdates() {
+        const filterPrefix = `${this.queryParamPrefix}.filter.`;
+        const updates = {};
+        for (const key of this.route.snapshot.queryParamMap.keys) {
+            if (key.startsWith(filterPrefix)) {
+                updates[key] = null;
+            }
+        }
+        for (const [field, value] of Object.entries(this.cleanFilters(this.columnFilters))) {
+            updates[`${filterPrefix}${encodeURIComponent(field)}`] = value;
+        }
+        return updates;
+    }
+    updateQueryParams(queryParams) {
+        void this.router
+            .navigate([], {
+            relativeTo: this.route,
+            queryParams,
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        })
+            .catch(error => {
+            console.error('[taon-datatable] Unable to update table query parameters', error);
+        });
+    }
     //#endregion
     //#region sorting
     sortChanged(event) {
@@ -1648,7 +1816,7 @@ class TaonDatatableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDatatableComponent, isStandalone: true, selector: "taon-datatable", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", entityCrudController: "entityCrudController", columns: "columns", hideSearch: "hideSearch", hideAddButton: "hideAddButton", safe: "safe", searchMode: "searchMode", callQueryMethod: "callQueryMethod", data: "data", showPaginator: "showPaginator" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-3\">\n  <!-- #region toolbar -->\n  @if (!hideSearch) {\n    <div\n      class=\"flex w-full flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:flex-row md:items-center\">\n      <!-- global search -->\n      <mat-form-field\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        class=\"min-w-0 flex-1\">\n        <mat-icon matPrefix> search </mat-icon>\n\n        <input\n          matInput\n          [placeholder]=\"t.gettext('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          {{ t.gettext('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]=\"t.gettext('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          {{ t.gettext('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          {{ t.gettext('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          {{ t.gettext('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          {{ t.gettext('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      [noResultText]=\"noResultText\"\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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MtxGridModule }, { kind: "component", type: i7.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDatatableComponent, isStandalone: true, selector: "taon-datatable", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", entityCrudController: "entityCrudController", columns: "columns", hideSearch: "hideSearch", hideAddButton: "hideAddButton", safe: "safe", searchMode: "searchMode", filtersTemplate: "filtersTemplate", storeTablePagination: "storeTablePagination", storeTableFilters: "storeTableFilters", tableId: "tableId", 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]=\"t.gettext('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          {{ t.gettext('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]=\"t.gettext('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          {{ t.gettext('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      @if (filtersTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"filtersTemplate\"\n          [ngTemplateOutletContext]=\"{ filters: columnFilters }\">\n        </ng-container>\n      } @else {\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\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          {{ t.gettext('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          {{ t.gettext('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          {{ t.gettext('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      [noResultText]=\"noResultText\"\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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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,
@@ -1663,7 +1831,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  <!-- #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]=\"t.gettext('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          {{ t.gettext('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]=\"t.gettext('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          {{ t.gettext('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          {{ t.gettext('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          {{ t.gettext('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          {{ t.gettext('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      [noResultText]=\"noResultText\"\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"] }]
+                    ], 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]=\"t.gettext('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          {{ t.gettext('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]=\"t.gettext('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          {{ t.gettext('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      @if (filtersTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"filtersTemplate\"\n          [ngTemplateOutletContext]=\"{ filters: columnFilters }\">\n        </ng-container>\n      } @else {\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\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          {{ t.gettext('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          {{ t.gettext('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          {{ t.gettext('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      [noResultText]=\"noResultText\"\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: [{
@@ -1686,6 +1854,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 type: Input
             }], searchMode: [{
                 type: Input
+            }], filtersTemplate: [{
+                type: Input
+            }], storeTablePagination: [{
+                type: Input
+            }], storeTableFilters: [{
+                type: Input
+            }], tableId: [{
+                type: Input
             }], callQueryMethod: [{
                 type: Input
             }], data: [{
@@ -2576,6 +2752,44 @@ const TaonDraggableButtonPanelRoutes = [
     // },
 ];
 
+class TaonItemsHamburgerComponent {
+    constructor() {
+        this.icon = 'menu';
+        this.taonAdminService = inject(TaonAdminService);
+        this.elementRef = inject((ElementRef));
+        this.opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
+    }
+    toggle(event) {
+        event.stopPropagation();
+        this.opened.update(opened => !opened);
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (this.opened() &&
+            target &&
+            !this.elementRef.nativeElement.contains(target)) {
+            this.opened.set(false);
+        }
+    }
+    onEscape() {
+        this.opened.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonItemsHamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonItemsHamburgerComponent, isStandalone: true, selector: "taon-items-hamburger", inputs: { icon: "icon" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (!taonAdminService.isDesktop()) {\n  <button\n    mat-icon-button\n    type=\"button\"\n    aria-label=\"Open menu\"\n    [attr.aria-expanded]=\"opened()\"\n    (click)=\"toggle($event)\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n}\n\n<div\n  class=\"items\"\n  [class.mobile]=\"!taonAdminService.isDesktop()\"\n  [class.opened]=\"opened()\">\n  <ng-content />\n</div>\n", styles: [":host{position:relative;display:inline-flex;align-items:center}.items{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem}.items.mobile{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:1000;min-width:50px;padding:.5rem;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, inherit);border:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12));border-radius:8px;box-shadow:0 2px 4px #0000001f,0 4px 12px #0000001f}.items.mobile.opened{display:flex;align-items:center;gap:.75rem}.items.mobile.opened>*{width:100%}\n"], dependencies: [{ 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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonItemsHamburgerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-items-hamburger', standalone: true, imports: [MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!taonAdminService.isDesktop()) {\n  <button\n    mat-icon-button\n    type=\"button\"\n    aria-label=\"Open menu\"\n    [attr.aria-expanded]=\"opened()\"\n    (click)=\"toggle($event)\">\n    <mat-icon>{{ icon }}</mat-icon>\n  </button>\n}\n\n<div\n  class=\"items\"\n  [class.mobile]=\"!taonAdminService.isDesktop()\"\n  [class.opened]=\"opened()\">\n  <ng-content />\n</div>\n", styles: [":host{position:relative;display:inline-flex;align-items:center}.items{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem}.items.mobile{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:1000;min-width:50px;padding:.5rem;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, inherit);border:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12));border-radius:8px;box-shadow:0 2px 4px #0000001f,0 4px 12px #0000001f}.items.mobile.opened{display:flex;align-items:center;gap:.75rem}.items.mobile.opened>*{width:100%}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 const t$1 = Translation.for('src/lib/taon-purchase-status/taon-purchase-status.dialog.component.ts', { "src/lib/taon-purchase-status/taon-purchase-status.dialog.component.html": { "en-US": async () => (await import('./ui-websql-taon-purchase-status.dialog.component.html.en-US.i18n.data-nNV-_Bxf.mjs')).default, "pl-PL": async () => (await import('./ui-websql-taon-purchase-status.dialog.component.html.pl-PL.i18n.data-DNdKPp72.mjs')).default, "de-DE": async () => (await import('./ui-websql-taon-purchase-status.dialog.component.html.de-DE.i18n.data-BIcFyGTE.mjs')).default }, "src/lib/taon-purchase-status/taon-purchase-status.dialog.component.ts": { "en-US": async () => (await import('./ui-websql-taon-purchase-status.dialog.component.ts.en-US.i18n.data-CfpW4ySH.mjs')).default, "pl-PL": async () => (await import('./ui-websql-taon-purchase-status.dialog.component.ts.pl-PL.i18n.data-C-zcwzt5.mjs')).default, "de-DE": async () => (await import('./ui-websql-taon-purchase-status.dialog.component.ts.de-DE.i18n.data-B-fSzjPP.mjs')).default } });
 class TaonPurchaseStatusDialogComponent {
     constructor(data) {
@@ -2622,5 +2836,5 @@ var index = {};
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, PROJECT_NPM_NAME, TAON_IS_DETACHED_WINDOW, TaonAdminLayoutComponent, TaonAdminMenuContext, TaonAdminPageTabsComponent, TaonAdminWelcomeComponent, TaonAdminWelcomeRoutes, TaonBackofficeNotificationsComponent, TaonBackofficeNotificationsService, TaonBaseAdminLayoutPage, TaonBaselineBackofficeOutletName, TaonConfirmDialogComponent, TaonDatatableComponent, TaonDatatableRoutes, TaonDetachableDialogContentComponent, TaonDetachedWindowComponent, TaonDetachedWindowsHostComponent, TaonDetachedWindowsService, TaonDraggableButtonPanelComponent, TaonDraggableButtonPanelRoutes, TaonDraggableButtonPanelState, TaonErrorDetailsDialogComponent, TaonErrorToastComponent, TaonHorizontalWheelScrollDirective, TaonPurchaseStatusDialogComponent, TaonUnderConstructionComponent, adminLazyRoute, myOrgProj, resolveTaonAdminMenuItem, startCli };
+export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, PROJECT_NPM_NAME, TAON_IS_DETACHED_WINDOW, TaonAdminContentFooterService, TaonAdminLayoutComponent, TaonAdminMenuContext, TaonAdminPageTabsComponent, TaonAdminWelcomeComponent, TaonAdminWelcomeRoutes, TaonBackofficeNotificationsComponent, TaonBackofficeNotificationsService, TaonBaseAdminLayoutPage, TaonBaselineBackofficeOutletName, TaonConfirmDialogComponent, TaonDatatableComponent, TaonDatatableRoutes, TaonDetachableDialogContentComponent, TaonDetachedWindowComponent, TaonDetachedWindowsHostComponent, TaonDetachedWindowsService, TaonDraggableButtonPanelComponent, TaonDraggableButtonPanelRoutes, TaonDraggableButtonPanelState, TaonErrorDetailsDialogComponent, TaonErrorToastComponent, TaonHorizontalWheelScrollDirective, TaonItemsHamburgerComponent, TaonPurchaseStatusDialogComponent, TaonUnderConstructionComponent, adminLazyRoute, myOrgProj, resolveTaonAdminMenuItem, startCli };
 //# sourceMappingURL=ui-websql.mjs.map