@acorex/platform 21.0.0-next.70 → 21.0.0-next.71

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.
Files changed (32) hide show
  1. package/fesm2022/acorex-platform-common.mjs +11 -0
  2. package/fesm2022/acorex-platform-common.mjs.map +1 -1
  3. package/fesm2022/acorex-platform-core.mjs +332 -76
  4. package/fesm2022/acorex-platform-core.mjs.map +1 -1
  5. package/fesm2022/acorex-platform-layout-builder.mjs +563 -44
  6. package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
  7. package/fesm2022/acorex-platform-layout-components.mjs +83 -67
  8. package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
  9. package/fesm2022/acorex-platform-layout-entity.mjs +543 -237
  10. package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
  11. package/fesm2022/acorex-platform-layout-views.mjs +319 -66
  12. package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
  13. package/fesm2022/acorex-platform-layout-widget-core.mjs +54 -6
  14. package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
  15. package/fesm2022/acorex-platform-layout-widgets.mjs +198 -91
  16. package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
  17. package/fesm2022/acorex-platform-themes-default.mjs +13 -14
  18. package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
  19. package/fesm2022/acorex-platform-themes-shared.mjs +50 -30
  20. package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
  21. package/package.json +1 -1
  22. package/types/acorex-platform-common.d.ts +11 -0
  23. package/types/acorex-platform-core.d.ts +137 -47
  24. package/types/acorex-platform-layout-builder.d.ts +90 -13
  25. package/types/acorex-platform-layout-components.d.ts +21 -17
  26. package/types/acorex-platform-layout-entity.d.ts +63 -10
  27. package/types/acorex-platform-layout-views.d.ts +68 -6
  28. package/types/acorex-platform-layout-widget-core.d.ts +43 -8
  29. package/types/acorex-platform-layout-widgets.d.ts +21 -6
  30. package/types/acorex-platform-themes-default.d.ts +24 -4
  31. package/types/acorex-platform-themes-shared.d.ts +6 -0
  32. package/types/acorex-platform-workflow.d.ts +1 -1
@@ -2299,7 +2299,7 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
2299
2299
  provide: AXPPageLayoutBase,
2300
2300
  useExisting: AXPEntityMasterListViewComponent,
2301
2301
  },
