@acorex-platform/framework-client 2.0.0-next.3 → 2.0.0-next.31

package/fesm2022/acorex-platform-framework-client-layout-views.mjs

@@ -14,7 +14,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i6 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXPTabNavigationService, axpSplitCollapsedBreadcrumbs, AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, AXPTabPreviewService, AXPUnsavedChangesConfirmService, AXPBrowserTitleService, AXPEntityDetailsNavTrailService, axpJoinTabTitleSegments, normalizeRouterUrl, AXP_HOME_TAB_KEY, axpResolveTabKey, axpIsEntityListPath, axpParseEntityListRoute, axpGetEntityListReturnUrl, axpIsEntityDetailsPath, axpParseEntityDetailsRoute, axpSetEntityDetailsPageQuery, axpIsEntityDetailsViewRoute, AXPNotFoundError, AXP_NOT_FOUND_ROUTE, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex-platform/framework-client/common';
+import { AXPTabNavigationService, axpSplitCollapsedBreadcrumbs, AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, AXPTabPreviewService, AXPUnsavedChangesConfirmService, AXPBrowserTitleService, AXPEntityDetailsNavTrailService, axpJoinTabTitleSegments, axpGetLeafRouteSnapshot, normalizeRouterUrl, AXP_HOME_TAB_KEY, axpResolveTabKey, axpIsEntityListPath, axpParseEntityListRoute, axpGetEntityListReturnUrl, axpIsEntityDetailsPath, axpParseEntityDetailsRoute, axpSetEntityDetailsPageQuery, axpIsEntityDetailsViewRoute, AXPNotFoundError, axpInTabErrorLocation, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex-platform/framework-client/common';
 import * as i9 from '@acorex-platform/framework-client/core';
 import { AXPDeviceService, AXPComponentSlotModule, AXPDebugService, OVERLAY_DETAILS_VIEW_TRACE_NS, AXPExpressionEvaluatorService, AXPContextEvalFactory, normalizeKeyboardShortcuts, AXPContextStore, AXPEntityBroadcastService, AXPKeyboardShortcutRegistry } from '@acorex-platform/framework-client/core';
 import * as i1 from '@acorex/cdk/drawer';
@@ -30,7 +30,7 @@ import { AXToastService } from '@acorex/components/toast';
 import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { AXPSessionService } from '@acorex-platform/framework-client/auth';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { isEmpty, cloneDeep, get } from 'lodash-es';
 import { filter } from 'rxjs/operators';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -263,6 +263,7 @@ class AXPPageLayoutBaseComponent {
         this.unsavedChangesConfirm = inject(AXPUnsavedChangesConfirmService);
         this.browserTitleService = inject(AXPBrowserTitleService);
         this.router = inject(Router);
+        this.pageLayoutRoute = inject(ActivatedRoute);
         this.navTrailService = inject(AXPEntityDetailsNavTrailService);
         this.pageLayoutDestroyRef = inject(DestroyRef);
         //#endregion
@@ -324,7 +325,7 @@ class AXPPageLayoutBaseComponent {
             this.title.set(await this.getPageTitle());
             const icon = await this.getPageIcon();
             this.titleIcon.set(icon);
-            if (this.tabNavigation.effectiveMode() === 'tabular') {
+            if (this.tabNavigation.effectiveMode() === 'tabular' && this.canPublishActiveTabChrome()) {
                 const tabKey = this.pageTabKey();
                 if (tabKey && icon) {
                     this.tabNavigation.syncTabIcon(tabKey, icon);
@@ -410,15 +411,30 @@ class AXPPageLayoutBaseComponent {
             if (isActiveForNavTrail && this.isActivePageForNavTrail()) {
                 this.navTrailService.setActiveTrail(breadCrumbs);
             }
-            if (this.tabNavigation.effectiveMode() === 'tabular') {
+            if (this.tabNavigation.effectiveMode() === 'tabular' && this.canPublishActiveTabChrome()) {
                 const tabKey = this.pageTabKey();
-                const tabTitleSegments = await this.resolveBreadcrumbTabTitleSegments(breadCrumbs);
-                let tabTitle = tabTitleSegments.length ? axpJoinTabTitleSegments(tabTitleSegments) : null;
-                if (!tabTitle) {
-                    tabTitle = await this.resolvePageTitleForTab();
+                const routeTabTitle = await Promise.resolve(this.getRouteTabTitle());
+                if (!tabKey || this.pageTabKey() !== tabKey || this.tabNavigation.activeKey() !== tabKey) {
+                    return;
+                }
+                if (typeof routeTabTitle === 'string' && routeTabTitle.trim()) {
+                    this.tabNavigation.syncTabTitle(tabKey, routeTabTitle.trim());
                 }
-                if (tabKey && tabTitle) {
-                    this.tabNavigation.syncTabTitle(tabKey, tabTitleSegments.length ? tabTitleSegments : tabTitle);
+                else if (Array.isArray(routeTabTitle) && routeTabTitle.length) {
+                    this.tabNavigation.syncTabTitle(tabKey, routeTabTitle);
+                }
+                else {
+                    const tabTitleSegments = await this.resolveBreadcrumbTabTitleSegments(breadCrumbs);
+                    let tabTitle = tabTitleSegments.length ? axpJoinTabTitleSegments(tabTitleSegments) : null;
+                    if (!tabTitle) {
+                        tabTitle = await this.resolvePageTitleForTab();
+                    }
+                    if (this.pageTabKey() !== tabKey || this.tabNavigation.activeKey() !== tabKey) {
+                        return;
+                    }
+                    if (tabTitle) {
+                        this.tabNavigation.syncTabTitle(tabKey, tabTitleSegments.length ? tabTitleSegments : tabTitle);
+                    }
                 }
             }
         }, /* @ts-ignore */
@@ -507,9 +523,35 @@ class AXPPageLayoutBaseComponent {
         this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.pageLayoutDestroyRef))
             .subscribe(() => {
+            this.syncOwnedPageTabKey();
             void this.publishBrowserTitleIfActive();
         });
     }
+    /**
+     * Follows the scoped tab when this instance is the active route (settings scope changes).
+     * Cached background pages keep the key captured at init.
+     */
+    syncOwnedPageTabKey() {
+        if (this.tabNavigation.effectiveMode() !== 'tabular' || !this.isOwningActiveRoute()) {
+            return;
+        }
+        const nextKey = this.resolvePageTabKey();
+        if (nextKey !== this.pageTabKey()) {
+            this.pageTabKey.set(nextKey);
+        }
+    }
+    /** True when this page's route snapshot is in the active router tree. */
+    isOwningActiveRoute() {
+        const own = this.pageLayoutRoute.snapshot;
+        const leaf = axpGetLeafRouteSnapshot(this.router.routerState.snapshot.root);
+        return leaf.pathFromRoot.includes(own);
+    }
+    /** True when this page may publish chrome onto its route tab. */
+    canPublishActiveTabChrome() {
+        const pageKey = this.pageTabKey();
+        const activeKey = this.tabNavigation.activeKey();
+        return !!pageKey && !!activeKey && pageKey === activeKey;
+    }
     /** Maps the home-page route to the pinned home tab key instead of a path-based key. */
     resolvePageTabKey() {
         const homePath = this.homePageService.getCurrent().path;
@@ -632,6 +674,13 @@ class AXPPageLayoutBaseComponent {
     getPageBreadcrumbs() {
         return [];
     }
+    /**
+     * Route-tab label for this page. Return a scope title when child routes are internal
+     * (settings groups). Null keeps the breadcrumb / page-title fallback.
+     */
+    getRouteTabTitle() {
+        return null;
+    }
     /** Collects resolved breadcrumb labels (Home excluded upstream) for tab chrome. */
     async resolveBreadcrumbTabTitleSegments(pageBreadcrumbs) {
         const segments = [];
@@ -1118,11 +1167,25 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
     let pageActivationChain = Promise.resolve();
     /** Serializes route-driven adapter loads (initial navigation and layout refresh). */
     let routeLoadChain = Promise.resolve();
+    /** Invalidates a queued load once this component's route changes or a newer load starts. */
+    let routeLoadGeneration = 0;
+    const routePath = () => {
+        const tree = router.createUrlTree([], { relativeTo: route });
+        return router.serializeUrl(tree).split('?')[0]?.split('#')[0] ?? '';
+    };
     /** `page` query param from the browser URL (reliable on hard refresh). */
     const readPageQueryParam = () => {
         const page = router.parseUrl(router.url).queryParams['page'];
         return typeof page === 'string' && page.length > 0 ? page : null;
     };
+    /** Keep caller history state (for example related-list field hides) across in-page navigations. */
+    const callerNavigationState = () => {
+        if (typeof history === 'undefined' || history.state == null || typeof history.state !== 'object') {
+            return undefined;
+        }
+        const { navigationId: _navigationId, ...rest } = history.state;
+        return Object.keys(rest).length > 0 ? rest : undefined;
+    };
     /** Loads page data, context, and evaluated widgets for the target sidebar page. */
     const activatePageById = async (pageId, forceRefresh) => {
         const activation = pageActivationChain.then(() => runPageActivation(pageId, forceRefresh));
@@ -1391,16 +1454,24 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                     queryParams: { page: resolvedPage.id },
                     queryParamsHandling: 'merge',
                     replaceUrl: true,
+                    ...(callerNavigationState() ? { state: callerNavigationState() } : {}),
                 });
             }
             await this.loadPage(pageId, forceRefresh);
         },
         async loadFromRoute(forceRefresh, reason = 'unspecified') {
+            const generation = ++routeLoadGeneration;
+            const moduleName = route.parent?.snapshot.paramMap.get('module');
+            const entityName = route.snapshot.paramMap.get('entity');
+            const id = route.snapshot.paramMap.get('id');
+            const requestUrl = router.serializeUrl(router.createUrlTree([], { relativeTo: route }));
+            const requestPath = requestUrl.split('?')[0]?.split('#')[0] ?? '';
+            const requestStillOwnsThisPage = () => generation === routeLoadGeneration &&
+                route.parent?.snapshot.paramMap.get('module') === moduleName &&
+                route.snapshot.paramMap.get('entity') === entityName &&
+                route.snapshot.paramMap.get('id') === id;
             const run = async () => {
                 const pageIdFromUrl = readPageQueryParam() ?? undefined;
-                const moduleName = route.parent?.snapshot.paramMap.get('module');
-                const entityName = route.snapshot.paramMap.get('entity');
-                const id = route.snapshot.paramMap.get('id');
                 AXPDebugService.instance?.trace(DETAILS_VIEW_PAGE_TRACE_NS, 'viewmodel', 'loadFromRoute start', () => ({
                     moduleName,
                     entityName,
@@ -1410,7 +1481,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                     reason,
                     note: 'Entity/route load started',
                 }));
-                if (!moduleName || !entityName || !id) {
+                if (!moduleName || !entityName || !id || !requestStillOwnsThisPage()) {
                     return;
                 }
                 layout.setNavigationLoading(true);
@@ -1436,7 +1507,10 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                     }));
                     layout.setOverlayLoading(false);
                     if (error instanceof AXPNotFoundError) {
-                        void router.navigateByUrl(AXP_NOT_FOUND_ROUTE);
+                        const currentPath = router.url.split('?')[0]?.split('#')[0] ?? '';
+                        if (requestStillOwnsThisPage() && currentPath === requestPath && routePath() === requestPath) {
+                            void router.navigateByUrl(axpInTabErrorLocation('404', requestUrl));
+                        }
                         return;
                     }
                     throw error;
@@ -1531,6 +1605,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                             queryParams: { page: page.id, filters: null },
                             queryParamsHandling: 'merge',
                             replaceUrl: false,
+                            ...(callerNavigationState() ? { state: callerNavigationState() } : {}),
                         });
                     }
                     void activatePageById(page.id);
@@ -1549,6 +1624,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                         queryParamsHandling: 'merge',
                         // Push history for desktop sidebar switches and mobile page-list picks.
                         replaceUrl: false,
+                        ...(callerNavigationState() ? { state: callerNavigationState() } : {}),
                     });
                     return;
                 }
@@ -1568,6 +1644,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                         relativeTo: route,
                         queryParams: currentParams,
                         replaceUrl: true,
+                        ...(callerNavigationState() ? { state: callerNavigationState() } : {}),
                     });
                 }
             }
