@acorex-platform/framework-client 2.0.0-next.26 → 2.0.0-next.29

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

@@ -14,7 +14,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i6 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXPTabNavigationService, axpSplitCollapsedBreadcrumbs, AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, AXPTabPreviewService, AXPUnsavedChangesConfirmService, AXPBrowserTitleService, AXPEntityDetailsNavTrailService, axpJoinTabTitleSegments, axpGetLeafRouteSnapshot, normalizeRouterUrl, AXP_HOME_TAB_KEY, axpResolveTabKey, axpIsEntityListPath, axpParseEntityListRoute, axpGetEntityListReturnUrl, axpIsEntityDetailsPath, axpParseEntityDetailsRoute, axpSetEntityDetailsPageQuery, axpIsEntityDetailsViewRoute, AXPNotFoundError, AXP_NOT_FOUND_ROUTE, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex-platform/framework-client/common';
+import { AXPTabNavigationService, axpSplitCollapsedBreadcrumbs, AXPStickyDirective, AXPCommonSettings, AXPHomePageService, AXPSettingsService, AXPTabPreviewService, AXPUnsavedChangesConfirmService, AXPBrowserTitleService, AXPEntityDetailsNavTrailService, axpJoinTabTitleSegments, axpGetLeafRouteSnapshot, normalizeRouterUrl, AXP_HOME_TAB_KEY, axpResolveTabKey, axpIsEntityListPath, axpParseEntityListRoute, axpGetEntityListReturnUrl, axpIsEntityDetailsPath, axpParseEntityDetailsRoute, axpSetEntityDetailsPageQuery, axpIsEntityDetailsViewRoute, AXPNotFoundError, axpInTabErrorLocation, AXPUnsavedChangesPopstateService, createUnsavedChangesCanDeactivateGuard } from '@acorex-platform/framework-client/common';
 import * as i9 from '@acorex-platform/framework-client/core';
 import { AXPDeviceService, AXPComponentSlotModule, AXPDebugService, OVERLAY_DETAILS_VIEW_TRACE_NS, AXPExpressionEvaluatorService, AXPContextEvalFactory, normalizeKeyboardShortcuts, AXPContextStore, AXPEntityBroadcastService, AXPKeyboardShortcutRegistry } from '@acorex-platform/framework-client/core';
 import * as i1 from '@acorex/cdk/drawer';
@@ -1167,6 +1167,12 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
     let pageActivationChain = Promise.resolve();
     /** Serializes route-driven adapter loads (initial navigation and layout refresh). */
     let routeLoadChain = Promise.resolve();