2302
- ], viewQueries: [{ propertyName: "dataTable", first: true, predicate: AXPEntityMasterListDataTableComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n @if (vm.entityDef.category) {\n <axp-layout-start-side id=\"axp-entity-category-drawer\">\n <axp-entity-category\n id=\"axp-entity-category\"\n class=\"ax-w-80\"\n [vm]=\"vm\"\n [searchValue]=\"categorySearchValue()\"\n ></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar id=\"axp-entity-toolbar\">\n <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n </axp-page-toolbar>\n <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1 ax-text-muted ax-text-sm\"\n [class.ax-invisible]=\"!vm.selectedItems().length\"\n >\n <span\n >{{ vm.selectedItems().length }}\n <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n </span>\n <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n </div>\n @if (vm.enabledListLayouts().includes('table')) {\n <axp-entity-master-list-data-table\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'table'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-data-table>\n }\n @if (vm.enabledListLayouts().includes('card')) {\n <axp-entity-master-list-card-list\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'card'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-card-list>\n }\n </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;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))}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}axp-entity-master-list .axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column}axp-entity-master-list axp-page-content{display:flex;min-height:0px;flex-direction:column}axp-entity-master-list .axp-entity-list-host--hidden{display:none!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media(min-width:768px){.view-drawer{width:45vw}}@media(min-width:1024px){.view-drawer{width:35vw}}@media(min-width:1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type: AXPEntityMasterToolbarViewComponent, selector: "axp-entity-master-toolbar-view", inputs: ["viewModel"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPEntityCategoryComponent, selector: "axp-entity-category", inputs: ["vm", "searchValue", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "searchWithChildren"] }, { kind: "component", type: AXPEntityMasterListDataTableComponent, selector: "axp-entity-master-list-data-table", inputs: ["vm"], outputs: ["pageChanged"] }, { kind: "component", type: AXPEntityMasterListCardListComponent, selector: "axp-entity-master-list-card-list", inputs: ["vm"], outputs: ["pageChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2302
+ ], viewQueries: [{ propertyName: "dataTable", first: true, predicate: AXPEntityMasterListDataTableComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n @if (vm.entityDef.category) {\n <axp-layout-start-side id=\"axp-entity-category-drawer\">\n <axp-entity-category\n id=\"axp-entity-category\"\n class=\"ax-w-80\"\n [vm]=\"vm\"\n [searchValue]=\"categorySearchValue()\"\n ></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar id=\"axp-entity-toolbar\">\n <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n </axp-page-toolbar>\n <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1 ax-text-muted ax-text-sm\"\n [class.ax-invisible]=\"!vm.selectedItems().length\"\n >\n <span\n >{{ vm.selectedItems().length }}\n <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n </span>\n <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n </div>\n @if (vm.enabledListLayouts().includes('table')) {\n <axp-entity-master-list-data-table\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'table'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-data-table>\n }\n @if (vm.enabledListLayouts().includes('card')) {\n <axp-entity-master-list-card-list\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'card'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-card-list>\n }\n </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}axp-entity-master-list .axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column}axp-entity-master-list axp-page-content{display:flex;min-height:0px;flex-direction:column}axp-entity-master-list .axp-entity-list-host--hidden{display:none!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media(min-width:768px){.view-drawer{width:45vw}}@media(min-width:1024px){.view-drawer{width:35vw}}@media(min-width:1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type: AXPEntityMasterToolbarViewComponent, selector: "axp-entity-master-toolbar-view", inputs: ["viewModel"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPEntityCategoryComponent, selector: "axp-entity-category", inputs: ["vm", "searchValue", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "searchWithChildren"] }, { kind: "component", type: AXPEntityMasterListDataTableComponent, selector: "axp-entity-master-list-data-table", inputs: ["vm"], outputs: ["pageChanged"] }, { kind: "component", type: AXPEntityMasterListCardListComponent, selector: "axp-entity-master-list-card-list", inputs: ["vm"], outputs: ["pageChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2303
2303
  }
2304
2304
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListViewComponent, decorators: [{
2305
2305
  type: Component,
@@ -2337,7 +2337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
2337
2337
  provide: AXPPageLayoutBase,
2338
2338
  useExisting: AXPEntityMasterListViewComponent,
2339
2339
  },
2340
- ], template: "<axp-page-layout *translate=\"let t\">\n @if (vm.entityDef.category) {\n <axp-layout-start-side id=\"axp-entity-category-drawer\">\n <axp-entity-category\n id=\"axp-entity-category\"\n class=\"ax-w-80\"\n [vm]=\"vm\"\n [searchValue]=\"categorySearchValue()\"\n ></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar id=\"axp-entity-toolbar\">\n <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n </axp-page-toolbar>\n <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1 ax-text-muted ax-text-sm\"\n [class.ax-invisible]=\"!vm.selectedItems().length\"\n >\n <span\n >{{ vm.selectedItems().length }}\n <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n </span>\n <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n </div>\n @if (vm.enabledListLayouts().includes('table')) {\n <axp-entity-master-list-data-table\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'table'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-data-table>\n }\n @if (vm.enabledListLayouts().includes('card')) {\n <axp-entity-master-list-card-list\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'card'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-card-list>\n }\n </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;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))}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}axp-entity-master-list .axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column}axp-entity-master-list axp-page-content{display:flex;min-height:0px;flex-direction:column}axp-entity-master-list .axp-entity-list-host--hidden{display:none!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media(min-width:768px){.view-drawer{width:45vw}}@media(min-width:1024px){.view-drawer{width:35vw}}@media(min-width:1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"] }]
2340
+ ], template: "<axp-page-layout *translate=\"let t\">\n @if (vm.entityDef.category) {\n <axp-layout-start-side id=\"axp-entity-category-drawer\">\n <axp-entity-category\n id=\"axp-entity-category\"\n class=\"ax-w-80\"\n [vm]=\"vm\"\n [searchValue]=\"categorySearchValue()\"\n ></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar id=\"axp-entity-toolbar\">\n <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n </axp-page-toolbar>\n <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1 ax-text-muted ax-text-sm\"\n [class.ax-invisible]=\"!vm.selectedItems().length\"\n >\n <span\n >{{ vm.selectedItems().length }}\n <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n </span>\n <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n </div>\n @if (vm.enabledListLayouts().includes('table')) {\n <axp-entity-master-list-data-table\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'table'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-data-table>\n }\n @if (vm.enabledListLayouts().includes('card')) {\n <axp-entity-master-list-card-list\n class=\"axp-entity-list-host\"\n [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'card'\"\n [vm]=\"vm\"\n (pageChanged)=\"onListPageChanged()\"\n ></axp-entity-master-list-card-list>\n }\n </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}axp-entity-master-list .axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column}axp-entity-master-list axp-page-content{display:flex;min-height:0px;flex-direction:column}axp-entity-master-list .axp-entity-list-host--hidden{display:none!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media(min-width:768px){.view-drawer{width:45vw}}@media(min-width:1024px){.view-drawer{width:35vw}}@media(min-width:1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"] }]
2341
2341
  }], ctorParameters: () => [{ type: i1$4.AXPlatform }], propDecorators: { dataTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPEntityMasterListDataTableComponent), { isSignal: true }] }] } });
