@acorex/platform 21.0.0-next.76 → 21.0.0-next.79

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, untracked, computed, Injectable, input, output, ViewContainerRef, Directive, DestroyRef, ElementRef } 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 { 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 { AXPTabNavigationService, AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, AXPTabPreviewService, AXPUnsavedChangesConfirmService, normalizeRouterUrl, AXP_HOME_TAB_KEY, axpResolveTabKey, axpIsEntityDetailsViewRoute, axpNavigateAppPath, AXPEntityCommandScope, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex/platform/common';
+import { AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, axpNavigateAppPath, AXPEntityCommandScope, axpIsEntityDetailsViewRoute, AXPUnsavedChangesConfirmService, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex/platform/common';
 import * as i8 from '@acorex/platform/core';
-import { AXPDeviceService, AXPComponentSlotModule, getSmart, AXPExpressionEvaluatorService, AXPContextEvalFactory, normalizeKeyboardShortcuts, AXPContextStore, AXPBroadcastEventService, AXPKeyboardShortcutRegistry, AXPKeyboardShortcutPriority } from '@acorex/platform/core';
+import { AXPDeviceService, AXPComponentSlotModule, getSmart, AXPExpressionEvaluatorService, AXPContextStore, normalizeKeyboardShortcuts, 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,11 +28,11 @@ 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 { 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';
@@ -55,7 +55,6 @@ 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);
@@ -219,55 +218,11 @@ 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 */ []));
@@ -276,12 +231,6 @@ 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();
@@ -335,20 +284,9 @@ class AXPPageLayoutBaseComponent {
         this.#breadcrumbsEffect = effect(async () => {
             this.updateTrigger();
             const breadCrumbs = await this.getPageBreadcrumbs();
-            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);
-                }
-            }
+            this.breadcrumbs.set([...this.defaultBreadCrumbs, ...breadCrumbs]);
         }, ...(ngDevMode ? [{ debugName: "#breadcrumbsEffect" }] : /* istanbul ignore next */ []));
-        this.hasBreadcrumbs = computed(() => this.breadcrumbs().length > 1 && this.tabNavigation.effectiveMode() !== 'tabular', ...(ngDevMode ? [{ debugName: "hasBreadcrumbs" }] : /* istanbul ignore next */ []));
+        this.hasBreadcrumbs = computed(() => this.breadcrumbs().length > 1, ...(ngDevMode ? [{ debugName: "hasBreadcrumbs" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----------------   Badge   ----------------
         this.badge = signal(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
@@ -404,75 +342,10 @@ 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 '';
@@ -488,78 +361,10 @@ 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;
@@ -870,63 +675,14 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
         const evaluatedByTab = store.evaluatedTabContentsById();
         return evaluatedByTab[tab.id] ?? [];
     }),
-})), 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;
+})), 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) => {
         const rootCtx = store.rootContext();
-        const { evaluatedPageContent, evaluatedTabContentsById } = await buildEvaluatedPageContentsForRootContext(currentPage, rootCtx, evaluatorService);
+        const { evaluatedPageContent, evaluatedTabContentsById } = await buildEvaluatedPageContentsForRootContext(page, 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) => {
@@ -934,20 +690,30 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
             return;
         }
         const subscription = route.queryParams.subscribe((params) => {
+            const pageId = params['page'];
             const adapter = store.adapter();
             if (!adapter) {
                 return;
             }
-            const pageId = params['page'];
-            const targetPage = resolvePageFromId(adapter, pageId);
-            if (store.currentPage()?.id === targetPage?.id) {
-                return;
+            let currentPage = null;
+            if (pageId) {
+                currentPage = adapter.pages.find((p) => p.id === pageId) ?? null;
             }
-            // `load()` → `activatePageById` owns initial hydration when both sides are still null.
-            if (store.currentPage() == null && targetPage == null) {
-                return;
+            else if (deviceService.isLarge() || adapter.pages.length === 1) {
+                currentPage = adapter.pages.find((p) => p.isPrimary) ?? adapter.pages[0];
+            }
+            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);
             }
-            void activatePageById(targetPage?.id);
         });
         onCleanup(() => subscription.unsubscribe());
     });
