npm - @acorex/platform - Versions diffs - 18.0.4 → 18.0.5 - Mend

@acorex/platform 18.0.4 → 18.0.5

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 (70) hide show

package/fesm2022/acorex-platform-themes-default.mjs CHANGED Viewed

@@ -337,8 +337,11 @@ class AXPEntityMasterSingleViewComponent {
     handleActiveTabChanged(e) {
         this.selectedTabIndex.set(e.index);
     }
+    ngOnDestroy() {
+        this.vm.destroy();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityMasterSingleViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityMasterSingleViewComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-drawer-container>\r\n    <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n      *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n      <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n        <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n        <ax-tabs look=\"with-line\" location=\"start\">\r\n          @for(tab of (loader.sections$ | async); track tab.name)\r\n          {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n            [disabled]=\"editForm.context\">\r\n          </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n      </ax-content>\r\n    </ax-drawer> -->\r\n    <ax-content #content class=\"ax-overflow-x-hidden\">\r\n        <div\r\n            class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n            <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n                [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyOffset]=\"50\"\r\n                [stickyParent]=\"content.getHostElement()\">\r\n                <!-------- Begin Toolbar  -------->\r\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n                    <!-------- Begin Title  -------->\r\n                    <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n                        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\r\n                            <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title()}}</div>\r\n                            @if(vm.description())\r\n                            {\r\n                            <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">{{\r\n                                vm.description() }}</div>\r\n                            }\r\n                            <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\"\r\n                                [class.ax-hidden]=\"isSM | async\">\r\n                                <ng-template #divider>\r\n                                    <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                                </ng-template>\r\n                                @for(b of vm.beardcrumbs();track $index;let last=$last)\r\n                                {\r\n                                <ax-breadcrumbs-item [active]=\"last\" [class.!ax-font-semibold]=\"last\"\r\n                                    [class.!ax-text-neutral-600]=\"last\" [routerLink]=\"b.url\">\r\n                                    @if(b.icon)\r\n                                    {\r\n                                    <i [class]=\"b.icon\"></i>\r\n                                    }\r\n                                    {{b.title}}\r\n                                </ax-breadcrumbs-item>\r\n                                }\r\n                            </ax-breadcrumbs>\r\n                        </div>\r\n                    </div>\r\n                    <!-------- Finish Title  -------->\r\n                    <!--------------------------------------------------------------->\r\n                    <!-- Begin Action Menu  -->\r\n                    <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n                        @for(tr of vm.primaryActions();track $index)\r\n                        {\r\n                        <ax-button [text]=\"tr.title\" [color]=\"tr.color\">\r\n                            <ax-prefix>\r\n                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                            </ax-prefix>\r\n                        </ax-button>\r\n                        }\r\n                        @if(vm.secondaryActions().length) {\r\n                        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n                            <ax-prefix>\r\n                                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n                            </ax-prefix>\r\n                            <ax-dropdown-panel>\r\n                                <ax-button-item-list>\r\n                                    @for(tr of vm.secondaryActions();track $index)\r\n                                    {\r\n                                    <ng-container>\r\n                                        @if(tr.separated)\r\n                                        {\r\n                                        <ax-divider></ax-divider>\r\n                                        }\r\n                                        <ax-button-item [text]=\"tr.title\" class=\"ax-font-semibold ax-text-{{tr.color}}\"\r\n                                            (onClick)=\"vm.executeCommand(tr.name)\">\r\n                                            <ax-prefix>\r\n                                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                                            </ax-prefix>\r\n                                        </ax-button-item>\r\n                                    </ng-container>\r\n                                    }\r\n                                </ax-button-item-list>\r\n                            </ax-dropdown-panel>\r\n                        </ax-button>\r\n                        }\r\n                    </div>\r\n                    <!-- Finish Action Menu  -->\r\n                </div>\r\n                <!----- Finish Toolbar  ----->\r\n                <!--------------------------------------------------------------->\r\n                <ax-tabs [look]=\"'classic'\" class=\"ax-mt-4 ax-font-semibold\">\r\n                    <ax-tab-item text=\"Overview\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"History\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"Comments\">\r\n                    </ax-tab-item>\r\n                </ax-tabs>\r\n            </div>\r\n            <!-- Begin Sections -->\r\n            <div class=\"ax-grid  ax-grid-cols-12     ax-gap-4\">\r\n                @for(section of vm.sections(); track section.name()) {\r\n                <div class=\"ax-card ax-shadow-md ax-mt-2\" [gridLayout]=\"section.layout()\">\r\n                    <ax-form #form>\r\n                        <axp-widgets-container [context]=\"vm.context()\">\r\n                            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\r\n                                <p>\r\n                                    <span class=\"!ax-text-lg ax-font-semibold \">{{ section.title()\r\n                                        }}</span>\r\n                                    <br>\r\n                                    @if(section.description()) {\r\n                                    <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description()\r\n                                        }}</span>\r\n                                    }\r\n                                </p>\r\n                                @if(section.editable()) {\r\n                                <ax-button class=\"ax-xs\" color=\"ghost\" [look]=\"'blank'\"\r\n                                    (onClick)=\"vm.executeCommand('modify-entity-section',section)\">\r\n                                    <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\r\n                                </ax-button>\r\n                                }\r\n                            </div>\r\n                            <div class=\"ax-card-body !ax-grid  !ax-grid-cols-12  !ax-gap-4\">\r\n                                @for(attr of section.props(); track $index) {\r\n                                <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\r\n                                    <div>\r\n                                        <div>\r\n                                            <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"ax-text-neutral-500\">\r\n                                        <axp-widget-renderer [node]=\"attr.node()\"> </axp-widget-renderer>\r\n                                    </div>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </axp-widgets-container>\r\n                    </ax-form>\r\n                </div>\r\n                }\r\n            </div>\r\n            <!-- Finish Sections  -->\r\n            <!--------------------------------------------------------------->\r\n            @if(vm.relatedEntities().length)\r\n            {\r\n            <ax-tabs [look]=\"'default'\" class=\"ax-mt-2 ax-font-semibold\" #tab\r\n                (onActiveTabChanged)=\"handleActiveTabChanged($event)\">\r\n                @for(e of vm.relatedEntities();track $index;let index= $index){\r\n                <ax-tab-item [text]=\"e.title()\" [key]=\"index.toString()\">\r\n                </ax-tab-item>\r\n                }\r\n            </ax-tabs>\r\n            @for(e of vm.relatedEntities();track $index;let index= $index){\r\n            <div [class.ax-hidden]=\"$index!=selectedTabIndex()\">\r\n                <axp-entity-detail-list-view [viewModel]=\"e\"></axp-entity-detail-list-view>\r\n            </div>\r\n            }\r\n            }\r\n\r\n        </div>\r\n    </ax-content>\r\n</ax-drawer-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i7.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i7.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4$3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4$3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i9.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i9.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityMasterSingleViewComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-drawer-container>\r\n    <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n      *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n      <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n        <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n        <ax-tabs look=\"with-line\" location=\"start\">\r\n          @for(tab of (loader.sections$ | async); track tab.name)\r\n          {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n            [disabled]=\"editForm.context\">\r\n          </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n      </ax-content>\r\n    </ax-drawer> -->\r\n    <ax-content #content class=\"ax-overflow-x-hidden\">\r\n        <div\r\n            class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n            <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n                [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyOffset]=\"50\"\r\n                [stickyParent]=\"content.getHostElement()\">\r\n                <!-------- Begin Toolbar  -------->\r\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n                    <!-------- Begin Title  -------->\r\n                    <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n                        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\r\n                            <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title()}}</div>\r\n                            @if(vm.description())\r\n                            {\r\n                            <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">{{\r\n                                vm.description() }}</div>\r\n                            }\r\n                            <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\"\r\n                                [class.ax-hidden]=\"isSM | async\">\r\n                                <ng-template #divider>\r\n                                    <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                                </ng-template>\r\n                                @for(b of vm.beardcrumbs();track $index;let last=$last)\r\n                                {\r\n                                <ax-breadcrumbs-item [active]=\"last\" [class.!ax-font-semibold]=\"last\"\r\n                                    [class.!ax-text-neutral-600]=\"last\" [routerLink]=\"b.url\">\r\n                                    @if(b.icon)\r\n                                    {\r\n                                    <i [class]=\"b.icon\"></i>\r\n                                    }\r\n                                    {{b.title}}\r\n                                </ax-breadcrumbs-item>\r\n                                }\r\n                            </ax-breadcrumbs>\r\n                        </div>\r\n                    </div>\r\n                    <!-------- Finish Title  -------->\r\n                    <!--------------------------------------------------------------->\r\n                    <!-- Begin Action Menu  -->\r\n                    <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n                        @for(tr of vm.primaryActions();track $index)\r\n                        {\r\n                        <ax-button [text]=\"tr.title\" [color]=\"tr.color\" (onClick)=\"vm.executeCommand(tr.name)\">\r\n                            <ax-prefix>\r\n                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                            </ax-prefix>\r\n                        </ax-button>\r\n                        }\r\n                        @if(vm.secondaryActions().length) {\r\n                        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n                            <ax-prefix>\r\n                                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n                            </ax-prefix>\r\n                            <ax-dropdown-panel>\r\n                                <ax-button-item-list>\r\n                                    @for(tr of vm.secondaryActions();track $index)\r\n                                    {\r\n                                    <ng-container>\r\n                                        @if(tr.separated)\r\n                                        {\r\n                                        <ax-divider></ax-divider>\r\n                                        }\r\n                                        <ax-button-item [text]=\"tr.title\" class=\"ax-font-semibold ax-text-{{tr.color}}\"\r\n                                            (onClick)=\"vm.executeCommand(tr.name)\">\r\n                                            <ax-prefix>\r\n                                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                                            </ax-prefix>\r\n                                        </ax-button-item>\r\n                                    </ng-container>\r\n                                    }\r\n                                </ax-button-item-list>\r\n                            </ax-dropdown-panel>\r\n                        </ax-button>\r\n                        }\r\n                    </div>\r\n                    <!-- Finish Action Menu  -->\r\n                </div>\r\n                <!----- Finish Toolbar  ----->\r\n                <!--------------------------------------------------------------->\r\n                <ax-tabs [look]=\"'classic'\" class=\"ax-mt-4 ax-font-semibold\">\r\n                    <ax-tab-item text=\"Overview\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"History\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"Comments\">\r\n                    </ax-tab-item>\r\n                </ax-tabs>\r\n            </div>\r\n            <!-- Begin Sections -->\r\n            <div class=\"ax-grid  ax-grid-cols-12     ax-gap-4\">\r\n                @for(section of vm.sections(); track section.name()) {\r\n                <div class=\"ax-card ax-shadow-md ax-mt-2\" [gridLayout]=\"section.layout()\">\r\n                    <ax-form #form>\r\n                        <axp-widgets-container [context]=\"vm.context()\">\r\n                            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\r\n                                <p>\r\n                                    <span class=\"!ax-text-lg ax-font-semibold \">{{ section.title()\r\n                                        }}</span>\r\n                                    <br>\r\n                                    @if(section.description()) {\r\n                                    <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description()\r\n                                        }}</span>\r\n                                    }\r\n                                </p>\r\n                                @if(section.editable()) {\r\n                                <ax-button class=\"ax-xs\" color=\"ghost\" [look]=\"'blank'\"\r\n                                    (onClick)=\"vm.executeCommand('modify-entity-section',section)\">\r\n                                    <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\r\n                                </ax-button>\r\n                                }\r\n                            </div>\r\n                            <div class=\"ax-card-body !ax-grid  !ax-grid-cols-12  !ax-gap-4\">\r\n                                @for(attr of section.props(); track $index) {\r\n                                <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\r\n                                    <div>\r\n                                        <div>\r\n                                            <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"ax-text-neutral-500\">\r\n                                        <axp-widget-renderer [node]=\"attr.node()\"> </axp-widget-renderer>\r\n                                    </div>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </axp-widgets-container>\r\n                    </ax-form>\r\n                </div>\r\n                }\r\n            </div>\r\n            <!-- Finish Sections  -->\r\n            <!--------------------------------------------------------------->\r\n            @if(vm.relatedEntities().length)\r\n            {\r\n            <ax-tabs [look]=\"'default'\" class=\"ax-mt-2 ax-font-semibold\" #tab\r\n                (onActiveTabChanged)=\"handleActiveTabChanged($event)\">\r\n                @for(e of vm.relatedEntities();track $index;let index= $index){\r\n                <ax-tab-item [text]=\"e.title()\" [key]=\"index.toString()\">\r\n                </ax-tab-item>\r\n                }\r\n            </ax-tabs>\r\n            @for(e of vm.relatedEntities();track $index;let index= $index){\r\n            <div [class.ax-hidden]=\"$index!=selectedTabIndex()\">\r\n                <axp-entity-detail-list-view [viewModel]=\"e\"></axp-entity-detail-list-view>\r\n            </div>\r\n            }\r\n            }\r\n\r\n        </div>\r\n    </ax-content>\r\n</ax-drawer-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i7.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i7.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4$3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4$3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i9.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i9.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type:
                 //
                 AXPLayoutBuilderModule }, { kind: "component", type: i8$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "variables", "functions"], outputs: ["contextChange"] }, { kind: "component", type: i8$1.AXPWidgetRendererComponent, selector: "axp-widget-renderer", inputs: ["node"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[gridLayout]", inputs: ["gridLayout"] }, { kind: "component", type:
                 //
@@ -367,7 +370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         AXPGridLayoutDirective,
                         //
                         AXPEntityDetailListViewComponent
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-drawer-container>\r\n    <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n      *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n      <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n        <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n        <ax-tabs look=\"with-line\" location=\"start\">\r\n          @for(tab of (loader.sections$ | async); track tab.name)\r\n          {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n            [disabled]=\"editForm.context\">\r\n          </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n      </ax-content>\r\n    </ax-drawer> -->\r\n    <ax-content #content class=\"ax-overflow-x-hidden\">\r\n        <div\r\n            class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n            <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n                [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyOffset]=\"50\"\r\n                [stickyParent]=\"content.getHostElement()\">\r\n                <!-------- Begin Toolbar  -------->\r\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n                    <!-------- Begin Title  -------->\r\n                    <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n                        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\r\n                            <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title()}}</div>\r\n                            @if(vm.description())\r\n                            {\r\n                            <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">{{\r\n                                vm.description() }}</div>\r\n                            }\r\n                            <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\"\r\n                                [class.ax-hidden]=\"isSM | async\">\r\n                                <ng-template #divider>\r\n                                    <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                                </ng-template>\r\n                                @for(b of vm.beardcrumbs();track $index;let last=$last)\r\n                                {\r\n                                <ax-breadcrumbs-item [active]=\"last\" [class.!ax-font-semibold]=\"last\"\r\n                                    [class.!ax-text-neutral-600]=\"last\" [routerLink]=\"b.url\">\r\n                                    @if(b.icon)\r\n                                    {\r\n                                    <i [class]=\"b.icon\"></i>\r\n                                    }\r\n                                    {{b.title}}\r\n                                </ax-breadcrumbs-item>\r\n                                }\r\n                            </ax-breadcrumbs>\r\n                        </div>\r\n                    </div>\r\n                    <!-------- Finish Title  -------->\r\n                    <!--------------------------------------------------------------->\r\n                    <!-- Begin Action Menu  -->\r\n                    <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n                        @for(tr of vm.primaryActions();track $index)\r\n                        {\r\n                        <ax-button [text]=\"tr.title\" [color]=\"tr.color\">\r\n                            <ax-prefix>\r\n                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                            </ax-prefix>\r\n                        </ax-button>\r\n                        }\r\n                        @if(vm.secondaryActions().length) {\r\n                        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n                            <ax-prefix>\r\n                                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n                            </ax-prefix>\r\n                            <ax-dropdown-panel>\r\n                                <ax-button-item-list>\r\n                                    @for(tr of vm.secondaryActions();track $index)\r\n                                    {\r\n                                    <ng-container>\r\n                                        @if(tr.separated)\r\n                                        {\r\n                                        <ax-divider></ax-divider>\r\n                                        }\r\n                                        <ax-button-item [text]=\"tr.title\" class=\"ax-font-semibold ax-text-{{tr.color}}\"\r\n                                            (onClick)=\"vm.executeCommand(tr.name)\">\r\n                                            <ax-prefix>\r\n                                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                                            </ax-prefix>\r\n                                        </ax-button-item>\r\n                                    </ng-container>\r\n                                    }\r\n                                </ax-button-item-list>\r\n                            </ax-dropdown-panel>\r\n                        </ax-button>\r\n                        }\r\n                    </div>\r\n                    <!-- Finish Action Menu  -->\r\n                </div>\r\n                <!----- Finish Toolbar  ----->\r\n                <!--------------------------------------------------------------->\r\n                <ax-tabs [look]=\"'classic'\" class=\"ax-mt-4 ax-font-semibold\">\r\n                    <ax-tab-item text=\"Overview\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"History\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"Comments\">\r\n                    </ax-tab-item>\r\n                </ax-tabs>\r\n            </div>\r\n            <!-- Begin Sections -->\r\n            <div class=\"ax-grid  ax-grid-cols-12     ax-gap-4\">\r\n                @for(section of vm.sections(); track section.name()) {\r\n                <div class=\"ax-card ax-shadow-md ax-mt-2\" [gridLayout]=\"section.layout()\">\r\n                    <ax-form #form>\r\n                        <axp-widgets-container [context]=\"vm.context()\">\r\n                            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\r\n                                <p>\r\n                                    <span class=\"!ax-text-lg ax-font-semibold \">{{ section.title()\r\n                                        }}</span>\r\n                                    <br>\r\n                                    @if(section.description()) {\r\n                                    <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description()\r\n                                        }}</span>\r\n                                    }\r\n                                </p>\r\n                                @if(section.editable()) {\r\n                                <ax-button class=\"ax-xs\" color=\"ghost\" [look]=\"'blank'\"\r\n                                    (onClick)=\"vm.executeCommand('modify-entity-section',section)\">\r\n                                    <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\r\n                                </ax-button>\r\n                                }\r\n                            </div>\r\n                            <div class=\"ax-card-body !ax-grid  !ax-grid-cols-12  !ax-gap-4\">\r\n                                @for(attr of section.props(); track $index) {\r\n                                <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\r\n                                    <div>\r\n                                        <div>\r\n                                            <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"ax-text-neutral-500\">\r\n                                        <axp-widget-renderer [node]=\"attr.node()\"> </axp-widget-renderer>\r\n                                    </div>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </axp-widgets-container>\r\n                    </ax-form>\r\n                </div>\r\n                }\r\n            </div>\r\n            <!-- Finish Sections  -->\r\n            <!--------------------------------------------------------------->\r\n            @if(vm.relatedEntities().length)\r\n            {\r\n            <ax-tabs [look]=\"'default'\" class=\"ax-mt-2 ax-font-semibold\" #tab\r\n                (onActiveTabChanged)=\"handleActiveTabChanged($event)\">\r\n                @for(e of vm.relatedEntities();track $index;let index= $index){\r\n                <ax-tab-item [text]=\"e.title()\" [key]=\"index.toString()\">\r\n                </ax-tab-item>\r\n                }\r\n            </ax-tabs>\r\n            @for(e of vm.relatedEntities();track $index;let index= $index){\r\n            <div [class.ax-hidden]=\"$index!=selectedTabIndex()\">\r\n                <axp-entity-detail-list-view [viewModel]=\"e\"></axp-entity-detail-list-view>\r\n            </div>\r\n            }\r\n            }\r\n\r\n        </div>\r\n    </ax-content>\r\n</ax-drawer-container>" }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-drawer-container>\r\n    <!-- <ax-drawer #drawer location=\"start\" [collapsed]=\"!(isOpen | async)\" [mode]=\" (isSM | async) ? 'overlay' : 'push'\"\r\n      *ngIf=\"loader.hasSections$ | async\" (collapsedChange)=\"handleCollapsedChange($event)\">\r\n      <ax-content class=\"ax-border-e ax-p-6 ax-w-64\">\r\n        <p class=\"ax-text-xl ax-font-bold ax-mb-6\">{{loader.sectionTitle}}</p>\r\n        <ax-tabs look=\"with-line\" location=\"start\">\r\n          @for(tab of (loader.sections$ | async); track tab.name)\r\n          {\r\n          <ax-tab-item [text]=\"tab.title\" [active]=\"isActive(tab)\" (onClick)=\"handleMenuClick($event,tab)\"\r\n            [disabled]=\"editForm.context\">\r\n          </ax-tab-item>\r\n          }\r\n        </ax-tabs>\r\n      </ax-content>\r\n    </ax-drawer> -->\r\n    <ax-content #content class=\"ax-overflow-x-hidden\">\r\n        <div\r\n            class=\"ax-flex ax-flex-col ax-gap-4 ax-min-h-full ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n            <div class=\"ax-flex ax-flex-col ax-pt-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n                [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyOffset]=\"50\"\r\n                [stickyParent]=\"content.getHostElement()\">\r\n                <!-------- Begin Toolbar  -------->\r\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n                    <!-------- Begin Title  -------->\r\n                    <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n                        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\r\n                            <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title()}}</div>\r\n                            @if(vm.description())\r\n                            {\r\n                            <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">{{\r\n                                vm.description() }}</div>\r\n                            }\r\n                            <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\"\r\n                                [class.ax-hidden]=\"isSM | async\">\r\n                                <ng-template #divider>\r\n                                    <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                                </ng-template>\r\n                                @for(b of vm.beardcrumbs();track $index;let last=$last)\r\n                                {\r\n                                <ax-breadcrumbs-item [active]=\"last\" [class.!ax-font-semibold]=\"last\"\r\n                                    [class.!ax-text-neutral-600]=\"last\" [routerLink]=\"b.url\">\r\n                                    @if(b.icon)\r\n                                    {\r\n                                    <i [class]=\"b.icon\"></i>\r\n                                    }\r\n                                    {{b.title}}\r\n                                </ax-breadcrumbs-item>\r\n                                }\r\n                            </ax-breadcrumbs>\r\n                        </div>\r\n                    </div>\r\n                    <!-------- Finish Title  -------->\r\n                    <!--------------------------------------------------------------->\r\n                    <!-- Begin Action Menu  -->\r\n                    <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n                        @for(tr of vm.primaryActions();track $index)\r\n                        {\r\n                        <ax-button [text]=\"tr.title\" [color]=\"tr.color\" (onClick)=\"vm.executeCommand(tr.name)\">\r\n                            <ax-prefix>\r\n                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                            </ax-prefix>\r\n                        </ax-button>\r\n                        }\r\n                        @if(vm.secondaryActions().length) {\r\n                        <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n                            <ax-prefix>\r\n                                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n                            </ax-prefix>\r\n                            <ax-dropdown-panel>\r\n                                <ax-button-item-list>\r\n                                    @for(tr of vm.secondaryActions();track $index)\r\n                                    {\r\n                                    <ng-container>\r\n                                        @if(tr.separated)\r\n                                        {\r\n                                        <ax-divider></ax-divider>\r\n                                        }\r\n                                        <ax-button-item [text]=\"tr.title\" class=\"ax-font-semibold ax-text-{{tr.color}}\"\r\n                                            (onClick)=\"vm.executeCommand(tr.name)\">\r\n                                            <ax-prefix>\r\n                                                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                                            </ax-prefix>\r\n                                        </ax-button-item>\r\n                                    </ng-container>\r\n                                    }\r\n                                </ax-button-item-list>\r\n                            </ax-dropdown-panel>\r\n                        </ax-button>\r\n                        }\r\n                    </div>\r\n                    <!-- Finish Action Menu  -->\r\n                </div>\r\n                <!----- Finish Toolbar  ----->\r\n                <!--------------------------------------------------------------->\r\n                <ax-tabs [look]=\"'classic'\" class=\"ax-mt-4 ax-font-semibold\">\r\n                    <ax-tab-item text=\"Overview\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"History\">\r\n                    </ax-tab-item>\r\n                    <ax-tab-item text=\"Comments\">\r\n                    </ax-tab-item>\r\n                </ax-tabs>\r\n            </div>\r\n            <!-- Begin Sections -->\r\n            <div class=\"ax-grid  ax-grid-cols-12     ax-gap-4\">\r\n                @for(section of vm.sections(); track section.name()) {\r\n                <div class=\"ax-card ax-shadow-md ax-mt-2\" [gridLayout]=\"section.layout()\">\r\n                    <ax-form #form>\r\n                        <axp-widgets-container [context]=\"vm.context()\">\r\n                            <div class=\"ax-card-header !ax-py-2 !ax-px-4\">\r\n                                <p>\r\n                                    <span class=\"!ax-text-lg ax-font-semibold \">{{ section.title()\r\n                                        }}</span>\r\n                                    <br>\r\n                                    @if(section.description()) {\r\n                                    <span class=\"ax-text-sm ax-font-normal ax-text-gray-500\">{{ section.description()\r\n                                        }}</span>\r\n                                    }\r\n                                </p>\r\n                                @if(section.editable()) {\r\n                                <ax-button class=\"ax-xs\" color=\"ghost\" [look]=\"'blank'\"\r\n                                    (onClick)=\"vm.executeCommand('modify-entity-section',section)\">\r\n                                    <ax-icon class=\"fa-solid fa-pen ax-text-gray-600\"> </ax-icon>\r\n                                </ax-button>\r\n                                }\r\n                            </div>\r\n                            <div class=\"ax-card-body !ax-grid  !ax-grid-cols-12  !ax-gap-4\">\r\n                                @for(attr of section.props(); track $index) {\r\n                                <div class=\"ax-flex ax-flex-col ax-gap-1\" [gridLayout]=\"attr.layout()\">\r\n                                    <div>\r\n                                        <div>\r\n                                            <span class=\"ax-font-semibold\">{{ attr.title() }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"ax-text-neutral-500\">\r\n                                        <axp-widget-renderer [node]=\"attr.node()\"> </axp-widget-renderer>\r\n                                    </div>\r\n                                </div>\r\n                                }\r\n                            </div>\r\n                        </axp-widgets-container>\r\n                    </ax-form>\r\n                </div>\r\n                }\r\n            </div>\r\n            <!-- Finish Sections  -->\r\n            <!--------------------------------------------------------------->\r\n            @if(vm.relatedEntities().length)\r\n            {\r\n            <ax-tabs [look]=\"'default'\" class=\"ax-mt-2 ax-font-semibold\" #tab\r\n                (onActiveTabChanged)=\"handleActiveTabChanged($event)\">\r\n                @for(e of vm.relatedEntities();track $index;let index= $index){\r\n                <ax-tab-item [text]=\"e.title()\" [key]=\"index.toString()\">\r\n                </ax-tab-item>\r\n                }\r\n            </ax-tabs>\r\n            @for(e of vm.relatedEntities();track $index;let index= $index){\r\n            <div [class.ax-hidden]=\"$index!=selectedTabIndex()\">\r\n                <axp-entity-detail-list-view [viewModel]=\"e\"></axp-entity-detail-list-view>\r\n            </div>\r\n            }\r\n            }\r\n\r\n        </div>\r\n    </ax-content>\r\n</ax-drawer-container>" }]
         }] });
 var entityMasterSingleView_component = /*#__PURE__*/Object.freeze({
@@ -548,6 +551,9 @@ class AXPEntityMasterListViewComponent {
     async handleSelectedRowsChange(rows) {
         this.vm.selectedItems.set(rows);
     }
+    ngOnDestroy() {
+        this.vm.destroy();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityMasterListViewComponent, deps: [{ token: i1$2.AXActionSheetService }, { token: i3$1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPEntityMasterListViewComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], ngImport: i0, template: "<ax-drawer-container>\r\n  <ax-content class=\"ax-flex ax-flex-col ax-overflow-hidden\" #content>\r\n    <div\r\n      class=\"ax-flex ax-flex-col ax-gap-4 ax-px-4 ax-pb-4 md:ax-px-6 ax-bg-surface   ax-border-b md:ax-border-0 md:ax-bg-default\">\r\n      <div class=\"ax-flex ax-flex-col ax-pt-4 ax-gap-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\" #sticky=\"axpSticky\"\r\n        [axpSticky]=\"'ax-bg-surface ax-px-6 ax-py-3 -ax-mx-6 ax-shadow-xl'\" [stickyParent]=\"content.getHostElement()\">\r\n        <!-------- Begin Toolbar  -------->\r\n        <!-------- Begin Line 1  -------->\r\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n          <!-------- Begin Title  -------->\r\n          <div class=\"ax-flex ax-gap-1 ax-items-center\">\r\n            <div class=\"ax-flex ax-flex-col ax-gap-2 ax-transition\">\r\n              <div class=\"ax-text-xl md:ax-text-3xl ax-font-bold\">{{ vm.title()}}</div>\r\n              @if(vm.description())\r\n              {\r\n              <div class=\"ax-text-sm ax-text-neutral-600\" [class.ax-hidden]=\"sticky.isSticky\">{{\r\n                vm.description() }}</div>\r\n              }\r\n              <ax-breadcrumbs class=\"child:ax-font-normal child:ax-text-neutral-400\" [class.ax-hidden]=\"isSM | async\">\r\n                <ng-template #divider>\r\n                  <i class=\"fa-solid fa-chevron-right ax-text-xs ax-mx-2\"></i>\r\n                </ng-template>\r\n                @for(b of vm.beardcrumbs();track $index;let last=$last)\r\n                {\r\n                <ax-breadcrumbs-item [active]=\"last\" [class.!ax-font-semibold]=\"last\"\r\n                  [class.!ax-text-neutral-600]=\"last\" [routerLink]=\"b.url\">\r\n                  @if(b.icon)\r\n                  {\r\n                  <i [class]=\"b.icon\"></i>\r\n                  }\r\n                  {{b.title}}\r\n                </ax-breadcrumbs-item>\r\n                }\r\n              </ax-breadcrumbs>\r\n            </div>\r\n          </div>\r\n          <!-------- Finish Title  -------->\r\n          <!--------------------------------------------------------------->\r\n          <!-- Begin Action Menu  -->\r\n          <div class=\"ax-flex ax-items-center ax-gap-3\">\r\n            @for(tr of vm.primaryActions();track $index)\r\n            {\r\n            <ax-button [text]=\"tr.title\" [color]=\"tr.color\" (onClick)=\"vm.executeCommand(tr.name)\">\r\n              <ax-prefix>\r\n                <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n              </ax-prefix>\r\n            </ax-button>\r\n            }\r\n            @if(vm.secondaryActions().length) {\r\n            <ax-button [text]=\"(isSM | async) ? null : 'Actions'\" color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n              </ax-prefix>\r\n              <ax-dropdown-panel>\r\n                <ax-button-item-list>\r\n                  @for(tr of vm.secondaryActions();track $index;let first=$first)\r\n                  {\r\n                  <ng-container>\r\n                    @if(tr.separated && !$first)\r\n                    {\r\n                    <ax-divider></ax-divider>\r\n                    }\r\n                    <ax-button-item [text]=\"tr.title\" class=\"ax-font-semibold ax-text-{{tr.color}}\"\r\n                      (onClick)=\"vm.executeCommand(tr.name)\">\r\n                      <ax-prefix>\r\n                        <ax-icon [icon]=\"tr.icon\"> </ax-icon>\r\n                      </ax-prefix>\r\n                    </ax-button-item>\r\n                  </ng-container>\r\n                  }\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          <!-- Finish Action Menu  -->\r\n        </div>\r\n\r\n        <!-------- Finish Line 1  -------->\r\n\r\n        <!-------- Begin Line 2 -------->\r\n        <div class=\"ax-flex ax-justify-between ax-items-center\">\r\n          <div class=\"ax-flex ax-justify-start ax-items-center ax-gap-4\">\r\n            <!-------- Begin Selection  -------->\r\n\r\n            @if(vm.hasSelectedItems())\r\n            {\r\n            <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\r\n              <span class=\"ax-text-xl ax-font-bold\"> {{ vm.selectedItems().length }} Items Selected </span>\r\n              <span (click)=\"vm.clearSelection()\"\r\n                class=\"ax-text-sm ax-text-primary dark:ax-text-primary-300 ax-underline ax-cursor-pointer\">Clear\r\n                Items</span>\r\n            </div>\r\n\r\n            <!-------- Finish Selection  -------->\r\n\r\n            } @else {\r\n\r\n            <!-------- Begin View  -------->\r\n\r\n            <ax-button [text]=\"vm.view().title\" #views color=\"ghost\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-eye\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <i class=\"fa-solid fa-caret-down\"></i>\r\n              </ax-suffix>\r\n              <ax-dropdown-panel [adaptivityEnabled]=\"true\">\r\n                <ax-button-item-list class=\"ax-bg-surface\">\r\n                  <ax-title class=\"ax-font-bold ax-opacity-100\">Public Views</ax-title>\r\n                  <ax-button-item *ngFor=\"let v of vm.views()\" [text]=\"v.title\" [class.ax-bg-on-surface]=\"vm.view()==v\"\r\n                    (onClick)=\"vm.setView(v.name)\"></ax-button-item>\r\n                  <!-- <ax-title class=\"ax-font-bold ax-opacity-100\" *ngIf=\"hasCustomViews$ | async\">Created by me</ax-title>\r\n                <ax-button-item class=\"ax-pe-4 ax-flex ax-justify-between\" *ngFor=\"let v of customViews$ | async\"\r\n                  [text]=\"v.title\" [class.ax-bg-on-surface]=\"(view$ | async) == v\" (onClick)=\"loader.setView(v.name)\">\r\n                  <ax-suffix>\r\n                    <ax-button (onClick)=\"updateViewPopup($event, v)\" class=\"ax-xs\" look=\"none\">\r\n                      <ax-icon class=\"far fa-edit\"> </ax-icon>\r\n                    </ax-button>\r\n                  </ax-suffix>\r\n                </ax-button-item> -->\r\n                  <!-- <ng-container *feature=\"'axp-entity-list-custom-view'\">\r\n                  <ax-divider></ax-divider>\r\n                  <ax-button-item text=\"Add Custom View\" (onClick)=\"addCustomViewPopup()\"\r\n                    class=\"ax-font-semibold ax-text-primary\"></ax-button-item>\r\n                </ng-container> -->\r\n                </ax-button-item-list>\r\n              </ax-dropdown-panel>\r\n            </ax-button>\r\n            <!-------- Finish View  -------->\r\n\r\n            <!-------- Begin Inline Search   -------->\r\n\r\n            @if(vm.hasInlineFilters())\r\n            {\r\n            <div class=\"ax-w-72\" *feature=\"'axp-entity-list-inline-filter'\">\r\n              <ax-search-box [placeholder]=\"'Search on '+vm.inlineFiltersPlaceholders().join(', ')\"\r\n                (onValueChanged)=\"handleChangeSearchValue($event)\"><ax-clear-button></ax-clear-button></ax-search-box>\r\n            </div>\r\n            }\r\n            }\r\n            <!-------- Finish Inline Search -------->\r\n          </div>\r\n\r\n          <!-- Begin View Action Menu  -->\r\n          @if(!vm.hasSelectedItems())\r\n          {\r\n          <div class=\"ax-flex ax-gap-3\">\r\n            <ax-button text=\"Columns\" color=\"ghost\" (onClick)=\"columnsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge [text]=\"vm.visibleColumnCount().toString()\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            <ax-button text=\"Filters\" color=\"ghost\" (onClick)=\"conditionsDrawer.open()\"\r\n              *feature=\"'axp-entity-list-advance-filter'\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-sliders\"></i>\r\n              </ax-prefix>\r\n              <ax-suffix>\r\n                <ax-badge text=\"3\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n            </ax-button>\r\n            @if(vm.canSort())\r\n            {\r\n            <ax-button text=\"Sort\" color=\"ghost\" (onClick)=\"sortsDrawer.open()\">\r\n              <ax-prefix>\r\n                <i class=\"fa-solid fa-bars-sort\"></i>\r\n              </ax-prefix>\r\n              @if(vm.sortedCount())\r\n              {\r\n              <ax-suffix>\r\n                <ax-badge [text]=\"vm.sortedCount().toString()\" color=\"primary\"></ax-badge>\r\n              </ax-suffix>\r\n              }\r\n            </ax-button>\r\n            }\r\n          </div>\r\n          }\r\n          <!-- Finish View Action Menu  -->\r\n        </div>\r\n        <!-------- Finish Line 2  -------->\r\n\r\n        <!----- Finish Toolbar  ----->\r\n\r\n      </div>\r\n    </div>\r\n    <!----- Begin DataTable  ----->\r\n    <div class=\"ax-flex ax-flex-1 ax-px-6 ax-py-4  ax-overflow-auto\">\r\n      <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [paging]=\"true\" [fetchDataMode]=\"'manual'\"\r\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"vm.dataSource\"\r\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\r\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\r\n        @for(col of vm.columns();track col.name) {\r\n        @if(col.visible)\r\n        {\r\n        <axp-widget-column-renderer [caption]=\"col.title\" [node]=\"col.node()\"></axp-widget-column-renderer>\r\n        }\r\n        }\r\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\r\n          (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\r\n      </ax-data-table>\r\n    </div>\r\n    <!----- Finish DataTable  ----->\r\n  </ax-content>\r\n\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('columns', $event)\" #columnsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-columns [viewModel]=\"vm\" (onClosed)=\"columnsDrawer.close()\"></axp-list-view-option-columns>\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('conditions', $event)\" #conditionsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[25vw] ax-border-e\">\r\n      <!-- <axp-list-view-option-conditions [loader]=\"loader\"\r\n        (onClosed)=\"conditionsDrawer.close()\"></axp-list-view-option-conditions> -->\r\n    </ax-content>\r\n  </ax-drawer>\r\n  <ax-drawer (collapsedChange)=\"closeDrawer('sorts', $event)\" #sortsDrawer location=\"end\" [mode]=\"'overlay'\">\r\n    <ax-content class=\"ax-w-[85vw] md:ax-w-[45vw] lg:ax-w-[35vw] 2xl:ax-w-[20vw] ax-border-e\">\r\n      <axp-list-view-option-sorting (onClosed)=\"sortsDrawer.close()\" [viewModel]=\"vm\"></axp-list-view-option-sorting>\r\n    </ax-content>\r\n  </ax-drawer>\r\n</ax-drawer-container>", styles: [".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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: i4$3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4$3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i7$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i4.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "collapsed"], outputs: ["locationChange", "modeChange", "collapsedChange"] }, { kind: "component", type: i4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i9.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i9.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i11.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type:
                 //