@acorex/platform 20.2.4-next.1 → 20.2.4-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/common/index.d.ts +9 -1
- package/fesm2022/acorex-platform-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-builder.mjs +1 -0
- package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-components.mjs +26 -36
- package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-entity.mjs +509 -230
- package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-views.mjs +106 -24
- package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-DXGLsVis.mjs → acorex-platform-themes-default-entity-master-list-view.component-e3Lxk5ZT.mjs} +3 -3
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-e3Lxk5ZT.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default.mjs +3 -3
- package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
- package/fesm2022/{acorex-platform-widgets-file-list-popup.component-B601gPsW.mjs → acorex-platform-widgets-file-list-popup.component-BafU5Lfl.mjs} +4 -2
- package/fesm2022/acorex-platform-widgets-file-list-popup.component-BafU5Lfl.mjs.map +1 -0
- package/fesm2022/acorex-platform-widgets.mjs +84 -14
- package/fesm2022/acorex-platform-widgets.mjs.map +1 -1
- package/layout/builder/index.d.ts +1 -0
- package/layout/components/index.d.ts +1 -5
- package/layout/entity/index.d.ts +2 -2
- package/layout/views/index.d.ts +34 -0
- package/package.json +5 -5
- package/widgets/index.d.ts +8 -0
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-DXGLsVis.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-file-list-popup.component-B601gPsW.mjs.map +0 -1
|
@@ -467,11 +467,17 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
467
467
|
currentPage: null,
|
|
468
468
|
currentTab: null,
|
|
469
469
|
pageSelectedRows: [],
|
|
470
|
+
// Cache for rendered tabs per page to prevent re-rendering
|
|
471
|
+
renderedTabsCache: {},
|
|
470
472
|
};
|
|
471
473
|
return state;
|
|
472
474
|
}), withComputed((store, layout = inject(AXPLayoutThemeService)) => ({
|
|
473
475
|
icon: computed(() => store.adapter()?.icon ?? null),
|
|
474
|
-
content: computed(() =>
|
|
476
|
+
content: computed(() => {
|
|
477
|
+
const pages = store.adapter()?.pages ?? [];
|
|
478
|
+
const primaryPage = pages.find((p) => p.isPrimary) ?? pages[0];
|
|
479
|
+
return primaryPage?.content ?? [];
|
|
480
|
+
}),
|
|
475
481
|
//
|
|
476
482
|
showPages: computed(() => !store.currentPage() && !layout.isLarge()),
|
|
477
483
|
isLarge: computed(() => layout.isLarge()),
|
|
@@ -482,7 +488,47 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
482
488
|
changesCount: computed(() => getChangedPaths(store.context(), store.previousContext()).length),
|
|
483
489
|
isLoaded: computed(() => store.adapter() != null),
|
|
484
490
|
currentPageSelectedRows: computed(() => store.pageSelectedRows()),
|
|
491
|
+
//
|
|
492
|
+
// Rendered tabs for current page - prevents re-rendering on tab switch
|
|
493
|
+
currentPageRenderedTabs: computed(() => {
|
|
494
|
+
const currentPage = store.currentPage();
|
|
495
|
+
if (!currentPage?.id) {
|
|
496
|
+
return [];
|
|
497
|
+
}
|
|
498
|
+
const pageId = currentPage.id;
|
|
499
|
+
const cache = store.renderedTabsCache();
|
|
500
|
+
return cache[pageId] || [];
|
|
501
|
+
}),
|
|
485
502
|
})), withMethods((store, evaluatorService = inject(AXPExpressionEvaluatorService), router = inject(Router), route = inject(ActivatedRoute), layout = inject(AXPLayoutThemeService), formatService = inject(AXFormatService), toastService = inject(AXToastService), translateService = inject(AXTranslationService)) => {
|
|
503
|
+
// Effect to automatically cache current tab when it changes
|
|
504
|
+
effect(() => {
|
|
505
|
+
const currentPage = store.currentPage();
|
|
506
|
+
const currentTab = store.currentTab();
|
|
507
|
+
if (currentPage?.id && currentTab?.id) {
|
|
508
|
+
const pageId = currentPage.id;
|
|
509
|
+
const tabId = currentTab.id;
|
|
510
|
+
const cache = store.renderedTabsCache();
|
|
511
|
+
const pageCache = cache[pageId] || [];
|
|
512
|
+
// Check if tab is already in cache
|
|
513
|
+
const isTabCached = pageCache.some((cached) => cached.tabId === tabId);
|
|
514
|
+
if (!isTabCached) {
|
|
515
|
+
// Add tab to cache for this page
|
|
516
|
+
const newTabCache = {
|
|
517
|
+
tabId: tabId,
|
|
518
|
+
tab: currentTab,
|
|
519
|
+
};
|
|
520
|
+
const updatedPageCache = [...pageCache, newTabCache];
|
|
521
|
+
// Update the cache immutably
|
|
522
|
+
const updatedCache = {
|
|
523
|
+
...cache,
|
|
524
|
+
[pageId]: updatedPageCache,
|
|
525
|
+
};
|
|
526
|
+
patchState(store, {
|
|
527
|
+
renderedTabsCache: updatedCache,
|
|
528
|
+
});
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
});
|
|
486
532
|
// Create an effect to handle route changes
|
|
487
533
|
effect(() => {
|
|
488
534
|
if (store.adapter()) {
|
|
@@ -499,9 +545,10 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
499
545
|
}
|
|
500
546
|
}
|
|
501
547
|
else {
|
|
502
|
-
// Only auto-select
|
|
548
|
+
// Only auto-select primary page if layout is large
|
|
503
549
|
if (layout.isLarge() || adapter.pages.length == 1) {
|
|
504
|
-
|
|
550
|
+
const primaryPage = adapter.pages.find((p) => p.isPrimary) ?? adapter.pages[0];
|
|
551
|
+
currentPage = primaryPage;
|
|
505
552
|
}
|
|
506
553
|
}
|
|
507
554
|
// Set current tab to first tab of the current page (internal state only)
|
|
@@ -550,9 +597,10 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
550
597
|
}
|
|
551
598
|
}
|
|
552
599
|
else {
|
|
553
|
-
// Only auto-select
|
|
600
|
+
// Only auto-select primary page if layout is large
|
|
554
601
|
if (layout.isLarge() || adapter.pages.length == 1) {
|
|
555
|
-
|
|
602
|
+
const primaryPage = adapter.pages.find((p) => p.isPrimary) ?? adapter.pages[0];
|
|
603
|
+
currentPage = primaryPage;
|
|
556
604
|
}
|
|
557
605
|
}
|
|
558
606
|
// Load page data if current page exists
|
|
@@ -660,6 +708,11 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
660
708
|
return store.currentPage()?.tabs?.filter((tab) => tab.visible !== false);
|
|
661
709
|
},
|
|
662
710
|
setCurrentPage(page) {
|
|
711
|
+
// Clear previous page cache if changing pages
|
|
712
|
+
const previousPage = store.currentPage();
|
|
713
|
+
if (previousPage?.id && previousPage.id !== page?.id) {
|
|
714
|
+
this.clearPageTabCache(previousPage.id);
|
|
715
|
+
}
|
|
663
716
|
if (page) {
|
|
664
717
|
const firstTab = page.tabs?.[0] ?? null;
|
|
665
718
|
patchState(store, {
|
|
@@ -691,18 +744,39 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
691
744
|
patchState(store, {
|
|
692
745
|
currentTab: tab,
|
|
693
746
|
});
|
|
747
|
+
// Cache management is handled automatically by the effect
|
|
694
748
|
},
|
|
695
749
|
getCurrentTabContent() {
|
|
696
750
|
return store.currentTab()?.content ?? [];
|
|
697
751
|
},
|
|
752
|
+
//#region ---- Rendered Tabs Management ----
|
|
753
|
+
/**
|
|
754
|
+
* Get content for a specific rendered tab
|
|
755
|
+
*/
|
|
756
|
+
getRenderedTabContent(tabId) {
|
|
757
|
+
const renderedTabs = store.currentPageRenderedTabs();
|
|
758
|
+
const renderedTab = renderedTabs.find((cached) => cached.tabId === tabId);
|
|
759
|
+
return renderedTab?.tab?.content ?? [];
|
|
760
|
+
},
|
|
761
|
+
/**
|
|
762
|
+
* Clear cache when page changes to free memory
|
|
763
|
+
*/
|
|
764
|
+
clearPageTabCache(pageId) {
|
|
765
|
+
const cache = store.renderedTabsCache();
|
|
766
|
+
const updatedCache = { ...cache };
|
|
767
|
+
delete updatedCache[pageId];
|
|
768
|
+
patchState(store, {
|
|
769
|
+
renderedTabsCache: updatedCache,
|
|
770
|
+
});
|
|
771
|
+
},
|
|
772
|
+
//#endregion
|
|
698
773
|
title() {
|
|
699
|
-
const raw = store.adapter()?.title;
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
}
|
|
774
|
+
const raw = store.showPages() ? (store.adapter()?.title ?? '') : (store.adapter()?.label ?? '');
|
|
775
|
+
return raw ? formatService.format(raw, 'string', store.rootContext()) : null;
|
|
776
|
+
},
|
|
777
|
+
backButtonTitle() {
|
|
778
|
+
const raw = store.showPages() ? (store.adapter()?.label ?? '') : (store.adapter()?.title ?? '');
|
|
779
|
+
return raw ? formatService.format(raw, 'string', store.rootContext()) : null;
|
|
706
780
|
},
|
|
707
781
|
description() {
|
|
708
782
|
const raw = store.adapter()?.description;
|
|
@@ -732,10 +806,12 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
732
806
|
};
|
|
733
807
|
}) ?? []);
|
|
734
808
|
// Add current page title as the last breadcrumb item
|
|
735
|
-
const
|
|
736
|
-
const
|
|
737
|
-
|
|
738
|
-
|
|
809
|
+
const currentPageLabel = store.currentPage()?.label;
|
|
810
|
+
const pages = store.adapter()?.pages ?? [];
|
|
811
|
+
const primaryPage = pages.find((p) => p.isPrimary) ?? pages[0];
|
|
812
|
+
const isMainPage = primaryPage?.id === store.currentPage()?.id;
|
|
813
|
+
if (currentPageLabel && !isMainPage) {
|
|
814
|
+
const processedCurrentPageTitle = formatService.format(currentPageLabel, 'string', store.context());
|
|
739
815
|
breadcrumbs.push({
|
|
740
816
|
title: processedCurrentPageTitle,
|
|
741
817
|
});
|
|
@@ -774,6 +850,9 @@ const AXPLayoutDetailsViewViewModel = signalStore(withState(() => {
|
|
|
774
850
|
status: AXPPageStatus.Submitted,
|
|
775
851
|
});
|
|
776
852
|
},
|
|
853
|
+
goToListPage() {
|
|
854
|
+
//TODO: Implement
|
|
855
|
+
},
|
|
777
856
|
};
|
|
778
857
|
}));
|
|
779
858
|
|
|
@@ -880,10 +959,10 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
|
|
|
880
959
|
}
|
|
881
960
|
async getPageTitle() {
|
|
882
961
|
if (this.vm.showPages()) {
|
|
883
|
-
return
|
|
962
|
+
return this.vm.title() || '';
|
|
884
963
|
}
|
|
885
964
|
else {
|
|
886
|
-
return
|
|
965
|
+
return this.vm.currentPageTitle() || '';
|
|
887
966
|
}
|
|
888
967
|
}
|
|
889
968
|
async getPageDescription() {
|
|
@@ -895,9 +974,9 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
|
|
|
895
974
|
}
|
|
896
975
|
}
|
|
897
976
|
async getBackButton() {
|
|
898
|
-
if (
|
|
977
|
+
if (this.vm.adapter()?.pages?.length > 1) {
|
|
899
978
|
return {
|
|
900
|
-
title: this.vm.
|
|
979
|
+
title: this.vm.backButtonTitle() ?? '',
|
|
901
980
|
};
|
|
902
981
|
}
|
|
903
982
|
else {
|
|
@@ -916,8 +995,11 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
|
|
|
916
995
|
}
|
|
917
996
|
async onBackButtonClick() {
|
|
918
997
|
// When back button is clicked in small layout, go back to page list
|
|
919
|
-
if (!this.vm.showPages()
|
|
920
|
-
|
|
998
|
+
if (!this.vm.showPages()) {
|
|
999
|
+
this.vm.setCurrentPage(null);
|
|
1000
|
+
}
|
|
1001
|
+
else {
|
|
1002
|
+
this.vm.goToListPage();
|
|
921
1003
|
}
|
|
922
1004
|
}
|
|
923
1005
|
//#region ---- Command Execution ----
|
|
@@ -968,7 +1050,7 @@ class AXPLayoutDetailsViewComponent extends AXPPageLayoutBaseComponent {
|
|
|
968
1050
|
useExisting: AXPLayoutDetailsViewComponent,
|
|
969
1051
|
},
|
|
970
1052
|
AXPLayoutDetailsViewViewModel,
|
|
971
|
-
], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, isSignal: true }, { propertyName: "widgetContainer", first: true, predicate: AXPWidgetContainerComponent, 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 [axResizable]=\"true\">\n <axp-layout-header>\n <axp-layout-title>{{ t(vm.title()) | async }}</axp-layout-title>\n <axp-layout-description>{{ t(vm.description()) | async }}</axp-layout-description>\n </axp-layout-header>\n <axp-layout-content>\n <ax-tabs class=\"axp-vertical-tabs\" [look]=\"'with-line-color'\" [location]=\"'end'\" [fitParent]=\"true\">\n @for (item of vm.adapter()?.pages; track $index) {\n <ax-tab-item\n [text]=\"(formatService.format(item.label, 'string', vm.rootContext()) | translate | async)!\"\n (onClick)=\"handleSelectPage(item)\"\n [active]=\"vm.currentPage() == item\"\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
|
|
1053
|
+
], viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, isSignal: true }, { propertyName: "widgetContainer", first: true, predicate: AXPWidgetContainerComponent, 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 [axResizable]=\"true\">\n <axp-layout-header>\n <axp-layout-title>{{ t(vm.title()) | async }}</axp-layout-title>\n <axp-layout-description>{{ t(vm.description()) | async }}</axp-layout-description>\n </axp-layout-header>\n <axp-layout-content>\n <ax-tabs class=\"axp-vertical-tabs\" [look]=\"'with-line-color'\" [location]=\"'end'\" [fitParent]=\"true\">\n @for (item of vm.adapter()?.pages; track $index) {\n <ax-tab-item\n [text]=\"(formatService.format(item.label, 'string', vm.rootContext()) | translate | async)!\"\n (onClick)=\"handleSelectPage(item)\"\n [active]=\"vm.currentPage() == item\"\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 [context]=\"vm.context()\" (onContextChanged)=\"handleOnContextChanged($event)\">\n <div class=\"ax-flex ax-flex-col ax-w-full ax-gap-4 ax-h-full\">\n @for (content of vm.currentPageContent(); track $index) {\n <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\"></ng-container>\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() == tab\"\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 @for (renderedTab of vm.currentPageRenderedTabs(); track renderedTab.tabId) {\n <div [class]=\"renderedTab.tabId === vm.currentTab()?.id ? '' : 'ax-hidden'\">\n @for (content of vm.getRenderedTabContent(renderedTab.tabId); track $index) {\n <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\">\n </ng-container>\n }\n </div>\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]=\"layoutService.isSmall()\"\n [iconOnly]=\"layoutService.isSmall()\"\n [text]=\"t('actions') | async\"\n [look]=\"layoutService.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 (action.visible != false) {\n <ax-button-item\n [text]=\"(t(action.title) | async)!\"\n [color]=\"action.color\"\n [disabled]=\"action.disabled || vm.isSaving()\"\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 @for (action of footerPrimaryActions(); track $index) {\n @if (action.visible != false) {\n <ax-button\n [class.ax-sm]=\"layoutService.isSmall()\"\n [disabled]=\"action.disabled || vm.isSaving()\"\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 (sub.visible != false) {\n <ax-button-item\n [text]=\"(t(sub.title) | async)!\"\n [color]=\"sub.color\"\n [disabled]=\"sub.disabled\"\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-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;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
972
1054
|
// Angular
|
|
973
1055
|
CommonModule }, { kind: "ngmodule", type:
|
|
974
1056
|
// ACoreX
|
|
@@ -1014,7 +1096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
|
|
|
1014
1096
|
useExisting: AXPLayoutDetailsViewComponent,
|
|
1015
1097
|
},
|
|
1016
1098
|
AXPLayoutDetailsViewViewModel,
|
|
1017
|
-
], template: "<axp-page-layout *translate=\"let t\">\n @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n <axp-layout-start-side [axResizable]=\"true\">\n <axp-layout-header>\n <axp-layout-title>{{ t(vm.title()) | async }}</axp-layout-title>\n <axp-layout-description>{{ t(vm.description()) | async }}</axp-layout-description>\n </axp-layout-header>\n <axp-layout-content>\n <ax-tabs class=\"axp-vertical-tabs\" [look]=\"'with-line-color'\" [location]=\"'end'\" [fitParent]=\"true\">\n @for (item of vm.adapter()?.pages; track $index) {\n <ax-tab-item\n [text]=\"(formatService.format(item.label, 'string', vm.rootContext()) | translate | async)!\"\n (onClick)=\"handleSelectPage(item)\"\n [active]=\"vm.currentPage() == item\"\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
|
|
1099
|
+
], template: "<axp-page-layout *translate=\"let t\">\n @if (vm.adapter()?.pages?.length! > 1 && vm.isLarge()) {\n <axp-layout-start-side [axResizable]=\"true\">\n <axp-layout-header>\n <axp-layout-title>{{ t(vm.title()) | async }}</axp-layout-title>\n <axp-layout-description>{{ t(vm.description()) | async }}</axp-layout-description>\n </axp-layout-header>\n <axp-layout-content>\n <ax-tabs class=\"axp-vertical-tabs\" [look]=\"'with-line-color'\" [location]=\"'end'\" [fitParent]=\"true\">\n @for (item of vm.adapter()?.pages; track $index) {\n <ax-tab-item\n [text]=\"(formatService.format(item.label, 'string', vm.rootContext()) | translate | async)!\"\n (onClick)=\"handleSelectPage(item)\"\n [active]=\"vm.currentPage() == item\"\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 [context]=\"vm.context()\" (onContextChanged)=\"handleOnContextChanged($event)\">\n <div class=\"ax-flex ax-flex-col ax-w-full ax-gap-4 ax-h-full\">\n @for (content of vm.currentPageContent(); track $index) {\n <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\"></ng-container>\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() == tab\"\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 @for (renderedTab of vm.currentPageRenderedTabs(); track renderedTab.tabId) {\n <div [class]=\"renderedTab.tabId === vm.currentTab()?.id ? '' : 'ax-hidden'\">\n @for (content of vm.getRenderedTabContent(renderedTab.tabId); track $index) {\n <ng-container axp-widget-renderer [node]=\"content\" [mode]=\"content.mode ?? 'view'\">\n </ng-container>\n }\n </div>\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]=\"layoutService.isSmall()\"\n [iconOnly]=\"layoutService.isSmall()\"\n [text]=\"t('actions') | async\"\n [look]=\"layoutService.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 (action.visible != false) {\n <ax-button-item\n [text]=\"(t(action.title) | async)!\"\n [color]=\"action.color\"\n [disabled]=\"action.disabled || vm.isSaving()\"\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 @for (action of footerPrimaryActions(); track $index) {\n @if (action.visible != false) {\n <ax-button\n [class.ax-sm]=\"layoutService.isSmall()\"\n [disabled]=\"action.disabled || vm.isSaving()\"\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 (sub.visible != false) {\n <ax-button-item\n [text]=\"(t(sub.title) | async)!\"\n [color]=\"sub.color\"\n [disabled]=\"sub.disabled\"\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-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;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}\n"] }]
|
|
1018
1100
|
}] });
|
|
1019
1101
|
|
|
1020
1102
|
/**
|