@taon-dev/ui 21.0.18 → 21.0.19

package/browser/fesm2022/ui-browser.mjs

@@ -2,17 +2,17 @@ import { Translation } from '@taon-dev/i18n/browser';
 import { UtilsJson, _ } from 'tnp-core/browser';
 import { BaseCommandLineFeature } from 'tnp-helpers/browser';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, signal, Injectable, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, DestroyRef, ChangeDetectorRef, EventEmitter, Output, input } from '@angular/core';
+import { inject, ElementRef, Directive, signal, Injectable, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild, DestroyRef, ChangeDetectorRef, EventEmitter, Output, InjectionToken, ApplicationRef, EnvironmentInjector, Injector, createComponent, Inject, input } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { CommonModule, AsyncPipe, NgTemplateOutlet, NgIf } from '@angular/common';
 import * as i3$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i4 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@angular/router';
-import { NavigationEnd, RouterOutlet, RouterLink } from '@angular/router';
+import { NavigationEnd, RouterOutlet, RouterLink, ActivatedRoute, Router } from '@angular/router';
 import { filter, BehaviorSubject, Subject, switchMap, debounceTime, distinctUntilChanged, tap, of, from, map, catchError, finalize, firstValueFrom, take } from 'rxjs';
 import * as i2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -20,15 +20,15 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Resource, getDefaultModel } from 'ng2-rest/browser';
 import { TaonAdminService, getHttpStatus, ClassHelpers, Symbols } from 'taon/browser';
 import { HotToastRef, HotToastService } from '@ngneat/hot-toast';
-import * as i1$1 from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import * as i3$2 from '@angular/material/button';
+import * as i2$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$3 from '@angular/material/button-toggle';
+import * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i2$2 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i4$1 from '@angular/material/form-field';
+import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -68,10 +68,10 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.18';
+const CURRENT_PACKAGE_VERSION = '21.0.19';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
-const t$3 = Translation.for('src/lib/my-organization-proj.ts', { "src/lib/my-organization-proj.ts": { "en-US": async () => (await import('./ui-browser-my-organization-proj.ts.en-US.i18n.data-CoSik70Y.mjs')).default, "pl-PL": async () => (await import('./ui-browser-my-organization-proj.ts.pl-PL.i18n.data-BZPsT3Zk.mjs')).default } });
+const t$3 = Translation.for('src/lib/my-organization-proj.ts', { "src/lib/my-organization-proj.ts": { "en-US": async () => (await import('./ui-browser-my-organization-proj.ts.en-US.i18n.data-CeHZLkBn.mjs')).default, "pl-PL": async () => (await import('./ui-browser-my-organization-proj.ts.pl-PL.i18n.data-d2TJi7-R.mjs')).default } });
 function myOrgProj() {
     t$3.gettext('My Translated Company Name!');
 }
@@ -428,7 +428,7 @@ class TaonAdminPageTabsComponent {
             return;
         }
         let children = await this.loadChildren(activeRoute);
-        children = this.unwrapEmptyPathRoutes(children);
+        children = this.unwrapEmptyPathRoutes(children).filter(f => !!f.data);
         if (!children.length) {
             return;
         }