2342
2342
 
2343
2343
  var entityMasterListView_component = /*#__PURE__*/Object.freeze({
@@ -2385,20 +2385,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
2385
2385
 
2386
2386
  class AXPRootLayoutMenuComponent {
2387
2387
  constructor() {
2388
+ //#region ---- Services & Dependencies ----
2388
2389
  this.menuStore = inject(AXPMenuService);
2389
2390
  this.router = inject(Router);
2390
2391
  this.badgeService = inject(AXPTaskBadgeService);
2391
2392
  this.settingsService = inject(AXPSettingsService);
2392
2393
  this.visibilityService = inject(AXPMenuVisibilityService);
2393
2394
  this.themeStore = inject(AXPLayoutThemeService);
2395
+ //#endregion
2396
+ //#region ---- Component State ----
2394
2397
  this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : /* istanbul ignore next */ []));
2395
- this.menuMode = this.themeStore.menuVerticalMode;
2396
- // Debug: Track menu items changes
2397
- // effect(() => {
2398
- // const items = this.menuStore.items();
2399
- // console.log('🎯 Sidebar menu items updated:', items.map(i => ({ name: i.name, priority: i.priority })));
2400
- // });
2398
+ this.menuMode = this.themeStore.effectiveMenuVerticalMode;
2401
2399
  }
2400
+ //#endregion
2402
2401
  async ngOnInit() {
2403
2402
  this.badgeVisible.set(await this.settingsService.get(AXPThemeLayoutSetting.MenuBadgeVisible));
2404
2403
  this.settingsService.onChanged.subscribe((setting) => {
@@ -2574,7 +2573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
2574
2573
  AXDecoratorModule,
2575
2574
  AXBadgeModule,
2576
2575
  ], template: "<ax-side-menu look=\"pills\" [mode]=\"menuMode()\">\n @let sortedItems = sort(menuStore.items());\n @for (item of sortedItems; track item; let i = $index) {\n <ng-container\n [ngTemplateOutlet]=\"recursiveMenu\"\n [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"\n >\n </ng-container>\n }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\" let-items=\"items\" let-index=\"index\">\n @if (item.type == 'group' && menuMode() === 'full') {\n @if (isItemVisible(item)) {\n <ax-title>{{ item.text | translate | async }}</ax-title>\n }\n } @else if (item.type == 'break') {\n @if (shouldShowDivider(item, items, index)) {\n <ax-divider></ax-divider>\n }\n } @else {\n @if (shouldRenderMenuItem(item)) {\n @let routerLinkValue = getRouterLink(item);\n @if (routerLinkValue) {\n <ax-side-menu-item\n [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n (onClick)=\"onMenuItemClick(item, true)\"\n [routerLink]=\"routerLinkValue\"\n [active]=\"item === menuStore.selectedMenuItem().item\"\n [isCollapsed]=\"!menuStore.isItemOpen(item)\"\n >\n <ax-prefix>\n <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n </ax-prefix>\n <span>{{ item.text | translate | async }}</span>\n @if (item.children?.length) {\n <ng-container>\n @let sortedChildren = sort(item.children);\n @for (child of sortedChildren; track child; let childIndex = $index) {\n <ng-container\n [ngTemplateOutlet]=\"recursiveMenu\"\n [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\"\n >\n </ng-container>\n }\n </ng-container>\n }\n <ax-suffix>\n @if (badgeVisible()) {\n <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n }\n </ax-suffix>\n </ax-side-menu-item>\n } @else {\n <ax-side-menu-item\n [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n (onClick)=\"onMenuItemClick(item)\"\n [active]=\"item === menuStore.selectedMenuItem().item\"\n [isCollapsed]=\"!menuStore.isItemOpen(item)\"\n >\n <ax-prefix>\n <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n </ax-prefix>\n <span>{{ item.text | translate | async }}</span>\n @if (item.children?.length) {\n <ng-container>\n @let sortedChildren = sort(item.children);\n @for (child of sortedChildren; track child; let childIndex = $index) {\n <ng-container\n [ngTemplateOutlet]=\"recursiveMenu\"\n [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\"\n >\n </ng-container>\n }\n </ng-container>\n }\n <ax-suffix>\n @if (badgeVisible()) {\n <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n }\n </ax-suffix>\n </ax-side-menu-item>\n }\n }\n }\n</ng-template>\n" }]