+    /** Invalidates a queued load once this component's route changes or a newer load starts. */
+    let routeLoadGeneration = 0;
+    const routePath = () => {
+        const tree = router.createUrlTree([], { relativeTo: route });
+        return router.serializeUrl(tree).split('?')[0]?.split('#')[0] ?? '';
+    };
     /** `page` query param from the browser URL (reliable on hard refresh). */
     const readPageQueryParam = () => {
         const page = router.parseUrl(router.url).queryParams['page'];
@@ -1454,11 +1460,18 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
             await this.loadPage(pageId, forceRefresh);
         },
         async loadFromRoute(forceRefresh, reason = 'unspecified') {
+            const generation = ++routeLoadGeneration;
+            const moduleName = route.parent?.snapshot.paramMap.get('module');
+            const entityName = route.snapshot.paramMap.get('entity');
+            const id = route.snapshot.paramMap.get('id');
+            const requestUrl = router.serializeUrl(router.createUrlTree([], { relativeTo: route }));
+            const requestPath = requestUrl.split('?')[0]?.split('#')[0] ?? '';
+            const requestStillOwnsThisPage = () => generation === routeLoadGeneration &&
+                route.parent?.snapshot.paramMap.get('module') === moduleName &&
+                route.snapshot.paramMap.get('entity') === entityName &&
+                route.snapshot.paramMap.get('id') === id;
             const run = async () => {
                 const pageIdFromUrl = readPageQueryParam() ?? undefined;
-                const moduleName = route.parent?.snapshot.paramMap.get('module');
-                const entityName = route.snapshot.paramMap.get('entity');
-                const id = route.snapshot.paramMap.get('id');
                 AXPDebugService.instance?.trace(DETAILS_VIEW_PAGE_TRACE_NS, 'viewmodel', 'loadFromRoute start', () => ({
                     moduleName,
                     entityName,
@@ -1468,7 +1481,7 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                     reason,
                     note: 'Entity/route load started',
                 }));
-                if (!moduleName || !entityName || !id) {
+                if (!moduleName || !entityName || !id || !requestStillOwnsThisPage()) {
                     return;
                 }
                 layout.setNavigationLoading(true);
@@ -1494,7 +1507,10 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
                     }));
                     layout.setOverlayLoading(false);
                     if (error instanceof AXPNotFoundError) {
-                        void router.navigateByUrl(AXP_NOT_FOUND_ROUTE);
+                        const currentPath = router.url.split('?')[0]?.split('#')[0] ?? '';
+                        if (requestStillOwnsThisPage() && currentPath === requestPath && routePath() === requestPath) {
+                            void router.navigateByUrl(axpInTabErrorLocation('404', requestUrl));
+                        }
                         return;
                     }
                     throw error;
@@ -3363,7 +3379,7 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
                 useExisting: AXPLayoutDetailsViewComponent,
             },
             AXPLayoutDetailsViewViewModel,