@@ -946,7 +946,7 @@ class TaonAdminLayoutComponent {
             .replace(/\b\w/g, char => char.toUpperCase());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonAdminLayoutComponent, deps: [{ token: i1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminLayoutComponent, isStandalone: true, selector: "taon-admin-layout", inputs: { routes: "routes", basePath: "basePath", outlet: "outlet" }, host: { listeners: { "window:resize": "windowResized()" } }, ngImport: i0, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">Loading...</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TaonAdminPageTabsComponent, selector: "taon-admin-page-tabs", inputs: ["routes", "basePath", "outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonAdminLayoutComponent, isStandalone: true, selector: "taon-admin-layout", inputs: { routes: "routes", basePath: "basePath", outlet: "outlet" }, host: { listeners: { "window:resize": "windowResized()" } }, ngImport: i0, template: "<div\n  #layout\n  class=\"admin-layout\"\n  [class.admin-layout-dialog]=\"isDialogMode\"\n  [style.width.px]=\"layoutWidth() || null\"\n  [style.height.px]=\"layoutHeight() || null\">\n  <!-- ============================================================= -->\n  <!-- HEADER -->\n  <!-- ============================================================= -->\n\n  <header class=\"admin-header\">\n    <button\n      mat-icon-button\n      type=\"button\"\n      aria-label=\"Toggle admin menu\"\n      class=\"admin-menu-button\"\n      (click)=\"toggleAside()\">\n      <mat-icon>menu</mat-icon>\n    </button>\n\n    <div class=\"admin-header-content\">\n      <ng-content select=\"[header]\" />\n    </div>\n  </header>\n\n  <!-- ============================================================= -->\n  <!-- BODY -->\n  <!-- ============================================================= -->\n\n  <div class=\"admin-body\">\n    <!-- =========================================================== -->\n    <!-- MOBILE BACKDROP -->\n    <!-- =========================================================== -->\n\n    @if (asideOpened()) {\n      <div\n        class=\"admin-aside-backdrop\"\n        (click)=\"closeAside()\"></div>\n    }\n\n    <!-- =========================================================== -->\n    <!-- ASIDE -->\n    <!-- =========================================================== -->\n\n    <aside\n      class=\"admin-aside\"\n      [class.admin-aside-open]=\"asideOpened()\">\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE ASIDE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-aside-content\">\n        <mat-accordion class=\"admin-menu\">\n          @for (level1 of routes; track level1.path) {\n            @if (menuContext.isVisible(level1)) {\n              @if (isExpandable(level1)) {\n                <mat-expansion-panel\n                  [disabled]=\"menuContext.isDisabled(level1)\"\n                  [expanded]=\"\n                    isLevel1Active(level1) && !menuContext.isDisabled(level1)\n                  \"\n                  (expandedChange)=\"panelExpanded(level1, $event)\">\n                  <mat-expansion-panel-header\n                    [class.admin-menu-item-disabled]=\"\n                      menuContext.isDisabled(level1)\n                    \"\n                    [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                    (click)=\"level1Clicked(level1)\">\n                    <mat-panel-title>\n                      <div class=\"admin-menu-item\">\n                        @if (icon(level1)) {\n                          <mat-icon\n                            [ngStyle]=\"{\n                              color: color(level1),\n                            }\">\n                            {{ icon(level1) }}\n                          </mat-icon>\n                        }\n\n                        <span\n                          [class.font-semibold]=\"isLevel1Active(level1)\"\n                          [ngStyle]=\"{\n                            color: color(level1),\n                          }\">\n                          {{ label(level1) }}\n                        </span>\n                      </div>\n                    </mat-panel-title>\n                  </mat-expansion-panel-header>\n\n                  <div class=\"admin-level2\">\n                    @if (isLoading(level1)) {\n                      <div class=\"admin-loading\">Loading...</div>\n                    } @else {\n                      @for (\n                        level2 of getLevel2Routes(level1);\n                        track level2.path\n                      ) {\n                        @if (menuContext.isVisible(level2)) {\n                          <a\n                            class=\"admin-level2-item\"\n                            role=\"button\"\n                            [attr.tabindex]=\"\n                              menuContext.isDisabled(level2) ? -1 : 0\n                            \"\n                            [attr.aria-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [class.admin-menu-item-disabled]=\"\n                              menuContext.isDisabled(level2)\n                            \"\n                            [matTooltip]=\"menuContext.disabledTooltip(level2)\"\n                            [class.admin-level2-item-active]=\"\n                              isLevel2Active(level1, level2)\n                            \"\n                            (click)=\"level2Clicked(level1, level2)\"\n                            (keydown.enter)=\"level2Clicked(level1, level2)\"\n                            (keydown.space)=\"\n                              $event.preventDefault();\n                              level2Clicked(level1, level2)\n                            \">\n                            @if (icon(level2)) {\n                              <mat-icon\n                                [ngStyle]=\"{\n                                  color: color(level2),\n                                }\">\n                                {{ icon(level2) }}\n                              </mat-icon>\n                            }\n\n                            <span\n                              [ngStyle]=\"{\n                                color: color(level2),\n                              }\">\n                              {{ label(level2) }}\n                            </span>\n                          </a>\n                        }\n                      }\n                    }\n                  </div>\n                </mat-expansion-panel>\n              } @else {\n                <a\n                  class=\"admin-level1-item\"\n                  role=\"button\"\n                  [attr.tabindex]=\"menuContext.isDisabled(level1) ? -1 : 0\"\n                  [attr.aria-disabled]=\"menuContext.isDisabled(level1)\"\n                  [class.admin-menu-item-disabled]=\"\n                    menuContext.isDisabled(level1)\n                  \"\n                  [matTooltip]=\"menuContext.disabledTooltip(level1)\"\n                  [class.admin-level1-item-active]=\"isLevel1Active(level1)\"\n                  (click)=\"level1Clicked(level1)\"\n                  (keydown.enter)=\"level1Clicked(level1)\"\n                  (keydown.space)=\"\n                    $event.preventDefault(); level1Clicked(level1)\n                  \">\n                  @if (icon(level1)) {\n                    <mat-icon\n                      [ngStyle]=\"{\n                        color: color(level1),\n                      }\">\n                      {{ icon(level1) }}\n                    </mat-icon>\n                  }\n\n                  <span\n                    [ngStyle]=\"{\n                      color: color(level1),\n                    }\">\n                    {{ label(level1) }}\n                  </span>\n                </a>\n              }\n            }\n          }\n        </mat-accordion>\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- ASIDE FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-aside-footer\">\n        <ng-content select=\"[asideFooter]\" />\n      </footer>\n    </aside>\n\n    <!-- =========================================================== -->\n    <!-- MAIN -->\n    <!-- =========================================================== -->\n\n    <main class=\"admin-main\">\n      <!-- ========================================================= -->\n      <!-- LEVEL 3+ TABS -->\n      <!-- ========================================================= -->\n\n      <taon-admin-page-tabs\n        class=\"admin-tabs\"\n        [routes]=\"routes\"\n        [basePath]=\"basePath\"\n        [outlet]=\"outlet\" />\n\n      <!-- ========================================================= -->\n      <!-- SCROLLABLE CONTENT -->\n      <!-- ========================================================= -->\n\n      <div class=\"admin-content\">\n        <router-outlet />\n      </div>\n\n      <!-- ========================================================= -->\n      <!-- CONTENT FOOTER -->\n      <!-- ========================================================= -->\n\n      <footer class=\"admin-content-footer\">\n        <ng-content select=\"[contentFooter]\" />\n      </footer>\n    </main>\n  </div>\n\n  <!-- ============================================================= -->\n  <!-- DIALOG RESIZE HANDLE -->\n  <!-- ============================================================= -->\n\n  @if (isDialogMode) {\n    <div\n      class=\"admin-resize-handle\"\n      (pointerdown)=\"startResize($event)\"></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.admin-layout{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.admin-layout-dialog{min-width:500px;min-height:350px}.admin-header{display:flex;align-items:center;flex:0 0 64px;height:64px;border-bottom:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu-button{flex:0 0 auto;margin-left:8px;margin-right:8px;cursor:pointer}.admin-header-content{flex:1 1 auto;min-width:0}.admin-body{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-aside{position:absolute;top:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;width:288px;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--mat-sys-outline-variant);transform:translate(-100%);transition:transform .2s ease,width .2s ease}.admin-aside-open{transform:translate(0)}.admin-aside-content{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto}.admin-aside-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-menu{display:block}.admin-menu mat-expansion-panel{margin-top:0!important;margin-bottom:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--mat-sys-outline-variant)}.admin-menu mat-expansion-panel:first-of-type,.admin-menu mat-expansion-panel:last-of-type,.admin-menu mat-expansion-panel-header{border-radius:0!important}.admin-menu-item{display:flex;align-items:center;gap:12px}.admin-level2{display:flex;flex-direction:column}.admin-level2-item{display:flex;align-items:center;gap:12px;padding:10px 24px;cursor:pointer}.admin-level2-item:hover,.admin-level2-item-active{background:#f5f5f5}.admin-level2-item-active{font-weight:600}.admin-level1-item{display:flex;align-items:center;height:56px;gap:12px;padding:0 24px;cursor:pointer}.admin-level1-item:hover,.admin-level1-item-active{background:#f5f5f5}.admin-level1-item-active{font-weight:600}.admin-loading{padding:8px 16px;opacity:.6}.admin-menu-item-disabled{opacity:.5;cursor:not-allowed}.admin-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.admin-tabs{display:block;flex:0 0 auto}.admin-content{flex:1 1 auto;min-width:0;min-height:0;padding:24px;overflow-x:auto;overflow-y:auto}.admin-content-footer{flex:0 0 auto;padding:12px 24px;border-top:1px solid var(--mat-sys-outline-variant);background:#fff}.admin-aside-backdrop{position:absolute;inset:0;z-index:20;background:#0000004d}@media(min-width:768px){.admin-aside{position:relative;top:auto;bottom:auto;left:auto;z-index:auto;width:0;transform:none}.admin-aside-open{width:288px;min-width:288px}.admin-aside-backdrop{display:none}}.admin-resize-handle{position:absolute;right:0;bottom:0;z-index:100;width:18px;height:18px;cursor:nwse-resize}.admin-resize-handle:after{content:\"\";position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid #777;border-bottom:2px solid #777}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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,
@@ -1012,7 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-const t$2 = Translation.for('src/lib/taon-admin-welcome/taon-admin-welcome.component.ts', { "src/lib/taon-admin-welcome/taon-admin-welcome.component.html": { "en-US": async () => (await import('./ui-browser-taon-admin-welcome.component.html.en-US.i18n.data-DyjZkf16.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-admin-welcome.component.html.pl-PL.i18n.data-079EXaRW.mjs')).default }, "src/lib/taon-admin-welcome/taon-admin-welcome.component.ts": { "en-US": async () => (await import('./ui-browser-taon-admin-welcome.component.ts.en-US.i18n.data-DB_VFp1U.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-admin-welcome.component.ts.pl-PL.i18n.data-C5Asxno1.mjs')).default } });
+const t$2 = Translation.for('src/lib/taon-admin-welcome/taon-admin-welcome.component.ts', { "src/lib/taon-admin-welcome/taon-admin-welcome.component.html": { "en-US": async () => (await import('./ui-browser-taon-admin-welcome.component.html.en-US.i18n.data-B8C34hRd.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-admin-welcome.component.html.pl-PL.i18n.data-_t3YRqrv.mjs')).default }, "src/lib/taon-admin-welcome/taon-admin-welcome.component.ts": { "en-US": async () => (await import('./ui-browser-taon-admin-welcome.component.ts.en-US.i18n.data-B4Q6VxPm.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-admin-welcome.component.ts.pl-PL.i18n.data-s4AKOE7A.mjs')).default } });
 class TaonAdminWelcomeComponent {
     constructor() {
         this.t = t$2.for(this);
@@ -1129,7 +1129,7 @@ class TaonErrorDetailsDialogComponent {
         return `${protocol}://file${location}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonErrorDetailsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonErrorDetailsDialogComponent, isStandalone: true, selector: "taon-error-details-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Error details</h2>\n\n<mat-dialog-content>\n  <div class=\"error-message\">\n    {{ data.message }}\n  </div>\n\n  <div class=\"editor-selector\">\n    <span class=\"editor-selector-label\"> I am using editor: </span>\n\n    <mat-button-toggle-group\n      [value]=\"editor\"\n      (change)=\"setEditor($event.value)\"\n      aria-label=\"Code editor\">\n      <mat-button-toggle value=\"vscode\"> VS Code </mat-button-toggle>\n\n      <mat-button-toggle value=\"vscodium\"> VSCodium </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <pre\n    class=\"error-details\"><code>@for (stackLine of stackLines; track $index) {\n@if (stackLine.file) {<a\n  class=\"stack-link\"\n  title=\"Open {{ stackLine.file }}:{{ stackLine.line }}:{{ stackLine.column }}\"\n  (click)=\"openStackLine(stackLine)\">{{ stackLine.text }}</a>} @else {{{ stackLine.text }}}{{ '\\n' }}\n}</code></pre>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button\n    mat-button\n    mat-dialog-close>\n    Close\n  </button>\n</mat-dialog-actions>\n", styles: [".error-message{margin-bottom:16px;font-weight:500}.editor-selector{display:flex;align-items:center;gap:12px;margin-bottom:12px}.editor-selector-label{font-size:13px}.error-details{box-sizing:border-box;max-width:100%;max-height:60vh;margin:0;padding:16px;overflow-y:auto;overflow-x:hidden;border-radius:6px;background:#0000000f;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.stack-link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}.stack-link:hover{background:#00000014}.stack-line{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonErrorDetailsDialogComponent, isStandalone: true, selector: "taon-error-details-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Error details</h2>\n\n<mat-dialog-content>\n  <div class=\"error-message\">\n    {{ data.message }}\n  </div>\n\n  <div class=\"editor-selector\">\n    <span class=\"editor-selector-label\"> I am using editor: </span>\n\n    <mat-button-toggle-group\n      [value]=\"editor\"\n      (change)=\"setEditor($event.value)\"\n      aria-label=\"Code editor\">\n      <mat-button-toggle value=\"vscode\"> VS Code </mat-button-toggle>\n\n      <mat-button-toggle value=\"vscodium\"> VSCodium </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <pre\n    class=\"error-details\"><code>@for (stackLine of stackLines; track $index) {\n@if (stackLine.file) {<a\n  class=\"stack-link\"\n  title=\"Open {{ stackLine.file }}:{{ stackLine.line }}:{{ stackLine.column }}\"\n  (click)=\"openStackLine(stackLine)\">{{ stackLine.text }}</a>} @else {{{ stackLine.text }}}{{ '\\n' }}\n}</code></pre>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <button\n    mat-button\n    mat-dialog-close>\n    Close\n  </button>\n</mat-dialog-actions>\n", styles: [".error-message{margin-bottom:16px;font-weight:500}.editor-selector{display:flex;align-items:center;gap:12px;margin-bottom:12px}.editor-selector-label{font-size:13px}.error-details{box-sizing:border-box;max-width:100%;max-height:60vh;margin:0;padding:16px;overflow-y:auto;overflow-x:hidden;border-radius:6px;background:#0000000f;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.stack-link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}.stack-link:hover{background:#00000014}.stack-line{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonErrorDetailsDialogComponent, decorators: [{
             type: Component,
@@ -1180,11 +1180,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 //#region imports
 //#endregion
 class TaonBackofficeNotificationsService {
+    //#endregion
     constructor() {
         //#region injections
         this.toast = inject(HotToastService);
+        this.toast.defaultConfig.dismissible = true;
     }
-    //#endregion
     //#region private methods
     normalize(input) {
         return typeof input === 'string' ? { title: input } : input;
@@ -1225,12 +1226,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 //#region imports
 //#endregion
-const t$1 = Translation.for('src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts', { "src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts": { "en-US": async () => (await import('./ui-browser-taon-backoffice-notifications.component.ts.en-US.i18n.data-DdHr5V8R.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-backoffice-notifications.component.ts.pl-PL.i18n.data-CD5ZqDCD.mjs')).default } });
+const t$1 = Translation.for('src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts', { "src/lib/taon-backoffice-notifications/taon-backoffice-notifications.component.ts": { "en-US": async () => (await import('./ui-browser-taon-backoffice-notifications.component.ts.en-US.i18n.data-BAh0p5PN.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-backoffice-notifications.component.ts.pl-PL.i18n.data-C7f7qeUT.mjs')).default } });
 class TaonBackofficeNotificationsComponent {
+    showErrorNotification(title, details) {
+        const key = JSON.stringify([title, details]);
+        if (this.shownNotifications.has(key)) {
+            return;
+        }
+        this.shownNotifications.add(key);
+        this.notification.error({
+            title,
+            details,
+        });
+    }
     //#endregion
     //#region constructor
     constructor() {
@@ -1239,6 +1251,7 @@ class TaonBackofficeNotificationsComponent {
         this.notification = inject(TaonBackofficeNotificationsService);
         this.destroyRef = inject(DestroyRef);
         this.taonAdminService = inject(TaonAdminService);
+        this.shownNotifications = new Set();
         Resource.listenErrors
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((error) => {
@@ -1255,10 +1268,9 @@ class TaonBackofficeNotificationsComponent {
                 console.log(`[@taon-dev/sudo] Skipping notificaiton for message "${jsonMsg.message}" (code=${statusCode})`);
             }
             else {
-                this.notification.error({
-                    title: t$1.translate(jsonMsg.message) || t$1.gettext('Unknown error'),
-                    details: jsonMsg?.details,
-                });
+                const title = t$1.translate(jsonMsg.message) || t$1.gettext('Unknown error');
+                const details = jsonMsg?.details;
+                this.showErrorNotification(title, details);
             }
         });
     }
@@ -1284,7 +1296,7 @@ class TaonConfirmDialogComponent {
         this.dialogRef.close(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonConfirmDialogComponent, isStandalone: true, selector: "taon-confirm-dialog", ngImport: i0, template: "<div\n  class=\"flex min-w-[320px] max-w-[560px] flex-col gap-6 p-6 text-gray-900 dark:text-gray-100 sm:p-7\">\n  <!-- Header -->\n  <h2 class=\"m-0 text-xl leading-snug font-medium sm:text-2xl\">\n    {{ data.title }}\n  </h2>\n\n  <!-- Message -->\n  @if (data.message) {\n    <p\n      class=\"m-0 whitespace-pre-line text-base leading-relaxed text-gray-600 dark:text-gray-300 sm:text-lg\">\n      {{ data.message }}\n    </p>\n  }\n\n  <!-- Actions -->\n  <div class=\"flex flex-wrap items-center justify-end gap-3\">\n    <button\n      mat-button\n      type=\"button\"\n      (click)=\"cancel()\">\n      {{ data.cancelText || 'Cancel' }}\n    </button>\n\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      class=\"!rounded-full !px-6\"\n      (click)=\"confirm()\">\n      {{ data.confirmText || 'OK' }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonConfirmDialogComponent, isStandalone: true, selector: "taon-confirm-dialog", ngImport: i0, template: "<div\n  class=\"flex min-w-[320px] max-w-[560px] flex-col gap-6 p-6 text-gray-900 dark:text-gray-100 sm:p-7\">\n  <!-- Header -->\n  <h2 class=\"m-0 text-xl leading-snug font-medium sm:text-2xl\">\n    {{ data.title }}\n  </h2>\n\n  <!-- Message -->\n  @if (data.message) {\n    <p\n      class=\"m-0 whitespace-pre-line text-base leading-relaxed text-gray-600 dark:text-gray-300 sm:text-lg\">\n      {{ data.message }}\n    </p>\n  }\n\n  <!-- Actions -->\n  <div class=\"flex flex-wrap items-center justify-end gap-3\">\n    <button\n      mat-button\n      type=\"button\"\n      (click)=\"cancel()\">\n      {{ data.cancelText || 'Cancel' }}\n    </button>\n\n    <button\n      mat-flat-button\n      color=\"primary\"\n      type=\"button\"\n      class=\"!rounded-full !px-6\"\n      (click)=\"confirm()\">\n      {{ data.confirmText || 'OK' }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonConfirmDialogComponent, decorators: [{
             type: Component,
@@ -1608,7 +1620,7 @@ class TaonDatatableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDatatableComponent, isStandalone: true, selector: "taon-datatable", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", entityCrudController: "entityCrudController", columns: "columns", hideSearch: "hideSearch", hideAddButton: "hideAddButton", safe: "safe", searchMode: "searchMode", callQueryMethod: "callQueryMethod", data: "data", showPaginator: "showPaginator" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-3\">\n  <!-- #region toolbar -->\n  @if (!hideSearch) {\n    <div\n      class=\"flex w-full flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:flex-row md:items-center\">\n      <!-- global search -->\n      <mat-form-field\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        class=\"min-w-0 flex-1\">\n        <mat-icon matPrefix> search </mat-icon>\n\n        <input\n          matInput\n          placeholder=\"Search...\"\n          [value]=\"searchValue\"\n          (input)=\"searchChanged($any($event.target).value)\" />\n\n        @if (searchValue) {\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            (click)=\"clearSearch()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </mat-form-field>\n\n      <!-- advanced search -->\n      @if (searchMode === 'advanced') {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          (click)=\"toggleAdvancedSearch()\">\n          <mat-icon> tune </mat-icon>\n\n          Filters\n\n          @if (advancedSearchOpened) {\n            <mat-icon> expand_less </mat-icon>\n          } @else {\n            <mat-icon> expand_more </mat-icon>\n          }\n        </button>\n      }\n\n      <!-- refresh -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        title=\"Refresh\"\n        (click)=\"reload()\">\n        <mat-icon> refresh </mat-icon>\n      </button>\n\n      <!-- add -->\n      @if (!hideAddButton) {\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"addingItem.emit()\">\n          <mat-icon> add </mat-icon>\n\n          Add\n        </button>\n      }\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region advanced filters -->\n  @if (!hideSearch && searchMode === 'advanced' && advancedSearchOpened) {\n    <div\n      class=\"grid grid-cols-1 gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n      @for (column of filterableColumns; track column.field) {\n        <mat-form-field\n          appearance=\"outline\"\n          subscriptSizing=\"dynamic\"\n          class=\"w-full\">\n          <mat-label>\n            {{ column.header }}\n          </mat-label>\n\n          <input\n            matInput\n            [(ngModel)]=\"columnFilters[$any(column.field)]\"\n            (keyup.enter)=\"applyAdvancedFilters()\" />\n        </mat-form-field>\n      }\n\n      <div\n        class=\"flex items-center justify-end gap-2 md:col-span-2 lg:col-span-3 xl:col-span-4\">\n        <button\n          mat-button\n          type=\"button\"\n          (click)=\"clearSearch()\">\n          <mat-icon> filter_alt_off </mat-icon>\n\n          Clear\n        </button>\n\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"applyAdvancedFilters()\">\n          <mat-icon> filter_alt </mat-icon>\n\n          Apply filters\n        </button>\n      </div>\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region grid -->\n  <div\n    class=\"relative min-h-[250px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900\">\n    @if (isLoading) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center bg-white/60 backdrop-blur-[1px] dark:bg-gray-900/60\">\n        <div\n          class=\"flex items-center gap-2 rounded-md bg-white px-4 py-2 shadow dark:bg-gray-800\">\n          <mat-icon class=\"animate-spin\"> refresh </mat-icon>\n\n          Loading...\n        </div>\n      </div>\n    }\n\n    <mtx-grid\n      [data]=\"rows\"\n      [columns]=\"columns\"\n      [expandable]=\"expandable\"\n      [expansionTemplate]=\"lazyExpansionTemplate\"\n      [length]=\"totalElements\"\n      [pageOnFront]=\"false\"\n      [pageIndex]=\"pageNumber - 1\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [showPaginator]=\"showPaginator\"\n      (expansionChange)=\"onExpansionChange($event)\"\n      (page)=\"getNextPage($event)\"\n      (sortChange)=\"sortChanged($event)\">\n    </mtx-grid>\n\n    <ng-template\n      #lazyExpansionTemplate\n      let-row>\n      @if (isExpanded(row)) {\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: row }\">\n        </ng-container>\n      }\n    </ng-template>\n  </div>\n  <!-- #endregion -->\n</div>\n", styles: [":host{display:block;width:100%;min-height:250px}:host ::ng-deep .mat-mdc-form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MtxGridModule }, { kind: "component", type: i7.MtxGrid, selector: "mtx-grid", inputs: ["displayedColumns", "columns", "data", "length", "loading", "trackBy", "columnResizable", "emptyValuePlaceholder", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "paginationTemplate", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "expandable", "expansionTemplate", "multiSelectable", "multiSelectionWithClick", "rowSelectable", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowSelectionFormatter", "rowClassFormatter", "rowSelected", "cellSelectable", "showToolbar", "toolbarTitle", "toolbarTemplate", "columnHideable", "columnHideableChecked", "columnSortable", "columnPinnable", "columnPinOptions", "showColumnMenuButton", "columnMenuButtonText", "columnMenuButtonType", "columnMenuButtonColor", "columnMenuButtonClass", "columnMenuButtonIcon", "columnMenuButtonFontIcon", "columnMenuButtonSvgIcon", "showColumnMenuHeader", "columnMenuHeaderText", "columnMenuHeaderTemplate", "showColumnMenuFooter", "columnMenuFooterText", "columnMenuFooterTemplate", "noResultText", "noResultTemplate", "headerTemplate", "headerExtraTemplate", "cellTemplate", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "summaryTemplate", "showSidebar", "sidebarTemplate", "showStatusbar", "statusbarTemplate"], outputs: ["page", "sortChange", "rowClick", "rowContextMenu", "expansionChange", "rowSelectedChange", "cellSelectedChange", "columnChange"], exportAs: ["mtxGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDatatableComponent, isStandalone: true, selector: "taon-datatable", inputs: { pageNumber: "pageNumber", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", allowedColumns: "allowedColumns", expansionTemplate: "expansionTemplate", entityCrudController: "entityCrudController", columns: "columns", hideSearch: "hideSearch", hideAddButton: "hideAddButton", safe: "safe", searchMode: "searchMode", callQueryMethod: "callQueryMethod", data: "data", showPaginator: "showPaginator" }, outputs: { expansionChange: "expansionChange", addingItem: "addingItem" }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-3\">\n  <!-- #region toolbar -->\n  @if (!hideSearch) {\n    <div\n      class=\"flex w-full flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:flex-row md:items-center\">\n      <!-- global search -->\n      <mat-form-field\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        class=\"min-w-0 flex-1\">\n        <mat-icon matPrefix> search </mat-icon>\n\n        <input\n          matInput\n          placeholder=\"Search...\"\n          [value]=\"searchValue\"\n          (input)=\"searchChanged($any($event.target).value)\" />\n\n        @if (searchValue) {\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            (click)=\"clearSearch()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </mat-form-field>\n\n      <!-- advanced search -->\n      @if (searchMode === 'advanced') {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          (click)=\"toggleAdvancedSearch()\">\n          <mat-icon> tune </mat-icon>\n\n          Filters\n\n          @if (advancedSearchOpened) {\n            <mat-icon> expand_less </mat-icon>\n          } @else {\n            <mat-icon> expand_more </mat-icon>\n          }\n        </button>\n      }\n\n      <!-- refresh -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        title=\"Refresh\"\n        (click)=\"reload()\">\n        <mat-icon> refresh </mat-icon>\n      </button>\n\n      <!-- add -->\n      @if (!hideAddButton) {\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"addingItem.emit()\">\n          <mat-icon> add </mat-icon>\n\n          Add\n        </button>\n      }\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region advanced filters -->\n  @if (!hideSearch && searchMode === 'advanced' && advancedSearchOpened) {\n    <div\n      class=\"grid grid-cols-1 gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n      @for (column of filterableColumns; track column.field) {\n        <mat-form-field\n          appearance=\"outline\"\n          subscriptSizing=\"dynamic\"\n          class=\"w-full\">\n          <mat-label>\n            {{ column.header }}\n          </mat-label>\n\n          <input\n            matInput\n            [(ngModel)]=\"columnFilters[$any(column.field)]\"\n            (keyup.enter)=\"applyAdvancedFilters()\" />\n        </mat-form-field>\n      }\n\n      <div\n        class=\"flex items-center justify-end gap-2 md:col-span-2 lg:col-span-3 xl:col-span-4\">\n        <button\n          mat-button\n          type=\"button\"\n          (click)=\"clearSearch()\">\n          <mat-icon> filter_alt_off </mat-icon>\n\n          Clear\n        </button>\n\n        <button\n          mat-flat-button\n          color=\"primary\"\n          type=\"button\"\n          (click)=\"applyAdvancedFilters()\">\n          <mat-icon> filter_alt </mat-icon>\n\n          Apply filters\n        </button>\n      </div>\n    </div>\n  }\n  <!-- #endregion -->\n\n  <!-- #region grid -->\n  <div\n    class=\"relative min-h-[250px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900\">\n    @if (isLoading) {\n      <div\n        class=\"absolute inset-0 z-10 flex items-center justify-center bg-white/60 backdrop-blur-[1px] dark:bg-gray-900/60\">\n        <div\n          class=\"flex items-center gap-2 rounded-md bg-white px-4 py-2 shadow dark:bg-gray-800\">\n          <mat-icon class=\"animate-spin\"> refresh </mat-icon>\n\n          Loading...\n        </div>\n      </div>\n    }\n\n    <mtx-grid\n      [data]=\"rows\"\n      [columns]=\"columns\"\n      [expandable]=\"expandable\"\n      [expansionTemplate]=\"lazyExpansionTemplate\"\n      [length]=\"totalElements\"\n      [pageOnFront]=\"false\"\n      [pageIndex]=\"pageNumber - 1\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [showPaginator]=\"showPaginator\"\n      (expansionChange)=\"onExpansionChange($event)\"\n      (page)=\"getNextPage($event)\"\n      (sortChange)=\"sortChanged($event)\">\n    </mtx-grid>\n\n    <ng-template\n      #lazyExpansionTemplate\n      let-row>\n      @if (isExpanded(row)) {\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: row }\">\n        </ng-container>\n      }\n    </ng-template>\n  </div>\n  <!-- #endregion -->\n</div>\n", styles: [":host{display:block;width:100%;min-height:250px}:host ::ng-deep .mat-mdc-form-field{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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,
@@ -1687,6 +1699,408 @@ const TaonDatatableRoutes = [
  */
 // export default TaonDatatableRoutes;
 
+//#region imports
+//#endregion
+//#region tokens
+const TAON_IS_DETACHED_WINDOW = new InjectionToken('TAON_IS_DETACHED_WINDOW', {
+    factory: () => false,
+});
+//#endregion
+//#region helpers
+function cloneObject(value) {
+    return {
+        ...(value || {}),
+    };
+}
+function createDetachedActivatedRoute(state) {
+    const params$ = new BehaviorSubject(cloneObject(state.params));
+    const queryParams$ = new BehaviorSubject(cloneObject(state.queryParams));
+    const fragment$ = new BehaviorSubject(state.fragment);
+    const data$ = new BehaviorSubject(cloneObject(state.data));
+    const snapshot = {
+        params: cloneObject(state.params),
+        queryParams: cloneObject(state.queryParams),
+        fragment: state.fragment,
+        data: cloneObject(state.data),
+        paramMap: undefined,
+        queryParamMap: undefined,
+    };
+    return {
+        snapshot,
+        params: params$.asObservable(),
+        queryParams: queryParams$.asObservable(),
+        fragment: fragment$.asObservable(),
+        data: data$.asObservable(),
+    };
+}
+//#endregion
+//#region detached windows service
+class TaonDetachedWindowsService {
+    constructor() {
+        //#region fields
+        /**
+         * Base z-index for all detached windows.
+         */
+        this.baseZIndex = 10000;
+        /**
+         * Monotonically increasing focus counter.
+         *
+         * Every time a window receives focus it gets the next value.
+         */
+        this.zIndexCounter = this.baseZIndex;
+        this.windows = signal([], ...(ngDevMode ? [{ debugName: "windows" }] : []));
+    }
+    //#endregion
+    //#region open
+    open(options) {
+        const id = typeof crypto !== 'undefined' && crypto.randomUUID
+            ? crypto.randomUUID()
+            : `taon-window-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        const zIndex = ++this.zIndexCounter;
+        this.windows.update(windows => [
+            ...windows,
+            {
+                id,
+                title: options.title,
+                component: options.component,
+                routeState: options.routeState,
+                zIndex,
+            },
+        ]);
+        return id;
+    }
+    //#endregion
+    //#region focus
+    focus(id) {
+        const windows = this.windows();
+        const windowToFocus = windows.find(window => window.id === id);
+        if (!windowToFocus) {
+            return;
+        }
+        /**
+         * Don't create a new signal value if this window
+         * is already the top-most window.
+         */
+        const highestZIndex = Math.max(...windows.map(window => window.zIndex));
+        if (windowToFocus.zIndex === highestZIndex) {
+            return;
+        }
+        const zIndex = ++this.zIndexCounter;
+        this.windows.update(currentWindows => currentWindows.map(window => window.id === id
+            ? {
+                ...window,
+                zIndex,
+            }
+            : window));
+    }
+    //#endregion
+    //#region close
+    close(id) {
+        const detachedWindow = this.windows().find(current => current.id === id);
+        if (detachedWindow?.componentRef) {
+            detachedWindow.componentRef.destroy();
+        }
+        this.windows.update(windows => windows.filter(current => current.id !== id));
+    }
+    //#endregion
+    //#region register component ref
+    registerComponentRef(id, componentRef) {
+        this.windows.update(windows => windows.map(window => window.id === id
+            ? {
+                ...window,
+                componentRef,
+            }
+            : window));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachedWindowsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachedWindowsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachedWindowsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+//#endregion
+//#region detached window
+class TaonDetachedWindowComponent {
+    constructor() {
+        //#region injections
+        this.windowsService = inject(TaonDetachedWindowsService);
+        this.appRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.injector = inject(Injector);
+    }
+    //#endregion
+    //#region lifecycle
+    ngAfterViewInit() {
+        this.createDetachedComponent();
+    }
+    ngOnDestroy() {
+        this.destroyDetachedComponent();
+    }
+    //#endregion
+    //#region focus
+    focus() {
+        this.windowsService.focus(this.window.id);
+    }
+    //#endregion
+    //#region create detached component
+    createDetachedComponent() {
+        const detachedActivatedRoute = createDetachedActivatedRoute(this.window.routeState);
+        const detachedInjector = Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: detachedActivatedRoute,
+                },
+                {
+                    provide: TAON_IS_DETACHED_WINDOW,
+                    useValue: true,
+                },
+            ],
+        });
+        const componentRef = createComponent(this.window.component, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: detachedInjector,
+            hostElement: this.componentHost.nativeElement,
+        });
+        this.componentRef = componentRef;
+        this.appRef.attachView(componentRef.hostView);
+        componentRef.changeDetectorRef.detectChanges();
+        this.windowsService.registerComponentRef(this.window.id, componentRef);
+    }
+    //#endregion
+    //#region destroy detached component
+    destroyDetachedComponent() {
+        if (!this.componentRef) {
+            return;
+        }
+        try {
+            this.appRef.detachView(this.componentRef.hostView);
+        }
+        catch { }
+        if (!this.componentRef.hostView.destroyed) {
+            this.componentRef.destroy();
+        }
+        this.componentRef = undefined;
+    }
+    //#endregion
+    //#region close
+    close() {
+        this.windowsService.close(this.window.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachedWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonDetachedWindowComponent, isStandalone: true, selector: "taon-detached-window", inputs: { window: "window" }, viewQueries: [{ propertyName: "componentHost", first: true, predicate: ["componentHost"], descendants: true, static: true }], ngImport: i0, template: `
+    <div
+      class="taon-detached-window"
+      cdkDrag
+      [style.z-index]="window.zIndex"
+      (pointerdown)="focus()">
+      <header class="taon-detached-window-header">
+        <div
+          class="taon-detached-window-drag-handle"
+          cdkDragHandle>
+          <span class="taon-detached-window-title">
+            {{ window.title }}
+          </span>
+        </div>
+
+        <div class="taon-detached-window-actions">
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Close"
+            (click)="close()">
+            <mat-icon> close </mat-icon>
+          </button>
+        </div>
+      </header>
+
+      <main class="taon-detached-window-body">
+        <div
+          #componentHost
+          class="taon-detached-window-component-host"></div>
+      </main>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.taon-detached-window{position:absolute;top:80px;left:80px;width:min(900px,calc(100vw - 80px));height:min(700px,calc(100vh - 80px));min-width:320px;min-height:200px;display:flex;flex-direction:column;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);border:1px solid var(--mat-sys-outline-variant, #ccc);border-radius:8px;box-shadow:0 8px 30px #0003;overflow:hidden;resize:both}.taon-detached-window-header{height:40px;flex:0 0 40px;display:flex;align-items:center;padding-left:12px;border-bottom:1px solid var(--mat-sys-outline-variant, #ccc);-webkit-user-select:none;user-select:none}.taon-detached-window-drag-handle{flex:1;height:100%;display:flex;align-items:center;cursor:move;overflow:hidden}.taon-detached-window-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500}.taon-detached-window-actions{display:flex;align-items:center;padding-right:4px}.taon-detached-window-body{flex:1;min-height:0;overflow:auto}.taon-detached-window-component-host{display:block;min-height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachedWindowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-detached-window', standalone: true, imports: [
+                        CommonModule,
+                        CdkDrag,
+                        CdkDragHandle,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="taon-detached-window"
+      cdkDrag
+      [style.z-index]="window.zIndex"
+      (pointerdown)="focus()">
+      <header class="taon-detached-window-header">
+        <div
+          class="taon-detached-window-drag-handle"
+          cdkDragHandle>
+          <span class="taon-detached-window-title">
+            {{ window.title }}
+          </span>
+        </div>
+
+        <div class="taon-detached-window-actions">
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Close"
+            (click)="close()">
+            <mat-icon> close </mat-icon>
+          </button>
+        </div>
+      </header>
+
+      <main class="taon-detached-window-body">
+        <div
+          #componentHost
+          class="taon-detached-window-component-host"></div>
+      </main>
+    </div>
+  `, styles: [":host{display:block}.taon-detached-window{position:absolute;top:80px;left:80px;width:min(900px,calc(100vw - 80px));height:min(700px,calc(100vh - 80px));min-width:320px;min-height:200px;display:flex;flex-direction:column;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, black);border:1px solid var(--mat-sys-outline-variant, #ccc);border-radius:8px;box-shadow:0 8px 30px #0003;overflow:hidden;resize:both}.taon-detached-window-header{height:40px;flex:0 0 40px;display:flex;align-items:center;padding-left:12px;border-bottom:1px solid var(--mat-sys-outline-variant, #ccc);-webkit-user-select:none;user-select:none}.taon-detached-window-drag-handle{flex:1;height:100%;display:flex;align-items:center;cursor:move;overflow:hidden}.taon-detached-window-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500}.taon-detached-window-actions{display:flex;align-items:center;padding-right:4px}.taon-detached-window-body{flex:1;min-height:0;overflow:auto}.taon-detached-window-component-host{display:block;min-height:100%}\n"] }]
+        }], propDecorators: { window: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], componentHost: [{
+                type: ViewChild,
+                args: ['componentHost', {
+                        static: true,
+                    }]
+            }] } });
+//#endregion
+//#region detached windows host
+class TaonDetachedWindowsHostComponent {
+    constructor() {
+        this.windowsService = inject(TaonDetachedWindowsService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachedWindowsHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDetachedWindowsHostComponent, isStandalone: true, selector: "taon-detached-windows-host", ngImport: i0, template: `
+    @for (window of windowsService.windows(); track window.id) {
+      <taon-detached-window [window]="window" />
+    }
+  `, isInline: true, styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:10000}taon-detached-window{pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TaonDetachedWindowComponent, selector: "taon-detached-window", inputs: ["window"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachedWindowsHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-detached-windows-host', standalone: true, imports: [CommonModule, TaonDetachedWindowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @for (window of windowsService.windows(); track window.id) {
+      <taon-detached-window [window]="window" />
+    }
+  `, styles: [":host{position:fixed;inset:0;pointer-events:none;z-index:10000}taon-detached-window{pointer-events:auto}\n"] }]
+        }] });
+//#endregion
+//#region detachable dialog content
+class TaonDetachableDialogContentComponent {
+    constructor() {
+        //#region injections
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.windowsService = inject(TaonDetachedWindowsService);
+        this.isDetached = inject(TAON_IS_DETACHED_WINDOW);
+    }
+    //#endregion
+    //#region detach
+    detach() {
+        if (this.isDetached) {
+            return;
+        }
+        const snapshot = this.route.snapshot;
+        const routeState = {
+            url: this.router.url,
+            params: this.collectParams(snapshot),
+            queryParams: cloneObject(snapshot.queryParams),
+            fragment: snapshot.fragment,
+            data: this.collectData(snapshot),
+        };
+        this.windowsService.open({
+            title: this.title || this.component.name || 'Detached window',
+            component: this.component,
+            routeState,
+        });
+    }
+    //#endregion
+    //#region route utils
+    collectParams(snapshot) {
+        const params = {};
+        let current = snapshot;
+        while (current) {
+            Object.assign(params, current.params);
+            current = current.parent;
+        }
+        return params;
+    }
+    collectData(snapshot) {
+        const data = {};
+        let current = snapshot;
+        while (current) {
+            Object.assign(data, current.data);
+            current = current.parent;
+        }
+        return data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachableDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDetachableDialogContentComponent, isStandalone: true, selector: "taon-detachable-dialog-content", inputs: { component: "component", title: "title" }, ngImport: i0, template: `
+    <section class="taon-detachable-content">
+      @if (!isDetached) {
+        <header class="taon-detachable-content-toolbar">
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Detach"
+            (click)="detach()">
+            <mat-icon> open_in_new </mat-icon>
+          </button>
+        </header>
+      }
+
+      <div class="taon-detachable-content-body">
+        <ng-content />
+      </div>
+    </section>
+  `, isInline: true, styles: [":host{display:block}.taon-detachable-content{display:flex;flex-direction:column;min-height:0}.taon-detachable-content-toolbar{min-height:36px;display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid var(--mat-sys-outline-variant, #ddd)}.taon-detachable-content-body{min-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDetachableDialogContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-detachable-dialog-content', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="taon-detachable-content">
+      @if (!isDetached) {
+        <header class="taon-detachable-content-toolbar">
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Detach"
+            (click)="detach()">
+            <mat-icon> open_in_new </mat-icon>
+          </button>
+        </header>
+      }
+
+      <div class="taon-detachable-content-body">
+        <ng-content />
+      </div>
+    </section>
+  `, styles: [":host{display:block}.taon-detachable-content{display:flex;flex-direction:column;min-height:0}.taon-detachable-content-toolbar{min-height:36px;display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid var(--mat-sys-outline-variant, #ddd)}.taon-detachable-content-body{min-height:0}\n"] }]
+        }], propDecorators: { component: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], title: [{
+                type: Input
+            }] } });
+
 var TaonDraggableButtonPanelState;
 (function (TaonDraggableButtonPanelState) {
     TaonDraggableButtonPanelState["CLICKABLE_BUTTON"] = "CLICKABLE_BUTTON";
@@ -2075,7 +2489,7 @@ class TaonDraggableButtonPanelComponent {
         return transitions[current].includes(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDraggableButtonPanelComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDraggableButtonPanelComponent, isStandalone: true, selector: "taon-draggable-button-panel", inputs: { context: "context", basePath: "basePath", buttonIcon: "buttonIcon", title: "title", outlet: "outlet", stateParamName: "stateParamName", state: "state", initialState: "initialState", autoHideIcon: "autoHideIcon", iconTemplate: "iconTemplate", headerCenterTemplate: "headerCenterTemplate" }, outputs: { stateChange: "stateChange" }, providers: [TaonAdminMenuContext], viewQueries: [{ propertyName: "drag", first: true, predicate: CdkDrag, descendants: true }], ngImport: i0, template: "@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {\n  @if (iconTemplate) {\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\" />\n  } @else {\n    <button\n      class=\"taon-admin-panel-toogle-open-button\"\n      [class.taon-admin-panel-toogle-button-dimmer-opacity]=\"\n        effectiveState() !== State.CLICKABLE_BUTTON\n      \"\n      mat-icon-button\n      type=\"button\"\n      [matTooltip]=\"title\"\n      (click)=\"toggle()\">\n      <mat-icon>{{ buttonIcon }}</mat-icon>\n    </button>\n  }\n}\n\n<section\n  cdkDrag\n  [hidden]=\"currentState() === State.CLICKABLE_BUTTON\"\n  [cdkDragDisabled]=\"!isDraggingEnabled()\"\n  class=\"taon-draggable-panel\"\n  [class.taon-window]=\"effectiveState() === State.WINDOW\"\n  [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n  [class.taon-fullscreen]=\"\n    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n    effectiveState() === State.FULL_SCREEN_LOCKED\n  \">\n  <header\n    cdkDragHandle\n    (dblclick)=\"toogleFullscreen($event)\"\n    class=\"taon-window-bar\">\n    <!-- LEFT -->\n    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n      <span class=\"truncate font-medium\">\n        {{ title }}\n      </span>\n    </div>\n\n    <!-- EXACT CENTER -->\n    <div class=\"flex min-w-0 items-center justify-center\">\n      @if (headerCenterTemplate) {\n        <ng-container [ngTemplateOutlet]=\"headerCenterTemplate\" />\n      }\n    </div>\n\n    <!-- #region window buttons -->\n    <div class=\"flex shrink-0 items-center\">\n      <!-- Desktop-only window/fullscreen controls -->\n      @if (!forceFullScreen()) {\n        @if (currentState() !== State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Window mode\"\n            (click)=\"windowMode()\">\n            <mat-icon>filter_none</mat-icon>\n          </button>\n        }\n\n        @if (currentState() === State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Full screen\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>fullscreen</mat-icon>\n          </button>\n        }\n\n        @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Lock full screen\"\n            (click)=\"lockFullScreen()\">\n            <mat-icon>lock_open</mat-icon>\n          </button>\n        } @else {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Unlock\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>lock</mat-icon>\n          </button>\n        }\n      }\n\n      <!-- ALWAYS available -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        matTooltip=\"Close admin panel\"\n        (click)=\"returnToButton()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <!-- #endregion -->\n  </header>\n\n  <div class=\"min-h-0 flex-1 overflow-hidden\">\n    <ng-content />\n  </div>\n</section>\n", styles: [":host{display:contents}.taon-admin-panel-toogle-button-dimmer-opacity{opacity:.6}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonDraggableButtonPanelComponent, isStandalone: true, selector: "taon-draggable-button-panel", inputs: { context: "context", basePath: "basePath", buttonIcon: "buttonIcon", title: "title", outlet: "outlet", stateParamName: "stateParamName", state: "state", initialState: "initialState", autoHideIcon: "autoHideIcon", iconTemplate: "iconTemplate", headerCenterTemplate: "headerCenterTemplate" }, outputs: { stateChange: "stateChange" }, providers: [TaonAdminMenuContext], viewQueries: [{ propertyName: "drag", first: true, predicate: CdkDrag, descendants: true }], ngImport: i0, template: "@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {\n  @if (iconTemplate) {\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\" />\n  } @else {\n    <button\n      class=\"taon-admin-panel-toogle-open-button\"\n      [class.taon-admin-panel-toogle-button-dimmer-opacity]=\"\n        effectiveState() !== State.CLICKABLE_BUTTON\n      \"\n      mat-icon-button\n      type=\"button\"\n      [matTooltip]=\"title\"\n      (click)=\"toggle()\">\n      <mat-icon>{{ buttonIcon }}</mat-icon>\n    </button>\n  }\n}\n\n<section\n  cdkDrag\n  [hidden]=\"currentState() === State.CLICKABLE_BUTTON\"\n  [cdkDragDisabled]=\"!isDraggingEnabled()\"\n  class=\"taon-draggable-panel\"\n  [class.taon-window]=\"effectiveState() === State.WINDOW\"\n  [class.taon-window-full]=\"effectiveState() !== State.WINDOW\"\n  [class.taon-fullscreen]=\"\n    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||\n    effectiveState() === State.FULL_SCREEN_LOCKED\n  \">\n  <header\n    cdkDragHandle\n    (dblclick)=\"toogleFullscreen($event)\"\n    class=\"taon-window-bar\">\n    <!-- LEFT -->\n    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <mat-icon class=\"text-gray-500\"> admin_panel_settings </mat-icon>\n\n      <span class=\"truncate font-medium\">\n        {{ title }}\n      </span>\n    </div>\n\n    <!-- EXACT CENTER -->\n    <div class=\"flex min-w-0 items-center justify-center\">\n      @if (headerCenterTemplate) {\n        <ng-container [ngTemplateOutlet]=\"headerCenterTemplate\" />\n      }\n    </div>\n\n    <!-- #region window buttons -->\n    <div class=\"flex shrink-0 items-center\">\n      <!-- Desktop-only window/fullscreen controls -->\n      @if (!forceFullScreen()) {\n        @if (currentState() !== State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Window mode\"\n            (click)=\"windowMode()\">\n            <mat-icon>filter_none</mat-icon>\n          </button>\n        }\n\n        @if (currentState() === State.WINDOW) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Full screen\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>fullscreen</mat-icon>\n          </button>\n        }\n\n        @if (currentState() !== State.FULL_SCREEN_LOCKED) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Lock full screen\"\n            (click)=\"lockFullScreen()\">\n            <mat-icon>lock_open</mat-icon>\n          </button>\n        } @else {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Unlock\"\n            (click)=\"fullScreenDraggable()\">\n            <mat-icon>lock</mat-icon>\n          </button>\n        }\n      }\n\n      <!-- ALWAYS available -->\n      <button\n        mat-icon-button\n        type=\"button\"\n        matTooltip=\"Close admin panel\"\n        (click)=\"returnToButton()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n    <!-- #endregion -->\n  </header>\n\n  <div class=\"min-h-0 flex-1 overflow-hidden\">\n    <ng-content />\n  </div>\n</section>\n", styles: [":host{display:contents}.taon-admin-panel-toogle-button-dimmer-opacity{opacity:.6}.taon-draggable-panel{position:fixed;display:flex;flex-direction:column;min-width:320px;min-height:240px;overflow:hidden;background:#fff;border:1px solid #e5e7eb;box-shadow:0 20px 50px #00000026;z-index:1000}.taon-window{width:70vw;height:70vh;left:15vw;top:25vh;border-radius:6px}.taon-fullscreen{width:100vw;height:100dvh;left:0;top:0;border-radius:0}.taon-window-bar{height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;flex-shrink:0;padding-left:12px;border-bottom:1px solid #e5e7eb;background:#fafafa;-webkit-user-select:none;user-select:none;cursor:move}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonDraggableButtonPanelComponent, decorators: [{
             type: Component,
@@ -2130,7 +2544,22 @@ const TaonDraggableButtonPanelRoutes = [
     // },
 ];
 
-const t = Translation.for('src/lib/taon-under-construction/taon-under-construction.component.ts', { "src/lib/taon-under-construction/taon-under-construction.component.ts": { "en-US": async () => (await import('./ui-browser-taon-under-construction.component.ts.en-US.i18n.data-CJznhYEs.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-under-construction.component.ts.pl-PL.i18n.data-5S7xoosG.mjs')).default } });
+class TaonPurchaseStatusDialogComponent {
+    constructor(data) {
+        this.data = data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonPurchaseStatusDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TaonPurchaseStatusDialogComponent, isStandalone: true, selector: "taon-purchase-status-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n  {{\n    data.success\n      ? 'Payment successful'\n      : 'Payment cancelled'\n  }}\n</h2>\n\n<div mat-dialog-content>{{ data.message }}</div>\n\n<div\n  mat-dialog-actions\n  align=\"end\">\n  <button\n    mat-button\n    mat-dialog-close>\n    OK\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonPurchaseStatusDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-purchase-status-dialog', standalone: true, imports: [MatDialogModule, MatButtonModule], template: "<h2 mat-dialog-title>\n  {{\n    data.success\n      ? 'Payment successful'\n      : 'Payment cancelled'\n  }}\n</h2>\n\n<div mat-dialog-content>{{ data.message }}</div>\n\n<div\n  mat-dialog-actions\n  align=\"end\">\n  <button\n    mat-button\n    mat-dialog-close>\n    OK\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+const t = Translation.for('src/lib/taon-under-construction/taon-under-construction.component.ts', { "src/lib/taon-under-construction/taon-under-construction.component.ts": { "en-US": async () => (await import('./ui-browser-taon-under-construction.component.ts.en-US.i18n.data-BVYOlk4F.mjs')).default, "pl-PL": async () => (await import('./ui-browser-taon-under-construction.component.ts.pl-PL.i18n.data-Btv-o2oM.mjs')).default } });
 class TaonUnderConstructionComponent {
     constructor() {
         this.t = t.for(this);
@@ -2139,7 +2568,7 @@ class TaonUnderConstructionComponent {
         this.icon = input('engineering', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonUnderConstructionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: TaonUnderConstructionComponent, isStandalone: true, selector: "taon-under-construction", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"under-construction\">\n  <div class=\"icon-wrapper\">\n    <mat-icon>{{ icon() }}</mat-icon>\n  </div>\n\n  <h2>{{ title() }}</h2>\n\n  <p>{{ description() }}</p>\n\n  <div class=\"status\">\n    <mat-icon>construction</mat-icon>\n    Work in progress\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.under-construction{min-height:320px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;text-align:center}.icon-wrapper{width:88px;height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent);color:var(--mat-sys-primary)}.icon-wrapper mat-icon{width:48px;height:48px;font-size:48px}h2{margin:0 0 10px;font-size:24px;font-weight:500}p{max-width:480px;margin:0;color:var(--mat-sys-on-surface-variant);line-height:1.6}.status{display:flex;align-items:center;gap:8px;margin-top:24px;padding:7px 14px;border-radius:999px;background:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface-variant);font-size:13px;font-weight:500}.status mat-icon{width:18px;height:18px;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: TaonUnderConstructionComponent, isStandalone: true, selector: "taon-under-construction", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"under-construction\">\n  <div class=\"icon-wrapper\">\n    <mat-icon>{{ icon() }}</mat-icon>\n  </div>\n\n  <h2>{{ title() }}</h2>\n\n  <p>{{ description() }}</p>\n\n  <div class=\"status\">\n    <mat-icon>construction</mat-icon>\n    Work in progress\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.under-construction{min-height:320px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;text-align:center}.icon-wrapper{width:88px;height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;border-radius:50%;background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent);color:var(--mat-sys-primary)}.icon-wrapper mat-icon{width:48px;height:48px;font-size:48px}h2{margin:0 0 10px;font-size:24px;font-weight:500}p{max-width:480px;margin:0;color:var(--mat-sys-on-surface-variant);line-height:1.6}.status{display:flex;align-items:center;gap:8px;margin-top:24px;padding:7px 14px;border-radius:999px;background:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface-variant);font-size:13px;font-weight:500}.status mat-icon{width:18px;height:18px;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonUnderConstructionComponent, decorators: [{
             type: Component,
@@ -2159,5 +2588,5 @@ var index = {};
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, PROJECT_NPM_NAME, TaonAdminLayoutComponent, TaonAdminMenuContext, TaonAdminPageTabsComponent, TaonAdminWelcomeComponent, TaonAdminWelcomeRoutes, TaonBackofficeNotificationsComponent, TaonBackofficeNotificationsService, TaonBaseAdminLayoutPage, TaonBaselineBackofficeOutletName, TaonConfirmDialogComponent, TaonDatatableComponent, TaonDatatableRoutes, TaonDraggableButtonPanelComponent, TaonDraggableButtonPanelRoutes, TaonDraggableButtonPanelState, TaonErrorDetailsDialogComponent, TaonErrorToastComponent, TaonHorizontalWheelScrollDirective, TaonUnderConstructionComponent, adminLazyRoute, myOrgProj, 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, 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, startCli };
 //# sourceMappingURL=ui-browser.mjs.map