@@ -1008,12 +774,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
             evaluated = await evaluatorService.evaluate(raw, evalScope);
         }
         else if (typeof sourceAfterPreLocale === 'string') {
-            if (sourceAfterPreLocale.trim().startsWith('@')) {
-                evaluated = await translateService.translateAsync(sourceAfterPreLocale);
-            }
-            else {
-                evaluated = await formatService.format(sourceAfterPreLocale, 'string', formatContext);
-            }
+            evaluated = await formatService.format(sourceAfterPreLocale, 'string', formatContext);
         }
         else {
             evaluated = await formatService.format(raw, 'string', formatContext);
@@ -1047,12 +808,71 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
             });
         },
         async loadPage(pageId, forceRefresh) {
-            await activatePageById(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,
+                    });
+                }
+            }
         },
         async load(adapter) {
+            // Setup expression evaluator scope
             const scope = {
                 context: {
-                    ...contextEvalFactory.createLiveScope(() => store.context()),
+                    eval: (path) => {
+                        return getSmart(store.context(), path);
+                    },
                     isDirty: () => store.isDirty(),
                 },
             };
@@ -1131,8 +951,14 @@ 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) {
@@ -1146,7 +972,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                         replaceUrl: false,
                     });
                 }
-                void activatePageById(page.id);
+                void refreshEvaluatedPageContents(page);
             }
             else {
                 patchState(store, {
@@ -1281,7 +1107,6 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
         },
         async discard() {
             patchState(store, {
-                context: cloneDeep(store.previousContext()),
                 formDirty: false,
             });
         },
@@ -1382,66 +1207,6 @@ 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.
@@ -1580,15 +1345,77 @@ 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);
@@ -1837,17 +1664,11 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
     }
     finalizeDiscard() {
         const container = this.widgetContainer();
-        if (container) {
-            container.revertAndSettle();
-            this.vm.applySavedState(container.contextService.data());
+        if (!container) {
             return;
         }
-        void this.vm.discard();
-    }
-    /** Reverts widget form state and view-model context to the last saved baseline. */
-    async discardUnsavedChanges() {
-        this.finalizeDiscard();
-        this.recompute();
+        container.revertAndSettle();
+        this.vm.applySavedState(container.contextService.data());
     }
     /**
      * `ax-tabs` selects on click before we can confirm. Revert synchronously, then confirm + switch.
@@ -1943,15 +1764,6 @@ 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;
@@ -1996,12 +1808,6 @@ 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();
@@ -2026,12 +1832,6 @@ 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;
@@ -2047,13 +1847,8 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
         return this.liveFormIsDirty();
     }
     /** Single gate for leaving the page or switching details sub-pages when dirty. */
-    async confirmLeaveIfDirty() {
-        const shouldPrompt = this.shouldPromptLeave();
-        const confirmed = await this.unsavedChangesConfirm.confirmIfDirty(shouldPrompt);
-        if (confirmed && shouldPrompt) {
-            await this.discardUnsavedChanges();
-        }
-        return confirmed;
+    confirmLeaveIfDirty() {
+        return this.unsavedChangesConfirm.confirmIfDirty(this.shouldPromptLeave());
     }
     //#endregion
     //#region ----   Command Execution   ----
@@ -2072,7 +1867,9 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
             return;
         }
         if (command.name == rejectCommand) {
-            await this.discardUnsavedChanges();
+            await this.vm.discard();
+            this.finalizeDiscard();
+            this.recompute();
             return;
         }
         // Handle status update command
@@ -2135,7 +1932,9 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
             return;
         }
         if (isDiscardCommand(command.name, rejectCommand)) {
-            await this.discardUnsavedChanges();
+            await this.vm.discard();
+            this.finalizeDiscard();
+            this.recompute();
             return;
         }
         if (!this.isActivePageComponentDirty()) {
@@ -2344,7 +2143,7 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
                 useExisting: AXPLayoutDetailsViewComponent,
             },
             AXPLayoutDetailsViewViewModel,
-        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, isSignal: true }, { propertyName: "widgetContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "sidebarTabs", first: true, predicate: ["sidebarTabs"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          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      <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  </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(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: 
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
@@ -2390,7 +2189,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(\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      <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  </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(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"] }]
         }], 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   ----