-        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, isSignal: true }, { propertyName: "widgetContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "sidebarTabs", first: true, predicate: ["sidebarTabs"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{display:flex;width:100%;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-block:calc(var(--spacing, .25rem) * 4);display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, isSignal: true }, { propertyName: "widgetContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "sidebarTabs", first: true, predicate: ["sidebarTabs"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;width:100%;flex-shrink:0;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-top:calc(var(--spacing, .25rem) * 2);display:block;width:100%}axp-layout-details-view .axp-horizontal-tabs .content .axp-entity-list{height:auto;min-height:0;flex:none}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
@@ -3408,7 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: AXPLayoutDetailsViewComponent,
                         },
                         AXPLayoutDetailsViewViewModel,
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{display:flex;width:100%;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-block:calc(var(--spacing, .25rem) * 4);display:block;width:100%}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{\n          formatPageLabel(\n            vm.showPages()\n              ? (vm.adapter()?.title ?? '')\n              : (vm.adapter()?.label ?? '')\n          )\n            | translate\n            | async\n        }}</axp-layout-title>\n        <axp-layout-description>{{\n          formatPageLabel(vm.adapter()?.description ?? '')\n            | translate\n            | async\n        }}</axp-layout-description>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs\n          #sidebarTabs\n          class=\"axp-vertical-tabs\"\n          [look]=\"'with-line-color'\"\n          [location]=\"'end'\"\n          [fitParent]=\"true\"\n          (onActiveTabChanged)=\"handleSidebarTabChanged($event)\"\n        >\n          @for (item of vm.adapter()?.pages; track item.id) {\n            <ax-tab-item\n              [key]=\"item.id\"\n              [text]=\"(formatPageLabel(item.label) | translate | async)!\"\n              [active]=\"vm.currentPage()?.id === item.id\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n  <!-- Content Section -->\n  <axp-page-content\n    class=\"flex flex-row gap-4\"\n    [class.axp-details-page-list]=\"isEntityListPage()\"\n  >\n    @if (vm.showPages()) {\n      <axp-layout-list class=\"w-full\">\n        @for (item of vm.adapter()?.pages; track $index) {\n          <axp-layout-list-item (click)=\"handleSelectPage(item)\">\n            <axp-layout-prefix>\n              <ax-icon\n                icon=\"far ${{ item.icon }}\"\n                class=\"text-gray-500\"\n              ></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"font-semibold\">{{\n                formatPageLabel(item.label) | translate | async\n              }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon\n                icon=\" far fa-chevron-right\"\n                class=\"text-gray-400\"\n              ></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    } @else {\n      <ax-form class=\"h-full w-full\" #form>\n        <axp-widgets-container\n          #widgetsContainerRef\n          [context]=\"vm.context()\"\n          (onContextChanged)=\"handleOnContextChanged($event)\"\n        >\n          <div class=\"flex h-full min-h-0 w-full flex-col\">\n            @for (\n              item of vm.currentPageContent();\n              track pageContentTrackKey($any(item), $index)\n            ) {\n              @if ('type' in item && item.type === 'component') {\n                <!-- Component-based content -->\n                <div\n                  axp-page-component-renderer\n                  [componentKey]=\"$any(item).componentKey\"\n                  [rootContext]=\"vm.rootContext()\"\n                  [pageConfig]=\"$any(item).pageConfig\"\n                  [options]=\"$any(item).options\"\n                  (componentReady)=\"recompute()\"\n                ></div>\n              } @else {\n                <!-- Widget-based content -->\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"$any(item)\"\n                  [mode]=\"$any(item).mode ?? 'view'\"\n                ></ng-container>\n              }\n            }\n            @if (vm.currentPage()?.tabs?.length) {\n              <div class=\"axp-horizontal-tabs\">\n                <ax-tabs\n                  [location]=\"'bottom'\"\n                  [fitParent]=\"false\"\n                  look=\"classic\"\n                >\n                  @for (tab of vm.currentPageTabs(); track $index) {\n                    <ax-tab-item\n                      (onClick)=\"vm.setCurrentTab(tab)\"\n                      [text]=\"(tab.title | translate | async)!\"\n                      [active]=\"vm.currentTab()?.id === tab.id\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"far ${{ tab.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-tab-item>\n                  }\n                </ax-tabs>\n                <div class=\"content\">\n                  @if (vm.currentTab()) {\n                    @for (\n                      content of vm.activeTabContent();\n                      track content.name\n                    ) {\n                      <ng-container\n                        axp-widget-renderer\n                        [node]=\"content\"\n                        [mode]=\"content.mode ?? 'view'\"\n                      >\n                      </ng-container>\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </axp-widgets-container>\n        <ax-validation-summary\n          [displayMode]=\"'toast'\"\n          [autoHide]=\"true\"\n        ></ax-validation-summary>\n      </ax-form>\n    }\n  </axp-page-content>\n\n  <!-- Footer Section -->\n  @if (hasFooter()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <!-- secondary footer actions -->\n        @if (hasVisibleFooterSecondaryActions()) {\n          <ax-button\n            [class.ax-sm]=\"deviceService.isSmall()\"\n            [iconOnly]=\"deviceService.isSmall()\"\n            [text]=\"'@general:terms.interface.actions' | translate | async\"\n            [look]=\"deviceService.isSmall() ? 'blank' : 'solid'\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (action of footerSecondaryActions(); track $index) {\n                  @if (isFooterActionVisible(action)) {\n                    <ax-button-item\n                      [text]=\"(t(action.title) | async)!\"\n                      [color]=\"action.color\"\n                      [disabled]=\"isFooterActionDisabled(action)\"\n                      (onClick)=\"execute(action.command!)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ action.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                    @if (action.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n\n        @if (hasVisibleFooterPrimaryActions()) {\n          @if (showSaveDiscardFooter()) {\n            @if (rejectFooterCommand(); as reject) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(reject.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"reject.color\"\n                (onClick)=\"execute(reject.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ reject.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n            @if (acceptFooterCommand(); as accept) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"vm.isOverlayBusy()\"\n                [text]=\"(t(accept.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"accept.color\"\n                (onClick)=\"execute(accept.command)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ accept.icon }}\"></i>\n                </ax-prefix>\n              </ax-button>\n            }\n          }\n          @for (action of footerPrimaryActions(); track $index) {\n            @if (isFooterActionVisible(action)) {\n              <ax-button\n                [class.ax-sm]=\"deviceService.isSmall()\"\n                [disabled]=\"isFooterActionDisabled(action)\"\n                [text]=\"(t(action.title) | async)!\"\n                [look]=\"'solid'\"\n                [color]=\"action.color\"\n                (onClick)=\"execute(action.command!)\"\n              >\n                <ax-prefix>\n                  <i class=\"{{ action.icon }}\"></i>\n                </ax-prefix>\n                @if (action?.items) {\n                  <ax-dropdown-panel #panel>\n                    <ax-button-item-list>\n                      @for (sub of action?.items; track $index) {\n                        @if (isFooterActionVisible(sub)) {\n                          <ax-button-item\n                            [text]=\"(t(sub.title) | async)!\"\n                            [color]=\"sub.color\"\n                            [disabled]=\"isFooterActionDisabled(sub)\"\n                            (onClick)=\"execute(sub.command!)\"\n                          >\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light {{ sub.icon }}\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                          @if (sub.break) {\n                            <ax-divider></ax-divider>\n                          }\n                        }\n                      }\n                    </ax-button-item-list>\n                  </ax-dropdown-panel>\n                }\n              </ax-button>\n            }\n          }\n        }\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: ["@layer properties;axp-layout-details-view .axp-vertical-tabs ax-tab-item{margin-block:0px;border-radius:0!important;padding-block:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div{display:flex;align-items:center}axp-layout-details-view .axp-vertical-tabs ax-tab-item>div .tab-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-layout-details-view .axp-horizontal-tabs{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;width:100%;flex-shrink:0;flex-direction:column}axp-layout-details-view .axp-horizontal-tabs .content{margin-top:calc(var(--spacing, .25rem) * 2);display:block;width:100%}axp-layout-details-view .axp-horizontal-tabs .content .axp-entity-list{height:auto;min-height:0;flex:none}axp-layout-details-view axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){--tw-border-style: dashed;border-style:dashed}:where(axp-layout-details-view axp-layout-section axp-layout-content>:not(:last-child)){border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}axp-layout-details-view axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=64rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=80rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 8)}}@media(width>=96rem){axp-layout-details-view axp-layout-section axp-layout-content .--item-container{padding-inline:calc(var(--spacing, .25rem) * 10)}}axp-layout-details-view axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-layout-details-view axp-page-content ax-form form{height:100%}axp-layout-details-view:has(axp-page-content.axp-details-page-list) axp-page-layout>axp-layout-container{overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list{display:flex;min-height:0px;flex-direction:column;overflow:hidden}axp-layout-details-view axp-page-content.axp-details-page-list>ax-form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form,axp-layout-details-view axp-page-content.axp-details-page-list ax-form form>div,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list,axp-layout-details-view axp-page-content.axp-details-page-list .axp-entity-list-body,axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{display:flex;min-height:0px;flex:1;flex-direction:column;height:100%}axp-layout-details-view axp-page-content.axp-details-page-list axp-data-list-widget-view{min-height:0!important}axp-layout-details-view axp-page-content.axp-details-page-list ax-data-table{min-height:0px;flex:1;height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table{height:100%}axp-layout-details-view .axp-entity-list ax-data-table .ax-data-table-wrapper:has(tfoot) table tbody tr.empty-row{height:100%!important}axp-layout-details-view axp-layout-start-side{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-divide-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { form: [{ type: i0.ViewChild, args: ['form', { isSignal: true }] }], widgetContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPWidgetContainerComponent), { isSignal: true }] }], sidebarTabs: [{ type: i0.ViewChild, args: ['sidebarTabs', { isSignal: true }] }] } });
 
 //#region ----   Details View Can Deactivate Guard   ----