@acorex/platform 20.3.0-next.4 → 20.3.0-next.6

package/fesm2022/acorex-platform-layout-entity.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, computed, signal, Injector, runInInjectionContext, EnvironmentInjector, viewChild, viewChildren, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, HostBinding, ElementRef, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, computed, signal, Injector, runInInjectionContext, EnvironmentInjector, viewChild, viewChildren, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, HostBinding, input, ElementRef, ApplicationRef, createComponent, ViewChild, NgModule } from '@angular/core';
 import { castArray, get, cloneDeep, set, merge, isNil, isEmpty, sortBy } from 'lodash-es';
-import * as i1$2 from '@acorex/cdk/common';
+import * as i1$1 from '@acorex/cdk/common';
 import { AXDataSource, AXCommonModule } from '@acorex/cdk/common';
 import { AXFormatService } from '@acorex/core/format';
-import { resolveActionLook, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPSettingService, AXPRefreshEvent, AXPReloadEvent, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
-import * as i1$4 from '@acorex/platform/core';
-import { AXPExpressionEvaluatorService, AXPPlatformScope, AXPDistributedEventListenerService, getChangedPaths, extractValue, setSmart } from '@acorex/platform/core';
+import { AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPSettingService, AXPRefreshEvent, AXPReloadEvent, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
+import * as i1$3 from '@acorex/platform/core';
+import { resolveActionLook, AXPExpressionEvaluatorService, AXPPlatformScope, AXPDistributedEventListenerService, getChangedPaths, extractValue, setSmart, AXPSystemActionType } from '@acorex/platform/core';
 import * as i2$2 from '@acorex/platform/workflow';
 import { AXPWorkflowService, ofType, createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import * as i3$1 from '@acorex/platform/layout/builder';
@@ -15,6 +15,7 @@ import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import { Subject, takeUntil } from 'rxjs';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import { AXPCommandService, AXPQueryService, provideCommandSetups, provideQuerySetups } from '@acorex/platform/runtime';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import * as i8 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXDialogService } from '@acorex/components/dialog';
@@ -31,11 +32,11 @@ import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY, AXP_ALLOW_CLEAR_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_ALLOW_MULTIPLE_PROPERTY, AXPFileUploaderWidgetService } from '@acorex/platform/widgets';
-import * as i1$3 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1 from '@acorex/components/loading';
+import * as i4$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i1$1 from '@acorex/components/badge';
+import * as i1 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
@@ -46,7 +47,7 @@ import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i6 from '@acorex/components/tag-box';
 import { AXTagBoxComponent, AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXValidationModule } from '@acorex/core/validation';
-import * as i4$1 from '@acorex/components/data-table';
+import * as i4$2 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -108,7 +109,7 @@ class AXPEntityCommandTriggerViewModel {
         this.name = `${typeof action.command === 'string' ? action.command : action.command.name}&${action.name}`;
         this.options = typeof action.command === 'object' ? action.command.options : undefined;
         this.metadata = typeof action.command === 'object' ? action.command.metadata : undefined;
-        const resolvedLook = resolveActionLook(action);
+        const resolvedLook = resolveActionLook(action.type);
         this.priority = action.priority;
         this.title = action.title;
         this.separated = action.separated ?? false;
@@ -1252,12 +1253,12 @@ class AXPEntityMasterListViewModel {
                     .map((c) => {
                     return {
                         ...c,
-                        width: columnWidthsMap.get(c.name),
-                        visible: columnVisibilityMap.get(c.name) ?? c.visible,
+                        width: columnWidthsMap.get(c.column?.options?.dataPath ?? c.name),
+                        visible: columnVisibilityMap.get(c.column?.options?.dataPath ?? c.name) ?? c.visible,
                     };
                 }) // Update visibility
-                    .sort((a, b) => columns.findIndex((col) => col.name === a.name) -
-                    columns.findIndex((col) => col.name === b.name)));
+                    .sort((a, b) => columns.findIndex((col) => col.name === (a.column?.options?.dataPath ?? a.name)) -
+                    columns.findIndex((col) => col.name === (b.column?.options?.dataPath ?? b.name))));
             }
             if (Array.isArray(sorts)) {
                 // sorts are AXPSortQuery[]; ensure we map by name
@@ -1278,10 +1279,25 @@ class AXPEntityMasterListViewModel {
                 updateSettings((prev) => {
                     const field = data.dataField.split('-')[1];
                     const newSettings = { ...prev };
-                    set(newSettings, `list.views.${this.view().name}.columns`, prev?.list?.views?.[this.view().name]?.columns?.map((c) => ({
+                    const existingColumns = prev?.list?.views?.[this.view().name]?.columns;
+                    const baseColumns = Array.isArray(existingColumns) && existingColumns.length
+                        ? existingColumns
+                        : this.allAvailableColumns().map((c) => ({
+                            name: c.column?.options?.dataPath ?? c.name,
+                            visible: c.visible,
+                            width: c.width,
+                        }));
+                    const updatedColumns = baseColumns.map((c) => ({
                         ...c,
                         width: c.name === field ? data.width : c.width,
-                    })));
+                    }));
+                    const x = this.allAvailableColumns().map((c) => ({
+                        name: c.column?.options?.dataPath ?? c.name,
+                        visible: c.visible,
+                        width: c.width,
+                    }));
+                    set(newSettings, `list.views.${this.view().name}.columns`, updatedColumns);
+                    console.log(newSettings, `list.views.${this.view().name}.columns`);
                     return newSettings;
                 });
                 break;
@@ -1289,7 +1305,7 @@ class AXPEntityMasterListViewModel {
                 updateSettings((prev) => {
                     const newSettings = { ...prev };
                     set(newSettings, `list.views.${this.view().name}.columns`, data.map((c) => ({
-                        name: c.name,
+                        name: c.column?.options?.dataPath ?? c.name,
                         visible: c.visible,
                         width: c.width,
                     })));
@@ -1485,6 +1501,12 @@ class AXPEntityMasterListViewModel {
         });
         this.columns.set(cloned);
     }
+    onColumnsOrderChanged(event) {
+        const columns = [...this.columns()];
+        moveItemInArray(columns, event.previousIndex - 1, event.currentIndex - 1);
+        this.columns.set(columns);
+        this.saveSettings('columnOrders', columns);
+    }
     resetSorts() {
         this.applyViewSorts();
     }
@@ -5114,7 +5136,7 @@ class AXPLookupWidgetViewComponent extends AXPValueWidgetComponent {
           <span class="ax-text-muted">---</span>
         }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetViewComponent, decorators: [{
             type: Component,
@@ -5278,7 +5300,7 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
         }
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: AXFormModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: AXFormModule }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetSelectorComponent, decorators: [{
             type: Component,
@@ -5817,9 +5839,9 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
       </ax-tag-box>
     }
   }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 //
-                AXButtonModule }, { kind: "component", type: i3$2.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: "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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                AXButtonModule }, { kind: "component", type: i3$2.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: "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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
@@ -5916,89 +5938,57 @@ var lookupWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPLookupWidgetEditComponent: AXPLookupWidgetEditComponent
 });
 
-class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
+class AXPEntityDetailPopoverComponent {
     constructor() {
-        super(...arguments);
         //#region ----   Dependencies   ----
         this.commandService = inject(AXPCommandService);
         this.queryService = inject(AXPQueryService);
         //#endregion
+        //#region ----   Inputs   ----
+        this.entity = input.required(...(ngDevMode ? [{ debugName: "entity" }] : []));
+        this.entityId = input.required(...(ngDevMode ? [{ debugName: "entityId" }] : []));
+        this.textField = input('title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.valueField = input('id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        this.item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
+        //#endregion
         //#region ----   View Children   ----
-        this.moreButton = viewChild('moreButton', ...(ngDevMode ? [{ debugName: "moreButton" }] : []));
-        this.morePopover = viewChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
         this.detailPopover = viewChild('detailPopover', ...(ngDevMode ? [{ debugName: "detailPopover" }] : []));
         //#endregion
-        //#region ----   Properties   ----
-        this.host = inject(ElementRef);
-        this.valueField = this.options['valueField'] ?? 'id';
-        this.textField = this.options['textField'] ?? 'title';
-        this.entity = this.options['entity'] ?? 'title';
-        this.columnName = this.options['columnName'] ?? 'title';
-        this.maxVisible = this.options['maxVisible'] ?? 2;
-        //#endregion
         //#region ----   Signals   ----
-        this.isMorePopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMorePopoverOpen" }] : []));
-        this.isDetailPopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDetailPopoverOpen" }] : []));
-        this.selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
-        this.selectedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedItemIndex" }] : []));
         this.entityDetails = signal(null, ...(ngDevMode ? [{ debugName: "entityDetails" }] : []));
         this.isLoadingDetails = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingDetails" }] : []));
-        //#endregion
-        //#region ----   Computed Properties   ----
-        this.displayItems = computed(() => isNil(this.rawValue)
-            ? []
-            : castArray(this.rawValue).map((item) => this.extractItem(item)).filter((c) => c != null), ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
-        this.allItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "allItems" }] : []));
-        this.visibleItems = computed(() => {
-            const items = this.allItems();
-            return items.slice(0, this.maxVisible);
-        }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
-        this.hasMoreItems = computed(() => {
-            return this.allItems().length > this.maxVisible;
-        }, ...(ngDevMode ? [{ debugName: "hasMoreItems" }] : []));
-        this.remainingItemsCount = computed(() => {
-            return this.allItems().length - this.maxVisible;
-        }, ...(ngDevMode ? [{ debugName: "remainingItemsCount" }] : []));
-        this.HOVER_DELAY = 3000; // 3 seconds
-    }
-    //#endregion
-    //#region ----   Lifecycle Methods   ----
-    ngOnDestroy() {
-        this.clearHoverTimeout();
-        this.clearViewDetailsHoverTimeout();
-        this.clearVisibleItemHoverTimeout();
+        this.isDetailPopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDetailPopoverOpen" }] : []));
     }
     //#endregion
     //#region ----   Public Methods   ----
-    showMoreItems() {
-        this.closeDetailPopover();
-        this.clearAllHoverTimeouts(); // Clear all hover timeouts
-        this.openMorePopover();
-    }
-    onMorePopoverOpenChange(event) {
-        this.isMorePopoverOpen.set(event);
-        // Clear all hover timeouts when popover closes
-        if (!event) {
-            this.clearAllHoverTimeouts();
-        }
-    }
-    async showItemDetail(item, index) {
-        const columnData = this.rowData[this.columnName];
-        const id = Array.isArray(columnData) ? columnData[index] : columnData;
-        //
-        this.selectedItem.set(item);
-        this.selectedItemIndex.set(index);
+    /**
+     * Show the entity detail popover
+     */
+    async show(target) {
         this.isDetailPopoverOpen.set(true);
         this.isLoadingDetails.set(true);
         this.entityDetails.set(null);
-        this.closeMorePopover();
-        this.clearAllHoverTimeouts(); // Clear all hover timeouts
+        // Open the popover immediately to display loading state
+        if (this.detailPopover()) {
+            const targetElement = target instanceof ElementRef ? target.nativeElement : target;
+            this.detailPopover().target = targetElement;
+            this.detailPopover().open();
+        }
+        else {
+            // In case the view child is not ready yet, schedule an immediate open
+            setTimeout(() => {
+                if (this.detailPopover()) {
+                    const targetElement = target instanceof ElementRef ? target.nativeElement : target;
+                    this.detailPopover().target = targetElement;
+                    this.detailPopover().open();
+                }
+            }, 0);
+        }
         // Fetch entity details using the query
         try {
-            this.detailPopover;
             const result = await this.queryService.fetch('Entity:GetDetails', {
-                entity: this.entity,
-                id: id
+                entity: this.entity(),
+                id: this.entityId()
             });
             if (result?.success) {
                 this.entityDetails.set(result);
@@ -6010,21 +6000,11 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
         finally {
             this.isLoadingDetails.set(false);
         }
-        setTimeout(() => {
-            if (this.detailPopover()) {
-                this.detailPopover().target = this.host.nativeElement;
-                this.detailPopover().open();
-            }
-        }, 100);
     }
-    onDetailPopoverOpenChange(event) {
-        this.isDetailPopoverOpen.set(event);
-        // Clear all hover timeouts when popover closes
-        if (!event) {
-            this.clearAllHoverTimeouts();
-        }
-    }
-    closeDetailPopover() {
+    /**
+     * Hide the entity detail popover
+     */
+    hide() {
         this.isDetailPopoverOpen.set(false);
         this.entityDetails.set(null);
         this.isLoadingDetails.set(false);
@@ -6032,27 +6012,108 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
             this.detailPopover().close();
         }
     }
+    onDetailPopoverOpenChange(event) {
+        this.isDetailPopoverOpen.set(event);
+        if (!event) {
+            this.entityDetails.set(null);
+            this.isLoadingDetails.set(false);
+        }
+    }
     async navigateToDetails() {
-        const index = this.selectedItemIndex();
-        const columnData = this.rowData[this.columnName];
-        const id = Array.isArray(columnData) ? columnData[index] : columnData;
-        if (id) {
+        if (this.entityId()) {
             await this.commandService.execute("Entity:OpenDetails", {
-                entity: this.entity,
-                data: { id },
+                entity: this.entity(),
+                data: { id: this.entityId() },
             });
-            this.closeDetailPopover();
-        }
-    }
-    handleItemClick(index) {
-        const items = this.allItems();
-        if (index < items.length) {
-            const item = items[index];
-            this.showItemDetail(item, index);
+            this.hide();
         }
     }
     //#endregion
     //#region ----   Helper Methods   ----
+    /**
+     * Returns true if a value is meaningful for display (non-empty/non-null).
+     */
+    hasMeaningfulValue(value) {
+        if (value === null || value === undefined)
+            return false;
+        if (typeof value === 'string')
+            return value.trim().length > 0;
+        if (Array.isArray(value))
+            return value.length > 0;
+        if (typeof value === 'object')
+            return Object.keys(value).length > 0;
+        return true;
+    }
+    /**
+     * Calculates an importance score for a property based on its widget type,
+     * whether it currently has a meaningful value, and metadata like title.
+     */
+    getPropertyImportanceScore(prop, data) {
+        const schema = prop.showAs?.type ?? prop.schema;
+        const importanceMap = {
+            [AXPWidgetsCatalog.text]: 100,
+            [AXPWidgetsCatalog.select]: 95,
+            [AXPWidgetsCatalog.number]: 90,
+            [AXPWidgetsCatalog.email]: 88,
+            [AXPWidgetsCatalog.phone]: 87,
+            [AXPWidgetsCatalog.link]: 86,
+            [AXPWidgetsCatalog.dateTime]: 85,
+            [AXPWidgetsCatalog.richText]: 80,
+            [AXPWidgetsCatalog.largeText]: 75,
+            [AXPWidgetsCatalog.contact]: 74,
+            [AXPWidgetsCatalog.toggle]: 65,
+            [AXPWidgetsCatalog.checkbox]: 60,
+            [AXPWidgetsCatalog.color]: 40,
+        };
+        let score = importanceMap[schema] ?? 50;
+        // Prefer fields that actually have a value for the current entity
+        if (this.hasMeaningfulValue(data?.[prop.name])) {
+            score += 20;
+        }
+        // Slight preference for human-friendly titled fields
+        const hasTitle = prop.title && prop.title !== prop.name;
+        if (hasTitle) {
+            score += 5;
+        }
+        return score;
+    }
+    /**
+     * Calculates a name-based importance score to prioritize common key fields
+     * like title, description, status, and important dates.
+     * Name priority MUST come before widget-type priority.
+     */
+    getNameImportanceScore(prop) {
+        const rawName = (prop.options?.dataPath ?? prop.name ?? '').toString();
+        const normalized = rawName.toLowerCase();
+        const collapsed = normalized.replace(/[^a-z0-9]/g, '');
+        const priorities = [
+            { keys: ['title', 'name', 'subject', 'code'], score: 120 },
+            { keys: ['description', 'details', 'summary', 'remark', 'remarks'], score: 110 },
+            { keys: ['status', 'state', 'phase', 'stage'], score: 105 },
+            { keys: ['priority', 'severity', 'rank'], score: 100 },
+            { keys: ['expirydate', 'expirationdate', 'expiredate', 'duedate', 'deadline', 'enddate'], score: 98 },
+            { keys: ['startdate', 'createdat', 'createdon', 'updatedat', 'updatedon'], score: 95 },
+            { keys: ['owner', 'assignee', 'assignedto'], score: 92 },
+            { keys: ['email', 'phone', 'mobile', 'contact'], score: 90 },
+            { keys: ['category', 'type', 'label', 'tag', 'note', 'notes'], score: 85 },
+            { keys: ['primary', 'active', 'active', 'enabled', 'archived', 'deleted', 'locked', 'disabled'], score: -2 } // send to bottom,
+        ];
+        for (const group of priorities) {
+            for (const key of group.keys) {
+                if (collapsed === key || collapsed.endsWith(key)) {
+                    return group.score;
+                }
+            }
+        }
+        // Pattern-based priorities (generic forms like validFrom/validTo, start*/end*)
+        if (collapsed.endsWith('from') || collapsed.endsWith('to')) {
+            return 97;
+        }
+        if (collapsed.startsWith('start') || collapsed.startsWith('end')) {
+            return 96;
+        }
+        return 0;
+    }
     getEntityPropertiesWithWidgets() {
         const data = this.entityDetails()?.entityData;
         const entityDefinition = this.entityDetails()?.entityDefinition;
@@ -6060,19 +6121,20 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
             return [];
         // Get properties from entity definition and filter by importance
         const importantProperties = (entityDefinition.columns ?? [])
-            .map(prop => {
+            .map((prop, index) => {
             const propName = prop.options?.dataPath ?? prop.name;
             const schema = prop.showAs?.type ?? entityDefinition.properties.find(p => p.name === propName)?.schema.interface?.type;
             const title = prop.title ?? entityDefinition.properties.find(p => p.name === propName)?.title ?? prop.name;
             return {
                 ...prop,
                 schema,
-                title
+                title,
+                orderIndex: index
             };
         })
             .filter(prop => {
             // Exclude technical fields
-            if (prop.name === 'id' || prop.name === this.textField || prop.name === this.valueField) {
+            if (prop.name === 'id' || prop.name === this.textField() || prop.name === this.valueField()) {
                 return false;
             }
             // Only include properties that exist in the data
@@ -6108,18 +6170,26 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
             return false;
         })
             .sort((a, b) => {
-            // Sort by importance: properties with titles first, then by order if available
+            // Primary: name-based importance
+            const nameScoreA = this.getNameImportanceScore(a);
+            const nameScoreB = this.getNameImportanceScore(b);
+            if (nameScoreA !== nameScoreB)
+                return nameScoreB - nameScoreA;
+            // Secondary: widget/value/title based importance
+            const widgetScoreA = this.getPropertyImportanceScore(a, data);
+            const widgetScoreB = this.getPropertyImportanceScore(b, data);
+            if (widgetScoreA !== widgetScoreB)
+                return widgetScoreB - widgetScoreA;
+            const aHasValue = this.hasMeaningfulValue(data?.[a.name]);
+            const bHasValue = this.hasMeaningfulValue(data?.[b.name]);
+            if (aHasValue !== bHasValue)
+                return aHasValue ? -1 : 1;
             const aHasTitle = a.title && a.title !== a.name;
             const bHasTitle = b.title && b.title !== b.name;
-            if (aHasTitle && !bHasTitle)
-                return -1;
-            if (!aHasTitle && bHasTitle)
-                return 1;
-            // If both have titles, sort alphabetically
-            if (aHasTitle && bHasTitle) {
-                return a.title.localeCompare(b.title);
-            }
-            // Otherwise sort by name
+            if (aHasTitle !== bHasTitle)
+                return aHasTitle ? -1 : 1;
+            if ((a.orderIndex ?? 0) !== (b.orderIndex ?? 0))
+                return (a.orderIndex ?? 0) - (b.orderIndex ?? 0);
             return a.name.localeCompare(b.name);
         })
             .map(prop => {
@@ -6139,62 +6209,147 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
             .slice(0, 7); // Limit to 7 most important fields
         return importantProperties;
     }
-    formatEntityDataValue(value) {
-        if (value === null || value === undefined)
-            return '---';
-        if (typeof value === 'string')
-            return value;
-        if (typeof value === 'number')
-            return value.toString();
-        if (typeof value === 'boolean')
-            return value ? 'Yes' : 'No';
-        if (Array.isArray(value))
-            return `${value.length} items`;
-        if (typeof value === 'object')
-            return 'Object';
-        return String(value);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPEntityDetailPopoverComponent, isStandalone: true, selector: "axp-entity-detail-popover", inputs: { entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: true, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "detailPopover", first: true, predicate: ["detailPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-popover [openOn]=\"'manual'\" #detailPopover (openChange)=\"onDetailPopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[400px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold ax-text-on-lightest-surface\">\n        @if (entityDetails()?.entityData?.[textField()]) {\n          {{ entityDetails()?.entityData[textField()] }}\n        } @else {\n          {{ item()?.[textField()] }}\n        }\n      </h3>\n    </div>\n    @if (isLoadingDetails()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading details...</ax-loading>\n      </div>\n    } @else if (entityDetails()) {\n      <div class=\"ax-space-y-3 ax-mb-4\">\n        <!-- Important Entity Data -->\n        @if (entityDetails()?.entityData) {\n          <axp-widgets-container [context]=\"entityDetails()?.entityData\">\n            <div class=\"ax-space-y-2\">\n              @for (item of getEntityPropertiesWithWidgets(); track item.name) {\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\n                  <span class=\"ax-text-sm ax-font-medium\">{{ item.title | translate | async }}:</span>\n                  <div class=\"ax-flex-1 ax-ml-2 ax-max-w-48\">\n                    <ng-container axp-widget-renderer [node]=\"item.node\" [mode]=\"'view'\"></ng-container>\n                  </div>\n                </div>\n              }\n            </div>\n          </axp-widgets-container>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-2 ax-justify-end ax-sm\">\n        <ax-button [color]=\"'primary'\" [look]=\"'solid'\" text=\"Open Details\" (click)=\"navigateToDetails()\"> </ax-button>\n      </div>\n    }\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-detail-popover', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXButtonModule, AXPopoverModule, AXPLayoutBuilderModule, AXTranslationModule, AXLoadingModule], template: "<ax-popover [openOn]=\"'manual'\" #detailPopover (openChange)=\"onDetailPopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[400px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold ax-text-on-lightest-surface\">\n        @if (entityDetails()?.entityData?.[textField()]) {\n          {{ entityDetails()?.entityData[textField()] }}\n        } @else {\n          {{ item()?.[textField()] }}\n        }\n      </h3>\n    </div>\n    @if (isLoadingDetails()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <ax-loading>Loading details...</ax-loading>\n      </div>\n    } @else if (entityDetails()) {\n      <div class=\"ax-space-y-3 ax-mb-4\">\n        <!-- Important Entity Data -->\n        @if (entityDetails()?.entityData) {\n          <axp-widgets-container [context]=\"entityDetails()?.entityData\">\n            <div class=\"ax-space-y-2\">\n              @for (item of getEntityPropertiesWithWidgets(); track item.name) {\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\n                  <span class=\"ax-text-sm ax-font-medium\">{{ item.title | translate | async }}:</span>\n                  <div class=\"ax-flex-1 ax-ml-2 ax-max-w-48\">\n                    <ng-container axp-widget-renderer [node]=\"item.node\" [mode]=\"'view'\"></ng-container>\n                  </div>\n                </div>\n              }\n            </div>\n          </axp-widgets-container>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-2 ax-justify-end ax-sm\">\n        <ax-button [color]=\"'primary'\" [look]=\"'solid'\" text=\"Open Details\" (click)=\"navigateToDetails()\"> </ax-button>\n      </div>\n    }\n  </div>\n</ax-popover>\n" }]
+        }] });
+
+class AXPEntityDetailPopoverService {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.applicationRef = inject(ApplicationRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        //#endregion
+        //#region ----   Private Properties   ----
+        this.activePopoverRef = null;
     }
     //#endregion
-    //#region ----   Private Methods   ----
-    onMoreButtonMouseEnter() {
-        // Don't trigger hover if detail popover is already open
-        if (this.isDetailPopoverOpen()) {
-            return;
+    //#region ----   Public Methods   ----
+    /**
+     * Show entity detail popover
+     * @param target - The target element to position the popover
+     * @param options - Configuration options for the popover
+     */
+    async show(target, options) {
+        // Close any existing popover
+        this.hide();
+        // Create component dynamically
+        this.activePopoverRef = createComponent(AXPEntityDetailPopoverComponent, {
+            environmentInjector: this.environmentInjector,
+        });
+        // Set inputs
+        this.activePopoverRef.setInput('entity', options.entity);
+        this.activePopoverRef.setInput('entityId', options.id);
+        this.activePopoverRef.setInput('textField', options.textField || 'title');
+        this.activePopoverRef.setInput('valueField', options.valueField || 'id');
+        this.activePopoverRef.setInput('item', options.item);
+        // Attach to application
+        this.applicationRef.attachView(this.activePopoverRef.hostView);
+        // Append to document body
+        document.body.appendChild(this.activePopoverRef.location.nativeElement);
+        // Show the popover
+        await this.activePopoverRef.instance.show(target);
+    }
+    /**
+     * Hide the active popover
+     */
+    hide() {
+        if (this.activePopoverRef) {
+            this.activePopoverRef.instance.hide();
+            this.applicationRef.detachView(this.activePopoverRef.hostView);
+            this.activePopoverRef.destroy();
+            this.activePopoverRef = null;
         }
-        this.clearHoverTimeout();
-        this.hoverTimeout = setTimeout(() => {
-            this.showMoreItems();
-        }, this.HOVER_DELAY);
     }
-    onMoreButtonMouseLeave() {
-        this.clearHoverTimeout();
+    /**
+     * Check if a popover is currently active
+     */
+    get isActive() {
+        return this.activePopoverRef !== null;
     }
-    onViewDetailsMouseEnter(item, index) {
-        // Don't trigger hover if any popover is already open
-        if (this.isMorePopoverOpen() || this.isDetailPopoverOpen()) {
-            return;
-        }
-        this.clearViewDetailsHoverTimeout();
-        this.viewDetailsHoverTimeout = setTimeout(() => {
-            this.showItemDetail(item, index);
-        }, this.HOVER_DELAY);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailPopoverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailPopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Dependencies   ----
+        this.entityDetailPopoverService = inject(AXPEntityDetailPopoverService);
+        //#endregion
+        //#region ----   View Children   ----
+        this.moreButton = viewChild('moreButton', ...(ngDevMode ? [{ debugName: "moreButton" }] : []));
+        this.morePopover = viewChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        this.host = inject(ElementRef);
+        this.valueField = this.options['valueField'] ?? 'id';
+        this.textField = this.options['textField'] ?? 'title';
+        this.entity = this.options['entity'] ?? 'title';
+        this.columnName = this.options['columnName'] ?? 'title';
+        this.maxVisible = this.options['maxVisible'] ?? 2;
+        //#endregion
+        //#region ----   Signals   ----
+        this.isMorePopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMorePopoverOpen" }] : []));
+        this.selectedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedItemIndex" }] : []));
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.displayItems = computed(() => isNil(this.rawValue)
+            ? []
+            : castArray(this.rawValue).map((item) => this.extractItem(item)).filter((c) => c != null), ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
+        this.allItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "allItems" }] : []));
+        this.visibleItems = computed(() => {
+            const items = this.allItems();
+            return items.slice(0, this.maxVisible);
+        }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+        this.hasMoreItems = computed(() => {
+            return this.allItems().length > this.maxVisible;
+        }, ...(ngDevMode ? [{ debugName: "hasMoreItems" }] : []));
+        this.remainingItemsCount = computed(() => {
+            return this.allItems().length - this.maxVisible;
+        }, ...(ngDevMode ? [{ debugName: "remainingItemsCount" }] : []));
     }
-    onViewDetailsMouseLeave() {
-        this.clearViewDetailsHoverTimeout();
+    //#endregion
+    //#region ----   Public Methods   ----
+    showMoreItems() {
+        this.entityDetailPopoverService.hide();
+        this.openMorePopover();
     }
-    onVisibleItemMouseEnter(item, index) {
-        // Don't trigger hover if any popover is already open
-        if (this.isMorePopoverOpen() || this.isDetailPopoverOpen()) {
-            return;
-        }
-        this.clearVisibleItemHoverTimeout();
-        this.visibleItemHoverTimeout = setTimeout(() => {
-            this.showItemDetail(item, index);
-        }, this.HOVER_DELAY);
+    onMorePopoverOpenChange(event) {
+        this.isMorePopoverOpen.set(event);
     }
-    onVisibleItemMouseLeave() {
-        this.clearVisibleItemHoverTimeout();
+    async showItemDetail(item, index) {
+        const columnData = this.rowData[this.columnName];
+        const id = Array.isArray(columnData) ? columnData[index] : columnData;
+        this.selectedItemIndex.set(index);
+        this.closeMorePopover();
+        // Show entity detail popover using the service
+        await this.entityDetailPopoverService.show(this.host, {
+            entity: this.entity,
+            id: id,
+            textField: this.textField,
+            valueField: this.valueField,
+            item
+        });
+    }
+    handleItemClick(index) {
+        const items = this.allItems();
+        if (index < items.length) {
+            const item = items[index];
+            this.showItemDetail(item, index);
+        }
     }
+    //#endregion
+    //#region ----   Private Methods   ----
     openMorePopover() {
         if (this.morePopover() && this.moreButton()) {
             this.morePopover().target = this.moreButton().nativeElement;
@@ -6208,29 +6363,6 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
             this.isMorePopoverOpen.set(false);
         }
     }
-    clearHoverTimeout() {
-        if (this.hoverTimeout) {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = null;
-        }
-    }
-    clearViewDetailsHoverTimeout() {
-        if (this.viewDetailsHoverTimeout) {
-            clearTimeout(this.viewDetailsHoverTimeout);
-            this.viewDetailsHoverTimeout = null;
-        }
-    }
-    clearVisibleItemHoverTimeout() {
-        if (this.visibleItemHoverTimeout) {
-            clearTimeout(this.visibleItemHoverTimeout);
-            this.visibleItemHoverTimeout = null;
-        }
-    }
-    clearAllHoverTimeouts() {
-        this.clearHoverTimeout();
-        this.clearViewDetailsHoverTimeout();
-        this.clearVisibleItemHoverTimeout();
-    }
     extractItem(item) {
         if (isNil(item)) {
             return null;
@@ -6246,11 +6378,11 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
             };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPLookupWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, viewQueries: [{ propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }, { propertyName: "detailPopover", first: true, predicate: ["detailPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-gap-1 ax-items-center\">\n  @if (visibleItems().length > 0) {\n    @for (item of visibleItems(); track $index) {\n      <span\n        class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\"\n        (click)=\"handleItemClick($index)\"\n        (mouseenter)=\"onVisibleItemMouseEnter(item, $index)\"\n        (mouseleave)=\"onVisibleItemMouseLeave()\"\n      >\n        {{ item[this.textField] }}\n      </span>\n      @if ($index < visibleItems().length - 1) {\n        <span class=\"ax-text-muted\">\u2022</span>\n      }\n    }\n  } @else {\n    <span class=\"ax-text-muted\">---</span>\n  }\n\n  @if (hasMoreItems()) {\n    <span\n      class=\"ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter\"\n      (click)=\"showMoreItems()\"\n      (mouseenter)=\"onMoreButtonMouseEnter()\"\n      (mouseleave)=\"onMoreButtonMouseLeave()\"\n      #moreButton\n    >\n      <i class=\"fa-light fa-ellipsis-vertical\"></i>\n    </span>\n  }\n</div>\n\n<!-- More Items Popover -->\n<ax-popover [openOn]=\"'manual'\" #morePopover (openChange)=\"onMorePopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold\">All {{ allItems().length }} Items</h3>\n    </div>\n    <div class=\"ax-max-h-64 ax-flex ax-flex-col ax-gap-3\">\n      @for (item of allItems(); track $index) {\n        <span class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\" (click)=\"showItemDetail(item, $index)\">\n          {{ item[this.textField] }}\n        </span>\n      }\n    </div>\n  </div>\n</ax-popover>\n\n<!-- Item Detail Popover -->\n<ax-popover [openOn]=\"'manual'\" #detailPopover (openChange)=\"onDetailPopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[400px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold ax-text-on-lightest-surface\">\n        @if (entityDetails()?.entityData?.[this.textField]) {\n          {{ entityDetails()?.entityData[this.textField] }}\n        } @else {\n          {{ selectedItem()?.[this.textField] }}\n        }\n      </h3>\n    </div>\n\n    @if (isLoadingDetails()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <div class=\"ax-text-sm\">Loading details...</div>\n      </div>\n    } @else if (entityDetails()) {\n      <div class=\"ax-space-y-3 ax-mb-4\">\n        <!-- Important Entity Data -->\n        @if (entityDetails()?.entityData) {\n          <axp-widgets-container [context]=\"entityDetails()?.entityData\">\n            <div class=\"ax-space-y-2\">\n              @for (item of getEntityPropertiesWithWidgets(); track item.name) {\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\n                  <span class=\"ax-text-sm ax-font-medium\">{{ item.title | translate | async }}:</span>\n                  <div class=\"ax-flex-1 ax-ml-2 ax-max-w-48\">\n                    <ng-container axp-widget-renderer [node]=\"item.node\" [mode]=\"'view'\"></ng-container>\n                  </div>\n                </div>\n              }\n            </div>\n          </axp-widgets-container>\n        }\n      </div>\n    }\n\n    <div class=\"ax-flex ax-gap-2 ax-justify-end ax-sm\">\n      <ax-button [color]=\"'primary'\" [look]=\"'solid'\" text=\"Open Details\" (click)=\"navigateToDetails()\"> </ax-button>\n    </div>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i3$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPLookupWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue", rowData: "rowData" }, viewQueries: [{ propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-gap-1 ax-items-center\">\n  @if (visibleItems().length > 0) {\n    @for (item of visibleItems(); track $index) {\n      <span class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\" (click)=\"handleItemClick($index)\">\n        {{ item[this.textField] }}\n      </span>\n      @if ($index < visibleItems().length - 1) {\n        <span class=\"ax-text-muted\">\u2022</span>\n      }\n    }\n  } @else {\n    <span class=\"ax-text-muted\">---</span>\n  }\n\n  @if (hasMoreItems()) {\n    <span\n      class=\"ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter\"\n      (click)=\"showMoreItems()\"\n      #moreButton\n    >\n      <i class=\"fa-light fa-ellipsis-vertical\"></i>\n    </span>\n  }\n</div>\n\n<!-- More Items Popover -->\n<ax-popover [openOn]=\"'manual'\" #morePopover (openChange)=\"onMorePopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold\">All {{ allItems().length }} Items</h3>\n    </div>\n    <div class=\"ax-max-h-64 ax-flex ax-flex-col ax-gap-3\">\n      @for (item of allItems(); track $index) {\n        <span class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\" (click)=\"showItemDetail(item, $index)\">\n          {{ item[this.textField] }}\n        </span>\n      }\n    </div>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetColumnComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXBadgeModule, AXButtonModule, AXPopoverModule, AXPLayoutBuilderModule, AXPLayoutBuilderModule, AXTranslationModule], inputs: ['rawValue', 'rowData'], template: "<div class=\"ax-flex ax-gap-1 ax-items-center\">\n  @if (visibleItems().length > 0) {\n    @for (item of visibleItems(); track $index) {\n      <span\n        class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\"\n        (click)=\"handleItemClick($index)\"\n        (mouseenter)=\"onVisibleItemMouseEnter(item, $index)\"\n        (mouseleave)=\"onVisibleItemMouseLeave()\"\n      >\n        {{ item[this.textField] }}\n      </span>\n      @if ($index < visibleItems().length - 1) {\n        <span class=\"ax-text-muted\">\u2022</span>\n      }\n    }\n  } @else {\n    <span class=\"ax-text-muted\">---</span>\n  }\n\n  @if (hasMoreItems()) {\n    <span\n      class=\"ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter\"\n      (click)=\"showMoreItems()\"\n      (mouseenter)=\"onMoreButtonMouseEnter()\"\n      (mouseleave)=\"onMoreButtonMouseLeave()\"\n      #moreButton\n    >\n      <i class=\"fa-light fa-ellipsis-vertical\"></i>\n    </span>\n  }\n</div>\n\n<!-- More Items Popover -->\n<ax-popover [openOn]=\"'manual'\" #morePopover (openChange)=\"onMorePopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold\">All {{ allItems().length }} Items</h3>\n    </div>\n    <div class=\"ax-max-h-64 ax-flex ax-flex-col ax-gap-3\">\n      @for (item of allItems(); track $index) {\n        <span class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\" (click)=\"showItemDetail(item, $index)\">\n          {{ item[this.textField] }}\n        </span>\n      }\n    </div>\n  </div>\n</ax-popover>\n\n<!-- Item Detail Popover -->\n<ax-popover [openOn]=\"'manual'\" #detailPopover (openChange)=\"onDetailPopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[400px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold ax-text-on-lightest-surface\">\n        @if (entityDetails()?.entityData?.[this.textField]) {\n          {{ entityDetails()?.entityData[this.textField] }}\n        } @else {\n          {{ selectedItem()?.[this.textField] }}\n        }\n      </h3>\n    </div>\n\n    @if (isLoadingDetails()) {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-py-8\">\n        <div class=\"ax-text-sm\">Loading details...</div>\n      </div>\n    } @else if (entityDetails()) {\n      <div class=\"ax-space-y-3 ax-mb-4\">\n        <!-- Important Entity Data -->\n        @if (entityDetails()?.entityData) {\n          <axp-widgets-container [context]=\"entityDetails()?.entityData\">\n            <div class=\"ax-space-y-2\">\n              @for (item of getEntityPropertiesWithWidgets(); track item.name) {\n                <div class=\"ax-flex ax-justify-between ax-items-center\">\n                  <span class=\"ax-text-sm ax-font-medium\">{{ item.title | translate | async }}:</span>\n                  <div class=\"ax-flex-1 ax-ml-2 ax-max-w-48\">\n                    <ng-container axp-widget-renderer [node]=\"item.node\" [mode]=\"'view'\"></ng-container>\n                  </div>\n                </div>\n              }\n            </div>\n          </axp-widgets-container>\n        }\n      </div>\n    }\n\n    <div class=\"ax-flex ax-gap-2 ax-justify-end ax-sm\">\n      <ax-button [color]=\"'primary'\" [look]=\"'solid'\" text=\"Open Details\" (click)=\"navigateToDetails()\"> </ax-button>\n    </div>\n  </div>\n</ax-popover>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXBadgeModule, AXButtonModule, AXPopoverModule], inputs: ['rawValue', 'rowData'], template: "<div class=\"ax-flex ax-gap-1 ax-items-center\">\n  @if (visibleItems().length > 0) {\n    @for (item of visibleItems(); track $index) {\n      <span class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\" (click)=\"handleItemClick($index)\">\n        {{ item[this.textField] }}\n      </span>\n      @if ($index < visibleItems().length - 1) {\n        <span class=\"ax-text-muted\">\u2022</span>\n      }\n    }\n  } @else {\n    <span class=\"ax-text-muted\">---</span>\n  }\n\n  @if (hasMoreItems()) {\n    <span\n      class=\"ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter\"\n      (click)=\"showMoreItems()\"\n      #moreButton\n    >\n      <i class=\"fa-light fa-ellipsis-vertical\"></i>\n    </span>\n  }\n</div>\n\n<!-- More Items Popover -->\n<ax-popover [openOn]=\"'manual'\" #morePopover (openChange)=\"onMorePopoverOpenChange($event)\">\n  <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]\">\n    <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n      <h3 class=\"ax-text-base ax-font-semibold\">All {{ allItems().length }} Items</h3>\n    </div>\n    <div class=\"ax-max-h-64 ax-flex ax-flex-col ax-gap-3\">\n      @for (item of allItems(); track $index) {\n        <span class=\"ax-cursor-pointer hover:ax-text-primary hover:ax-underline\" (click)=\"showItemDetail(item, $index)\">\n          {{ item[this.textField] }}\n        </span>\n      }\n    </div>\n  </div>\n</ax-popover>\n" }]
         }] });
 
 var lookupWidgetColumn_component = /*#__PURE__*/Object.freeze({
@@ -6346,7 +6478,7 @@ class AXPTagableBoxWidgetColumnComponent extends AXPValueWidgetComponent {
       <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-inline-block">{{ internalValue()[0] }}</span>
       } }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetColumnComponent, decorators: [{
             type: Component,
@@ -6451,7 +6583,7 @@ class AXPTagableBoxWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: AXSelectBoxModule }, { kind: "component", type: i7$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: AXSelectBoxModule }, { kind: "component", type: i7$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -6630,7 +6762,7 @@ class AXPTagableBoxWidgetViewComponent extends AXPValueWidgetComponent {
     @for (item of internalValue(); track $index) {
     <ax-badge [look]="'twotone'" [text]="item" color="primary"></ax-badge>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetViewComponent, decorators: [{
             type: Component,
@@ -6748,7 +6880,7 @@ class AXPWidgetSelectorWidgetEditComponent extends AXPValueWidgetComponent {
     <axp-widget-property-viewer [widget]="selectedWidgetNode()!" (onChanged)="handleChangeWidget($event)">
     </axp-widget-property-viewer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: "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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$2.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: "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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, decorators: [{
             type: Component,
@@ -7267,7 +7399,7 @@ class AXPEntityModule {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$4.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$3.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModule, imports: [RouterModule, i2$2.AXPWorkflowModule, i3$1.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModule, providers: [
             {
@@ -7419,7 +7551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         ]),
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$4.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$3.AXPAppStartUpService }, { type: i0.Injector }] });
 
 //#endregion
 //#region ----   Entity Open Details Command   ----
@@ -7554,7 +7686,7 @@ function entityMasterCreateAction() {
         title: '@general:actions.create.title',
         command: 'create-entity',
         priority: 'primary',
-        type: 'create',
+        type: AXPSystemActionType.Create,
         scope: AXPEntityCommandScope.TypeLevel,
     };
 }
@@ -7563,7 +7695,7 @@ function entityMasterBulkDeleteAction() {
         title: '@general:actions.delete-items.title',
         command: 'delete-entity',
         priority: 'primary',
-        type: 'delete',
+        type: AXPSystemActionType.Delete,
         scope: AXPEntityCommandScope.Selected,
     };
 }
@@ -7572,7 +7704,7 @@ function entityMasterViewAction() {
         title: '@general:actions.view.title',
         command: 'open-entity',
         priority: 'secondary',
-        type: 'view',
+        type: AXPSystemActionType.View,
         scope: AXPEntityCommandScope.Individual,
         default: true,
     };
@@ -7582,7 +7714,7 @@ function entityMasterDeleteAction() {
         title: '@general:actions.delete.title',
         command: 'delete-entity',
         priority: 'secondary',
-        type: 'delete',
+        type: AXPSystemActionType.Delete,
         scope: AXPEntityCommandScope.Individual,
     };
 }
@@ -7615,7 +7747,7 @@ function entityDetailsCreateActions(parentId) {
             },
         },
         priority: 'primary',
-        type: 'create',
+        type: AXPSystemActionType.Create,
         scope: AXPEntityCommandScope.TypeLevel,
     };
 }
@@ -7645,7 +7777,7 @@ function entityDetailsEditAction() {
         title: '@general:actions.edit.title',
         command: 'quick-modify-entity',
         priority: 'secondary',
-        type: 'update',
+        type: AXPSystemActionType.Update,
         default: true,
         scope: AXPEntityCommandScope.Individual,
     };
@@ -7656,7 +7788,7 @@ function entityOverrideDetailsViewAction() {
         command: 'open-entity',
         priority: 'secondary',
         hidden: true,
-        type: 'view',
+        type: AXPSystemActionType.View,
         scope: AXPEntityCommandScope.Individual,
     };
 }
@@ -7683,7 +7815,7 @@ function entityDetailsReferenceCreateActions(type) {
                 },
             },
             priority: 'primary',
-            type: 'create',
+            type: AXPSystemActionType.Create,
             scope: AXPEntityCommandScope.TypeLevel,
         },
         entityDetailsEditAction(),
@@ -7750,5 +7882,5 @@ const eventDispatchMiddleware = {
  * Generated bundle index. Do not edit.
  */
 
-export { AXMEntityCrudService, AXMEntityCrudServiceImpl, AXPCreateEntityWorkflow, AXPDataSeederService, AXPDeleteEntityWorkflow, AXPEntityApplyUpdatesAction, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDataProvider, AXPEntityDataProviderImpl, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityEventDispatcherService, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPGetEntityDetailsQuery, AXPMiddlewareEntityStorageService, AXPModifyEntitySectionWorkflow, AXPOpenEntityDetailsCommand, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXP_DATA_SEEDER_TOKEN, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER, AXP_ENTITY_MODIFIER, AXP_ENTITY_STORAGE_BACKEND, AXP_ENTITY_STORAGE_MIDDLEWARE, DEFAULT_COLUMN_WIDTHS, actionExists, columnWidthMiddlewareFactory, columnWidthMiddlewareProvider, createColumnWidthMiddlewareProvider, createModifierContext, detectEntityChanges, ensureListActions, entityDetailsCreateActions, entityDetailsCrudActions, entityDetailsEditAction, entityDetailsReferenceCondition, entityDetailsReferenceCreateActions, entityDetailsSimpleCondition, entityMasterBulkDeleteAction, entityMasterCreateAction, entityMasterCrudActions, entityMasterDeleteAction, entityMasterRecordActions, entityMasterViewAction, entityOverrideDetailsViewAction, eventDispatchMiddleware };
+export { AXMEntityCrudService, AXMEntityCrudServiceImpl, AXPCreateEntityWorkflow, AXPDataSeederService, AXPDeleteEntityWorkflow, AXPEntityApplyUpdatesAction, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDataProvider, AXPEntityDataProviderImpl, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailPopoverComponent, AXPEntityDetailPopoverService, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityEventDispatcherService, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPGetEntityDetailsQuery, AXPMiddlewareEntityStorageService, AXPModifyEntitySectionWorkflow, AXPOpenEntityDetailsCommand, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXP_DATA_SEEDER_TOKEN, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER, AXP_ENTITY_MODIFIER, AXP_ENTITY_STORAGE_BACKEND, AXP_ENTITY_STORAGE_MIDDLEWARE, DEFAULT_COLUMN_WIDTHS, actionExists, columnWidthMiddlewareFactory, columnWidthMiddlewareProvider, createColumnWidthMiddlewareProvider, createModifierContext, detectEntityChanges, ensureListActions, entityDetailsCreateActions, entityDetailsCrudActions, entityDetailsEditAction, entityDetailsReferenceCondition, entityDetailsReferenceCreateActions, entityDetailsSimpleCondition, entityMasterBulkDeleteAction, entityMasterCreateAction, entityMasterCrudActions, entityMasterDeleteAction, entityMasterRecordActions, entityMasterViewAction, entityOverrideDetailsViewAction, eventDispatchMiddleware };
 //# sourceMappingURL=acorex-platform-layout-entity.mjs.map