@@ -3302,7 +3379,7 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
                 useExisting: AXPLayoutDetailsViewComponent,
             },
             AXPLayoutDetailsViewViewModel,
-        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, isSignal: true }, { propertyName: "widgetContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "sidebarTabs", first: true, predicate: ["sidebarTabs"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{display:flex;width:100%;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-block:calc(var(--spacing, .25rem) * 4);display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, isSignal: true }, { propertyName: "widgetContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "sidebarTabs", first: true, predicate: ["sidebarTabs"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;width:100%;flex-shrink:0;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-top:calc(var(--spacing, .25rem) * 2);display:block;width:100%}axp-layout-details-view .axp-horizontal-tabs .content .axp-entity-list{height:auto;min-height:0;flex:none}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
@@ -3347,7 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: AXPLayoutDetailsViewComponent,
                         },
                         AXPLayoutDetailsViewViewModel,
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{display:flex;width:100%;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-block:calc(var(--spacing, .25rem) * 4);display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;width:100%;flex-shrink:0;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-top:calc(var(--spacing, .25rem) * 2);display:block;width:100%}axp-layout-details-view .axp-horizontal-tabs .content .axp-entity-list{height:auto;min-height:0;flex:none}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { form: [{ type: i0.ViewChild, args: ['form', { isSignal: true }] }], widgetContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPWidgetContainerComponent), { isSignal: true }] }], sidebarTabs: [{ type: i0.ViewChild, args: ['sidebarTabs', { isSignal: true }] }] } });
 
 //#region ----   Details View Can Deactivate Guard   ----