2577
- }], ctorParameters: () => [] });
2576
+ }] });
2578
2577
 
2579
2578
  class AXPHorizontalMenuComponent {
2580
2579
  constructor() {
@@ -2819,10 +2818,10 @@ class AXPRootVerticalLayoutComponent {
2819
2818
  this.store = inject(AXPLayoutThemeService);
2820
2819
  this.deviceService = inject(AXPDeviceService);
2821
2820
  this.router = inject(Router);
2822
- /** Drawer width from theme store; null on small/medium viewports (overlay sizing). */
2823
- this.sideMenuDrawerWidthPx = computed(() => this.deviceService.isLarge() ? this.store.sideMenuDrawerWidth() : null, ...(ngDevMode ? [{ debugName: "sideMenuDrawerWidthPx" }] : /* istanbul ignore next */ []));
2821
+ /** Recreates the drawer when switching overlay push to reset internal layout sizing. */
2822
+ this.sideMenuDrawerKey = computed(() => this.deviceService.isSmall() || this.deviceService.isMedium() ? 'overlay' : 'push', ...(ngDevMode ? [{ debugName: "sideMenuDrawerKey" }] : /* istanbul ignore next */ []));
2824
2823
  this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
2825
- if (this.deviceService.isSmall() || this.deviceService.isMedium()) {
2824
+ if (this.sideMenuDrawerKey() === 'overlay') {
2826
2825
  this.store.closeSideMenu();
2827
2826
  }
2828
2827
  });
@@ -2833,7 +2832,7 @@ class AXPRootVerticalLayoutComponent {
2833
2832
  }
2834
2833
  }
2835
2834
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootVerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2836
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootVerticalLayoutComponent, isStandalone: true, selector: "axp-root-vertical-layout", ngImport: i0, template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @let sideMenuWidthPx = sideMenuDrawerWidthPx();\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"deviceService.isLarge()\"\n class=\"ax-w-[75%] ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n [width]=\"sideMenuWidthPx!\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"sideMenuWidthPx ?? store.sideMenuDrawerWidth()\"\n [mode]=\"deviceService.isSmall() || deviceService.isMedium() ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"store.closeSideMenu()\"\n backdropClass=\"ax-bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light ax-h-14 ax-flex ax-items-center ax-justify-center ax-bg-primary-500 ax-text-primary-on-surface ax-border-e ax-border-primary-600\"\n >\n <axp-logo [source]=\"logo?.full?.dark\"></axp-logo>\n </ax-header>\n <ax-content class=\"ax-flex ax-flex-col ax-border-e ax-h-full ax-overflow-y-auto ax-overflow-x-hidden\">\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"ax-flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"ax-p-4 ax-block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter ax-overflow-auto\">\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header id=\"axp-main-header\" class=\"ax-light\"></axp-dashboard-admin-header>\n\n <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$4.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPRootLayoutHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "component", type: AXPRootLayoutMenuComponent, selector: "axp-side-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$5.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2835
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootVerticalLayoutComponent, isStandalone: true, selector: "axp-root-vertical-layout", ngImport: i0, template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"drawerKey === 'push'\"\n class=\"ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n [class.ax-w-[75%]]=\"drawerKey === 'overlay'\"\n [width]=\"store.sideMenuDrawerWidth()\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"store.closeSideMenu()\"\n backdropClass=\"ax-bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light ax-h-14 ax-flex ax-items-center ax-justify-center ax-bg-primary-500 ax-text-primary-on-surface ax-border-e ax-border-primary-600\"\n >\n <axp-logo [source]=\"logo?.full?.dark\"></axp-logo>\n </ax-header>\n <ax-content class=\"ax-flex ax-flex-col ax-border-e ax-h-full ax-overflow-y-auto ax-overflow-x-hidden\">\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"ax-flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"ax-p-4 ax-block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n }\n <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter ax-overflow-auto\">\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header id=\"axp-main-header\" class=\"ax-light\"></axp-dashboard-admin-header>\n\n <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$4.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPRootLayoutHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "component", type: AXPRootLayoutMenuComponent, selector: "axp-side-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$5.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2837
2836
  }
