@acorex/platform 21.0.0-next.83 → 21.0.0-next.88

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

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, viewChild, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, computed, Injectable, input, output, ViewContainerRef, Directive, DestroyRef, ElementRef, untracked } from '@angular/core';
+import { inject, viewChild, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, untracked, computed, Injectable, input, output, ViewContainerRef, Directive, DestroyRef, ElementRef } from '@angular/core';
 import { AXCommonModule } from '@acorex/cdk/common';
 import * as i4 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
@@ -12,9 +12,9 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, axpNavigateAppPath, AXPEntityCommandScope, axpIsEntityDetailsViewRoute, AXPUnsavedChangesConfirmService, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex/platform/common';
+import { AXPTabNavigationService, AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, AXPTabPreviewService, AXPUnsavedChangesConfirmService, normalizeRouterUrl, AXP_HOME_TAB_KEY, axpResolveTabKey, axpIsEntityDetailsViewRoute, axpNavigateAppPath, AXPEntityCommandScope, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex/platform/common';
 import * as i8 from '@acorex/platform/core';
-import { AXPDeviceService, AXPComponentSlotModule, getSmart, AXPExpressionEvaluatorService, AXPContextStore, normalizeKeyboardShortcuts, AXPBroadcastEventService, AXPKeyboardShortcutRegistry, AXPKeyboardShortcutPriority } from '@acorex/platform/core';
+import { AXPDeviceService, AXPComponentSlotModule, getSmart, AXPExpressionEvaluatorService, AXPContextEvalFactory, normalizeKeyboardShortcuts, AXPContextStore, AXPBroadcastEventService, AXPKeyboardShortcutRegistry, AXPKeyboardShortcutPriority } from '@acorex/platform/core';
 import * as i1 from '@acorex/cdk/drawer';
 import { AXDrawerDirectiveModule, AXDrawerContainerDirective } from '@acorex/cdk/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
@@ -28,22 +28,23 @@ import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXToastService } from '@acorex/components/toast';
 import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { AXPSessionService } from '@acorex/platform/auth';
+import { Router, ActivatedRoute } from '@angular/router';
 import { isEmpty, cloneDeep, get } from 'lodash-es';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i6$1 from '@acorex/platform/layout/widget-core';
+import * as i7 from '@acorex/platform/layout/widget-core';
 import { AXPPageStatus, AXPWidgetContainerComponent, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
-import { Router, ActivatedRoute } from '@angular/router';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 import { AXBadgeModule } from '@acorex/components/badge';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
+import * as i5$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXMenuModule } from '@acorex/components/menu';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 import { AXFileModule } from '@acorex/core/file';
-import * as i7 from '@acorex/components/form';
+import * as i8$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i5$1 from '@acorex/components/tabs';
+import * as i6$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -55,6 +56,7 @@ class AXPPageLayoutComponent {
         this.page = inject(AXPPageLayoutBase, { optional: true });
         this.layoutService = inject(AXPLayoutThemeService);
         this.deviceService = inject(AXPDeviceService);
+        this.tabNavigation = inject(AXPTabNavigationService);
         this.startSideDrawer = viewChild('startSideDrawer', ...(ngDevMode ? [{ debugName: "startSideDrawer" }] : /* istanbul ignore next */ []));
         this.workflow = inject(AXPWorkflowService);
         this.commandService = inject(AXPCommandService);
@@ -218,11 +220,55 @@ class AXPPageLayoutBaseComponent {
         this.homePageService = inject(AXPHomePageService);
         this.policyService = inject(AXPPolicyEngineService);
         this.settingsService = inject(AXPSettingsService);
+        this.tabNavigation = inject(AXPTabNavigationService);
+        this.tabPreviewService = inject(AXPTabPreviewService);
+        this.unsavedChangesConfirm = inject(AXPUnsavedChangesConfirmService);
+        this.router = inject(Router);
         //#endregion
         //#region ----------------   Signal to force recomputation   ----------------
         this._updateTrigger = signal(0, ...(ngDevMode ? [{ debugName: "_updateTrigger" }] : /* istanbul ignore next */ []));
+        /** Tab key captured at page init — stable while the route instance is cached. */
+        this.pageTabKey = signal(null, ...(ngDevMode ? [{ debugName: "pageTabKey" }] : /* istanbul ignore next */ []));
         this.updateTrigger = this._updateTrigger.asReadonly();
         //#endregion
+        //#region ----------------   Tab Title Sync   ----------------
+        /** Refreshes tab title when this cached page becomes the active tab again. */
+        this.#syncTabTitleOnActivate = effect(() => {
+            const activeKey = this.tabNavigation.activeKey();
+            const pageKey = this.pageTabKey();
+            if (!activeKey || !pageKey || activeKey !== pageKey) {
+                return;
+            }
+            if (this.tabNavigation.effectiveMode() !== 'tabular') {
+                return;
+            }
+            untracked(() => {
+                this.recompute();
+            });
+        }, ...(ngDevMode ? [{ debugName: "#syncTabTitleOnActivate" }] : /* istanbul ignore next */ []));
+        /** Publishes structured tab preview (hover card + dirty badge) for this cached page. */
+        this.#syncTabStructuredPreview = effect(() => {
+            this.updateTrigger();
+            const tabKey = this.pageTabKey();
+            const titleValue = this.title();
+            const descriptionValue = this.description();
+            const icon = this.titleIcon();
+            const breadcrumbItems = this.breadcrumbs();
+            if (!tabKey || this.tabNavigation.effectiveMode() !== 'tabular') {
+                return;
+            }
+            const isDirty = this.hasUnsavedChanges();
+            untracked(() => {
+                void this.publishTabStructuredPreview(tabKey, {
+                    titleValue,
+                    descriptionValue,
+                    icon,
+                    breadcrumbItems,
+                    isDirty,
+                });
+            });
+        }, ...(ngDevMode ? [{ debugName: "#syncTabStructuredPreview" }] : /* istanbul ignore next */ []));
+        //#endregion
         //#region ----------------   Title   ----------------
         this.title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
         this.titleIcon = signal(null, ...(ngDevMode ? [{ debugName: "titleIcon" }] : /* istanbul ignore next */ []));
