@acorex/platform 20.3.0-next.2 → 20.3.0-next.20

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

@@ -1,61 +1,450 @@
+import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 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 { castArray, get, cloneDeep, set, merge, isNil, isEmpty, sortBy } from 'lodash-es';
-import * as i1$2 from '@acorex/cdk/common';
-import { AXDataSource, AXCommonModule } from '@acorex/cdk/common';
+import { inject, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, computed, Injector, runInInjectionContext, viewChildren, linkedSignal, effect, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
+import { Router, RouterModule, ROUTES } from '@angular/router';
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i2 from '@acorex/components/popover';
+import { AXPopoverModule } from '@acorex/components/popover';
+import * as i6 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import * as i3$1 from '@acorex/platform/layout/widget-core';
+import { AXPWidgetsCatalog, AXPWidgetCoreModule, AXPPageStatus, AXPWidgetRegistryService, AXPValueWidgetComponent, AXPWidgetRendererDirective, AXPWidgetGroupEnum, AXPLayoutBaseWidgetComponent, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/widget-core';
+import { AXPCommandService, AXPQueryService, provideCommandSetups, provideQuerySetups } from '@acorex/platform/runtime';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { castArray, get, cloneDeep, set, merge, isEqual, isNil, isEmpty, sortBy } from 'lodash-es';
+import { AXDataSource } 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$2 from '@acorex/platform/core';
+import { resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPBroadcastEventService, AXPPlatformScope, 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';
-import { AXPPageStatus, AXPWidgetRegistryService, AXPWidgetsCatalog, AXPValueWidgetComponent, AXPWidgetRendererDirective, AXPLayoutBuilderModule, AXPWidgetGroupEnum, AXPLayoutBaseWidgetComponent, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/builder';
 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 * as i8 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
-import { RouterModule, ROUTES, Router } from '@angular/router';
-import * as i3$2 from '@acorex/components/button';
-import { AXButtonModule } from '@acorex/components/button';
-import * as i3 from '@acorex/components/decorators';
+import * as i3$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4 from '@acorex/components/dropdown';
+import * as i4$1 from '@acorex/components/dropdown';
 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 { 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/layout/widgets';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1 from '@acorex/components/loading';
-import { AXLoadingModule } from '@acorex/components/loading';
-import * as i1$1 from '@acorex/components/badge';
-import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
-import * as i5 from '@acorex/components/search-box';
-import { AXSearchBoxModule, AXSearchBoxComponent } from '@acorex/components/search-box';
-import * as i7$1 from '@acorex/components/select-box';
+import * as i7 from '@acorex/components/select-box';
 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 { AXDataTableModule } from '@acorex/components/data-table';
-import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXBasePageComponent } from '@acorex/components/page';
-import * as i2 from '@acorex/components/popover';
-import { AXPopoverModule } from '@acorex/components/popover';
 import * as i2$1 from '@acorex/components/text-box';
 import { AXTextBoxModule, AXTextBoxComponent } from '@acorex/components/text-box';
-import { AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
-import { transform, isEqual } from 'lodash';
+import { AXValidationModule } from '@acorex/core/validation';
+import * as i1 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i6$2 from '@acorex/components/search-box';
+import { AXSearchBoxComponent, AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i6$1 from '@acorex/components/tag-box';
+import { AXTagBoxComponent, AXTagBoxModule } from '@acorex/components/tag-box';
+import { AXPDataSelectorService, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
+import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
+import { transform, isEqual as isEqual$1 } from 'lodash';
+
+//#endregion
+//#region ----   Entity Open Details Command   ----
+/**
+ * Generic command to open entity details view
+ * Can be used by any entity to navigate to its detail page
+ */
+class AXPOpenEntityDetailsCommand {
+    constructor() {
+        //#endregion
+        //#region ----   Services & Dependencies   ----
+        this.router = inject(Router);
+        this.sessionService = inject(AXPSessionService);
+    }
+    //#endregion
+    //#region ----   Command Execution   ----
+    /**
+     * Execute the command to navigate to entity details
+     * @param input - Command input containing entity and data information
+     */
+    async execute(input) {
+        const { entity, data } = input;
+        if (!entity) {
+            throw new Error('Entity name is required for opening details view');
+        }
+        if (!data?.id) {
+            throw new Error('Entity ID is required for opening details view');
+        }
+        const [module, entityName] = entity.split('.');
+        if (!module || !entityName) {
+            throw new Error('Entity must be in format "ModuleName.EntityName"');
+        }
+        const url = `/${this.sessionService.application?.name}/m/${module}/e/${entityName}/${data.id}/new-view`;
+        // Navigate to the entity details page
+        this.router.navigate([url]);
+        return { success: true };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPOpenEntityDetailsCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPOpenEntityDetailsCommand, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPOpenEntityDetailsCommand, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+var openEntityDetails_command = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPOpenEntityDetailsCommand: AXPOpenEntityDetailsCommand
+});
+
+class AXPEntityDetailPopoverComponent {
+    constructor() {
+        //#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.detailPopover = viewChild('detailPopover', ...(ngDevMode ? [{ debugName: "detailPopover" }] : []));
+        //#endregion
+        //#region ----   Signals   ----
+        this.entityDetails = signal(null, ...(ngDevMode ? [{ debugName: "entityDetails" }] : []));
+        this.isLoadingDetails = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingDetails" }] : []));
+        this.isDetailPopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDetailPopoverOpen" }] : []));
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Show the entity detail popover
+     */
+    async show(target) {
+        this.isDetailPopoverOpen.set(true);
+        this.isLoadingDetails.set(true);
+        this.entityDetails.set(null);
+        // 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 {
+            const result = await this.queryService.fetch('Entity:GetDetails', {
+                entity: this.entity(),
+                id: this.entityId(),
+            });
+            if (result?.success) {
+                this.entityDetails.set(result);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch entity details:', error);
+        }
+        finally {
+            this.isLoadingDetails.set(false);
+        }
+    }
+    /**
+     * Hide the entity detail popover
+     */
+    hide() {
+        this.isDetailPopoverOpen.set(false);
+        this.entityDetails.set(null);
+        this.isLoadingDetails.set(false);
+        if (this.detailPopover()) {
+            this.detailPopover().close();
+        }
+    }
+    onDetailPopoverOpenChange(event) {
+        this.isDetailPopoverOpen.set(event);
+        if (!event) {
+            this.entityDetails.set(null);
+            this.isLoadingDetails.set(false);
+        }
+    }
+    async navigateToDetails() {
+        if (this.entityId()) {
+            await this.commandService.execute('Entity:OpenDetails', {
+                entity: this.entity(),
+                data: { id: this.entityId() },
+            });
+            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.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;
+        if (!data || !entityDefinition?.properties)
+            return [];
+        // Get properties from entity definition and filter by importance
+        const importantProperties = (entityDefinition.columns ?? [])
+            .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,
+                orderIndex: index,
+            };
+        })
+            .filter((prop) => {
+            // Exclude technical fields
+            if (prop.name === 'id' || prop.name === this.textField() || prop.name === this.valueField()) {
+                return false;
+            }
+            // Only include properties that exist in the data
+            if (!data.hasOwnProperty(prop.name)) {
+                return false;
+            }
+            // Filter by property importance based on schema and options
+            const schema = prop.showAs?.type ?? entityDefinition.properties.find((p) => p.name === prop.name)?.schema.interface?.type;
+            // Include common important field types
+            const importantWidgets = [
+                AXPWidgetsCatalog.text,
+                AXPWidgetsCatalog.largeText,
+                AXPWidgetsCatalog.richText,
+                //
+                AXPWidgetsCatalog.select,
+                //AXPWidgetsCatalog.lookup,
+                //
+                AXPWidgetsCatalog.number,
+                AXPWidgetsCatalog.toggle,
+                AXPWidgetsCatalog.checkbox,
+                //
+                AXPWidgetsCatalog.dateTime,
+                AXPWidgetsCatalog.color,
+                AXPWidgetsCatalog.contact,
+            ];
+            //
+            if (importantWidgets.includes(schema)) {
+                return true;
+            }
+            return false;
+        })
+            .sort((a, b) => {
+            // 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 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) => {
+            // Create widget node based on property schema
+            const widgetNode = {
+                type: prop.schema || AXPWidgetsCatalog.text,
+                path: prop.options?.dataPath || prop.name,
+                options: prop.options ?? {},
+                mode: 'view',
+            };
+            return {
+                name: prop.name,
+                title: prop.title || prop.name,
+                node: widgetNode,
+            };
+        })
+            .slice(0, 7); // Limit to 7 most important fields
+        return importantProperties;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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.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: AXPWidgetCoreModule }, { 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.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-detail-popover', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXPopoverModule,
+                        AXPWidgetCoreModule,
+                        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 ----   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;
+        }
+    }
+    /**
+     * Check if a popover is currently active
+     */
+    get isActive() {
+        return this.activePopoverRef !== null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailPopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailPopoverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailPopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 const AXP_DATA_SEEDER_TOKEN = new InjectionToken('AXP_DATA_SEEDER_TOKEN');
 class AXPDataSeederService {
@@ -67,10 +456,10 @@ class AXPDataSeederService {
             await loader?.seed();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataSeederService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataSeederService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDataSeederService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDataSeederService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataSeederService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDataSeederService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -95,10 +484,10 @@ class AXPEntityResolver {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityResolver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityResolver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityResolver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -108,7 +497,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;
@@ -368,7 +757,7 @@ class AXPEntityDetailListViewModel {
                 module: this.detailEntity()?.module,
                 title: this.detailEntity()?.title,
                 parentKey: this.detailEntity()?.parentKey,
-                source: this.detailEntity()?.source,
+                source: `${this.detailEntity()?.module}.${this.detailEntity()?.name}`,
             },
             options,
         });
@@ -412,14 +801,91 @@ class AXPEntityDetailListViewModel {
     }
 }
 
-function createModifierContext(entity) {
-    const ctx = {
-        entity,
-        title: {
-            get: () => entity.title,
-            set: (newTitle) => {
-                entity.title = newTitle;
-                return ctx;
+/**
+ * Entity Event Dispatcher - A wrapper for entity-specific events
+ * Handles pattern-based dispatching for entity operations with wildcard support
+ */
+class AXPEntityEventDispatcherService {
+    constructor() {
+        this.eventService = inject(AXPDistributedEventListenerService);
+    }
+    async dispatchEntityEvent(operation, entityName, data) {
+        const enhancedData = {
+            ...data,
+            entityName,
+            operation,
+            timestamp: new Date(),
+            source: 'entity-dispatcher',
+        };
+        const eventKeysToDispatch = await this.getAllMatchingEventKeys(operation, entityName);
+        const dispatchPromises = eventKeysToDispatch.map((key) => this.eventService.dispatch(key, enhancedData));
+        await Promise.all(dispatchPromises);
+    }
+    async getAllMatchingEventKeys(operation, entityName) {
+        const eventKeys = new Set();
+        const exactKeys = this.generateEventKeys(operation, entityName);
+        exactKeys.forEach((key) => eventKeys.add(key));
+        const wildcardKeys = await this.findMatchingWildcardKeys(operation, entityName);
+        wildcardKeys.forEach((key) => eventKeys.add(key));
+        return Array.from(eventKeys);
+    }
+    async findMatchingWildcardKeys(operation, entityName) {
+        const matchingKeys = [];
+        const allListenerKeys = await this.eventService.getRegisteredKeys();
+        const actualEventKey = `entity.${operation}.${entityName}`;
+        for (const listenerKey of allListenerKeys) {
+            if (listenerKey.includes('*') && this.matchesEntityPattern(actualEventKey, listenerKey)) {
+                matchingKeys.push(listenerKey);
+            }
+        }
+        return matchingKeys;
+    }
+    matchesEntityPattern(eventKey, pattern) {
+        if (!pattern.startsWith('entity.') || !pattern.includes('*')) {
+            return false;
+        }
+        const regexPattern = pattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
+        const regex = new RegExp(`^${regexPattern}$`);
+        return regex.test(eventKey);
+    }
+    generateEventKeys(operation, entityName) {
+        const keys = [];
+        keys.push(`entity.${operation}`);
+        keys.push(`entity.${operation}.${entityName}`);
+        const entityParts = entityName.split('.');
+        if (entityParts.length > 1) {
+            const moduleName = entityParts[0];
+            keys.push(`entity.${operation}.${moduleName}`);
+        }
+        return keys;
+    }
+    async dispatchInserted(entityName, data) {
+        await this.dispatchEntityEvent('inserted', entityName, data);
+    }
+    async dispatchUpdated(entityName, data) {
+        await this.dispatchEntityEvent('updated', entityName, data);
+    }
+    async dispatchDeleted(entityName, data) {
+        await this.dispatchEntityEvent('deleted', entityName, data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityEventDispatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityEventDispatcherService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityEventDispatcherService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+function createModifierContext(entity) {
+    const ctx = {
+        entity,
+        title: {
+            get: () => entity.title,
+            set: (newTitle) => {
+                entity.title = newTitle;
+                return ctx;
             },
         },
         module: {
@@ -436,13 +902,6 @@ function createModifierContext(entity) {
                 return ctx;
             },
         },
-        source: {
-            get: () => entity.source,
-            set: (newValue) => {
-                entity.source = newValue;
-                return ctx;
-            },
-        },
         parentKey: {
             get: () => entity.parentKey,
             set: (newValue) => {
@@ -720,10 +1179,10 @@ class AXPEntityMiddleware {
         const flags = rx.flags.replace('g', '');
         return new RegExp(rx.source, flags);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityMiddleware, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityMiddleware, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityMiddleware, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityMiddleware, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityMiddleware, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityMiddleware, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -875,10 +1334,10 @@ class AXPEntityDefinitionRegistryService {
     createEntityKey(moduleName, entityName) {
         return `${moduleName}.${entityName}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDefinitionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDefinitionRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDefinitionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDefinitionRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDefinitionRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDefinitionRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1039,10 +1498,10 @@ class AXPEntityCreateViewModelFactory {
         this.layout.setNavigationLoading(false);
         return new AXPEntityMasterCreateViewModel(this.injector, config, initialData, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreateViewModelFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreateViewModelFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreateViewModelFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreateViewModelFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1086,6 +1545,7 @@ class AXPEntityMasterListViewModel {
         this.widgetResolver = this.injector.get(AXPWidgetRegistryService);
         this.expressionEvaluator = this.injector.get(AXPExpressionEvaluatorService);
         this.commandService = this.injector.get(AXPCommandService);
+        this.eventService = this.injector.get(AXPBroadcastEventService);
         this.filterOperatorMiddleware = this.injector.get(AXPFilterOperatorMiddlewareService);
         this.settingEntityKey = `${this.config.module}:${this.config.name}`;
         this.destroyed = new Subject();
@@ -1230,6 +1690,15 @@ class AXPEntityMasterListViewModel {
                 this.events$.next({ action: 'refresh', meta: event.payload.meta });
             }
         });
+        this.eventService
+            .listen('REFRESH_LAYOUT')
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((e) => {
+            if (e.data.name == getEntityInfo(this.entityDef).source) {
+                this.selectedItems.set([]);
+                this.events$.next({ action: 'refresh' });
+            }
+        });
         this.sortedFields.set(this.sortableFields());
     }
     async applySettings() {
@@ -1252,12 +1721,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 +1747,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 +1773,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 +1969,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();
     }
@@ -1520,7 +2010,7 @@ class AXPEntityMasterListViewModel {
                     module: this.entityDef.module,
                     title: this.entityDef.title,
                     parentKey: this.entityDef.parentKey,
-                    source: this.entityDef.source,
+                    source: `${this.entityDef.module}.${this.entityDef.name}`,
                 },
                 data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data,
                 options: options,
@@ -1528,7 +2018,20 @@ class AXPEntityMasterListViewModel {
             });
         }
         else {
-            this.commandService.execute(command, options);
+            // this.commandService.execute(command, options);
+            this.commandService.execute(command, {
+                entity: getEntityInfo(this.entityDef).source,
+                entityInfo: {
+                    name: this.entityDef.name,
+                    module: this.entityDef.module,
+                    title: this.entityDef.title,
+                    parentKey: this.entityDef.parentKey,
+                    source: `${this.entityDef.module}.${this.entityDef.name}`,
+                },
+                data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data,
+                options: options,
+                metadata: action?.metadata,
+            });
         }
     }
     async execute(command) {
@@ -1563,10 +2066,10 @@ class AXPEntityListViewModelFactory {
         this.layout.setNavigationLoading(false);
         return new AXPEntityMasterListViewModel(this.injector, config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListViewModelFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListViewModelFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListViewModelFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListViewModelFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1584,10 +2087,10 @@ class AXPEntityService {
     createPath(module, entity, path = 'list') {
         return `/${this.sessionService.application?.name}/m/${module}/e/${entity}/${path}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1639,14 +2142,14 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
         // Create dialog config but don't show it yet
         const createDialog = async () => {
             dialog = this.loadingDialog.show({
-                title: await this.translationService.translateAsync('workflow.deleting'),
+                title: await this.translationService.translateAsync('@general:workflow.deleting'),
                 mode: 'determinate',
                 status: 'Deleting...',
                 progressValue: 0,
                 text: `0/${idLength}`,
                 buttons: [
                     {
-                        text: await this.translationService.translateAsync('cancel'),
+                        text: await this.translationService.translateAsync('@general:actions.cancel.title'),
                         color: 'danger',
                         onClick: () => {
                             if (dialog) {
@@ -1707,7 +2210,7 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
         if (successfulPromises > 0 && failedPromises === 0) {
             // All items deleted successfully
             if (showResult) {
-                await this.dialogService.alert(await this.translationService.translateAsync('workflow.success-delete-title'), await this.translationService.translateAsync('workflow.success-delete-body', {
+                await this.dialogService.alert(await this.translationService.translateAsync('@general:workflow.success-delete-title'), await this.translationService.translateAsync('@general:workflow.success-delete-body', {
                     params: { item: successfulPromises },
                 }), //TODO test translation
                 'success');
@@ -1719,7 +2222,7 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
         else if (successfulPromises > 0 && failedPromises > 0) {
             // Some items deleted successfully, some failed
             if (showResult) {
-                await this.dialogService.alert(await this.translationService.translateAsync('workflow.success-partial-delete-title'), await this.translationService.translateAsync('workflow.partial-delete-body', {
+                await this.dialogService.alert(await this.translationService.translateAsync('@general:workflow.success-partial-delete-title'), await this.translationService.translateAsync('@general:workflow.partial-delete-body', {
                     params: { success: successfulPromises, fail: failedPromises },
                 }), 'warning');
             }
@@ -1729,7 +2232,7 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
         else if (successfulPromises === 0 && failedPromises > 0) {
             // No items deleted, all failed
             if (showResult) {
-                await this.dialogService.alert(await this.translationService.translateAsync('workflow.fail-delete-title'), await this.translationService.translateAsync('workflow.fail-delete-body', {
+                await this.dialogService.alert(await this.translationService.translateAsync('@general:workflow.fail-delete-title'), await this.translationService.translateAsync('@general:workflow.fail-delete-body', {
                     params: { item: failedPromises },
                 }), 'danger');
             }
@@ -1737,14 +2240,14 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
         else {
             // No items to delete (no successful or failed promises)
             if (showResult) {
-                await this.dialogService.alert(await this.translationService.translateAsync('workflow.no-need'), await this.translationService.translateAsync('workflow.no-item'), 'primary');
+                await this.dialogService.alert(await this.translationService.translateAsync('@general:workflow.no-need'), await this.translationService.translateAsync('@general:workflow.no-item'), 'primary');
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityPerformDeleteAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityPerformDeleteAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityPerformDeleteAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityPerformDeleteAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityPerformDeleteAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityPerformDeleteAction, decorators: [{
             type: Injectable
         }] });
 const AXPDeleteEntityWorkflow = {
@@ -1753,8 +2256,8 @@ const AXPDeleteEntityWorkflow = {
         'confirm-delete': {
             action: 'show-prompt-dialog',
             input: {
-                title: 'workflow.warning',
-                message: `workflow.confirm-delete`,
+                title: '@general:workflow.warning',
+                message: '@general:workflow.confirm-delete',
                 type: 'danger',
             },
             nextSteps: [
@@ -1775,6 +2278,35 @@ const AXPDeleteEntityWorkflow = {
     },
 };
 
+class AXPEntityUpdateViewSectionViewModel {
+    constructor(entity, section) {
+        this.entity = entity;
+        this.section = section;
+        this.group = this.entity.groups?.find((c) => c.id == this.section.id);
+        this.name = signal(this.group.id, ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.title = computed(() => {
+            return this.group.title ?? this.group.id;
+        }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.description = computed(() => {
+            return this.group.description;
+        }, ...(ngDevMode ? [{ debugName: "description" }] : []));
+        this.layout = computed(() => {
+            const source = cloneDeep(this.section.layout ?? {});
+            set(source, 'positions.default.colSpan', 12);
+            return source;
+        }, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        this.elements = computed(() => {
+            const { interfaces, properties } = this.entity;
+            const updateProps = interfaces?.master?.update?.properties ?? [];
+            const updatePropNames = new Set(updateProps.map(({ name }) => name));
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id && !schema.hidden && updatePropNames.has(name));
+            return filteredProperties.map((property) => {
+                const updateProp = updateProps.find(({ name }) => name === property.name);
+                return new AXPEntityMasterUpdateElementViewModel(this.entity, property);
+            });
+        }, ...(ngDevMode ? [{ debugName: "elements" }] : []));
+    }
+}
 class AXPEntityMasterUpdateElementViewModel {
     constructor(entity, property) {
         this.entity = entity;
@@ -1840,6 +2372,13 @@ class AXPEntityMasterUpdateViewModel {
                 return new AXPEntityMasterUpdateElementViewModel(this.entityDef, e);
             });
         }, ...(ngDevMode ? [{ debugName: "elements" }] : []));
+        this.sections = computed(() => {
+            const { interfaces, properties } = this.entityDef;
+            const updateProps = interfaces?.master?.update?.properties?.map(({ name }) => name) ?? [];
+            const visibleProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && updateProps.includes(name));
+            const sections = interfaces?.master?.update?.sections?.filter(({ id }) => visibleProperties.some(({ groupId }) => groupId === id)) ?? [];
+            return sections.map((section) => new AXPEntityUpdateViewSectionViewModel(this.entityDef, section));
+        }, ...(ngDevMode ? [{ debugName: "sections" }] : []));
     }
     async save() {
         this.isInProgress.set(true);
@@ -1847,10 +2386,14 @@ class AXPEntityMasterUpdateViewModel {
         try {
             const com = this.entityDef.commands?.update;
             if (com) {
-                const exec = com.execute;
-                const result = await exec(this.context());
-                this.builder.setStatus(AXPPageStatus.Submitted);
-                return result;
+                return new Promise((resolve) => {
+                    setTimeout(async () => {
+                        const exec = com.execute;
+                        const result = await exec(this.context());
+                        this.builder.setStatus(AXPPageStatus.Submitted);
+                        resolve(result);
+                    });
+                });
             }
         }
         catch (error) {
@@ -1883,10 +2426,10 @@ class AXPEntityMasterUpdateViewModelFactory {
         this.layout.setNavigationLoading(false);
         return Promise.reject('cannot fetch ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityMasterUpdateViewModelFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1929,10 +2472,10 @@ class AXPEntityModifySectionPopupAction extends AXPWorkflowAction {
             context.setVariable('data', cloneDeep(popup.data.context));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModifySectionPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModifySectionPopupAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModifySectionPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModifySectionPopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModifySectionPopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModifySectionPopupAction, decorators: [{
             type: Injectable
         }] });
 class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
@@ -1947,10 +2490,10 @@ class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
             },
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModifyConfirmedAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModifyConfirmedAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModifyConfirmedAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModifyConfirmedAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModifyConfirmedAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModifyConfirmedAction, decorators: [{
             type: Injectable
         }] });
 const AXPModifyEntitySectionWorkflow = {
@@ -2003,7 +2546,7 @@ class AXPEntityMasterSingleViewGroupViewModel {
         }, ...(ngDevMode ? [{ debugName: "description" }] : []));
         this.layout = computed(() => {
             const source = cloneDeep(this.section.layout ?? {});
-            set(source, 'positions.default.colSpan', 12);
+            set(source, 'positions.sm.colSpan', 12);
             return source;
         }, ...(ngDevMode ? [{ debugName: "layout" }] : []));
         this.props = computed(() => {
@@ -2243,10 +2786,10 @@ class AXPEntityDetailViewModelFactory {
         this.layout.setNavigationLoading(false);
         return Promise.reject('cannot fetch ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailViewModelFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailViewModelFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailViewModelFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityDetailViewModelFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDetailViewModelFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2258,9 +2801,6 @@ const AXPEntityDetailViewModelResolver = (route, state, service = inject(AXPEnti
     return service.create(moduleName, entityName, id);
 };
 
-const AXP_ENTITY_STORAGE_BACKEND = new InjectionToken('AXP_ENTITY_STORAGE_BACKEND');
-const AXP_ENTITY_STORAGE_MIDDLEWARE = new InjectionToken('AXP_ENTITY_STORAGE_MIDDLEWARE');
-
 class AXPEntityStorageService {
 }
 class AXPEntityDataProvider {
@@ -2300,6 +2840,7 @@ class AXMEntityCrudServiceImpl {
         this._storageService = inject(AXPEntityStorageService);
         this.entityRegistery = inject(AXPEntityDefinitionRegistryService);
         this._entityDataProvider = new AXPEntityDataProviderImpl(this._storageService, this.entityName);
+        this._entityCategoryDataProvider = new AXPEntityDataProviderImpl(this._storageService, `${this.entityName}Category`);
     }
     async insertOne(request) {
         return this._entityDataProvider.insertOne(request);
@@ -2315,18 +2856,23 @@ class AXMEntityCrudServiceImpl {
     }
     async query(request = { skip: 0, take: 100 }) {
         const [moduleName, entityName] = this._entityDataProvider.entityName.split('.');
-        const entityRef = await this.entityRegistery.resolve(moduleName, entityName);
-        if (entityRef.parentKey) {
-            if (!request.filter?.filters?.length && request.filter?.field !== entityRef.parentKey) {
-                request.filter = {
-                    value: true,
-                    field: entityRef.parentKey,
-                    operator: {
-                        type: 'isEmpty',
-                    },
-                };
+        try {
+            const entityRef = await this.entityRegistery.resolve(moduleName, entityName);
+            if (entityRef.parentKey) {
+                if (!request.filter?.filters?.length && request.filter?.field !== entityRef.parentKey) {
+                    request.filter = {
+                        value: true,
+                        field: entityRef.parentKey,
+                        operator: {
+                            type: 'isEmpty',
+                        },
+                    };
+                }
             }
         }
+        catch (error) {
+            console.error(error);
+        }
         return this._entityDataProvider.query(request);
     }
     async findOne(filter) {
@@ -2343,7 +2889,7 @@ class AXMEntityCrudServiceImpl {
                 operator: {
                     type: 'isEmpty',
                 },
-            }
+            },
         };
         const result = await this._entityDataProvider.query(queryRequest);
         return result;
@@ -2359,7 +2905,7 @@ class AXMEntityCrudServiceImpl {
                 operator: {
                     type: 'equal',
                 },
-            }
+            },
         };
         const result = await this._entityDataProvider.query(queryRequest);
         return result;
@@ -2374,226 +2920,60 @@ class AXMEntityCrudServiceImpl {
                 operator: {
                     type: 'contains',
                 },
-            }
+            },
         };
         const result = await this._entityDataProvider.query(queryRequest);
         return result;
     }
+    async getCategoriesList(request = { skip: 0, take: 1000 }) {
+        return this._entityCategoryDataProvider.query(request);
+    }
     get storageService() {
         return this._storageService;
     }
 }
 
-class AXPMiddlewareEntityStorageService extends AXPEntityStorageService {
+class AXPLayoutAdapterBuilder {
     constructor() {
-        super(...arguments);
-        this.backend = inject(AXP_ENTITY_STORAGE_BACKEND);
-        this.allMiddlewares = (inject(AXP_ENTITY_STORAGE_MIDDLEWARE, { optional: true }) || []).slice();
-        this.injector = inject(EnvironmentInjector);
-    }
-    get dbName() {
-        return this.backend.dbName;
-    }
-    filterMiddlewares(ctx) {
-        return this.allMiddlewares
-            .filter((mw) => {
-            const t = mw.target;
-            if (!t)
-                return true;
-            if (t.ops && !t.ops.includes(ctx.op))
-                return false;
-            if (t.entity) {
-                if (typeof t.entity === 'string' && t.entity !== ctx.entityName)
-                    return false;
-                if (t.entity instanceof RegExp && !t.entity.test(ctx.entityName))
-                    return false;
-            }
-            if (t.predicate && !t.predicate(ctx))
-                return false;
-            return true;
-        })
-            .sort((a, b) => (a.target?.order ?? 0) - (b.target?.order ?? 0));
+        this.adapter = {};
     }
-    compose(mws, leaf, ctx) {
-        return mws
-            .slice()
-            .reverse()
-            .reduce((next, mw) => {
-            return async () => runInInjectionContext(this.injector, () => mw.execute(ctx, next));
-        }, leaf);
+    setEntity(entity, rootContext) {
+        this.entity = entity;
+        this.rootContext = rootContext;
+        return this;
     }
-    async run(ctx, delegate) {
-        const chain = this.compose(this.filterMiddlewares(ctx), async () => {
-            ctx.result = await delegate();
-        }, ctx);
-        await chain();
-        return ctx.result;
+    setDependencies(dependencies) {
+        this.dependencies = dependencies;
+        return this;
     }
-    createCtx(op, entityName, init) {
-        return {
-            op,
-            entityName,
-            locals: new Map(),
-            backend: {
-                getOneRaw: (name, id) => this.backend.getOne(name, id),
-                insertOneRaw: (name, e) => this.backend.insertOne(name, e),
-            },
-            ...init,
-        };
+    setMainPage(mainPage) {
+        this.adapter.pages = [mainPage];
+        return this;
     }
-    async initial(entityName, collection, options) {
-        const ctx = this.createCtx('initial', entityName, { data: collection });
-        return this.run(ctx, () => this.backend.initial(entityName, ctx.data, options));
+    setRelatedPages(relatedPages) {
+        this.adapter.pages = [...(this.adapter.pages || []), ...relatedPages];
+        return this;
     }
-    async getOne(entityName, id) {
-        const ctx = this.createCtx('getOne', entityName, { id });
-        return this.run(ctx, () => this.backend.getOne(entityName, id));
+    setPages(pages) {
+        this.adapter.pages = pages;
+        return this;
     }
-    async updateOne(entityName, id, keyValues) {
-        const ctx = this.createCtx('update', entityName, { id, data: keyValues });
-        return this.run(ctx, () => this.backend.updateOne(entityName, id, ctx.data));
+    setExitUrl(params) {
+        this.adapter.exitUrl = `/${params.applicationName}/m/${params.moduleName}/e/${params.entityName}/list`;
+        return this;
     }
-    async deleteOne(entityName, id) {
-        const ctx = this.createCtx('delete', entityName, { id });
-        return this.run(ctx, () => this.backend.deleteOne(entityName, id));
-    }
-    async insertOne(entityName, entity) {
-        const ctx = this.createCtx('create', entityName, { data: entity });
-        return this.run(ctx, () => this.backend.insertOne(entityName, ctx.data));
-    }
-    async getAll(entityName) {
-        const ctx = this.createCtx('getAll', entityName);
-        return this.run(ctx, () => this.backend.getAll(entityName));
-    }
-    async query(entityName, request) {
-        const ctx = this.createCtx('query', entityName, { request });
-        return this.run(ctx, () => this.backend.query(entityName, request));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMiddlewareEntityStorageService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMiddlewareEntityStorageService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMiddlewareEntityStorageService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Entity Event Dispatcher - A wrapper for entity-specific events
- * Handles pattern-based dispatching for entity operations with wildcard support
- */
-class AXPEntityEventDispatcherService {
-    constructor() {
-        this.eventService = inject(AXPDistributedEventListenerService);
-    }
-    async dispatchEntityEvent(operation, entityName, data) {
-        const enhancedData = {
-            ...data,
-            entityName,
-            operation,
-            timestamp: new Date(),
-            source: 'entity-dispatcher',
-        };
-        const eventKeysToDispatch = await this.getAllMatchingEventKeys(operation, entityName);
-        const dispatchPromises = eventKeysToDispatch.map((key) => this.eventService.dispatch(key, enhancedData));
-        await Promise.all(dispatchPromises);
-    }
-    async getAllMatchingEventKeys(operation, entityName) {
-        const eventKeys = new Set();
-        const exactKeys = this.generateEventKeys(operation, entityName);
-        exactKeys.forEach((key) => eventKeys.add(key));
-        const wildcardKeys = await this.findMatchingWildcardKeys(operation, entityName);
-        wildcardKeys.forEach((key) => eventKeys.add(key));
-        return Array.from(eventKeys);
-    }
-    async findMatchingWildcardKeys(operation, entityName) {
-        const matchingKeys = [];
-        const allListenerKeys = await this.eventService.getRegisteredKeys();
-        const actualEventKey = `entity.${operation}.${entityName}`;
-        for (const listenerKey of allListenerKeys) {
-            if (listenerKey.includes('*') && this.matchesEntityPattern(actualEventKey, listenerKey)) {
-                matchingKeys.push(listenerKey);
-            }
-        }
-        return matchingKeys;
-    }
-    matchesEntityPattern(eventKey, pattern) {
-        if (!pattern.startsWith('entity.') || !pattern.includes('*')) {
-            return false;
-        }
-        const regexPattern = pattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
-        const regex = new RegExp(`^${regexPattern}$`);
-        return regex.test(eventKey);
-    }
-    generateEventKeys(operation, entityName) {
-        const keys = [];
-        keys.push(`entity.${operation}`);
-        keys.push(`entity.${operation}.${entityName}`);
-        const entityParts = entityName.split('.');
-        if (entityParts.length > 1) {
-            const moduleName = entityParts[0];
-            keys.push(`entity.${operation}.${moduleName}`);
-        }
-        return keys;
-    }
-    async dispatchInserted(entityName, data) {
-        await this.dispatchEntityEvent('inserted', entityName, data);
-    }
-    async dispatchUpdated(entityName, data) {
-        await this.dispatchEntityEvent('updated', entityName, data);
-    }
-    async dispatchDeleted(entityName, data) {
-        await this.dispatchEntityEvent('deleted', entityName, data);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityEventDispatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityEventDispatcherService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityEventDispatcherService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class AXPLayoutAdapterBuilder {
-    constructor() {
-        this.adapter = {};
-    }
-    setEntity(entity, rootContext) {
-        this.entity = entity;
-        this.rootContext = rootContext;
-        return this;
-    }
-    setDependencies(dependencies) {
-        this.dependencies = dependencies;
-        return this;
-    }
-    setMainPage(mainPage) {
-        this.adapter.pages = [mainPage];
-        return this;
-    }
-    setRelatedPages(relatedPages) {
-        this.adapter.pages = [...(this.adapter.pages || []), ...relatedPages];
-        return this;
-    }
-    setPages(pages) {
-        this.adapter.pages = pages;
-        return this;
-    }
-    setExitUrl(params) {
-        this.adapter.exitUrl = `/${params.applicationName}/m/${params.moduleName}/e/${params.entityName}/list`;
-        return this;
-    }
-    build() {
-        return {
-            name: `${this.entity?.module}.${this.entity?.name}`,
-            title: `${this.entity?.interfaces?.master?.single?.title}`,
-            label: this.entity?.formats.plural,
-            actions: [],
-            breadcrumbs: this.createBreadcrumbs(),
-            execute: this.createExecuteFunction(),
-            load: this.createLoadFunction(),
-            pages: this.adapter.pages || [],
-            exitUrl: this.adapter.exitUrl,
-        };
+    build() {
+        return {
+            name: `${this.entity?.module}.${this.entity?.name}`,
+            title: `${this.entity?.interfaces?.master?.single?.title}`,
+            label: this.entity?.formats.plural,
+            actions: [],
+            breadcrumbs: this.createBreadcrumbs(),
+            execute: this.createExecuteFunction(),
+            load: this.createLoadFunction(),
+            pages: this.adapter.pages || [],
+            exitUrl: this.adapter.exitUrl,
+        };
     }
     createBreadcrumbs() {
         const session = this.dependencies.session;
@@ -2634,10 +3014,10 @@ class AXPLayoutAdapterBuilder {
             };
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutAdapterBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutAdapterBuilder, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutAdapterBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutAdapterBuilder, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutAdapterBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutAdapterBuilder, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2839,13 +3219,13 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
         return {
             commands: {
                 reject: {
-                    title: 't("discard")',
+                    title: '@general:actions.discard.title',
                     color: 'default',
                     visible: '{{context.isDirty()}}',
                     command: { name: 'discard' },
                 },
                 accept: {
-                    title: 't("confirm")',
+                    title: '@general:actions.confirm.title',
                     color: 'secondary',
                     visible: '{{context.isDirty()}}',
                     command: { name: 'update-entity' },
@@ -2990,7 +3370,7 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                             module: entityDef.module,
                             title: entityDef.title,
                             parentKey: entityDef.parentKey,
-                            source: entityDef.source,
+                            source: `${entityDef.module}.${entityDef.name}`,
                         },
                         data: action.scope == AXPEntityCommandScope.Selected
                             ? executeContext
@@ -3163,10 +3543,10 @@ class AXPRelatedEntityConverterFactory {
     createTabListConverter() {
         return this.createConverter('tab-list');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPRelatedEntityConverterFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPRelatedEntityConverterFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPRelatedEntityConverterFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPRelatedEntityConverterFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPRelatedEntityConverterFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPRelatedEntityConverterFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3182,6 +3562,11 @@ class AXPMainEntityContentBuilder {
     async build(entity, rootContext, dependencies, rootTitle) {
         const groups = entity?.groups ?? [];
         const singleInterface = entity?.interfaces?.master?.single;
+        const updateInterface = entity?.interfaces?.master?.update;
+        // Get list of visible property names from single interface
+        const visiblePropertyNames = new Set(singleInterface?.properties?.map((p) => p.name) ?? []);
+        // Get list of editable property names from update interface
+        const editablePropertyNames = new Set(updateInterface?.properties?.map((p) => p.name) ?? []);
         // Accumulate groups from main and merge-detail related entities for validation/title lookup
         const allGroups = [...groups];
         // Create expression evaluator for actions
@@ -3432,7 +3817,7 @@ class AXPMainEntityContentBuilder {
                 })),
             ];
             // eslint-disable-next-line no-console
-            console.debug('[AXP] merge-details sorted sections', debugSections);
+            //console.debug('[AXP] merge-details sorted sections', debugSections);
         }
         catch { }
         const getVisiblePropertyByGroupId = async (groupId) => {
@@ -3462,7 +3847,7 @@ class AXPMainEntityContentBuilder {
             settings: {
                 commands: {
                     reject: {
-                        title: 't("discard")',
+                        title: '@general:actions.discard.title',
                         color: 'default',
                         visible: '{{context.isDirty()}}',
                         command: {
@@ -3470,7 +3855,7 @@ class AXPMainEntityContentBuilder {
                         },
                     },
                     accept: {
-                        title: 't("confirm")',
+                        title: '@general:actions.confirm.title',
                         color: 'secondary',
                         visible: '{{context.isDirty()}}',
                         command: {
@@ -3492,57 +3877,68 @@ class AXPMainEntityContentBuilder {
                 };
             },
             execute: async (e, context) => {
-                if (e.name == 'update-entity') {
-                    const fn = entity?.commands?.update?.execute;
-                    const result = await fn(context);
-                    return {
-                        success: true,
-                        result: result,
-                    };
-                }
-                else {
-                    // Find action in single interface actions
-                    const action = actions.find((a) => a.name === e.name);
-                    if (action && dependencies?.workflowService) {
-                        // Evaluate action options with current context
-                        let evaluatedOptions = action.options;
-                        if (evaluateExpressions && action.options) {
-                            try {
-                                evaluatedOptions = await evaluateExpressions(action.options);
+                try {
+                    if (e.name == 'update-entity') {
+                        const fn = entity?.commands?.update?.execute;
+                        const result = await fn(context);
+                        return {
+                            success: true,
+                            result: result,
+                        };
+                    }
+                    else {
+                        // Find action in single interface actions
+                        const action = actions.find((a) => a.name === e.name);
+                        if (action && dependencies?.workflowService) {
+                            // Evaluate action options with current context
+                            let evaluatedOptions = action.options;
+                            if (evaluateExpressions && action.options) {
+                                try {
+                                    evaluatedOptions = await evaluateExpressions(action.options);
+                                }
+                                catch {
+                                    // Keep original options if evaluation fails
+                                }
                             }
-                            catch {
-                                // Keep original options if evaluation fails
+                            const commandName = e.name.split('&')[0];
+                            if (this.workflowService.exists(commandName)) {
+                                await this.workflowService.execute(commandName, {
+                                    entity: getEntityInfo(entity).source,
+                                    data: context,
+                                    entityInfo: {
+                                        name: entity.name,
+                                        module: entity.module,
+                                        title: entity.title,
+                                        parentKey: entity.parentKey,
+                                        source: `${entity.module}.${entity.name}`,
+                                    },
+                                    options: evaluatedOptions,
+                                    metadata: action.metadata,
+                                });
+                                return {
+                                    success: true,
+                                };
+                            }
+                            if (this.commandService.exists(commandName)) {
+                                // check options for evaluation
+                                await this.commandService.execute(commandName, e.options);
                             }
                         }
-                        const commandName = e.name.split('&')[0];
-                        if (this.workflowService.exists(commandName)) {
-                            await this.workflowService.execute(commandName, {
-                                entity: getEntityInfo(entity).source,
-                                data: context,
-                                entityInfo: {
-                                    name: entity.name,
-                                    module: entity.module,
-                                    title: entity.title,
-                                    parentKey: entity.parentKey,
-                                    source: entity.source,
-                                },
-                                options: evaluatedOptions,
-                                metadata: action.metadata,
-                            });
-                            return {
-                                success: true,
-                            };
-                        }
-                        if (this.commandService.exists(commandName)) {
-                            // check options for evaluation
-                            await this.commandService.execute(commandName, e.options);
-                        }
+                        return {
+                            success: false,
+                            error: {
+                                code: 'invalid_command',
+                                message: 'Invalid command',
+                            },
+                        };
                     }
+                }
+                catch (error) {
                     return {
                         success: false,
                         error: {
-                            code: 'invalid_command',
-                            message: 'Invalid command',
+                            //TODO: handle error as object
+                            message: error,
                         },
                     };
                 }
@@ -3590,9 +3986,15 @@ class AXPMainEntityContentBuilder {
                                                 },
                                             },
                                         },
-                                        children: (await getVisiblePropertyByGroupId(s.id)).map((p) => {
+                                        children: (await getVisiblePropertyByGroupId(s.id))
+                                            .filter((p) => visiblePropertyNames.has(p.name))
+                                            .map((p) => {
                                             const layout = getPropertyLayout(p.name, p);
                                             const prefixed = p.__dataPath ? `${p.__dataPath}.${p.name}` : p.name;
+                                            // Check if property is editable (exists in update interface)
+                                            const isEditable = editablePropertyNames.has(p.name);
+                                            // Check if property has its own disabled option
+                                            const hasOwnDisabled = p.schema.interface?.options?.disabled !== undefined;
                                             return {
                                                 type: 'grid-item-layout',
                                                 name: prefixed,
@@ -3626,7 +4028,9 @@ class AXPMainEntityContentBuilder {
                                                                     })),
                                                                     // Attach dataPath for merged properties to be available in widgets/options if needed
                                                                     dataPath: p.__dataPath,
-                                                                }),
+                                                                }, 
+                                                                // Only set disabled if property doesn't have its own disabled option
+                                                                hasOwnDisabled ? {} : { disabled: !isEditable }),
                                                             },
                                                         ],
                                                     },
@@ -3742,10 +4146,10 @@ class AXPMainEntityContentBuilder {
         }
         return tabs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMainEntityContentBuilder, deps: [{ token: AXPRelatedEntityConverterFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMainEntityContentBuilder, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPMainEntityContentBuilder, deps: [{ token: AXPRelatedEntityConverterFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPMainEntityContentBuilder, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMainEntityContentBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPMainEntityContentBuilder, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3884,10 +4288,10 @@ class AXPLayoutAdapterFactory {
         const title = await dependencies.expressionEvaluator.evaluate(entity.interfaces?.master?.single?.title, rootContext);
         return title;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutAdapterFactory, deps: [{ token: AXPRelatedEntityConverterFactory }, { token: AXPMainEntityContentBuilder }, { token: AXPLayoutAdapterBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutAdapterFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutAdapterFactory, deps: [{ token: AXPRelatedEntityConverterFactory }, { token: AXPMainEntityContentBuilder }, { token: AXPLayoutAdapterBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutAdapterFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutAdapterFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLayoutAdapterFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4080,7 +4484,6 @@ function getVisibleProperties(entity) {
 class AXPEntityListTableService {
     constructor() {
         //#region ----   Services & Dependencies   ----
-        this.entityResolver = inject(AXPEntityResolver);
         this.workflow = inject(AXPWorkflowService);
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.evaluateExpressions = async (options, data) => {
@@ -4213,7 +4616,7 @@ class AXPEntityListTableService {
                 module: entity.module,
                 title: entity.title,
                 parentKey: entity.parentKey,
-                source: entity.source,
+                source: `${entity.module}.${entity.name}`,
             },
             data: action?.scope == AXPEntityCommandScope.Selected ? selectedRows : data,
             options: options,
@@ -4253,10 +4656,10 @@ class AXPEntityListTableService {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListTableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListTableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListTableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListTableService, decorators: [{
             type: Injectable
         }] });
 
@@ -4275,6 +4678,9 @@ class AXPEntityListToolbarService {
             filterDefinitions: this.createFilterDefinitions(entity),
             columnDefinitions: this.createColumnDefinitions(entity, options),
             sortDefinitions: this.createSortDefinitions(entity),
+            canFilter: true,
+            canColumns: true,
+            canSort: true,
         };
         return toolbarOptions;
     }
@@ -4347,17 +4753,17 @@ class AXPEntityListToolbarService {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListToolbarService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListToolbarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListToolbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListToolbarService, decorators: [{
             type: Injectable
         }] });
 
 class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.entityResolver = inject(AXPEntityResolver);
+        this.entityService = inject(AXPEntityDefinitionRegistryService);
         this.workflow = inject(AXPWorkflowService);
         this.entityListTableService = inject(AXPEntityListTableService);
         this.entityListToolbarService = inject(AXPEntityListToolbarService);
@@ -4367,7 +4773,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.listNode = signal(null, ...(ngDevMode ? [{ debugName: "listNode" }] : []));
         this.list = viewChild('list', ...(ngDevMode ? [{ debugName: "list" }] : []));
         this.allWidgets = viewChildren(AXPWidgetRendererDirective, ...(ngDevMode ? [{ debugName: "allWidgets" }] : []));
-        this.listWidget = linkedSignal(() => this.allWidgets().find((widget) => widget.node()?.type === AXPWidgetsCatalog.list));
+        this.listWidget = linkedSignal(() => this.allWidgets().find((widget) => widget.node()?.type === AXPWidgetsCatalog.list), ...(ngDevMode ? [{ debugName: "listWidget" }] : []));
         this.toolbarWidget = computed(() => this.allWidgets().find((widget) => widget.node()?.type === AXPWidgetsCatalog.listToolbar), ...(ngDevMode ? [{ debugName: "toolbarWidget" }] : []));
         this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
         this.toolbarNode = signal(null, ...(ngDevMode ? [{ debugName: "toolbarNode" }] : []));
@@ -4446,7 +4852,8 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.#effect = effect(() => {
             const queries = this.getValue()?.toolbar;
             const listInstance = this.listWidget()?.instance;
-            const dataSource = this.listWidget()?.options()['dataSource'];
+            // const dataSource = this.listWidget()?.options()['dataSource'] as AXDataSource;
+            const dataSource = listInstance?.options()?.['dataSource'];
             const isMounted = this.isMounted();
             if (!this.hasRequiredDependencies(dataSource, queries, listInstance)) {
                 return;
@@ -4489,7 +4896,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
                 module: this.entity()?.module,
                 title: this.entity()?.title,
                 parentKey: this.entity()?.parentKey,
-                source: this.entity()?.source,
+                source: `${this.entity()?.module}.${this.entity()?.name}`,
             },
             data: action?.scope == AXPEntityCommandScope.Selected
                 ? this.selectedItems()
@@ -4591,7 +4998,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
             throw new Error('Invalid entity source');
         }
         // Resolve entity and set it in the signal
-        const resolvedEntity = await this.entityResolver.get(moduleName, entityName);
+        const resolvedEntity = await this.entityService.resolve(moduleName, entityName);
         if (!resolvedEntity) {
             throw new Error(`Entity not found: ${this.entitySource()}`);
         }
@@ -4646,8 +5053,8 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPEntityListWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "\"ax-h-full\"" } }, providers: [AXPEntityListTableService, AXPEntityListToolbarService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "allWidgets", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPEntityListWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "\"ax-h-full\"" } }, providers: [AXPEntityListTableService, AXPEntityListToolbarService], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "allWidgets", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (showEntityActions()) {
       <div class="ax-flex ax-gap-2 ax-justify-end ax-mb-4">
         @for (action of primaryActions(); track $index) {
@@ -4694,7 +5101,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
           <ax-button
             [class.ax-sm]="layoutThemeService.isSmall()"
             [iconOnly]="layoutThemeService.isSmall()"
-            [text]="'actions'"
+            [text]="'@general:terms.interface.actions' | translate | async"
             [look]="layoutThemeService.isSmall() ? 'blank' : 'solid'"
             [color]="'default'"
           >
@@ -4748,9 +5155,9 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         ></ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXPLayoutBuilderModule }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { 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: "component", type: i3$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXPWidgetCoreModule }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityListWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityListWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -4800,7 +5207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
           <ax-button
             [class.ax-sm]="layoutThemeService.isSmall()"
             [iconOnly]="layoutThemeService.isSmall()"
-            [text]="'actions'"
+            [text]="'@general:terms.interface.actions' | translate | async"
             [look]="layoutThemeService.isSmall() ? 'blank' : 'solid'"
             [color]="'default'"
           >
@@ -4861,7 +5268,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [AXPEntityListTableService, AXPEntityListToolbarService],
-                    imports: [CommonModule, AXDecoratorModule, AXPLayoutBuilderModule, AXButtonModule, AXDropdownModule],
+                    imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXPWidgetCoreModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXTranslationModule,
+                    ],
                 }]
         }] });
 
@@ -4896,10 +5310,10 @@ const AXPEntityListWidget = {
 };
 
 class AXPEntityReferenceWidgetViewComponent extends AXPLayoutBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPEntityReferenceWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPEntityReferenceWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -4928,10 +5342,10 @@ class AXPEntityReferenceWidgetEditComponent extends AXPLayoutBaseWidgetComponent
         }, ...(ngDevMode ? [{ debugName: "#efEntity" }] : []));
     }
     #efEntity;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPEntityReferenceWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPEntityReferenceWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -4947,10 +5361,10 @@ var entityReferenceWidgetEdit_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPEntityReferenceWidgetColumnComponent extends AXPColumnWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPEntityReferenceWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{rawValue}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPEntityReferenceWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{rawValue}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     template: `{{rawValue}}`,
@@ -4967,10 +5381,10 @@ var entityReferenceWidgetColumn_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPEntityReferenceWidgetPrintComponent extends AXPLayoutBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPEntityReferenceWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPEntityReferenceWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetPrintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -4987,10 +5401,10 @@ var entityReferenceWidgetPrint_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPEntityReferenceWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPEntityReferenceWidgetDesignerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPEntityReferenceWidgetDesignerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityReferenceWidgetDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityReferenceWidgetDesignerComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -5033,6 +5447,121 @@ const AXPEntityReferenceWidget = {
     },
 };
 
+class AXPLookupFilterWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Computed Properties   ----
+        this.editorPath = `__${this.path}EditorValue`;
+        this.entity = computed(() => this.options()['entity'], ...(ngDevMode ? [{ debugName: "entity" }] : []));
+        this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        // protected expose = computed<string | undefined | any[]>(() => this.options()['expose'] as string);
+        this.customFilter = computed(() => this.options()['filter'], ...(ngDevMode ? [{ debugName: "customFilter" }] : []));
+        this.multiple = computed(() => (this.options()['multiple'] ?? false), ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        //#endregion
+        //#region ----   Lookup Node   ----
+        this.lookupNode = signal({
+            type: 'lookup-editor',
+            defaultValue: undefined,
+            path: this.path,
+            options: {},
+        }, ...(ngDevMode ? [{ debugName: "lookupNode" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        this.#efUpdateLookupNode = effect(() => {
+            // console.log('path:', this.path, this.expose());
+            const node = {
+                type: 'lookup-editor',
+                // defaultValue: this.getValue()?.value,
+                path: this.editorPath,
+                options: {
+                    entity: this.entity(),
+                    expose: [
+                        {
+                            source: this.textField(),
+                            target: `${this.path}EditorObj.title`,
+                        },
+                        {
+                            source: this.valueField(),
+                            target: `${this.path}EditorObj.id`,
+                        },
+                    ],
+                    look: 'select',
+                    multiple: this.multiple(),
+                    textField: this.textField(),
+                    filter: this.customFilter(),
+                    allowClear: true,
+                },
+            };
+            this.lookupNode.set(node);
+        }, ...(ngDevMode ? [{ debugName: "#efUpdateLookupNode" }] : []));
+        this.#efUpdateValue = effect(() => {
+            const newValueObj = this.contextService.getValue(`${this.path}EditorObj`);
+            const prevValue = untracked(() => this.getValue()?.value);
+            if (isEqual(prevValue, newValueObj?.[this.valueField()])) {
+                return;
+            }
+            const value = this.multiple()
+                ? newValueObj?.[this.valueField()].map((v) => v[this.valueField()])
+                : newValueObj?.[this.valueField()];
+            const displayText = this.multiple()
+                ? newValueObj?.[this.textField()].map((v) => v[this.textField()]).join(',')
+                : newValueObj?.[this.textField()];
+            this.setValue({
+                value: value,
+                operation: {
+                    type: this.multiple() ? 'in' : 'equal',
+                },
+                displayText: displayText,
+            });
+        }, ...(ngDevMode ? [{ debugName: "#efUpdateValue" }] : []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    #efUpdateLookupNode;
+    #efUpdateValue;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLookupFilterWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPLookupFilterWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` <ng-container axp-widget-renderer [node]="lookupNode()" [mode]="'edit'"></ng-container> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLookupFilterWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ` <ng-container axp-widget-renderer [node]="lookupNode()" [mode]="'edit'"></ng-container> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        FormsModule,
+                        AXSelectBoxModule,
+                        AXTextBoxModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXValidationModule,
+                        AXFormModule,
+                        AXPWidgetCoreModule,
+                    ],
+                }]
+        }] });
+
+var lookupFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPLookupFilterWidgetEditComponent: AXPLookupFilterWidgetEditComponent
+});
+
+const AXPLookupFilterWidget = {
+    name: 'lookup-filter',
+    title: 'Lookup Filter',
+    // categories: AXP_WIDGETS_FILTER_CATEGORY,
+    type: 'filter',
+    groups: [AXPWidgetGroupEnum.EntityWidget],
+    icon: 'fa-light fa-square',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return lookupFilterWidgetEdit_component; }).then((c) => c.AXPLookupFilterWidgetEditComponent),
+        },
+    },
+};
+
 class AXPLookupWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -5095,8 +5624,8 @@ class AXPLookupWidgetViewComponent extends AXPValueWidgetComponent {
         cls[`ax-gap-1`] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPLookupWidgetViewComponent, isStandalone: true, selector: "axp-lookup-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLookupWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPLookupWidgetViewComponent, isStandalone: true, selector: "axp-lookup-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     @if(loading())
     {
       <ax-loading></ax-loading>
@@ -5114,9 +5643,9 @@ 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.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLookupWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-lookup-widget-view',
@@ -5152,383 +5681,194 @@ var lookupWidgetView_component = /*#__PURE__*/Object.freeze({
     AXPLookupWidgetViewComponent: AXPLookupWidgetViewComponent
 });
 
-class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
+//#endregion
+class AXPEntityDataSelectorService {
     constructor() {
-        super(...arguments);
-        this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
-        this.initialSelectedItems = [];
-        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-        this.allowSelect = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "allowSelect" }] : []));
-    }
-    ngAfterViewInit() {
-        if (this.initialSelectedItems.length > 0 && this.grid()) {
-            this.grid()?.selectRows(...this.initialSelectedItems);
-        }
-        if (this.searchTerm) {
-            this.vm.applyInlineFilter(this.searchTerm);
-        }
-        else {
-            this.vm.applyFilterAndSort();
-        }
+        //#region ----   Services & Dependencies   ----
+        this.dataSelectorService = inject(AXPDataSelectorService);
+        this.filterOperatorMiddleware = inject(AXPFilterOperatorMiddlewareService);
+        this.widgetResolver = inject(AXPWidgetRegistryService);
     }
-    handleRowDbClick(e) {
-        this.close({ items: [e.data] });
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Open entity data selector popup
+     */
+    async open(options) {
+        const config = this.createDataSelectorConfig(options);
+        const result = await this.dataSelectorService.open(config);
+        return result;
     }
-    handleRowClick(e) {
-        if (this.vm.allowMultiple()) {
-            this.selectedItems.set([...this.selectedItems(), e.data]);
-        }
-        else if (this.selectedItems().length > 0) {
-            const selected = this.selectedItems().find((item) => item.id === e.data.id);
-            if (selected) {
-                this.selectedItems.set(this.selectedItems().filter((item) => item.id !== selected.id));
-            }
-            else {
-                this.selectedItems.set([e.data]);
-            }
-        }
-        else if (this.selectedItems().length === 0) {
-            this.selectedItems.set([e.data]);
-        }
-        else {
-            this.selectedItems.set([e.data]);
-        }
+    /**
+     * Open entity data selector with category filter
+     */
+    async openWithCategoryFilter(options, categoryFilterConfig) {
+        const config = this.createDataSelectorConfig({
+            ...options,
+            allowCreate: false
+        });
+        // Add category filter to config
+        config.categoryFilter = {
+            enabled: true,
+            ...categoryFilterConfig
+        };
+        const result = await this.dataSelectorService.open(config);
+        return result;
     }
-    async handleSelectedRowsChange(rows) {
-        this.selectedItems.set(rows);
+    //#endregion
+    //#region ----   Private Methods   ----
+    /**
+     * Create data selector configuration from entity options
+     */
+    createDataSelectorConfig(options) {
+        const dataSource = this.createDataSource(options);
+        const columns = this.createColumns(options);
+        const searchFields = this.getSearchFields(options);
+        return {
+            title: options.title,
+            dataSource,
+            columns,
+            selectionMode: options.allowMultiple ? 'multiple' : 'single',
+            searchFields,
+            parentField: options.entity.parentKey,
+            filters: options.filters || undefined,
+            allowCreate: options.allowCreate ?? this.canCreate(options.entity),
+            // Note: Custom filters will be applied to the dataSource in createDataSource
+        };
     }
-    handleChangeSearchValue(e) {
-        if (e.isUserInteraction) {
-            this.vm.applyInlineFilter(e.value);
-        }
-    }
-    async handleCreateNewClick() {
-        this.close();
-        await this.vm.create();
-    }
-    handleCloseClick() {
-        this.close();
-    }
-    handleSelectClick() {
-        this.close({ items: this.selectedItems() });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPLookupWidgetSelectorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4  ax-overflow-hidden">
-      @if (vm.hasInlineFilters()) {
-        <div class="ax-w-full">
-          <ax-search-box
-            [placeholder]="('widget.lookup.search' | translate | async) + vm.inlineFiltersPlaceholders().join(', ')"
-            [value]="searchTerm"
-            (onValueChanged)="handleChangeSearchValue($event)"
-            [axAutoFocus]="true"
-            ><ax-clear-button></ax-clear-button
-          ></ax-search-box>
-        </div>
-      }
-      <ax-data-table
-        #grid
-        [showFooter]="false"
-        class="ax-h-[50vh]"
-        [paging]="true"
-        [fetchDataMode]="'manual'"
-        [loading]="{ enabled: true, animation: true }"
-        [dataSource]="vm.dataSource"
-        [parentField]="vm.parentKey()"
-        (selectedRowsChange)="handleSelectedRowsChange($event)"
-        (onRowClick)="handleRowClick($event)"
-        (onRowDbClick)="handleRowDbClick($event)"
-      >
-        @if (vm.allowMultiple()) {
-          <ax-select-column fixed="start" [width]="'50px'"></ax-select-column>
-        }
-        @for (col of vm.columns(); track col.name) {
-          @if (col.visible) {
-            <axp-widget-column-renderer
-              [expandHandler]="$index === 0 && vm.parentKey() ? true : false"
-              [caption]="col.title | translate | async"
-              [node]="col.node()"
-            ></axp-widget-column-renderer>
-          }
-        }
-      </ax-data-table>
-    </div>
-    <ax-footer>
-      <ax-suffix>
-        <ax-button look="solid" [text]="('close' | translate | async)!" (onClick)="handleCloseClick()"> </ax-button>
-        <ax-button
-          look="solid"
-          color="primary"
-          [text]="('select' | translate | async)!"
-          (onClick)="handleSelectClick()"
-          [disabled]="allowSelect() === false"
-        >
-        </ax-button>
-        @if (!vm.canCreate()) {
-          <ax-button
-            look="solid"
-            color="primary"
-            [text]="'Create-New' | translate | async"
-            (onClick)="handleCreateNewClick()"
-          >
-            <ax-prefix>
-              <ax-icon icon="fa-solid fa-add"></ax-icon>
-            </ax-prefix>
-          </ax-button>
-        }
-      </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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetSelectorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4  ax-overflow-hidden">
-      @if (vm.hasInlineFilters()) {
-        <div class="ax-w-full">
-          <ax-search-box
-            [placeholder]="('widget.lookup.search' | translate | async) + vm.inlineFiltersPlaceholders().join(', ')"
-            [value]="searchTerm"
-            (onValueChanged)="handleChangeSearchValue($event)"
-            [axAutoFocus]="true"
-            ><ax-clear-button></ax-clear-button
-          ></ax-search-box>
-        </div>
-      }
-      <ax-data-table
-        #grid
-        [showFooter]="false"
-        class="ax-h-[50vh]"
-        [paging]="true"
-        [fetchDataMode]="'manual'"
-        [loading]="{ enabled: true, animation: true }"
-        [dataSource]="vm.dataSource"
-        [parentField]="vm.parentKey()"
-        (selectedRowsChange)="handleSelectedRowsChange($event)"
-        (onRowClick)="handleRowClick($event)"
-        (onRowDbClick)="handleRowDbClick($event)"
-      >
-        @if (vm.allowMultiple()) {
-          <ax-select-column fixed="start" [width]="'50px'"></ax-select-column>
-        }
-        @for (col of vm.columns(); track col.name) {
-          @if (col.visible) {
-            <axp-widget-column-renderer
-              [expandHandler]="$index === 0 && vm.parentKey() ? true : false"
-              [caption]="col.title | translate | async"
-              [node]="col.node()"
-            ></axp-widget-column-renderer>
-          }
-        }
-      </ax-data-table>
-    </div>
-    <ax-footer>
-      <ax-suffix>
-        <ax-button look="solid" [text]="('close' | translate | async)!" (onClick)="handleCloseClick()"> </ax-button>
-        <ax-button
-          look="solid"
-          color="primary"
-          [text]="('select' | translate | async)!"
-          (onClick)="handleSelectClick()"
-          [disabled]="allowSelect() === false"
-        >
-        </ax-button>
-        @if (!vm.canCreate()) {
-          <ax-button
-            look="solid"
-            color="primary"
-            [text]="'Create-New' | translate | async"
-            (onClick)="handleCreateNewClick()"
-          >
-            <ax-prefix>
-              <ax-icon icon="fa-solid fa-add"></ax-icon>
-            </ax-prefix>
-          </ax-button>
-        }
-      </ax-suffix>
-    </ax-footer>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        CommonModule,
-                        AXCommonModule,
-                        AXButtonModule,
-                        AXFormModule,
-                        AXDecoratorModule,
-                        AXDropdownButtonModule,
-                        AXDataTableModule,
-                        AXSearchBoxModule,
-                        AXPLayoutBuilderModule,
-                        AXTranslationModule,
-                    ],
-                    inputs: [],
-                }]
-        }] });
-
-class AXPLookupWidgetSelectorViewModel {
-    constructor(injector, entityDef, options = {
-        parentFilters: null,
-        customFilter: null,
-        sortedFields: [],
-        columns: [],
-    }) {
-        this.injector = injector;
-        this.entityDef = entityDef;
-        this.options = options;
-        this.workflow = this.injector.get(AXPWorkflowService);
-        this.filterOperatorMiddleware = this.injector.get(AXPFilterOperatorMiddlewareService);
-        this.widgetResolver = this.injector.get(AXPWidgetRegistryService);
-        this.dataSource = new AXDataSource({
+    /**
+     * Create data source from entity definition
+     */
+    createDataSource(options) {
+        const { entity, filters, parentFilters } = options;
+        return new AXDataSource({
             byKey: (key) => {
-                const func = this.entityDef.queries.byKey.execute;
+                const func = entity.queries.byKey.execute;
                 return func();
             },
             load: (e) => {
-                const func = this.entityDef.queries.list?.execute;
-                this.mergeFilter(e, this.options.customFilter);
+                const func = entity.queries.list?.execute;
+                this.mergeFilters(e, filters, parentFilters);
                 return func(e);
             },
             pageSize: 10,
             key: 'id',
         });
-        this.canCreate = computed(() => {
-            return this.entityDef.commands?.create?.execute != null;
-        }, ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
-        this.parentKey = computed(() => {
-            return this.entityDef.parentKey;
-        }, ...(ngDevMode ? [{ debugName: "parentKey" }] : []));
-        this.allowMultiple = computed(() => {
-            return this.options.allowMultiple ?? false;
-        }, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : []));
-        this.inlineFiltersPlaceholders = computed(() => {
-            return (this.entityDef?.properties.filter((p) => p.options?.filter?.inline?.enabled).map((c) => c.title ?? c.name) ?? []);
-        }, ...(ngDevMode ? [{ debugName: "inlineFiltersPlaceholders" }] : []));
-        this.hasInlineFilters = computed(() => {
-            return this.inlineFiltersPlaceholders().length > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasInlineFilters" }] : []));
-        this.columns = () => {
-            const { columns = [], properties } = this.entityDef;
-            const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
-            const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
-            return columns
-                .filter(({ name, showAs }) => visiblePropNames.has(name) || showAs)
-                .filter(({ name }) => ((this.options.columns?.length ?? 0) == 0) || this.options.columns?.includes(name))
-                .map((column) => {
-                if (column.showAs) {
-                    const widgetConfig = this.widgetResolver.resolve(column.showAs.type);
-                    const property = {
-                        ...widgetConfig,
-                        name: column.name,
-                        title: column.title ?? '',
-                        schema: {
-                            dataType: 'string',
-                            interface: {
-                                type: column.showAs.type,
-                                options: column.showAs.options,
-                            },
+    }
+    /**
+     * Create columns configuration from entity definition
+     */
+    createColumns(options) {
+        const { entity, columns = [] } = options;
+        const { columns: entityColumns = [], properties } = entity;
+        const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
+        const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
+        return entityColumns
+            .filter(({ name, showAs }) => visiblePropNames.has(name) || showAs)
+            .filter(({ name }) => columns.length === 0 || columns.includes(name))
+            .map((column) => {
+            let property;
+            let widgetType;
+            let widgetOptions;
+            if (column.showAs) {
+                // Use custom column configuration
+                const widgetConfig = this.widgetResolver.resolve(column.showAs.type);
+                property = {
+                    ...widgetConfig,
+                    name: column.name,
+                    title: column.title ?? '',
+                    schema: {
+                        dataType: 'string',
+                        interface: {
+                            type: column.showAs.type,
+                            options: column.showAs.options,
                         },
-                    };
-                    return new AXPEntityListViewColumnViewModel(property, column);
-                }
-                else {
-                    const property = visibleProperties.find(({ name }) => name === column.name);
-                    return new AXPEntityListViewColumnViewModel(property, column);
+                    },
+                };
+                widgetType = column.showAs.type;
+                widgetOptions = column.showAs.options;
+            }
+            else {
+                // Use entity property configuration
+                property = visibleProperties.find(({ name }) => name === column.name);
+                widgetType = property.schema?.interface?.type || 'text';
+                widgetOptions = property.schema?.interface?.options || {};
+            }
+            return {
+                name: column.name,
+                title: property.title || column.title || column.name,
+                visible: true,
+                widget: {
+                    type: widgetType,
+                    options: widgetOptions
                 }
-            });
-        };
-        this.inlineFilters = {
-            field: null,
-            logic: 'or',
-            operator: null,
-            filters: [],
-        };
-        this.advanceFilters = {
-            field: null,
-            logic: 'and',
-            operator: null,
-            filters: [],
-        };
-    }
-    async create() {
-        await this.workflow.execute('create-entity', {
-            entity: getEntityInfo(this.entityDef).source,
+            };
         });
     }
-    applyInlineFilter(value, refresh = true) {
-        const props = this.entityDef.properties.filter((c) => c.options?.filter?.inline?.enabled);
-        this.inlineFilters.filters = [];
-        if (value) {
-            props.forEach((p) => {
-                this.inlineFilters.filters?.push({
-                    field: p.name,
-                    operator: {
-                        type: 'contains',
-                    },
-                    value,
-                });
-            });
+    /**
+     * Get searchable fields from entity properties
+     */
+    getSearchFields(options) {
+        const { entity, searchFields } = options;
+        if (searchFields && searchFields.length > 0) {
+            return searchFields;
         }
-        if (refresh)
-            this.applyFilterAndSort();
+        // Auto-detect searchable fields from entity properties
+        return entity.properties
+            .filter(p => p.options?.filter?.inline?.enabled)
+            .map(p => p.name);
     }
-    applyFilterAndSort() {
-        // this.dataSource.clearFilter();
-        //
-        //this.dataSource.sort(...this.sortedFields().map(s => ({ dir: s.dir, field: s.name } as AXDataSourceSortOption)));
-        //
-        // Check if inlineFilters or parentFilters have any filters
-        const hasInlineFilters = (this.inlineFilters?.filters?.length ?? 0) > 0;
-        const hasParentFilters = (this.options.parentFilters?.filters?.length ?? 0) > 0;
-        // Construct the filters array based on the presence of filters
+    /**
+     * Check if entity supports create operation
+     */
+    canCreate(entity) {
+        return entity.commands?.create?.execute != null;
+    }
+    /**
+     * Merge custom and parent filters into data source query
+     */
+    mergeFilters(request, customFilter, parentFilters) {
+        if (!customFilter && !parentFilters) {
+            return request;
+        }
         const filters = [];
-        if (this.options.customFilter) {
-            const cleanedFilters = AXPCleanNestedFilters([this.options.customFilter]);
+        // Add custom filter
+        if (customFilter) {
+            const cleanedFilters = AXPCleanNestedFilters([customFilter]);
             if (cleanedFilters.length > 0) {
                 filters.push(this.filterOperatorMiddleware.transformFilter(cleanedFilters[0]));
             }
         }
-        if (hasInlineFilters) {
-            filters.push(this.inlineFilters);
-        }
-        if (hasParentFilters && this.options.parentFilters) {
-            filters.push(this.options.parentFilters);
-        }
-        // Apply the filters to the dataSource
-        this.dataSource.filter({
-            field: null,
-            logic: 'and',
-            operator: null,
-            filters: filters,
-        });
-        // Refresh the dataSource
-        this.dataSource.refresh();
-    }
-    async find(value) {
-        this.applyInlineFilter(value.trim(), false);
-        const func = this.entityDef.queries.list?.execute;
-        return (await func({ filter: this.inlineFilters, take: 10 })) ?? [];
-    }
-    setCustomFilter(filter) {
-        this.options.customFilter = filter;
-        this.applyFilterAndSort();
-    }
-    mergeFilter(request, filter) {
-        if (!filter) {
-            return request;
+        // Add parent filters
+        if (parentFilters) {
+            filters.push(parentFilters);
         }
+        // Merge with existing filter
         if (request.filter) {
             request.filter = {
                 logic: 'and',
-                filters: [...[request.filter], ...(filter.filters ?? [])]
+                filters: [...[request.filter], ...filters]
             };
         }
         else {
-            request.filter = filter;
+            request.filter = {
+                field: null,
+                logic: 'and',
+                operator: null,
+                filters: filters,
+            };
         }
         return request;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDataSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDataSelectorService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDataSelectorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
@@ -5537,6 +5877,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.entityResolver = inject(AXPEntityResolver);
         this.formatService = inject(AXFormatService);
         this.popupService = inject(AXPopupService);
+        this.entityDataSelectorService = inject(AXPEntityDataSelectorService);
         this.translateService = inject(AXTranslationService);
         this.expose = computed(() => this.options()['expose'], ...(ngDevMode ? [{ debugName: "expose" }] : []));
         this.entity = computed(() => this.options()['entity'], ...(ngDevMode ? [{ debugName: "entity" }] : []));
@@ -5562,24 +5903,37 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         }, ...(ngDevMode ? [{ debugName: "selectedItemsText" }] : []));
         this.valueField = computed(() => this.entityDef()?.properties.find((c) => c.name == 'id')?.name ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
+        this.dataSource = computed(() => {
+            const entity = this.entityDef();
+            if (!entity)
+                return null;
+            return new AXDataSource({
+                byKey: (key) => {
+                    const func = entity.queries.byKey.execute;
+                    return func();
+                },
+                load: (e) => {
+                    const func = entity.queries.list?.execute;
+                    this.mergeFilter(e, this.customFilter());
+                    return func(e);
+                },
+                pageSize: 10,
+                key: 'id',
+            });
+        }, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
         this.searchTerm = signal(null, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
         this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
         this.textbox = viewChild(AXTagBoxComponent, ...(ngDevMode ? [{ debugName: "textbox" }] : []));
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.vm = signal(null, ...(ngDevMode ? [{ debugName: "vm" }] : []));
         this.placeholder = computed(() => {
             return this.selectedItems().length
                 ? ''
-                : this.translateService.translateSync('widget.lookup.search') + this.vm()?.inlineFiltersPlaceholders().join(', ');
+                : this.translateService.translateSync('@general:widgets.lookup.search');
         }, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.#efEntity = effect(async () => {
             const [module, entity] = this.entity().split('.');
             this.entityDef.set(await this.entityResolver.get(module, entity));
-            this.vm.set(new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef(), {
-                parentFilters: this.filter,
-                allowMultiple: this.multiple(),
-            }));
         }, ...(ngDevMode ? [{ debugName: "#efEntity" }] : []));
         this.#efValue = effect(() => {
             if (this.getValue()) {
@@ -5589,15 +5943,9 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
                 this.clear();
             }
         }, ...(ngDevMode ? [{ debugName: "#efValue" }] : []));
-        this.#efCustomFilter = effect(() => {
-            if (this.customFilter()) {
-                this.vm()?.setCustomFilter(this.customFilter());
-            }
-        }, ...(ngDevMode ? [{ debugName: "#efCustomFilter" }] : []));
     }
     #efEntity;
     #efValue;
-    #efCustomFilter;
     async findByValue() {
         this.isLoading.set(true);
         const rawValue = this.getValue();
@@ -5622,31 +5970,29 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     handleOnClick(e) {
         this.showSelector();
     }
-    showSelector() {
+    async showSelector() {
         this.isOpen.set(true);
-        const columnsCount = this.columns().length > 0 ? this.columns().length : (this.vm()?.columns().length ?? 0);
-        this.popupService
-            .open(AXPLookupWidgetSelectorComponent, {
-            title: `${this.translateService.translateSync('widget.lookup.search')} ${this.translateService.translateSync(this.entityDef()?.formats.plural ?? '')}`,
-            size: columnsCount < 3 ? 'md' : 'lg',
-            data: {
-                vm: new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef(), {
-                    customFilter: this.customFilter(),
-                    parentFilters: this.filter,
-                    allowMultiple: this.multiple(),
-                    columns: this.columns(),
-                }),
-                searchTerm: this.searchTerm(),
-                initialSelectedItems: this.selectedItems(),
-            },
-        })
-            .then((e) => {
+        try {
+            const result = await this.entityDataSelectorService.open({
+                entity: this.entityDef(),
+                title: `${this.translateService.translateSync('@general:widgets.lookup.search')} ${this.translateService.translateSync(this.entityDef()?.formats.plural ?? '')}`,
+                allowMultiple: this.multiple(),
+                filters: this.customFilter(),
+                parentFilters: this.filter,
+                columns: this.columns(),
+                allowCreate: true
+            });
+            if (result && 'items' in result) {
+                this.setItems(result.items);
+            }
+        }
+        catch (error) {
+            console.error('Error opening entity data selector:', error);
+        }
+        finally {
             this.isOpen.set(false);
             this.textbox()?.focus();
-            if (e.data?.items) {
-                this.setItems(e.data?.items);
-            }
-        });
+        }
     }
     selectBoxValueChange(e) {
         const items = e.component.selectedItems;
@@ -5675,7 +6021,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.searchTerm.set(value);
         if ((keyEvent.code == 'Enter' || keyEvent.code == 'NumpadEnter') && value) {
             this.isLoading.set(true);
-            const result = await this.vm()?.find(value);
+            const result = await this.searchByValue(value);
             if (result?.total == 1) {
                 this.setItems(result.items[0]);
             }
@@ -5732,10 +6078,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     }
     refresh() {
         this.clear();
-        if (this.customFilter()) {
-            this.vm()?.setCustomFilter(this.customFilter());
-        }
-        this.vm()?.dataSource.refresh();
+        this.dataSource()?.refresh();
     }
     clear() {
         this.setValue(null);
@@ -5746,15 +6089,53 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.textbox()?.inputValue.set('');
         this.searchTerm.set('');
     }
+    async searchByValue(value) {
+        if (!this.entityDef())
+            return null;
+        const entity = this.entityDef();
+        const searchFields = entity.properties.filter(p => p.options?.filter?.inline?.enabled);
+        const inlineFilters = {
+            field: null,
+            logic: 'or',
+            operator: null,
+            filters: [],
+        };
+        if (value && searchFields.length > 0) {
+            searchFields.forEach((p) => {
+                inlineFilters.filters?.push({
+                    field: p.name,
+                    operator: { type: 'contains' },
+                    value,
+                });
+            });
+        }
+        const func = entity.queries.list?.execute;
+        return await func({ filter: inlineFilters, take: 10 });
+    }
+    mergeFilter(request, filter) {
+        if (!filter) {
+            return request;
+        }
+        if (request.filter) {
+            request.filter = {
+                logic: 'and',
+                filters: [...[request.filter], ...(filter.filters ?? [])]
+            };
+        }
+        else {
+            request.filter = filter;
+        }
+        return request;
+    }
     singleOrMultiple(values) {
         return this.multiple() ? values : values[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "axp-lookup-widget-edit", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTagBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-  @if(vm()) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLookupWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "axp-lookup-widget-edit", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTagBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+  @if(dataSource()) {
     @if (look() == 'select') {
       <ax-select-box
-        [dataSource]="vm()?.dataSource!"
+        [dataSource]="dataSource()!"
         [ngModel]="selectedItems()"
         [textField]="displayField()"
         [valueField]="valueField()"
@@ -5817,19 +6198,19 @@ 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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.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$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.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.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$1.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.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: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-lookup-widget-edit',
                     template: `
-  @if(vm()) {
+  @if(dataSource()) {
     @if (look() == 'select') {
       <ax-select-box
-        [dataSource]="vm()?.dataSource!"
+        [dataSource]="dataSource()!"
         [ngModel]="selectedItems()"
         [textField]="displayField()"
         [valueField]="valueField()"
@@ -5920,13 +6301,11 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
         //#region ----   Dependencies   ----
-        this.commandService = inject(AXPCommandService);
-        this.queryService = inject(AXPQueryService);
+        this.entityDetailPopoverService = inject(AXPEntityDetailPopoverService);
         //#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);
@@ -5938,11 +6317,7 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
         //#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)
@@ -5959,247 +6334,44 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
         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();
     }
     //#endregion
     //#region ----   Public Methods   ----
     showMoreItems() {
-        this.closeDetailPopover();
-        this.clearAllHoverTimeouts(); // Clear all hover timeouts
+        this.entityDetailPopoverService.hide();
         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);
-        this.isDetailPopoverOpen.set(true);
-        this.isLoadingDetails.set(true);
-        this.entityDetails.set(null);
         this.closeMorePopover();
-        this.clearAllHoverTimeouts(); // Clear all hover timeouts
-        // Fetch entity details using the query
-        try {
-            this.detailPopover;
-            const result = await this.queryService.fetch('Entity:GetDetails', {
-                entity: this.entity,
-                id: id
-            });
-            if (result?.success) {
-                this.entityDetails.set(result);
-            }
-        }
-        catch (error) {
-            console.error('Failed to fetch entity details:', error);
-        }
-        finally {
-            this.isLoadingDetails.set(false);
+        // 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);
         }
-        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() {
-        this.isDetailPopoverOpen.set(false);
-        this.entityDetails.set(null);
-        this.isLoadingDetails.set(false);
-        if (this.detailPopover()) {
-            this.detailPopover().close();
-        }
-    }
-    async navigateToDetails() {
-        const index = this.selectedItemIndex();
-        const columnData = this.rowData[this.columnName];
-        const id = Array.isArray(columnData) ? columnData[index] : columnData;
-        if (id) {
-            await this.commandService.execute("Entity:OpenDetails", {
-                entity: this.entity,
-                data: { id },
-            });
-            this.closeDetailPopover();
-        }
-    }
-    handleItemClick(index) {
-        const items = this.allItems();
-        if (index < items.length) {
-            const item = items[index];
-            this.showItemDetail(item, index);
-        }
-    }
-    //#endregion
-    //#region ----   Helper Methods   ----
-    getEntityPropertiesWithWidgets() {
-        const data = this.entityDetails()?.entityData;
-        const entityDefinition = this.entityDetails()?.entityDefinition;
-        if (!data || !entityDefinition?.properties)
-            return [];
-        // Get properties from entity definition and filter by importance
-        const importantProperties = (entityDefinition.columns ?? [])
-            .map(prop => {
-            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
-            };
-        })
-            .filter(prop => {
-            // Exclude technical fields
-            if (prop.name === 'id' || prop.name === this.textField || prop.name === this.valueField) {
-                return false;
-            }
-            // Only include properties that exist in the data
-            if (!data.hasOwnProperty(prop.name)) {
-                return false;
-            }
-            // Filter by property importance based on schema and options
-            const schema = prop.showAs?.type ?? entityDefinition.properties.find(p => p.name === prop.name)?.schema.interface?.type;
-            // Include common important field types
-            const importantWidgets = [
-                AXPWidgetsCatalog.text,
-                AXPWidgetsCatalog.largeText,
-                AXPWidgetsCatalog.richText,
-                //
-                AXPWidgetsCatalog.select,
-                //AXPWidgetsCatalog.lookup,
-                //
-                AXPWidgetsCatalog.number,
-                AXPWidgetsCatalog.toggle,
-                AXPWidgetsCatalog.checkbox,
-                //
-                AXPWidgetsCatalog.dateTime,
-                AXPWidgetsCatalog.color,
-                AXPWidgetsCatalog.contact,
-                AXPWidgetsCatalog.email,
-                AXPWidgetsCatalog.link,
-                AXPWidgetsCatalog.phone,
-            ];
-            //
-            if (importantWidgets.includes(schema)) {
-                return true;
-            }
-            return false;
-        })
-            .sort((a, b) => {
-            // Sort by importance: properties with titles first, then by order if available
-            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
-            return a.name.localeCompare(b.name);
-        })
-            .map(prop => {
-            // Create widget node based on property schema
-            const widgetNode = {
-                type: prop.schema || AXPWidgetsCatalog.text,
-                path: prop.options?.dataPath || prop.name,
-                options: prop.options ?? {},
-                mode: 'view'
-            };
-            return {
-                name: prop.name,
-                title: prop.title || prop.name,
-                node: widgetNode,
-            };
-        })
-            .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);
-    }
-    //#endregion
-    //#region ----   Private Methods   ----
-    onMoreButtonMouseEnter() {
-        // Don't trigger hover if detail popover is already open
-        if (this.isDetailPopoverOpen()) {
-            return;
-        }
-        this.clearHoverTimeout();
-        this.hoverTimeout = setTimeout(() => {
-            this.showMoreItems();
-        }, this.HOVER_DELAY);
-    }
-    onMoreButtonMouseLeave() {
-        this.clearHoverTimeout();
-    }
-    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);
-    }
-    onViewDetailsMouseLeave() {
-        this.clearViewDetailsHoverTimeout();
-    }
-    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);
-    }
-    onVisibleItemMouseLeave() {
-        this.clearVisibleItemHoverTimeout();
-    }
-    openMorePopover() {
-        if (this.morePopover() && this.moreButton()) {
-            this.morePopover().target = this.moreButton().nativeElement;
-            this.morePopover().open();
-            this.isMorePopoverOpen.set(true);
+    //#endregion
+    //#region ----   Private Methods   ----
+    openMorePopover() {
+        if (this.morePopover() && this.moreButton()) {
+            this.morePopover().target = this.moreButton().nativeElement;
+            this.morePopover().open();
+            this.isMorePopoverOpen.set(true);
         }
     }
     closeMorePopover() {
@@ -6208,29 +6380,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;
@@ -6245,12 +6394,12 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
                 [this.textField]: item,
             };
     }
-    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPLookupWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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({
@@ -6265,6 +6414,7 @@ const AXPLookupWidget = {
     groups: [AXPWidgetGroupEnum.EntityWidget],
     defaultFilterWidgetName: 'lookup-filter',
     type: 'editor',
+    icon: 'fa-light fa-list-radio',
     properties: [
         AXP_DISABLED_PROPERTY,
         AXP_ALLOW_CLEAR_PROPERTY,
@@ -6297,7 +6447,7 @@ const AXPLookupWidget = {
             },
             visible: true,
         },
-        AXP_ALLOW_MULTIPLE_PROPERTY
+        AXP_ALLOW_MULTIPLE_PROPERTY,
     ],
     components: {
         view: {
@@ -6335,8 +6485,8 @@ class AXPTagableBoxWidgetColumnComponent extends AXPValueWidgetComponent {
             return Array.isArray(value) ? value : [value];
         }, ...(ngDevMode ? [{ debugName: "getData" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPTagableBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPTagableBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="ax-flex ax-gap-1 ax-flex-wrap">
       @if (useSelectBox() && getData().length > 0) { @for (item of getData(); track $index) {
       <ax-badge [look]="'twotone'" [text]="item[textField()]" color="primary"></ax-badge>
@@ -6346,9 +6496,9 @@ 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -6411,8 +6561,8 @@ class AXPTagableBoxWidgetEditComponent extends AXPValueWidgetComponent {
         cls[`ax-flex-1`] = true;
         return cls;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPTagableBoxWidgetEditComponent, isStandalone: true, selector: "axp-tagable-box-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPTagableBoxWidgetEditComponent, isStandalone: true, selector: "axp-tagable-box-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       <!-- نمایش Select Box با دکمه اضافه کردن آیتم -->
       <ax-select-box
@@ -6451,9 +6601,9 @@ 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.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.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.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: i6$2.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-tagable-box-widget',
@@ -6521,10 +6671,10 @@ var tagableBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPTagableBoxWidgetFilterComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPTagableBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPTagableBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetFilterComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
@@ -6559,8 +6709,8 @@ class AXPTagableBoxWidgetPrintComponent extends AXPValueWidgetComponent {
             return Array.isArray(value) ? value : [value];
         }, ...(ngDevMode ? [{ debugName: "getData" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPTagableBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPTagableBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div>
       @if (useSelectBox() && getData().length > 0) { @for (item of getData(); track $index) {
       <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-mr-2 ax-mb-2 ax-inline-block">{{
@@ -6576,7 +6726,7 @@ class AXPTagableBoxWidgetPrintComponent extends AXPValueWidgetComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetPrintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetPrintComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -6625,14 +6775,14 @@ class AXPTagableBoxWidgetViewComponent extends AXPValueWidgetComponent {
             return Array.isArray(value) ? value : [value];
         }, ...(ngDevMode ? [{ debugName: "getData" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTagableBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPTagableBoxWidgetViewComponent, isStandalone: true, selector: "axp-tagable-box-widget", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPTagableBoxWidgetViewComponent, isStandalone: true, selector: "axp-tagable-box-widget", usesInheritance: true, ngImport: i0, template: `
     @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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPTagableBoxWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-tagable-box-widget',
@@ -6728,8 +6878,8 @@ class AXPWidgetSelectorWidgetEditComponent extends AXPValueWidgetComponent {
         const widget = this.widgetRegisteryService.resolve(e.values.type);
         this.setValue({ title: widget?.title, ...e.values });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPWidgetSelectorWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPWidgetSelectorWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-text-box [ngModel]="displayText()" [placeholder]="placeholder()" [readonly]="true">
       @for (validation of validationRules(); track $index) {
       <ax-validation-rule
@@ -6748,9 +6898,9 @@ 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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.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$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -6797,10 +6947,10 @@ var widgetSelectorWidgetEdit_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPWidgetSelectorWidgetViewComponent extends AXPValueWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetSelectorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPWidgetSelectorWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{ getValue()?.title }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPWidgetSelectorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXPWidgetSelectorWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{ getValue()?.title }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetSelectorWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPWidgetSelectorWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `{{ getValue()?.title }}`,
@@ -6859,7 +7009,7 @@ class AXPEntityCreatePopupAction extends AXPWorkflowAction {
         const result = await this.popupService.open(com, {
             title: headerTitle
                 ? headerTitle
-                : `${await this.translateService.translateAsync('create-new')} ${await this.translateService.translateAsync(entityRef.formats.individual)}`,
+                : `${await this.translateService.translateAsync('@general:actions.create.title')} ${await this.translateService.translateAsync(entityRef.formats.individual)}`,
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : size ? size : 'md',
             data: {
                 vm: await this.factory.create(module, entity, data, options),
@@ -6877,10 +7027,10 @@ class AXPEntityCreatePopupAction extends AXPWorkflowAction {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreatePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreatePopupAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreatePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreatePopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreatePopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreatePopupAction, decorators: [{
             type: Injectable
         }] });
 class AXPEntityCreateSubmittedAction extends AXPWorkflowAction {
@@ -6888,10 +7038,10 @@ class AXPEntityCreateSubmittedAction extends AXPWorkflowAction {
         this.dispatch(AXPEntityCreateEvent({ entity: context.getVariable('entity'), meta: context.getVariable('meta') }));
         this.dispatch(AXPRefreshEvent({ entity: context.getVariable('entity'), meta: context.getVariable('meta') }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreateSubmittedAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreateSubmittedAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreateSubmittedAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreateSubmittedAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityCreateSubmittedAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityCreateSubmittedAction, decorators: [{
             type: Injectable
         }] });
 const AXPCreateEntityWorkflow = {
@@ -6982,10 +7132,10 @@ class AXPQuickEntityModifyPopupAction extends AXPWorkflowAction {
             context.setVariable('data', cloneDeep(popup.data.context));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPQuickEntityModifyPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPQuickEntityModifyPopupAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPQuickEntityModifyPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPQuickEntityModifyPopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPQuickEntityModifyPopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPQuickEntityModifyPopupAction, decorators: [{
             type: Injectable
         }] });
 const AXPQuickModifyEntityWorkflow = {
@@ -7042,10 +7192,10 @@ class AXPEntityApplyUpdatesAction extends AXPWorkflowAction {
             context.setOutput('error', error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityApplyUpdatesAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityApplyUpdatesAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityApplyUpdatesAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityApplyUpdatesAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityApplyUpdatesAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityApplyUpdatesAction, decorators: [{
             type: Injectable
         }] });
 
@@ -7064,10 +7214,10 @@ class AXPShowDetailViewAction extends AXPWorkflowAction {
         context.setVariable('payload', newPayload);
         this.navigation.execute(context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowDetailViewAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowDetailViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowDetailViewAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowDetailViewAction, decorators: [{
             type: Injectable
         }] });
 const AXPShowDetailsViewWorkflow = {
@@ -7121,10 +7271,10 @@ class AXPShowFileUploaderPopupAction extends AXPWorkflowAction {
             context.setVariable('data', cloneDeep(entityData));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowFileUploaderPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowFileUploaderPopupAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowFileUploaderPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowFileUploaderPopupAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowFileUploaderPopupAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowFileUploaderPopupAction, decorators: [{
             type: Injectable
         }] });
 const AXPShowFileUploaderPopupWorkflow = {
@@ -7175,10 +7325,10 @@ class AXPShowListViewAction extends AXPWorkflowAction {
         context.setVariable('payload', newPayload);
         this.navigation.execute(context);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowListViewAction }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowListViewAction }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPShowListViewAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPShowListViewAction, decorators: [{
             type: Injectable
         }] });
 const AXPShowListViewWorkflow = {
@@ -7267,9 +7417,9 @@ 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.ɵ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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$2.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModule, imports: [RouterModule, i2$2.AXPWorkflowModule, i3$1.AXPWidgetCoreModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModule, providers: [
             {
                 provide: ROUTES,
                 multi: true,
@@ -7293,13 +7443,17 @@ class AXPEntityModule {
             provideCommandSetups([
                 {
                     key: 'Entity:OpenDetails',
-                    command: () => Promise.resolve().then(function () { return openEntityDetails_command; }).then((c) => c.AXPOpenEntityDetailsCommand)
+                    command: () => Promise.resolve().then(function () { return openEntityDetails_command; }).then((c) => c.AXPOpenEntityDetailsCommand),
+                },
+                {
+                    key: 'Entity:Create',
+                    command: () => import('./acorex-platform-layout-entity-create-entity.command-BXExgI3W.mjs').then((c) => c.AXPCreateEntityCommand),
                 },
             ]),
             provideQuerySetups([
                 {
                     key: 'Entity:GetDetails',
-                    loader: () => Promise.resolve().then(function () { return getEntityDetails_query; }).then((c) => c.AXPGetEntityDetailsQuery)
+                    loader: () => Promise.resolve().then(function () { return getEntityDetails_query; }).then((c) => c.AXPGetEntityDetailsQuery),
                 },
             ]),
         ], imports: [RouterModule,
@@ -7330,9 +7484,10 @@ class AXPEntityModule {
                 },
                 functions: {},
             }),
-            AXPLayoutBuilderModule.forChild({
+            AXPWidgetCoreModule.forChild({
                 widgets: [
                     AXPLookupWidget,
+                    AXPLookupFilterWidget,
                     AXPWidgetSelectorWidget,
                     AXPTagableBoxWidget,
                     AXPEntityListWidget,
@@ -7340,7 +7495,7 @@ class AXPEntityModule {
                 ],
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPEntityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7372,9 +7527,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                             },
                             functions: {},
                         }),
-                        AXPLayoutBuilderModule.forChild({
+                        AXPWidgetCoreModule.forChild({
                             widgets: [
                                 AXPLookupWidget,
+                                AXPLookupFilterWidget,
                                 AXPWidgetSelectorWidget,
                                 AXPTagableBoxWidget,
                                 AXPEntityListWidget,
@@ -7408,67 +7564,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         provideCommandSetups([
                             {
                                 key: 'Entity:OpenDetails',
-                                command: () => Promise.resolve().then(function () { return openEntityDetails_command; }).then((c) => c.AXPOpenEntityDetailsCommand)
+                                command: () => Promise.resolve().then(function () { return openEntityDetails_command; }).then((c) => c.AXPOpenEntityDetailsCommand),
+                            },
+                            {
+                                key: 'Entity:Create',
+                                command: () => import('./acorex-platform-layout-entity-create-entity.command-BXExgI3W.mjs').then((c) => c.AXPCreateEntityCommand),
                             },
                         ]),
                         provideQuerySetups([
                             {
                                 key: 'Entity:GetDetails',
-                                loader: () => Promise.resolve().then(function () { return getEntityDetails_query; }).then((c) => c.AXPGetEntityDetailsQuery)
+                                loader: () => Promise.resolve().then(function () { return getEntityDetails_query; }).then((c) => c.AXPGetEntityDetailsQuery),
                             },
                         ]),
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$4.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
 
-//#endregion
-//#region ----   Entity Open Details Command   ----
-/**
- * Generic command to open entity details view
- * Can be used by any entity to navigate to its detail page
- */
-class AXPOpenEntityDetailsCommand {
-    constructor() {
-        //#endregion
-        //#region ----   Services & Dependencies   ----
-        this.router = inject(Router);
-        this.sessionService = inject(AXPSessionService);
-    }
-    //#endregion
-    //#region ----   Command Execution   ----
-    /**
-     * Execute the command to navigate to entity details
-     * @param input - Command input containing entity and data information
-     */
-    async execute(input) {
-        const { entity, data } = input;
-        if (!entity) {
-            throw new Error('Entity name is required for opening details view');
+const eventDispatchMiddleware = {
+    target: { ops: ['create', 'update', 'delete'], order: 90 },
+    execute: async (ctx, next) => {
+        const dispatcher = inject(AXPEntityEventDispatcherService);
+        await next();
+        if (ctx.op === 'create') {
+            const createdData = ctx.result ? { ...ctx.data, id: ctx.result } : ctx.data;
+            await dispatcher.dispatchInserted(ctx.entityName, { refType: ctx.entityName, data: createdData });
         }
-        if (!data?.id) {
-            throw new Error('Entity ID is required for opening details view');
+        else if (ctx.op === 'update') {
+            await dispatcher.dispatchUpdated(ctx.entityName, {
+                refType: ctx.entityName,
+                data: ctx.result,
+                changes: ctx.locals.get('changes'),
+            });
         }
-        const [module, entityName] = entity.split('.');
-        if (!module || !entityName) {
-            throw new Error('Entity must be in format "ModuleName.EntityName"');
+        else if (ctx.op === 'delete') {
+            // For delete, prefer previous entity if available
+            await dispatcher.dispatchDeleted(ctx.entityName, { refType: ctx.entityName, data: ctx.result ?? ctx.previous });
         }
-        const url = `/${this.sessionService.application?.name}/m/${module}/e/${entityName}/${data.id}/new-view`;
-        // Navigate to the entity details page
-        this.router.navigate([url]);
-        return { success: true };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPOpenEntityDetailsCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPOpenEntityDetailsCommand, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPOpenEntityDetailsCommand, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-var openEntityDetails_command = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPOpenEntityDetailsCommand: AXPOpenEntityDetailsCommand
-});
+    },
+};
 
 //#endregion
 //#region ----   Get Entity Details Query   ----
@@ -7535,10 +7669,10 @@ class AXPGetEntityDetailsQuery {
             throw new Error(`Failed to fetch entity data: ${error instanceof Error ? error.message : 'Unknown error'}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGetEntityDetailsQuery, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGetEntityDetailsQuery, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPGetEntityDetailsQuery, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPGetEntityDetailsQuery, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGetEntityDetailsQuery, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPGetEntityDetailsQuery, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -7548,13 +7682,417 @@ var getEntityDetails_query = /*#__PURE__*/Object.freeze({
     AXPGetEntityDetailsQuery: AXPGetEntityDetailsQuery
 });
 
+//#endregion
+class AXPEntityDynamicDialogService {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.entityRegistry = inject(AXPEntityDefinitionRegistryService);
+        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        this.layoutTheme = inject(AXPLayoutThemeService);
+    }
+    //#endregion
+    //#region ----   Public API   ----
+    entity(fullName) {
+        return new InterfaceSelector(this.entityRegistry, this.layoutBuilder, this.layoutTheme, fullName);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDynamicDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDynamicDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPEntityDynamicDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+//#region ----   Builders   ----
+class InterfaceSelector {
+    constructor(entityRegistry, layoutBuilder, layoutTheme, fullName) {
+        this.entityRegistry = entityRegistry;
+        this.layoutBuilder = layoutBuilder;
+        this.layoutTheme = layoutTheme;
+        this.fullName = fullName;
+    }
+    create() {
+        return new PropertyFilter(this.entityRegistry, this.layoutBuilder, this.layoutTheme, this.fullName, 'create');
+    }
+    update(id) {
+        return new PropertyFilter(this.entityRegistry, this.layoutBuilder, this.layoutTheme, this.fullName, 'update', id);
+    }
+}
+class PropertyFilter {
+    constructor(entityRegistry, layoutBuilder, layoutTheme, fullName, kind, recordId) {
+        this.entityRegistry = entityRegistry;
+        this.layoutBuilder = layoutBuilder;
+        this.layoutTheme = layoutTheme;
+        this.fullName = fullName;
+        this.kind = kind;
+        this.includeList = null;
+        this.excludeList = null;
+        this.initialContext = {};
+        this.extraFieldsByGroup = new Map();
+        this.recordId = recordId;
+    }
+    include(...propertyNames) {
+        this.includeList = new Set(propertyNames.filter(Boolean));
+        return this;
+    }
+    exclude(...propertyNames) {
+        // Ignored when include list is present
+        if (!this.includeList) {
+            this.excludeList = new Set(propertyNames.filter(Boolean));
+        }
+        return this;
+    }
+    title(text) {
+        this.overrideTitle = text;
+        return this;
+    }
+    context(context) {
+        this.initialContext = context ?? {};
+        return this;
+    }
+    size(size) {
+        this.externalSize = size;
+        return this;
+    }
+    actions(delegate) {
+        this.externalActionsDelegate = delegate;
+        return this;
+    }
+    field(groupId, path, delegate) {
+        const list = this.extraFieldsByGroup.get(groupId) ?? [];
+        list.push({ path, delegate });
+        this.extraFieldsByGroup.set(groupId, list);
+        return this;
+    }
+    mode(mode) {
+        this.externalMode = mode;
+        return this;
+    }
+    async show() {
+        const { moduleName, entityName } = parseEntityFullName(this.fullName);
+        const entity = await this.entityRegistry.resolve(moduleName, entityName);
+        const iface = this.kind === 'create' ? entity?.interfaces?.master?.create : entity?.interfaces?.master?.update;
+        if (!iface) {
+            throw new Error(`Entity interface not found: ${entity.module}.${entity.name}.interfaces.master.${this.kind}`);
+        }
+        // Title and size
+        const title = this.overrideTitle || entity.formats?.individual || entity.title || `${entity.module}.${entity.name}`;
+        // Build content using LayoutBuilder
+        const sections = (iface.sections ?? []).slice();
+        const entityProps = (entity.properties ?? []).slice();
+        const nameToViewLayout = buildViewLayoutMap(iface.properties ?? []);
+        const allowedNames = this.computeAllowedNames(entityProps.map((p) => p.name));
+        const dialog = this.layoutBuilder.create().dialog((d) => {
+            d.setTitle(title);
+            d.setSize(this.externalSize ?? (this.layoutTheme.isMobileDevice() ? 'full' : 'md'));
+            d.setCloseButton(true);
+            d.content((layout) => {
+                layout.mode(this.externalMode ?? 'edit');
+                for (const section of sections) {
+                    const groupId = section.id;
+                    const groupProps = entityProps.filter((p) => p.groupId === groupId && allowedNames.has(p.name));
+                    const extraFields = this.extraFieldsByGroup.get(groupId) ?? [];
+                    if (groupProps.length === 0 && extraFields.length === 0) {
+                        continue;
+                    }
+                    layout.fieldset((fs) => {
+                        fs.setTitle((getGroupTitle(entity, groupId) || groupId));
+                        // Preserve properties order as defined in interface.properties (if present), otherwise entity.properties order
+                        const orderedProps = orderProperties(groupProps, iface.properties ?? []);
+                        for (const prop of orderedProps) {
+                            const viewLayout = nameToViewLayout.get(prop.name);
+                            const fieldPath = buildFieldPath(prop, iface.properties ?? []);
+                            fs.formField(prop.title, (field) => {
+                                // Path & field-level visibility/readonly
+                                field.path(fieldPath);
+                                if (prop.schema?.hidden) {
+                                    field.visible(false);
+                                }
+                                if (prop.schema?.readonly) {
+                                    field.readonly(true);
+                                }
+                                // Layout mapping (per-field). Only colSpan is supported by dynamic-form per breakpoint.
+                                const fieldLayout = toFieldLayout(viewLayout?.layout);
+                                if (fieldLayout) {
+                                    field.layout(fieldLayout);
+                                }
+                                // Widget mapping (generic to allow all widget types)
+                                const widgetType = prop.schema?.interface?.type || '';
+                                const widgetOptions = buildWidgetOptions(prop);
+                                field.customWidget(widgetType, widgetOptions);
+                            });
+                        }
+                        // Append any extra fields requested by the caller for this group
+                        for (const extra of extraFields) {
+                            const label = extra.path?.split('.').slice(-1)[0] || extra.path;
+                            fs.formField(label, (f) => {
+                                const legacy = toCompatFormFieldBuilder(f);
+                                legacy.path(extra.path);
+                                extra.delegate?.(legacy);
+                            });
+                        }
+                    });
+                }
+            });
+            // Actions: external if provided, otherwise default cancel/submit
+            d.setActions(this.externalActionsDelegate ?? ((a) => a.cancel().submit()));
+        });
+        // Context: load record by id for update and merge with provided context (context overrides)
+        let baseContext = {};
+        if (this.kind === 'update') {
+            if (!this.recordId && typeof this['recordId'] === 'undefined') {
+                // Preserve back-compat if constructor arg wasn't captured
+                this['recordId'] = undefined;
+            }
+        }
+        try {
+            if (this.kind === 'update') {
+                const id = this['recordId'];
+                if (!id) {
+                    throw new Error('Record id is required for update().');
+                }
+                const byKeyFn = entity?.queries?.byKey?.execute;
+                if (typeof byKeyFn === 'function') {
+                    baseContext = (await byKeyFn(id)) ?? {};
+                }
+            }
+        }
+        catch {
+            baseContext = baseContext ?? {};
+        }
+        console.log(this['recordId']);
+        const effectiveContext = merge({}, baseContext ?? {}, this.initialContext ?? {});
+        dialog.setContext(effectiveContext);
+        return await dialog.show();
+    }
+    computeAllowedNames(allNames) {
+        if (this.includeList && this.includeList.size > 0) {
+            return new Set(allNames.filter((n) => this.includeList.has(n)));
+        }
+        if (this.excludeList && this.excludeList.size > 0) {
+            return new Set(allNames.filter((n) => !this.excludeList.has(n)));
+        }
+        return new Set(allNames);
+    }
+}
+//#endregion
+//#region ----   Helpers   ----
+// No extra action builders to keep API identical to dynamic-form-builder
+function parseEntityFullName(fullName) {
+    const [moduleName, entityName] = (fullName || '').split('.');
+    if (!moduleName || !entityName) {
+        throw new Error(`Invalid entity full name: "${fullName}"`);
+    }
+    return { moduleName, entityName };
+}
+function buildViewLayoutMap(views) {
+    const map = new Map();
+    for (const v of views || []) {
+        if (v?.name) {
+            map.set(v.name, v);
+        }
+    }
+    return map;
+}
+function orderProperties(props, viewProps) {
+    if (!viewProps || viewProps.length === 0) {
+        return props;
+    }
+    const orderIndex = new Map();
+    viewProps.forEach((vp, idx) => orderIndex.set(vp.name, idx));
+    return [...props].sort((a, b) => {
+        const ai = orderIndex.has(a.name) ? orderIndex.get(a.name) : Number.MAX_SAFE_INTEGER;
+        const bi = orderIndex.has(b.name) ? orderIndex.get(b.name) : Number.MAX_SAFE_INTEGER;
+        if (ai !== bi)
+            return ai - bi;
+        return 0;
+    });
+}
+function buildFieldPath(prop, viewProps) {
+    const vp = (viewProps || []).find((x) => x.name === prop.name);
+    const prefix = vp?.dataPath ? `${vp.dataPath}.` : '';
+    return `${prefix}${prop.name}`;
+}
+function toFieldLayout(layout) {
+    const positions = layout?.positions;
+    if (!positions)
+        return undefined;
+    // Map AXPGridLayoutOptions -> AXPDynamicFormFieldDefinition['layout']
+    const getSpan = (key) => positions?.[key]?.colSpan;
+    const d = getSpan('sm');
+    const md = getSpan('md');
+    const lg = getSpan('lg');
+    const xl = getSpan('xl');
+    const xxl = getSpan('xxl');
+    if (d == null && md == null && lg == null && xl == null && xxl == null)
+        return undefined;
+    return {
+        default: d,
+        md,
+        lg,
+        xl,
+        xxl,
+    };
+}
+function buildWidgetOptions(prop) {
+    const base = prop.schema?.interface?.options || {};
+    const validations = (prop.validations || []).map((c) => ({
+        rule: c.rule,
+        message: c.message,
+        options: c.options,
+    }));
+    return {
+        ...base,
+        validations,
+    };
+}
+function getGroupTitle(entity, groupId) {
+    const g = (entity.groups || []).find((x) => x.id === groupId);
+    return g?.title;
+}
+function toCompatFormFieldBuilder(field) {
+    return {
+        ...field,
+        path: (p) => field.path(p),
+        layout: (c) => field.layout(c),
+        visible: (cond) => field.visible(cond),
+        readonly: (cond) => field.readonly(cond),
+        customWidget: (type, options) => field.customWidget(type, options),
+        mode: (mode) => field.mode(mode),
+    };
+}
+
+/**
+ * Error type that can be thrown by middlewares to abort the chain with a structured payload.
+ */
+class AXPMiddlewareAbortError extends Error {
+    constructor(message, options = {}) {
+        super(message);
+        this.message = message;
+        this.options = options;
+        this.name = 'AXPMiddlewareAbortError';
+    }
+    toResponse() {
+        return {
+            success: false,
+            error: {
+                code: this.options.code,
+                message: this.message,
+                status: this.options.status,
+                details: this.options.details,
+            },
+        };
+    }
+}
+/** Type guard for AXPMiddlewareAbortError */
+function isAXPMiddlewareAbortError(error) {
+    return error instanceof AXPMiddlewareAbortError;
+}
+//#endregion
+
+const AXP_ENTITY_STORAGE_BACKEND = new InjectionToken('AXP_ENTITY_STORAGE_BACKEND');
+const AXP_ENTITY_STORAGE_MIDDLEWARE = new InjectionToken('AXP_ENTITY_STORAGE_MIDDLEWARE');
+
+class AXPMiddlewareEntityStorageService extends AXPEntityStorageService {
+    constructor() {
+        super(...arguments);
+        this.backend = inject(AXP_ENTITY_STORAGE_BACKEND);
+        this.allMiddlewares = (inject(AXP_ENTITY_STORAGE_MIDDLEWARE, { optional: true }) || []).slice();
+        this.injector = inject(EnvironmentInjector);
+    }
+    get dbName() {
+        return this.backend.dbName;
+    }
+    filterMiddlewares(ctx) {
+        return this.allMiddlewares
+            .filter((mw) => {
+            const t = mw.target;
+            if (!t)
+                return true;
+            if (t.ops && !t.ops.includes(ctx.op))
+                return false;
+            if (t.entity) {
+                if (typeof t.entity === 'string' && t.entity !== ctx.entityName)
+                    return false;
+                if (t.entity instanceof RegExp && !t.entity.test(ctx.entityName))
+                    return false;
+            }
+            if (t.predicate && !t.predicate(ctx))
+                return false;
+            return true;
+        })
+            .sort((a, b) => (a.target?.order ?? 0) - (b.target?.order ?? 0));
+    }
+    compose(mws, leaf, ctx) {
+        return mws
+            .slice()
+            .reverse()
+            .reduce((next, mw) => {
+            return async () => runInInjectionContext(this.injector, () => mw.execute(ctx, next));
+        }, leaf);
+    }
+    async run(ctx, delegate) {
+        const chain = this.compose(this.filterMiddlewares(ctx), async () => {
+            ctx.result = await delegate();
+        }, ctx);
+        await chain();
+        return ctx.result;
+    }
+    createCtx(op, entityName, init) {
+        return {
+            op,
+            entityName,
+            locals: new Map(),
+            backend: {
+                getOne: (name, id) => this.backend.getOne(name, id),
+                insertOne: (name, e) => this.backend.insertOne(name, e),
+                query: (name, request) => this.backend.query(name, request),
+                updateOne: (name, id, data) => this.backend.updateOne(name, id, data),
+            },
+            ...init,
+        };
+    }
+    async initial(entityName, collection, options) {
+        const ctx = this.createCtx('initial', entityName, { data: collection });
+        return this.run(ctx, () => this.backend.initial(entityName, ctx.data, options));
+    }
+    async getOne(entityName, id) {
+        const ctx = this.createCtx('getOne', entityName, { id });
+        return this.run(ctx, () => this.backend.getOne(entityName, id));
+    }
+    async updateOne(entityName, id, keyValues) {
+        const ctx = this.createCtx('update', entityName, { id, data: keyValues });
+        return this.run(ctx, () => this.backend.updateOne(entityName, id, ctx.data));
+    }
+    async deleteOne(entityName, id) {
+        const ctx = this.createCtx('delete', entityName, { id });
+        return this.run(ctx, () => this.backend.deleteOne(entityName, id));
+    }
+    async insertOne(entityName, entity) {
+        const ctx = this.createCtx('create', entityName, { data: entity });
+        return this.run(ctx, () => this.backend.insertOne(entityName, ctx.data));
+    }
+    async getAll(entityName) {
+        const ctx = this.createCtx('getAll', entityName);
+        return this.run(ctx, () => this.backend.getAll(entityName));
+    }
+    async query(entityName, request) {
+        const ctx = this.createCtx('query', entityName, { request });
+        return this.run(ctx, () => this.backend.query(entityName, request));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPMiddlewareEntityStorageService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPMiddlewareEntityStorageService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPMiddlewareEntityStorageService, decorators: [{
+            type: Injectable
+        }] });
+
 // #region Master
 function entityMasterCreateAction() {
     return {
         title: '@general:actions.create.title',
         command: 'create-entity',
         priority: 'primary',
-        type: 'create',
+        type: AXPSystemActionType.Create,
         scope: AXPEntityCommandScope.TypeLevel,
     };
 }
@@ -7563,7 +8101,7 @@ function entityMasterBulkDeleteAction() {
         title: '@general:actions.delete-items.title',
         command: 'delete-entity',
         priority: 'primary',
-        type: 'delete',
+        type: AXPSystemActionType.Delete,
         scope: AXPEntityCommandScope.Selected,
     };
 }
@@ -7572,7 +8110,7 @@ function entityMasterViewAction() {
         title: '@general:actions.view.title',
         command: 'open-entity',
         priority: 'secondary',
-        type: 'view',
+        type: AXPSystemActionType.View,
         scope: AXPEntityCommandScope.Individual,
         default: true,
     };
@@ -7582,17 +8120,32 @@ function entityMasterDeleteAction() {
         title: '@general:actions.delete.title',
         command: 'delete-entity',
         priority: 'secondary',
-        type: 'delete',
+        type: AXPSystemActionType.Delete,
         scope: AXPEntityCommandScope.Individual,
     };
 }
-function entityMasterCrudActions() {
-    return [
-        entityMasterCreateAction(),
-        entityMasterBulkDeleteAction(),
-        entityMasterViewAction(),
-        entityMasterDeleteAction(),
-    ];
+function entityMasterCrudActions(options) {
+    const opts = {
+        create: true,
+        delete: true,
+        view: true,
+        edit: true,
+        ...options,
+    };
+    const actions = [];
+    if (opts.create) {
+        actions.push(entityMasterCreateAction());
+    }
+    if (opts.delete) {
+        actions.push(entityMasterBulkDeleteAction());
+    }
+    if (opts.view) {
+        actions.push(entityMasterViewAction());
+    }
+    if (opts.edit) {
+        actions.push(entityMasterDeleteAction());
+    }
+    return actions;
 }
 function entityMasterRecordActions() {
     return [entityMasterDeleteAction()];
@@ -7615,7 +8168,7 @@ function entityDetailsCreateActions(parentId) {
             },
         },
         priority: 'primary',
-        type: 'create',
+        type: AXPSystemActionType.Create,
         scope: AXPEntityCommandScope.TypeLevel,
     };
 }
@@ -7645,7 +8198,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 +8209,7 @@ function entityOverrideDetailsViewAction() {
         command: 'open-entity',
         priority: 'secondary',
         hidden: true,
-        type: 'view',
+        type: AXPSystemActionType.View,
         scope: AXPEntityCommandScope.Individual,
     };
 }
@@ -7683,7 +8236,7 @@ function entityDetailsReferenceCreateActions(type) {
                 },
             },
             priority: 'primary',
-            type: 'create',
+            type: AXPSystemActionType.Create,
             scope: AXPEntityCommandScope.TypeLevel,
         },
         entityDetailsEditAction(),
@@ -7698,7 +8251,7 @@ function entityDetailsReferenceCreateActions(type) {
  */
 function detectEntityChanges(oldObj, newObj) {
     return transform(newObj, (result, value, key) => {
-        if (!isEqual(value, oldObj[key])) {
+        if (!isEqual$1(value, oldObj[key])) {
             const oldValue = oldObj[key];
             if (Array.isArray(value) || Array.isArray(oldValue)) {
                 const oldArray = Array.isArray(oldValue) ? oldValue : [];
@@ -7710,8 +8263,8 @@ function detectEntityChanges(oldObj, newObj) {
                     result[key] = { oldValue, newValue: value, added, removed };
                 }
                 else {
-                    const added = newArray.filter((item) => !oldArray.some((oldItem) => isEqual(item, oldItem)));
-                    const removed = oldArray.filter((item) => !newArray.some((newItem) => isEqual(item, newItem)));
+                    const added = newArray.filter((item) => !oldArray.some((oldItem) => isEqual$1(item, oldItem)));
+                    const removed = oldArray.filter((item) => !newArray.some((newItem) => isEqual$1(item, newItem)));
                     result[key] = { oldValue, newValue: value, added, removed };
                 }
             }
@@ -7723,32 +8276,9 @@ function detectEntityChanges(oldObj, newObj) {
 }
 //#endregion
 
-const eventDispatchMiddleware = {
-    target: { ops: ['create', 'update', 'delete'], order: 90 },
-    execute: async (ctx, next) => {
-        const dispatcher = inject(AXPEntityEventDispatcherService);
-        await next();
-        if (ctx.op === 'create') {
-            const createdData = ctx.result ? { ...ctx.data, id: ctx.result } : ctx.data;
-            await dispatcher.dispatchInserted(ctx.entityName, { refType: ctx.entityName, data: createdData });
-        }
-        else if (ctx.op === 'update') {
-            await dispatcher.dispatchUpdated(ctx.entityName, {
-                refType: ctx.entityName,
-                data: ctx.result,
-                changes: ctx.locals.get('changes'),
-            });
-        }
-        else if (ctx.op === 'delete') {
-            // For delete, prefer previous entity if available
-            await dispatcher.dispatchDeleted(ctx.entityName, { refType: ctx.entityName, data: ctx.result ?? ctx.previous });
-        }
-    },
-};
-
 /**
  * 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, AXPEntityDataSelectorService, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailPopoverComponent, AXPEntityDetailPopoverService, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityDynamicDialogService, AXPEntityEventDispatcherService, AXPEntityListTableService, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityListWidget, AXPEntityListWidgetViewComponent, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityReferenceWidget, AXPEntityReferenceWidgetColumnComponent, AXPEntityReferenceWidgetDesignerComponent, AXPEntityReferenceWidgetEditComponent, AXPEntityReferenceWidgetPrintComponent, AXPEntityReferenceWidgetViewComponent, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPEntityUpdateViewSectionViewModel, AXPGetEntityDetailsQuery, AXPLookupFilterWidget, AXPLookupFilterWidgetEditComponent, AXPLookupWidget, AXPLookupWidgetColumnComponent, AXPLookupWidgetEditComponent, AXPLookupWidgetViewComponent, AXPMiddlewareAbortError, AXPMiddlewareEntityStorageService, AXPModifyEntitySectionWorkflow, AXPOpenEntityDetailsCommand, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXPTagableBoxWidget, AXPTagableBoxWidgetColumnComponent, AXPTagableBoxWidgetEditComponent, AXPTagableBoxWidgetFilterComponent, AXPTagableBoxWidgetPrintComponent, AXPTagableBoxWidgetViewComponent, AXPWidgetSelectorWidget, AXPWidgetSelectorWidgetEditComponent, AXPWidgetSelectorWidgetViewComponent, 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, isAXPMiddlewareAbortError };
 //# sourceMappingURL=acorex-platform-layout-entity.mjs.map