2838
2837
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootVerticalLayoutComponent, decorators: [{
2839
2838
  type: Component,
@@ -2860,7 +2859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
2860
2859
  AXPRootLayoutHeaderComponent,
2861
2860
  AXPRootLayoutMenuComponent,
2862
2861
  AXPComponentSlotModule,
2863
- ], template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @let sideMenuWidthPx = sideMenuDrawerWidthPx();\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"deviceService.isLarge()\"\n class=\"ax-w-[75%] ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n [width]=\"sideMenuWidthPx!\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"sideMenuWidthPx ?? store.sideMenuDrawerWidth()\"\n [mode]=\"deviceService.isSmall() || deviceService.isMedium() ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"store.closeSideMenu()\"\n backdropClass=\"ax-bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light ax-h-14 ax-flex ax-items-center ax-justify-center ax-bg-primary-500 ax-text-primary-on-surface ax-border-e ax-border-primary-600\"\n >\n <axp-logo [source]=\"logo?.full?.dark\"></axp-logo>\n </ax-header>\n <ax-content class=\"ax-flex ax-flex-col ax-border-e ax-h-full ax-overflow-y-auto ax-overflow-x-hidden\">\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"ax-flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"ax-p-4 ax-block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter ax-overflow-auto\">\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header id=\"axp-main-header\" class=\"ax-light\"></axp-dashboard-admin-header>\n\n <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"] }]
2862
+ ], template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"drawerKey === 'push'\"\n class=\"ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n [class.ax-w-[75%]]=\"drawerKey === 'overlay'\"\n [width]=\"store.sideMenuDrawerWidth()\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"store.closeSideMenu()\"\n backdropClass=\"ax-bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light ax-h-14 ax-flex ax-items-center ax-justify-center ax-bg-primary-500 ax-text-primary-on-surface ax-border-e ax-border-primary-600\"\n >\n <axp-logo [source]=\"logo?.full?.dark\"></axp-logo>\n </ax-header>\n <ax-content class=\"ax-flex ax-flex-col ax-border-e ax-h-full ax-overflow-y-auto ax-overflow-x-hidden\">\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"ax-flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"ax-p-4 ax-block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n }\n <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter ax-overflow-auto\">\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header id=\"axp-main-header\" class=\"ax-light\"></axp-dashboard-admin-header>\n\n <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"] }]
2864
2863
  }], ctorParameters: () => [] });
2865
2864
 
2866
2865
  class AXPRootLayoutComponent {