@@ -231,6 +277,12 @@ class AXPPageLayoutBaseComponent {
             this.title.set(await this.getPageTitle());
             const icon = await this.getPageIcon();
             this.titleIcon.set(icon);
+            if (this.tabNavigation.effectiveMode() === 'tabular') {
+                const tabKey = this.pageTabKey();
+                if (tabKey && icon) {
+                    this.tabNavigation.syncTabIcon(tabKey, icon);
+                }
+            }
         }, ...(ngDevMode ? [{ debugName: "#titleEffect" }] : /* istanbul ignore next */ []));
         this.hasTitle = computed(() => {
             const value = this.title();
@@ -284,9 +336,20 @@ class AXPPageLayoutBaseComponent {
         this.#breadcrumbsEffect = effect(async () => {
             this.updateTrigger();
             const breadCrumbs = await this.getPageBreadcrumbs();
-            this.breadcrumbs.set([...this.defaultBreadCrumbs, ...breadCrumbs]);
+            const trail = [...this.defaultBreadCrumbs, ...breadCrumbs];
+            this.breadcrumbs.set(trail);
+            if (this.tabNavigation.effectiveMode() === 'tabular') {
+                const tabKey = this.pageTabKey();
+                let tabTitle = await this.resolveBreadcrumbTabTitle(breadCrumbs);
+                if (!tabTitle) {
+                    tabTitle = await this.resolvePageTitleForTab();
+                }
+                if (tabKey && tabTitle) {
+                    this.tabNavigation.syncTabTitle(tabKey, tabTitle);
+                }
+            }
         }, ...(ngDevMode ? [{ debugName: "#breadcrumbsEffect" }] : /* istanbul ignore next */ []));
-        this.hasBreadcrumbs = computed(() => this.breadcrumbs().length > 1, ...(ngDevMode ? [{ debugName: "hasBreadcrumbs" }] : /* istanbul ignore next */ []));
+        this.hasBreadcrumbs = computed(() => this.breadcrumbs().length > 1 && this.tabNavigation.effectiveMode() !== 'tabular', ...(ngDevMode ? [{ debugName: "hasBreadcrumbs" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----------------   Badge   ----------------
         this.badge = signal(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
@@ -342,10 +405,75 @@ class AXPPageLayoutBaseComponent {
     //#endregion
     //#region ----------------   Lifecycle hooks   ----------------
     async ngOnInit() {
+        this.pageTabKey.set(this.resolvePageTabKey());
         this.translateService.langChanges$.subscribe(() => {
             this.recompute();
         });
     }
+    /** Maps the home-page route to the pinned home tab key instead of a path-based key. */
+    resolvePageTabKey() {
+        const homePath = this.homePageService.getCurrent().path;
+        if (homePath && normalizeRouterUrl(homePath) === normalizeRouterUrl(this.router.url)) {
+            return AXP_HOME_TAB_KEY;
+        }
+        return axpResolveTabKey(this.router);
+    }
+    //#endregion
+    //#region ----------------   Tab Title Sync   ----------------
+    /** Refreshes tab title when this cached page becomes the active tab again. */
+    #syncTabTitleOnActivate;
+    /** Publishes structured tab preview (hover card + dirty badge) for this cached page. */
+    #syncTabStructuredPreview;
+    async publishTabStructuredPreview(tabKey, input) {
+        const tab = this.tabNavigation.tabList().find((item) => item.key === tabKey);
+        const breadcrumbTrail = [];
+        for (const item of input.breadcrumbItems.slice(1)) {
+            const segment = await this.resolveBreadcrumbItemTitle(item);
+            if (segment && segment !== breadcrumbTrail[breadcrumbTrail.length - 1]) {
+                breadcrumbTrail.push(segment);
+            }
+        }
+        const fallbackTitle = await this.translateTextIfKey(breadcrumbTrail.join(' - ') || tab?.title || '');
+        const title = await this.resolveMultiLanguageText(input.titleValue, fallbackTitle);
+        const subtitle = await this.resolveMultiLanguageText(input.descriptionValue, '');
+        this.tabPreviewService.setPreview(tabKey, {
+            title,
+            subtitle: subtitle || undefined,
+            url: tab?.url ?? '',
+            icon: input.icon ?? tab?.icon,
+            isDirty: input.isDirty,
+            breadcrumbTrail,
+        });
+    }
+    async resolveMultiLanguageText(value, fallback) {
+        const resolvedFallback = await this.translateTextIfKey(fallback);
+        if (value == null || value === '') {
+            return resolvedFallback;
+        }
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if (!trimmed) {
+                return resolvedFallback;
+            }
+            if (trimmed.startsWith('@')) {
+                return (await this.translateService.translateAsync(trimmed)) || resolvedFallback;
+            }
+            return trimmed;
+        }
+        const resolved = this.translateService.resolve(value);
+        return resolved || resolvedFallback;
+    }
+    /** Resolves i18n keys (`@scope:key`); returns plain text unchanged. */
+    async translateTextIfKey(text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            return '';
+        }
+        if (trimmed.startsWith('@')) {
+            return (await this.translateService.translateAsync(trimmed)) || trimmed;
+        }
+        return trimmed;
+    }
     #titleEffect;
     getPageTitle() {
         return '';
@@ -361,10 +489,78 @@ class AXPPageLayoutBaseComponent {
     getPageBreadcrumbs() {
         return [];
     }
+    /** Joins all page breadcrumbs (Home is excluded upstream) as the tab label. */
+    async resolveBreadcrumbTabTitle(pageBreadcrumbs) {
+        const segments = [];
+        for (const item of pageBreadcrumbs) {
+            const title = await this.resolveBreadcrumbItemTitle(item);
+            if (title && title !== segments[segments.length - 1]) {
+                segments.push(title);
+            }
+        }
+        if (!segments.length) {
+            return null;
+        }
+        return segments.join(' - ');
+    }
+    /** Resolves a breadcrumb label the same way as page chrome (`t(item.title)`). */
+    async resolveBreadcrumbItemTitle(item) {
+        const raw = item?.title;
+        if (raw == null || raw === '') {
+            return null;
+        }
+        if (typeof raw === 'string') {
+            const trimmed = raw.trim();
+            if (!trimmed) {
+                return null;
+            }
+            if (trimmed.startsWith('@')) {
+                return (await this.translateService.translateAsync(trimmed)) || trimmed;
+            }
+            return trimmed;
+        }
+        if (typeof raw === 'object' && !Array.isArray(raw)) {
+            if (this.translateService.isValidMultiLanguageObject(raw)) {
+                const resolved = this.translateService.resolve(raw);
+                return resolved || null;
+            }
+            const resolved = this.translateService.resolve(raw);
+            return resolved || null;
+        }
+        return String(raw);
+    }
+    /** Fallback tab label from the page title when breadcrumbs are not ready yet. */
+    async resolvePageTitleForTab() {
+        const raw = await Promise.resolve(this.getPageTitle());
+        if (raw == null || raw === '') {
+            return null;
+        }
+        if (typeof raw === 'string') {
+            const trimmed = raw.trim();
+            if (trimmed.startsWith('@')) {
+                return (await this.translateService.translateAsync(trimmed)) || trimmed;
+            }
+            return trimmed;
+        }
+        if (typeof raw === 'object' && !Array.isArray(raw)) {
+            const resolved = this.translateService.resolve(raw);
+            return resolved || null;
+        }
+        return null;
+    }
     #badgeEffect;
     hasUnsavedChanges() {
         return false;
     }
+    /**
+     * Confirms closing this page as a background tab (no router navigation).
+     * Override when dirty detection differs from {@link hasUnsavedChanges}.
+     */
+    onBeforeTabClose() {
+        return this.unsavedChangesConfirm.confirmIfDirty(this.hasUnsavedChanges(), {
+            approveLeaveOnConfirm: false,
+        });
+    }
     async getPageBadge() {
         if (!this.hasUnsavedChanges()) {
             return null;
@@ -675,14 +871,61 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
         const evaluatedByTab = store.evaluatedTabContentsById();
         return evaluatedByTab[tab.id] ?? [];
     }),
-})), withMethods((store, evaluatorService = inject(AXPExpressionEvaluatorService), router = inject(Router), route = inject(ActivatedRoute), deviceService = inject(AXPDeviceService), formatService = inject(AXFormatService), toastService = inject(AXToastService), translateService = inject(AXTranslationService), settingsService = inject(AXPSettingsService)) => {
-    const refreshEvaluatedPageContents = async (page) => {
+})), withMethods((store, evaluatorService = inject(AXPExpressionEvaluatorService), contextEvalFactory = inject(AXPContextEvalFactory), router = inject(Router), route = inject(ActivatedRoute), deviceService = inject(AXPDeviceService), formatService = inject(AXFormatService), toastService = inject(AXToastService), translateService = inject(AXTranslationService), settingsService = inject(AXPSettingsService)) => {
+    const resolvePageFromId = (adapter, pageId) => {
+        if (pageId) {
+            return adapter.pages.find((p) => p.id === pageId) ?? null;
+        }
+        if (deviceService.isLarge() || adapter.pages.length === 1) {
+            return adapter.pages.find((p) => p.isPrimary) ?? adapter.pages[0] ?? null;
+        }
+        return null;
+    };
+    /** Loads page data, context, and evaluated widgets for the target sidebar page. */
+    const activatePageById = async (pageId, forceRefresh) => {
+        const adapter = store.adapter();
+        if (!adapter) {
+            return;
+        }
+        const queryParams = router.routerState.snapshot.root.queryParams;
+        const targetPageId = pageId ?? queryParams['page'];
+        const currentPage = resolvePageFromId(adapter, targetPageId);
+        if (!forceRefresh && currentPage?.id === store.currentPage()?.id && store.status() === AXPPageStatus.Rendered) {
+            return;
+        }
+        patchState(store, {
+            status: AXPPageStatus.Processing,
+        });
+        let context = {};
+        if (currentPage) {
+            const currentPageIndex = adapter.pages.findIndex((p) => p.id === currentPage.id);
+            const loadResult = await adapter.pages[currentPageIndex]?.load?.({ forceRefresh });
+            context = loadResult?.data ?? {};
+        }
+        const currentTab = currentPage?.tabs?.[0] ?? null;
         const rootCtx = store.rootContext();
-        const { evaluatedPageContent, evaluatedTabContentsById } = await buildEvaluatedPageContentsForRootContext(page, rootCtx, evaluatorService);
+        const { evaluatedPageContent, evaluatedTabContentsById } = await buildEvaluatedPageContentsForRootContext(currentPage, rootCtx, evaluatorService);
         patchState(store, {
+            previousContext: cloneDeep(context),
+            context: cloneDeep(context),
+            status: AXPPageStatus.Rendered,
+            currentPage,
+            currentTab,
             evaluatedPageContent,
             evaluatedTabContentsById,
+            formDirty: false,
         });
+        if (currentPage && axpIsEntityDetailsViewRoute(router)) {
+            const pageParam = route.snapshot.queryParamMap.get('page');
+            if (pageParam !== currentPage.id) {
+                router.navigate([], {
+                    relativeTo: route,
+                    queryParams: { page: currentPage.id },
+                    queryParamsHandling: 'merge',
+                    replaceUrl: true,
+                });
+            }
+        }
     };
     // Sync sidebar page from route query params
     effect((onCleanup) => {
@@ -690,30 +933,20 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
             return;
         }
         const subscription = route.queryParams.subscribe((params) => {
-            const pageId = params['page'];
             const adapter = store.adapter();
             if (!adapter) {
                 return;
             }
-            let currentPage = null;
-            if (pageId) {
-                currentPage = adapter.pages.find((p) => p.id === pageId) ?? null;
-            }
-            else if (deviceService.isLarge() || adapter.pages.length === 1) {
-                currentPage = adapter.pages.find((p) => p.isPrimary) ?? adapter.pages[0];
+            const pageId = params['page'];
+            const targetPage = resolvePageFromId(adapter, pageId);
+            if (store.currentPage()?.id === targetPage?.id) {
+                return;
             }
-            const currentTab = currentPage?.tabs?.[0] ?? null;
-            if (store.currentPage()?.id !== currentPage?.id) {
-                // `load()` → `loadPage` owns initial hydration when both sides are still null.
-                if (store.currentPage() == null && currentPage == null) {
-                    return;
-                }
-                patchState(store, {
-                    currentPage,
-                    currentTab,
-                });
-                void refreshEvaluatedPageContents(currentPage);
+            // `load()` → `activatePageById` owns initial hydration when both sides are still null.
+            if (store.currentPage() == null && targetPage == null) {
+                return;
             }
+            void activatePageById(targetPage?.id);
         });
         onCleanup(() => subscription.unsubscribe());
     });
@@ -774,7 +1007,12 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
             evaluated = await evaluatorService.evaluate(raw, evalScope);
         }
         else if (typeof sourceAfterPreLocale === 'string') {
-            evaluated = await formatService.format(sourceAfterPreLocale, 'string', formatContext);
+            if (sourceAfterPreLocale.trim().startsWith('@')) {
+                evaluated = await translateService.translateAsync(sourceAfterPreLocale);
+            }
+            else {
+                evaluated = await formatService.format(sourceAfterPreLocale, 'string', formatContext);
+            }
         }
         else {
             evaluated = await formatService.format(raw, 'string', formatContext);
@@ -808,71 +1046,12 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
             });
         },
         async loadPage(pageId, forceRefresh) {
-            const adapter = store.adapter();
-            if (!adapter) {
-                throw new Error('Adapter must be loaded before loading page');
-            }
-            patchState(store, {
-                status: AXPPageStatus.Processing,
-            });
-            // Get page ID from parameter or query params
-            const queryParams = router.routerState.snapshot.root.queryParams;
-            const targetPageId = pageId || queryParams['page'];
-            // Find current page from page ID or conditionally default to first page
-            let currentPage = null;
-            if (targetPageId) {
-                const foundPage = adapter.pages.find((p) => p.id === targetPageId);
-                if (foundPage) {
-                    currentPage = foundPage;
-                }
-            }
-            else {
-                // Only auto-select primary page if layout is large
-                if (deviceService.isLarge() || adapter.pages.length == 1) {
-                    const primaryPage = adapter.pages.find((p) => p.isPrimary) ?? adapter.pages[0];
-                    currentPage = primaryPage;
-                }
-            }
-            // Load page data if current page exists
-            let context = {};
-            if (currentPage) {
-                const currentPageIndex = adapter.pages.findIndex((p) => p.id === currentPage.id);
-                const loadResult = await adapter.pages[currentPageIndex]?.load?.({ forceRefresh });
-                context = loadResult?.data ?? {};
-            }
-            // Set current tab to first tab of the current page (internal state only)
-            let currentTab = currentPage?.tabs?.[0] ?? null;
-            const rootCtx = store.rootContext();
-            const { evaluatedPageContent, evaluatedTabContentsById } = await buildEvaluatedPageContentsForRootContext(currentPage, rootCtx, evaluatorService);
-            patchState(store, {
-                previousContext: cloneDeep(context),
-                context: cloneDeep(context),
-                status: AXPPageStatus.Rendered,
-                currentPage,
-                currentTab,
-                evaluatedPageContent,
-                evaluatedTabContentsById,
-                formDirty: false,
-            });
-            if (currentPage && axpIsEntityDetailsViewRoute(router)) {
-                const pageParam = route.snapshot.queryParamMap.get('page');
-                if (pageParam !== currentPage.id) {
-                    router.navigate([], {
-                        relativeTo: route,
-                        queryParams: { page: currentPage.id },
-                        queryParamsHandling: 'merge',
-                        replaceUrl: true,
-                    });
-                }
-            }
+            await activatePageById(pageId, forceRefresh);
         },
         async load(adapter) {
-            // Setup expression evaluator scope
             const scope = {
                 context: {
-                    eval: (path) => {
-                        return getSmart(store.context(), path);
-                    },
+                    ...contextEvalFactory.createLiveScope(() => store.context()),
                     isDirty: () => store.isDirty(),
                 },
             };
@@ -951,14 +1130,8 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
         setCurrentPage(page) {
             const previousPage = store.currentPage();
             if (page) {
-                const firstTab = page.tabs?.[0] ?? null;
                 const pageParam = route.snapshot.queryParamMap.get('page');
                 const isSamePage = previousPage?.id === page.id && pageParam === page.id;
-                patchState(store, {
-                    currentPage: page,
-                    currentTab: firstTab,
-                    ...(page.isReadonly ? { formDirty: false } : {}),
-                });
                 if (!isSamePage && axpIsEntityDetailsViewRoute(router)) {
                     const queryParams = { page: page.id };
                     if (previousPage?.id && previousPage.id !== page.id) {
@@ -972,7 +1145,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                         replaceUrl: false,
                     });
                 }
-                void refreshEvaluatedPageContents(page);
+                void activatePageById(page.id);
             }
             else {
                 patchState(store, {
@@ -1107,6 +1280,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
         },
         async discard() {
             patchState(store, {
+                context: cloneDeep(store.previousContext()),
                 formDirty: false,
             });
         },
@@ -1207,6 +1381,66 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
     };
 }));
 
+//#region ---- Details View Action Shortcut Utilities ----
+/** Platform defaults for known entity detail commands when `shortcuts` is omitted on the action. */
+const DEFAULT_ENTITY_DETAIL_ACTION_SHORTCUTS = {
+    'delete-entity': ['ctrl+shift+delete'],
+};
+const DEFAULT_FOOTER_COMMAND_SHORTCUTS = {
+    'update-entity': ['ctrl+s'],
+    discard: ['escape'],
+};
+/**
+ * Returns the base workflow/command name from a composite entity action command id (`cmd&actionName`).
+ */
+function getDetailsViewActionCommandBaseName(commandName) {
+    if (!commandName) {
+        return '';
+    }
+    return commandName.split('&')[0];
+}
+/**
+ * Resolves keyboard shortcuts for a header entity action.
+ * Explicit `shortcuts` wins; pass `[]` to disable. Otherwise known commands use platform defaults.
+ */
+function resolveDetailsViewActionShortcuts(commandBaseName, explicit) {
+    if (explicit !== undefined) {
+        const chords = flattenDetailsViewActionShortcuts(explicit);
+        return chords.length ? chords : undefined;
+    }
+    const defaults = DEFAULT_ENTITY_DETAIL_ACTION_SHORTCUTS[commandBaseName];
+    return defaults?.length ? [...defaults] : undefined;
+}
+/**
+ * Resolves save/discard footer command shortcuts from page settings.
+ */
+function resolveDetailsViewFooterCommandShortcuts(commandName, explicit) {
+    if (explicit !== undefined) {
+        const chords = flattenDetailsViewActionShortcuts(explicit);
+        return chords.length ? chords : undefined;
+    }
+    const defaults = DEFAULT_FOOTER_COMMAND_SHORTCUTS[commandName];
+    return defaults?.length ? [...defaults] : undefined;
+}
+function flattenDetailsViewActionShortcuts(shortcuts) {
+    const chords = normalizeKeyboardShortcuts(shortcuts).flatMap((shortcut) => shortcut.keys);
+    return dedupeDetailsViewActionShortcuts(chords);
+}
+function dedupeDetailsViewActionShortcuts(shortcuts) {
+    const seen = new Set();
+    const result = [];
+    for (const shortcut of shortcuts) {
+        const token = shortcut.trim().toLowerCase();
+        if (!token || seen.has(token)) {
+            continue;
+        }
+        seen.add(token);
+        result.push(shortcut.trim());
+    }
+    return result;
+}
+//#endregion
+
 /**
  * Registry of rendered page component instances by component key.
  * Used so page execute can delegate to the actual component instance in the view.
@@ -1345,77 +1579,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { componentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentKey", required: true }] }], rootContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootContext", required: false }] }], pageConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageConfig", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], componentReady: [{ type: i0.Output, args: ["componentReady"] }] } });
 
-//#region ---- Details View Action Shortcut Utilities ----
-/** Platform defaults for known entity detail commands when `shortcuts` is omitted on the action. */
-const DEFAULT_ENTITY_DETAIL_ACTION_SHORTCUTS = {
-    'delete-entity': ['ctrl+shift+delete'],
-};
-const DEFAULT_FOOTER_COMMAND_SHORTCUTS = {
-    'update-entity': ['ctrl+s'],
-    discard: ['escape'],
-};
-/**
- * Returns the base workflow/command name from a composite entity action command id (`cmd&actionName`).
- */
-function getDetailsViewActionCommandBaseName(commandName) {
-    if (!commandName) {
-        return '';
-    }
-    return commandName.split('&')[0];
-}
-/**
- * Resolves keyboard shortcuts for a header entity action.
- * Explicit `shortcuts` wins; pass `[]` to disable. Otherwise known commands use platform defaults.
- */
-function resolveDetailsViewActionShortcuts(commandBaseName, explicit) {
-    if (explicit !== undefined) {
-        const chords = flattenDetailsViewActionShortcuts(explicit);
-        return chords.length ? chords : undefined;
-    }
-    const defaults = DEFAULT_ENTITY_DETAIL_ACTION_SHORTCUTS[commandBaseName];
-    return defaults?.length ? [...defaults] : undefined;
-}
-/**
- * Resolves save/discard footer command shortcuts from page settings.
- */
-function resolveDetailsViewFooterCommandShortcuts(commandName, explicit) {
-    if (explicit !== undefined) {
-        const chords = flattenDetailsViewActionShortcuts(explicit);
-        return chords.length ? chords : undefined;
-    }
-    const defaults = DEFAULT_FOOTER_COMMAND_SHORTCUTS[commandName];
-    return defaults?.length ? [...defaults] : undefined;
-}
-function flattenDetailsViewActionShortcuts(shortcuts) {
-    const chords = normalizeKeyboardShortcuts(shortcuts).flatMap((shortcut) => shortcut.keys);
-    return dedupeDetailsViewActionShortcuts(chords);
-}
-function dedupeDetailsViewActionShortcuts(shortcuts) {
-    const seen = new Set();
-    const result = [];
-    for (const shortcut of shortcuts) {
-        const token = shortcut.trim().toLowerCase();
-        if (!token || seen.has(token)) {
-            continue;
-        }
-        seen.add(token);
-        result.push(shortcut.trim());
-    }
-    return result;
-}
-//#endregion
-
 class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
     constructor() {
         super(...arguments);
         this.adapter = input.required(...(ngDevMode ? [{ debugName: "adapter" }] : /* istanbul ignore next */ []));
         //
         this.vm = inject(AXPLayoutDetailsViewViewModel);
-        this.router = inject(Router);
         this.route = inject(ActivatedRoute);
         this.eventService = inject(AXPBroadcastEventService);
         this.deviceService = inject(AXPDeviceService);
-        this.unsavedChangesConfirm = inject(AXPUnsavedChangesConfirmService);
         this.unsavedChangesPopstate = inject(AXPUnsavedChangesPopstateService);
         this.pageComponentInstanceRegistry = inject(AXPPageComponentInstanceRegistryService);
         this.shortcutRegistry = inject(AXPKeyboardShortcutRegistry);
@@ -1664,11 +1836,17 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
     }
     finalizeDiscard() {
         const container = this.widgetContainer();
-        if (!container) {
+        if (container) {
+            container.revertAndSettle();
+            this.vm.applySavedState(container.contextService.data());
             return;
         }
-        container.revertAndSettle();
-        this.vm.applySavedState(container.contextService.data());
+        void this.vm.discard();
+    }
+    /** Reverts widget form state and view-model context to the last saved baseline. */
+    async discardUnsavedChanges() {
+        this.finalizeDiscard();
+        this.recompute();
     }
     /**
      * `ax-tabs` selects on click before we can confirm. Revert synchronously, then confirm + switch.
@@ -1764,6 +1942,15 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
     async getBackButton() {
         return this.vm.getBackButton();
     }
+    hasUnsavedChanges() {
+        if (this.vm.currentPage()?.isReadonly) {
+            return false;
+        }
+        if (this.isActivePageComponentDirty()) {
+            return true;
+        }
+        return this.liveFormIsDirty();
+    }
     async getPageBadge() {
         if (this.vm.currentPage()?.isReadonly) {
             return null;
@@ -1808,6 +1995,12 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
         }
         return this.confirmLeaveIfDirty();
     }
+    /** Background tab close — confirm without discarding (the cached instance is destroyed). */
+    onBeforeTabClose() {
+        return this.unsavedChangesConfirm.confirmIfDirty(this.shouldPromptLeave(), {
+            approveLeaveOnConfirm: false,
+        });
+    }
     /** Active entity component page instance, when the current details sub-page is component-based. */
     getActivePageComponentInstance() {
         const componentKey = this.getActivePageComponentKey();
@@ -1832,6 +2025,12 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
     static isComponentPageContent(item) {
         return 'type' in item && item.type === 'component';
     }
+    pageContentTrackKey(item, index) {
+        if (AXPLayoutDetailsViewComponent.isComponentPageContent(item)) {
+            return `component:${item.componentKey}`;
+        }
+        return item.name ?? `widget:${index}`;
+    }
     /** Whether the active component-based entity page has unsaved edits. */
     isActivePageComponentDirty() {
         return this.getActivePageComponentInstance()?.hasUnsavedChanges() ?? false;
@@ -1847,8 +2046,13 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
         return this.liveFormIsDirty();
     }
     /** Single gate for leaving the page or switching details sub-pages when dirty. */
-    confirmLeaveIfDirty() {
-        return this.unsavedChangesConfirm.confirmIfDirty(this.shouldPromptLeave());
+    async confirmLeaveIfDirty() {
+        const shouldPrompt = this.shouldPromptLeave();
+        const confirmed = await this.unsavedChangesConfirm.confirmIfDirty(shouldPrompt);
+        if (confirmed && shouldPrompt) {
+            await this.discardUnsavedChanges();
+        }
+        return confirmed;
     }
     //#endregion
     //#region ----   Command Execution   ----
@@ -1867,9 +2071,7 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
             return;
         }
         if (command.name == rejectCommand) {
-            await this.vm.discard();
-            this.finalizeDiscard();
-            this.recompute();
+            await this.discardUnsavedChanges();
             return;
         }
         // Handle status update command
@@ -1932,9 +2134,7 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
             return;
         }
         if (isDiscardCommand(command.name, rejectCommand)) {
-            await this.vm.discard();
-            this.finalizeDiscard();
-            this.recompute();
+            await this.discardUnsavedChanges();
             return;
         }
         if (!this.isActivePageComponentDirty()) {
@@ -2143,13 +2343,13 @@ 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          (formatService.format(vm.showPages() ? (vm.adapter()?.title ?? '') : (vm.adapter()?.label ?? ''), 'string', vm.rootContext())\n            | translate\n            | async)\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          (formatService.format(vm.adapter()?.description ?? '', 'string', vm.rootContext()) | translate | 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]=\"(formatService.format(item.label, 'string', vm.rootContext()) | 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 class=\"ax-flex ax-flex-row ax-gap-4\">\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"ax-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 icon=\"far ${{ item.icon }}\" class=\"ax-text-gray-500\"></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"ax-font-semibold\">{{\n                formatService.format(item.label, 'string', vm.rootContext()) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon icon=\" far fa-chevron-right\" class=\"ax-text-gray-400\"></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"ax-h-full ax-w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-w-full ax-gap-4 ax-h-full\">\n            @for (item of vm.currentPageContent(); track $index) {\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 axp-widget-renderer [node]=\"$any(item)\" [mode]=\"$any(item).mode ?? 'view'\"></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs [location]=\"'bottom'\" [fitParent]=\"false\" look=\"classic\">\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 (content of vm.activeTabContent(); track content.name) {\n                      <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\">\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\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.isSaving()\"\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.isSaving()\"\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: ["axp-layout-details-view .axp-vertical-tabs{--ax-comp-tabs-default-border-radius: 0}axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-top:0!important;margin-bottom:0!important;padding-top:.75rem!important;padding-bottom:.75rem!important;font-weight:600!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex!important;align-items:center!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .ax-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-top:1rem;margin-bottom:1rem;display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}axp-layout-details-view axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{align-items:center;gap:1rem;padding:1rem}@media(min-width:1024px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:1.5rem;padding-right:1.5rem}}@media(min-width:1280px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2rem;padding-right:2rem}}@media(min-width:1536px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2.5rem;padding-right:2.5rem}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view axp-layout-start-side{border-inline-end-width:1px}\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          formatService.format(\n            vm.showPages() ? (vm.adapter()?.title ?? '') : (vm.adapter()?.label ?? ''),\n            'string',\n            vm.rootContext()\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatService.format(vm.adapter()?.description ?? '', 'string', vm.rootContext()) | translate | 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]=\"(formatService.format(item.label, 'string', vm.rootContext()) | 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 class=\"ax-flex ax-flex-row ax-gap-4\">\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"ax-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 icon=\"far ${{ item.icon }}\" class=\"ax-text-gray-500\"></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"ax-font-semibold\">{{\n                formatService.format(item.label, 'string', vm.rootContext()) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon icon=\" far fa-chevron-right\" class=\"ax-text-gray-400\"></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      @if (vm.isBusy()) {\n        <div class=\"ax-flex ax-h-full ax-w-full ax-items-center ax-justify-center\">\n          <ax-loading></ax-loading>\n        </div>\n      } @else {\n      <ax-form class=\"ax-h-full ax-w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-w-full ax-gap-4 ax-h-full\">\n            @for (item of vm.currentPageContent(); track pageContentTrackKey($any(item), $index)) {\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 axp-widget-renderer [node]=\"$any(item)\" [mode]=\"$any(item).mode ?? 'view'\"></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs [location]=\"'bottom'\" [fitParent]=\"false\" look=\"classic\">\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 (content of vm.activeTabContent(); track content.name) {\n                      <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\">\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n      </ax-form>\n      }\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.isSaving()\"\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.isSaving()\"\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: ["axp-layout-details-view .axp-vertical-tabs{--ax-comp-tabs-default-border-radius: 0}axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-top:0!important;margin-bottom:0!important;padding-top:.75rem!important;padding-bottom:.75rem!important;font-weight:600!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex!important;align-items:center!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .ax-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-top:1rem;margin-bottom:1rem;display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}axp-layout-details-view axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{align-items:center;gap:1rem;padding:1rem}@media(min-width:1024px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:1.5rem;padding-right:1.5rem}}@media(min-width:1280px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2rem;padding-right:2rem}}@media(min-width:1536px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2.5rem;padding-right:2.5rem}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view axp-layout-start-side{border-inline-end-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
-                AXMenuModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i6.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i6.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXFileModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i5$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: 
+                AXMenuModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i6.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i6.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXFileModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: 
                 //
-                AXPThemeLayoutListComponent, selector: "axp-layout-list" }, { kind: "component", type: AXPThemeLayoutListItemComponent, selector: "axp-layout-list-item" }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i7.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: AXPPageComponentRendererDirective, selector: "[axp-page-component-renderer]", inputs: ["componentKey", "rootContext", "pageConfig", "options"], outputs: ["componentReady"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPThemeLayoutListComponent, selector: "axp-layout-list" }, { kind: "component", type: AXPThemeLayoutListItemComponent, selector: "axp-layout-list-item" }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i7.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i8$1.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: AXPPageComponentRendererDirective, selector: "[axp-page-component-renderer]", inputs: ["componentKey", "rootContext", "pageConfig", "options"], outputs: ["componentReady"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutDetailsViewComponent, decorators: [{
             type: Component,
@@ -2189,7 +2389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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          (formatService.format(vm.showPages() ? (vm.adapter()?.title ?? '') : (vm.adapter()?.label ?? ''), 'string', vm.rootContext())\n            | translate\n            | async)\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          (formatService.format(vm.adapter()?.description ?? '', 'string', vm.rootContext()) | translate | 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]=\"(formatService.format(item.label, 'string', vm.rootContext()) | 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 class=\"ax-flex ax-flex-row ax-gap-4\">\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"ax-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 icon=\"far ${{ item.icon }}\" class=\"ax-text-gray-500\"></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"ax-font-semibold\">{{\n                formatService.format(item.label, 'string', vm.rootContext()) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon icon=\" far fa-chevron-right\" class=\"ax-text-gray-400\"></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"ax-h-full ax-w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-w-full ax-gap-4 ax-h-full\">\n            @for (item of vm.currentPageContent(); track $index) {\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 axp-widget-renderer [node]=\"$any(item)\" [mode]=\"$any(item).mode ?? 'view'\"></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs [location]=\"'bottom'\" [fitParent]=\"false\" look=\"classic\">\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 (content of vm.activeTabContent(); track content.name) {\n                      <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\">\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\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.isSaving()\"\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.isSaving()\"\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: ["axp-layout-details-view .axp-vertical-tabs{--ax-comp-tabs-default-border-radius: 0}axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-top:0!important;margin-bottom:0!important;padding-top:.75rem!important;padding-bottom:.75rem!important;font-weight:600!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex!important;align-items:center!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .ax-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-top:1rem;margin-bottom:1rem;display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}axp-layout-details-view axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{align-items:center;gap:1rem;padding:1rem}@media(min-width:1024px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:1.5rem;padding-right:1.5rem}}@media(min-width:1280px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2rem;padding-right:2rem}}@media(min-width:1536px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2.5rem;padding-right:2.5rem}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view axp-layout-start-side{border-inline-end-width:1px}\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          formatService.format(\n            vm.showPages() ? (vm.adapter()?.title ?? '') : (vm.adapter()?.label ?? ''),\n            'string',\n            vm.rootContext()\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatService.format(vm.adapter()?.description ?? '', 'string', vm.rootContext()) | translate | 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]=\"(formatService.format(item.label, 'string', vm.rootContext()) | 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 class=\"ax-flex ax-flex-row ax-gap-4\">\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"ax-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 icon=\"far ${{ item.icon }}\" class=\"ax-text-gray-500\"></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"ax-font-semibold\">{{\n                formatService.format(item.label, 'string', vm.rootContext()) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon icon=\" far fa-chevron-right\" class=\"ax-text-gray-400\"></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      @if (vm.isBusy()) {\n        <div class=\"ax-flex ax-h-full ax-w-full ax-items-center ax-justify-center\">\n          <ax-loading></ax-loading>\n        </div>\n      } @else {\n      <ax-form class=\"ax-h-full ax-w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"ax-flex ax-flex-col ax-w-full ax-gap-4 ax-h-full\">\n            @for (item of vm.currentPageContent(); track pageContentTrackKey($any(item), $index)) {\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 axp-widget-renderer [node]=\"$any(item)\" [mode]=\"$any(item).mode ?? 'view'\"></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs [location]=\"'bottom'\" [fitParent]=\"false\" look=\"classic\">\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 (content of vm.activeTabContent(); track content.name) {\n                      <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\">\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n      </ax-form>\n      }\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.isSaving()\"\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.isSaving()\"\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: ["axp-layout-details-view .axp-vertical-tabs{--ax-comp-tabs-default-border-radius: 0}axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-top:0!important;margin-bottom:0!important;padding-top:.75rem!important;padding-bottom:.75rem!important;font-weight:600!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex!important;align-items:center!important}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .ax-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-top:1rem;margin-bottom:1rem;display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}axp-layout-details-view axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{align-items:center;gap:1rem;padding:1rem}@media(min-width:1024px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:1.5rem;padding-right:1.5rem}}@media(min-width:1280px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2rem;padding-right:2rem}}@media(min-width:1536px){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-left:2.5rem;padding-right:2.5rem}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view axp-layout-start-side{border-inline-end-width:1px}\n"] }]
         }], propDecorators: { adapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "adapter", required: true }] }], 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   ----