@acorex/platform 20.2.4-next.2 → 20.2.4-next.3

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

@@ -10,7 +10,7 @@ import { AXPExpressionEvaluatorService, AXPPlatformScope, AXPDistributedEventLis
 import * as i2$2 from '@acorex/platform/workflow';
 import { AXPWorkflowService, ofType, createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import * as i2 from '@acorex/platform/layout/builder';
-import { AXPPageStatus, AXPWidgetRegistryService, AXPWidgetsCatalog, AXPValueWidgetComponent, AXPWidgetContainerComponent, AXPWidgetRendererDirective, AXPLayoutBuilderModule, AXPWidgetGroupEnum, AXPLayoutWidgetComponent, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/builder';
+import { AXPPageStatus, AXPWidgetRegistryService, AXPWidgetsCatalog, AXPValueWidgetComponent, AXPWidgetRendererDirective, AXPLayoutBuilderModule, AXPWidgetGroupEnum, AXPLayoutWidgetComponent, 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';
@@ -265,7 +265,6 @@ class AXPEntityDetailListViewModel {
         }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
         this.evaluateExpressions = async (actionData) => {
             const parentData = this.parent.data;
-            console.log({ actionData, parentData });
             const scope = {
                 context: {
                     eval: (path) => {
@@ -1157,10 +1156,28 @@ class AXPEntityMasterListViewModel {
             const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
             const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
             return columns
-                .filter(({ name }) => visiblePropNames.has(name))
+                .filter(({ name, showAs }) => visiblePropNames.has(name) || showAs)
                 .map((column) => {
-                const property = visibleProperties.find(({ name }) => name === column.name);
-                return new AXPEntityListViewColumnViewModel(property, 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,
+                            },
+                        },
+                    };
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
+                else {
+                    const property = visibleProperties.find(({ name }) => name === column.name);
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
             });
         };
         this.visibleColumnCount = () => {
@@ -1459,8 +1476,7 @@ class AXPEntityMasterListViewModel {
         const cols = this.view().columns;
         const cloned = this.allAvailableColumns().map((c) => {
             const column = this.entityDef.columns?.find((cc) => cc.name == c.name);
-            const prop = this.entityDef.properties.find((p) => p.name == c.name);
-            const col = new AXPEntityListViewColumnViewModel(prop, column);
+            const col = new AXPEntityListViewColumnViewModel(c.property, column);
             col.visible = !cols.some((c) => c == col.name) && col.visible != false;
             return col;
         });
@@ -2556,9 +2572,14 @@ class AXPLayoutAdapterBuilder {
         this.adapter.pages = [...(this.adapter.pages || []), ...relatedPages];
         return this;
     }
+    setPages(pages) {
+        this.adapter.pages = pages;
+        return this;
+    }
     build() {
         return {
-            title: this.entity?.formats.plural || this.entity?.title,
+            title: `${this.entity?.interfaces?.master?.single?.title}`,
+            label: this.entity?.formats.plural,
             actions: [],
             breadcrumbs: this.createBreadcrumbs(),
             execute: this.createExecuteFunction(),
@@ -2655,40 +2676,29 @@ class AXPBaseRelatedEntityConverter {
             groups,
         };
     }
-    createGridLayoutStructure(singleInterface, helpers) {
-        return {
-            type: 'grid-layout',
-            options: {
-                grid: {
-                    default: {
-                        gridTemplateColumns: 'repeat(12, 1fr)',
-                        gridTemplateRows: 'repeat(1, 1fr)',
-                        gap: '20px',
-                    },
-                },
-            },
-            children: singleInterface?.sections.map((s) => ({
-                type: 'grid-item-layout',
-                name: s.id,
-                options: {
-                    colSpan: s.layout?.positions?.lg?.colSpan ?? 12,
-                    colStart: s.layout?.positions?.lg?.colStart,
-                    colEnd: s.layout?.positions?.lg?.colEnd,
-                },
-                children: [
-                    {
-                        type: 'fieldset-layout',
-                        options: {
-                            title: helpers.getGroupById(s.id)?.title ?? '',
-                            collapsible: true,
-                        },
-                        children: [this.createPropertyGrid(s.id, helpers)],
-                    },
-                ],
-            })),
-        };
+    async createGridLayoutStructure(singleInterface, helpers, evaluateExpressions) {
+        return await this.createGridLayoutStructureInternal(singleInterface, helpers, evaluateExpressions);
     }
-    createPropertyGrid(sectionId, helpers) {
+    //#region ----   Hidden Evaluation Helpers   ----
+    async getVisiblePropertiesByGroupId(sectionId, helpers, evaluateExpressions) {
+        const properties = helpers.getPropertyByGroupId(sectionId) ?? [];
+        const evaluated = await Promise.all(properties.map(async (property) => {
+            let hidden = property?.schema?.hidden;
+            if (typeof hidden === 'string' && evaluateExpressions) {
+                try {
+                    const result = await evaluateExpressions({ hidden });
+                    hidden = result.hidden;
+                }
+                catch {
+                    hidden = false;
+                }
+            }
+            return { property, hidden: !!hidden };
+        }));
+        return evaluated.filter((x) => !x.hidden).map((x) => x.property);
+    }
+    async createPropertyGrid(sectionId, helpers, evaluateExpressions) {
+        const visibleProperties = await this.getVisiblePropertiesByGroupId(sectionId, helpers, evaluateExpressions);
         return {
             type: 'grid-layout',
             mode: 'edit',
@@ -2701,10 +2711,7 @@ class AXPBaseRelatedEntityConverter {
                     },
                 },
             },
-            children: helpers
-                .getPropertyByGroupId(sectionId)
-                .filter((property) => !property.schema.hidden)
-                .map((p) => {
+            children: visibleProperties.map((p) => {
                 const layout = helpers.getPropertyLayout(p.name);
                 return {
                     type: 'grid-item-layout',
@@ -2719,6 +2726,7 @@ class AXPBaseRelatedEntityConverter {
                             type: 'form-field',
                             options: {
                                 label: p.title,
+                                showLabel: layout?.label?.visible ?? true,
                             },
                             children: [
                                 {
@@ -2738,6 +2746,39 @@ class AXPBaseRelatedEntityConverter {
             }),
         };
     }
+    async createGridLayoutStructureInternal(singleInterface, helpers, evaluateExpressions) {
+        return {
+            type: 'grid-layout',
+            options: {
+                grid: {
+                    default: {
+                        gridTemplateColumns: 'repeat(12, 1fr)',
+                        gridTemplateRows: 'repeat(1, 1fr)',
+                        gap: '20px',
+                    },
+                },
+            },
+            children: await Promise.all(singleInterface?.sections.map(async (s) => ({
+                type: 'grid-item-layout',
+                name: s.id,
+                options: {
+                    colSpan: s.layout?.positions?.lg?.colSpan ?? 12,
+                    colStart: s.layout?.positions?.lg?.colStart,
+                    colEnd: s.layout?.positions?.lg?.colEnd,
+                },
+                children: [
+                    {
+                        type: 'fieldset-layout',
+                        options: {
+                            title: helpers.getGroupById(s.id)?.title ?? '',
+                            collapsible: true,
+                        },
+                        children: [await this.createPropertyGrid(s.id, helpers, evaluateExpressions)],
+                    },
+                ],
+            }))),
+        };
+    }
 }
 
 class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
@@ -2754,17 +2795,25 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
             };
             return await context.expressionEvaluator.evaluate(actionData, scope);
         };
+        // Build related tabs for the related entity page (mirrors main-entity tab building)
+        const tabDetailEntities = entityDef?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'tab-detail');
+        const tabListEntities = entityDef?.relatedEntities?.filter((re) => !re.hidden && (!re.layout?.type || re.layout?.type === 'tab-list'));
+        const factory = new AXPRelatedEntityConverterFactory();
+        const tabDetailTabs = await this.buildTabDetails(factory, tabDetailEntities ?? [], context);
+        const tabListTabs = await this.buildTabLists(factory, tabListEntities ?? [], context);
         return {
             id: entityDef?.name ?? '',
-            title: relatedEntity.title ?? entityDef?.title ?? '',
+            title: `${context.rootTitle}`,
             label: relatedEntity.title ?? entityDef?.formats.displayName ?? '',
             icon: relatedEntity.icon || entityDef.icon,
             settings: this.createPageSettings(),
             load: this.createLoadFunction(entityDef, relatedEntity, evaluateExpressions),
             execute: this.createExecuteFunction(entityDef),
-            content: [this.createGridLayoutStructure(helpers.singleInterface, helpers)],
+            // tabs: [...tabDetailTabs, ...tabListTabs],
+            content: [await this.createGridLayoutStructure(helpers.singleInterface, helpers, evaluateExpressions)],
         };
     }
+    //#region ----   Utility Methods   ----
     createPageSettings() {
         return {
             commands: {
@@ -2787,7 +2836,7 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
         return async (context) => {
             const fn = entityDef?.queries.byKey?.execute;
             const conditionValues = relatedEntity.conditions?.map((c) => c.value) ?? [];
-            const evaluatedConditionValues = await evaluateExpressions(conditionValues);
+            const evaluatedConditionValues = await Promise.all(conditionValues.map((c) => evaluateExpressions(c)));
             const id = evaluatedConditionValues[0];
             const result = await fn(id);
             return { success: true, result };
@@ -2808,6 +2857,42 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
             }
         };
     }
+    //#endregion
+    //#region ----   Tab Builders   ----
+    /**
+     * Builds tab-detail items for a related entity page using the shared converters.
+     */
+    async buildTabDetails(factory, tabDetailEntities, ctx) {
+        if (!ctx?.entityResolver || !tabDetailEntities?.length) {
+            return [];
+        }
+        const tabs = [];
+        for (const re of tabDetailEntities) {
+            const converter = factory.createTabDetailsConverter();
+            tabs.push(await converter.convert(re, {
+                entityResolver: ctx.entityResolver,
+            }));
+        }
+        return tabs;
+    }
+    /**
+     * Builds tab-list items for a related entity page using the shared converters with context-aware filters/actions.
+     */
+    async buildTabLists(factory, tabListEntities, ctx) {
+        if (!ctx?.entityResolver || !tabListEntities?.length) {
+            return [];
+        }
+        const tabs = [];
+        for (const re of tabListEntities) {
+            const converter = factory.createTabListConverter();
+            tabs.push(await converter.convert(re, {
+                entityResolver: ctx.entityResolver,
+                expressionEvaluator: ctx.expressionEvaluator,
+                context: ctx.context,
+            }));
+        }
+        return tabs;
+    }
 }
 
 class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
@@ -2823,6 +2908,7 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
             };
             return await context.expressionEvaluator.evaluate(actionData, scope);
         };
+        const evaluatedActions = await evaluateExpressions(relatedEntity?.actions);
         const filters = relatedEntity.conditions?.map(async (c) => {
             const value = await evaluateExpressions(c.value);
             return {
@@ -2837,17 +2923,13 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
             title: `${context.rootTitle}`,
             label: relatedEntity.title,
             icon: relatedEntity.icon || entityDef.icon,
-            actions: this.mergeActions(entityDef, relatedEntity)
+            actions: this.mergeActions(entityDef, evaluatedActions)
                 ?.filter((a) => a.priority === 'primary')
                 ?.map((a) => {
                 return {
                     ...a,
                     zone: 'header',
-                    // visible:
-                    //   a.scope === AXPEntityCommandScope.Selected
-                    //     ? "{{widget.find('table').outputs().selectedItem().length > 0}}"
-                    //     : true,
-                    visible: '{{context.eval("table")}}',
+                    visible: !a.hidden,
                     priority: 'primary',
                     name: a.name,
                     title: a.title,
@@ -2865,7 +2947,7 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
             execute: async (command, executeContext) => {
                 try {
                     const commandName = command.name.split('&')[0];
-                    const mergedActions = this.mergeActions(entityDef, relatedEntity);
+                    const mergedActions = this.mergeActions(entityDef, evaluatedActions);
                     const action = mergedActions.find((a) => {
                         return a.name === commandName || a.name.split('&')[0] === commandName;
                     });
@@ -2880,10 +2962,6 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                             },
                         };
                     }
-                    let evaluatedOptions = command.options;
-                    if (action.options) {
-                        evaluatedOptions = await evaluateExpressions(action.options);
-                    }
                     await context.workflowService.execute(commandName, {
                         entity: getEntityInfo(entityDef).source,
                         entityInfo: {
@@ -2895,8 +2973,8 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                         },
                         data: action.scope == AXPEntityCommandScope.Selected
                             ? executeContext
-                            : evaluatedOptions?.['process']?.data || null,
-                        options: evaluatedOptions,
+                            : action.options?.['process']?.data || null,
+                        options: action.options,
                         metadata: action.metadata,
                     });
                     return { success: true };
@@ -2925,14 +3003,15 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                     options: {
                         entity: relatedEntity.entity,
                         showEntityActions: false,
+                        actions: evaluatedActions,
                     },
                 },
             ],
         };
     }
-    mergeActions(entityDef, relatedEntity) {
+    mergeActions(entityDef, relatedEntityActions) {
         const originalList = entityDef?.interfaces?.master?.list?.actions ?? [];
-        const relatedEntityActionList = relatedEntity.actions ?? [];
+        const relatedEntityActionList = relatedEntityActions ?? [];
         // Create a map to track which actions from relatedEntityActionList have been used
         const usedOverrideActions = new Set();
         // Start with original actions, applying overrides where they exist
@@ -2969,7 +3048,7 @@ class AXPTabDetailsConverter extends AXPBaseRelatedEntityConverter {
             id: entityDef?.name ?? '',
             title: relatedEntity.title ?? entityDef?.title ?? '',
             icon: relatedEntity.icon || entityDef.icon,
-            content: [this.createGridLayoutStructure(helpers.singleInterface, helpers)],
+            content: [await this.createGridLayoutStructure(helpers.singleInterface, helpers)],
         };
     }
 }
@@ -3077,30 +3156,46 @@ class AXPMainEntityContentBuilder {
                 return groups.some((group) => group.id === section.id);
             }) ?? []);
         };
-        const getPropertyByGroupId = (groupId) => {
-            return entity?.properties.filter((p) => p.groupId === groupId) ?? [];
+        // Create expression evaluator for actions
+        const evaluateExpressions = dependencies?.expressionEvaluator
+            ? this.createExpressionEvaluator(rootContext, dependencies.expressionEvaluator)
+            : null;
+        const getVisiblePropertyByGroupId = async (groupId) => {
+            const properties = entity?.properties.filter((p) => p.groupId === groupId) ?? [];
+            const evaluated = await Promise.all(properties.map(async (p) => {
+                // If you later need expression-based hidden logic, evaluate it here
+                let hidden = p?.schema?.hidden;
+                if (typeof hidden === 'string' && evaluateExpressions) {
+                    try {
+                        const res = await evaluateExpressions({ hidden });
+                        hidden = res.hidden;
+                    }
+                    catch {
+                        hidden = false;
+                    }
+                }
+                return { prop: p, hidden: !!hidden };
+            }));
+            return evaluated.filter((x) => !x.hidden).map((x) => x.prop);
         };
         const getPropertyLayout = (name) => {
             return singleInterface?.properties?.find((p) => p.name === name)?.layout;
         };
         // Get related entities for tabs
-        const tabDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layoutType === 'tab-detail');
-        const tabListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && (!re.layoutType || re.layoutType === 'tab-list'));
+        const tabDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'tab-detail');
+        const tabListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && (!re.layout?.type || re.layout?.type === 'tab-list'));
         // Build related tabs if dependencies are provided
         const tabDetailTabs = await this.buildTabDetails(tabDetailEntities ?? [], dependencies);
         const tabListTabs = await this.buildTabLists(tabListEntities ?? [], rootContext, dependencies);
         // Build actions from single interface
         const actions = this.buildActions(entity, singleInterface);
-        // Create expression evaluator for actions
-        const evaluateExpressions = dependencies?.expressionEvaluator
-            ? this.createExpressionEvaluator(rootContext, dependencies.expressionEvaluator)
-            : null;
         return {
             id: entity?.name ?? '',
             title: singleInterface?.title ?? entity?.formats.individual ?? '',
             label: entity?.formats.displayName ?? singleInterface?.title ?? '',
             icon: entity?.icon,
             actions: await this.buildEvaluatedActions(actions, evaluateExpressions),
+            isPrimary: true,
             settings: {
                 commands: {
                     reject: {
@@ -3197,7 +3292,7 @@ class AXPMainEntityContentBuilder {
                             },
                         },
                     },
-                    children: filterValidSections(singleInterface?.sections ?? []).map((s) => ({
+                    children: await Promise.all(filterValidSections(singleInterface?.sections ?? []).map(async (s) => ({
                         type: 'grid-item-layout',
                         name: s.id,
                         options: {
@@ -3225,9 +3320,7 @@ class AXPMainEntityContentBuilder {
                                                 },
                                             },
                                         },
-                                        children: getPropertyByGroupId(s.id)
-                                            .filter((property) => !property.schema.hidden)
-                                            .map((p) => {
+                                        children: (await getVisiblePropertyByGroupId(s.id)).map((p) => {
                                             const layout = getPropertyLayout(p.name);
                                             return {
                                                 type: 'grid-item-layout',
@@ -3242,6 +3335,7 @@ class AXPMainEntityContentBuilder {
                                                         type: 'form-field',
                                                         options: {
                                                             label: p.title,
+                                                            showLabel: layout?.label?.visible ?? true,
                                                         },
                                                         children: [
                                                             {
@@ -3269,7 +3363,7 @@ class AXPMainEntityContentBuilder {
                                 ],
                             },
                         ],
-                    })),
+                    }))),
                 },
             ],
         };
@@ -3283,7 +3377,8 @@ class AXPMainEntityContentBuilder {
             const scope = {
                 context: {
                     eval: (path) => {
-                        return get(context, path);
+                        const value = get(context, path);
+                        return value;
                     },
                 },
             };
@@ -3395,11 +3490,15 @@ class AXPLayoutAdapterFactory {
             throw new Error(`Entity ${moduleName}.${entityName} not found`);
         }
         const rootContext = await this.loadRootContext(entity, id);
+        // Build main and related pages
+        const mainPage = await this.buildMainPage(entity, rootContext, dependencies);
+        const relatedPages = await this.buildRelatedPages(entity, rootContext, dependencies);
+        // Compose ordered pages around the primary page
+        const orderedPages = this.composePagesWithPositions(mainPage, relatedPages, entity);
         return this.layoutAdapterBuilder
             .setEntity(entity, rootContext)
             .setDependencies(dependencies)
-            .setMainPage(await this.buildMainPage(entity, rootContext, dependencies))
-            .setRelatedPages(await this.buildRelatedPages(entity, rootContext, dependencies))
+            .setPages(orderedPages)
             .build();
     }
     async loadRootContext(entity, id) {
@@ -3412,13 +3511,17 @@ class AXPLayoutAdapterFactory {
     async buildRelatedPages(entity, rootContext, dependencies) {
         const pages = [];
         // Page Details
-        const pageDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layoutType === 'page-detail');
+        const pageDetailEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'page-detail');
         for (const relatedEntity of pageDetailEntities || []) {
             const converter = this.relatedEntityConverterFactory.createPageDetailsConverter();
-            pages.push(await converter.convert(relatedEntity, { entityResolver: dependencies.entityResolver }));
+            pages.push(await converter.convert(relatedEntity, {
+                ...dependencies,
+                context: rootContext,
+                rootTitle: await this.getRootTitle(entity, rootContext, dependencies),
+            }));
         }
         // Page Lists
-        const pageListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layoutType === 'page-list');
+        const pageListEntities = entity?.relatedEntities?.filter((re) => !re.hidden && re.layout?.type === 'page-list');
         for (const relatedEntity of pageListEntities || []) {
             const converter = this.relatedEntityConverterFactory.createPageListConverter();
             pages.push(await converter.convert(relatedEntity, {
@@ -3429,9 +3532,46 @@ class AXPLayoutAdapterFactory {
         }
         return pages;
     }
+    composePagesWithPositions(mainPage, relatedPages, entity) {
+        // Only consider related entities with layout types page-detail or page-list
+        const pageEntities = (entity?.relatedEntities || []).filter((re) => !re.hidden && (re.layout?.type === 'page-detail' || re.layout?.type === 'page-list'));
+        // Build a map from entity name to its layout config (order/position)
+        const layoutConfigByEntity = {};
+        for (const re of pageEntities) {
+            const [, entityName] = (re.entity || '').split('.');
+            const key = entityName || re.entity;
+            layoutConfigByEntity[key] = { order: re.layout?.order, position: re.layout?.position };
+        }
+        // Split related pages into before/after buckets based on their relatedEntity layout
+        const before = [];
+        const after = [];
+        for (const page of relatedPages) {
+            const conf = layoutConfigByEntity[page.id];
+            const position = conf?.position ?? 'after';
+            if (position === 'before') {
+                before.push(page);
+            }
+            else {
+                after.push(page);
+            }
+        }
+        // Sort by order within each bucket (undefined orders go last)
+        const sortByOrder = (a, b) => {
+            const ao = layoutConfigByEntity[a.id]?.order ?? Number.POSITIVE_INFINITY;
+            const bo = layoutConfigByEntity[b.id]?.order ?? Number.POSITIVE_INFINITY;
+            return ao - bo;
+        };
+        before.sort(sortByOrder);
+        after.sort(sortByOrder);
+        // Ensure the main page is primary
+        mainPage.isPrimary = true;
+        // Compose final pages: before -> main -> after
+        return [...before, mainPage, ...after];
+    }
     async getRootTitle(entity, rootContext, dependencies) {
         // Logic for getting root title
-        return await dependencies.expressionEvaluator.evaluate(entity.interfaces?.master?.single?.title, rootContext);
+        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.6", 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.6", ngImport: i0, type: AXPLayoutAdapterFactory, providedIn: 'root' }); }
@@ -3499,6 +3639,81 @@ class AXPEntitySearchDefinitionProvider {
     }
 }
 
+//#region ----   Column Mapping Helpers   ----
+/**
+ * Maps an entity property to a list widget column configuration.
+ * Preserves readonly behavior and leverages the property's interface options when available.
+ */
+function mapPropertyToWidgetColumn(property) {
+    return {
+        name: property.name,
+        title: property.title,
+        visible: true,
+        widget: property.schema?.interface
+            ? {
+                type: property.schema.interface.type || 'text-editor',
+                path: property.name,
+                options: {
+                    readonly: true,
+                    ...property.schema.interface.options,
+                },
+            }
+            : {
+                type: 'text-editor',
+                path: property.name,
+                options: { readonly: true },
+            },
+    };
+}
+/**
+ * Maps an entity column metadata (and its related property) to a list widget column configuration.
+ */
+function mapEntityColumnToWidgetColumn(entity, column) {
+    const property = entity.properties.find((p) => p.name === column.name);
+    return {
+        name: column.name,
+        title: column.title || property?.title || column.name,
+        width: column.options?.width,
+        visible: column.options?.visible !== false,
+        widget: property?.schema?.interface
+            ? {
+                type: property.schema.interface.type || 'text-editor',
+                path: column.options?.dataPath || column.name,
+                options: {
+                    readonly: true,
+                    ...property.schema.interface.options,
+                },
+            }
+            : {
+                type: 'text-editor',
+                path: column.options?.dataPath || column.name,
+                options: { readonly: true },
+            },
+    };
+}
+//#endregion
+//#region ----   Include/Exclude Utilities   ----
+/**
+ * Applies include and exclude filters to a named collection while preserving order.
+ */
+function applyIncludeExclude(items, include = [], exclude = []) {
+    let result = items;
+    if (include.length > 0) {
+        result = result.filter((i) => include.includes(i.name));
+    }
+    if (exclude.length > 0) {
+        result = result.filter((i) => !exclude.includes(i.name));
+    }
+    return result;
+}
+/**
+ * Returns only visible (non-hidden) properties of an entity.
+ */
+function getVisibleProperties(entity) {
+    return entity.properties.filter((prop) => !prop.schema?.hidden);
+}
+//#endregion
+
 class AXPEntityListTableService {
     constructor() {
         //#region ----   Services & Dependencies   ----
@@ -3506,6 +3721,9 @@ class AXPEntityListTableService {
         this.workflow = inject(AXPWorkflowService);
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.evaluateExpressions = async (options, data) => {
+            if (!options) {
+                return {};
+            }
             const scope = {
                 context: {
                     eval: (path) => {
@@ -3521,8 +3739,7 @@ class AXPEntityListTableService {
     /**
      * Convert Entity to List Widget Options
      */
-    async convertEntityToListOptions(entity, options) {
-        const allActions = entity.interfaces?.master?.list?.actions?.map((tr) => new AXPEntityCommandTriggerViewModel(entity, tr)) ?? [];
+    async convertEntityToListOptions(entity, options, allActions) {
         const listOptions = {
             // 📊 Data Source
             dataSource: this.createDataSource(entity),
@@ -3574,72 +3791,17 @@ class AXPEntityListTableService {
     createColumnsFromProperties(entity, options) {
         const excludeColumns = options?.excludeColumns || [];
         const includeColumns = options?.includeColumns || [];
-        let columns = [];
-        // If columns are defined, use them
-        if (entity.columns && entity.columns.length > 0) {
-            columns = entity.columns.map((col) => this.mapEntityColumnToWidgetColumn(entity, col));
-        }
-        else {
-            // Otherwise use properties
-            columns = entity.properties
-                .filter((prop) => !prop.schema.hidden) // Only visible properties
-                .map((prop) => ({
-                name: prop.name,
-                title: prop.title,
-                visible: true,
-                widget: prop.schema.interface
-                    ? {
-                        type: prop.schema.interface.type || 'text-editor',
-                        path: prop.name,
-                        options: {
-                            readonly: true,
-                            ...prop.schema.interface.options,
-                        },
-                    }
-                    : {
-                        type: 'text-editor',
-                        path: prop.name,
-                        options: { readonly: true },
-                    },
-            }));
-        }
-        // Apply include/exclude filters
-        if (includeColumns.length > 0) {
-            // If includeColumns is specified, only include those columns
-            columns = columns.filter((col) => includeColumns.includes(col.name));
-        }
-        if (excludeColumns.length > 0) {
-            // If excludeColumns is specified, exclude those columns
-            columns = columns.filter((col) => !excludeColumns.includes(col.name));
-        }
-        return columns;
+        // If columns are defined, use them; otherwise use visible properties
+        const baseColumns = entity.columns && entity.columns.length > 0
+            ? entity.columns.map((col) => this.mapEntityColumnToWidgetColumn(entity, col))
+            : getVisibleProperties(entity).map((prop) => mapPropertyToWidgetColumn(prop));
+        return applyIncludeExclude(baseColumns, includeColumns, excludeColumns);
     }
     /**
      * Map EntityTableColumn to ListWidgetColumn
      */
     mapEntityColumnToWidgetColumn(entity, column) {
-        // Find corresponding property
-        const property = entity.properties.find((p) => p.name === column.name);
-        return {
-            name: column.name,
-            title: column.title || property?.title || column.name,
-            width: column.options?.width,
-            visible: column.options?.visible !== false,
-            widget: property?.schema.interface
-                ? {
-                    type: property.schema.interface.type || 'text-editor',
-                    path: column.options?.dataPath || column.name,
-                    options: {
-                        readonly: true,
-                        ...property.schema.interface.options,
-                    },
-                }
-                : {
-                    type: 'text-editor',
-                    path: column.options?.dataPath || column.name,
-                    options: { readonly: true },
-                },
-        };
+        return mapEntityColumnToWidgetColumn(entity, column);
     }
     /**
      * Convert Entity Actions to Row Commands
@@ -3655,7 +3817,7 @@ class AXPEntityListTableService {
             icon: action.icon,
             color: action.color,
             look: 'outline',
-            visible: action.hidden,
+            visible: !action.hidden,
             disabled: action.disabled,
         }));
     }
@@ -3666,6 +3828,36 @@ class AXPEntityListTableService {
         const actions = entity.interfaces?.master?.list?.actions || [];
         return actions.some((action) => action.scope === AXPEntityCommandScope.Selected);
     }
+    /**
+     * Handle execution of a row command (shared by double-click and command handlers)
+     */
+    async handleRowCommand(e, selectedRows, entity, allActions) {
+        const data = e.data;
+        const commandName = e.name;
+        const action = allActions.find((c) => {
+            return (c.name == e.name &&
+                ((selectedRows?.length
+                    ? c.scope == AXPEntityCommandScope.Selected
+                    : c.scope == AXPEntityCommandScope.Individual) ||
+                    c.scope == AXPEntityCommandScope.TypeLevel));
+        });
+        const command = commandName.split('&')[0];
+        const options = await this.evaluateExpressions(action?.options, data);
+        await this.workflow.execute(command, {
+            entity: getEntityInfo(entity).source,
+            entityInfo: {
+                name: entity.name,
+                module: entity.module,
+                title: entity.title,
+                parentKey: entity.parentKey,
+                source: entity.source,
+            },
+            data: action?.scope == AXPEntityCommandScope.Selected ? selectedRows : data,
+            options: options,
+            metadata: action?.metadata,
+        });
+        console.log('Entity List - Row command:', e.name, e.data);
+    }
     /**
      * Create default events
      */
@@ -3674,38 +3866,27 @@ class AXPEntityListTableService {
             onRowClick: (row) => {
                 console.log('Entity List - Row clicked:', row);
             },
-            onRowDoubleClick: (row) => {
-                console.log('Entity List - Row double clicked:', row);
+            onRowDoubleClick: (e) => {
+                console.log('Entity List - Row double clicked:', e);
+                const defaultAction = allActions.find((c) => {
+                    const commandName = c.name.split('&')[0];
+                    return (c.default || commandName === 'open-entity') && !c.hidden;
+                });
+                if (!defaultAction) {
+                    return;
+                }
+                const d = {
+                    component: e.component,
+                    name: defaultAction.name,
+                    data: e.data,
+                };
+                this.handleRowCommand(d, undefined, entity, allActions);
             },
             onSelectionChange: (selectedRows) => {
                 console.log('Entity List - Selection changed:', selectedRows);
             },
             onRowCommand: async (e, selectedRows) => {
-                const data = e.data;
-                const commandName = e.name;
-                const action = allActions.find((c) => {
-                    return (c.name == e.name &&
-                        ((selectedRows?.length
-                            ? c.scope == AXPEntityCommandScope.Selected
-                            : c.scope == AXPEntityCommandScope.Individual) ||
-                            c.scope == AXPEntityCommandScope.TypeLevel));
-                });
-                const command = commandName.split('&')[0];
-                const options = await this.evaluateExpressions(action?.options, data);
-                await this.workflow.execute(command, {
-                    entity: getEntityInfo(entity).source,
-                    entityInfo: {
-                        name: entity.name,
-                        module: entity.module,
-                        title: entity.title,
-                        parentKey: entity.parentKey,
-                        source: entity.source,
-                    },
-                    data: action?.scope == AXPEntityCommandScope.Selected ? selectedRows : data,
-                    options: options,
-                    metadata: action?.metadata,
-                });
-                console.log('Entity List - Row command:', e.name, e.data);
+                await this.handleRowCommand(e, selectedRows, entity, allActions);
             },
         };
     }
@@ -3767,29 +3948,29 @@ class AXPEntityListToolbarService {
      * Create Column Definitions for Toolbar
      */
     createColumnDefinitions(entity, options) {
-        const { columns = [], properties } = entity;
+        const { columns = [] } = entity;
         const excludeColumns = options?.excludeColumns || [];
         const includeColumns = options?.includeColumns || [];
-        const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
+        const visibleProperties = getVisibleProperties(entity);
         const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
-        let filteredColumns = columns.filter(({ name }) => visiblePropNames.has(name));
-        // Apply include/exclude filters
-        if (includeColumns.length > 0) {
-            // If includeColumns is specified, only include those columns
-            filteredColumns = filteredColumns.filter((col) => includeColumns.includes(col.name));
-        }
-        if (excludeColumns.length > 0) {
-            // If excludeColumns is specified, exclude those columns
-            filteredColumns = filteredColumns.filter((col) => !excludeColumns.includes(col.name));
-        }
-        return filteredColumns.map((column) => {
-            const property = visibleProperties.find(({ name }) => name === column.name);
-            return {
-                name: column.name,
-                title: property?.title,
-                visible: column?.options?.visible ?? true,
-            };
-        });
+        // Prefer explicit entity.columns if present; fallback to visible properties
+        const baseColumns = columns.length > 0
+            ? columns
+                .filter(({ name }) => visiblePropNames.has(name))
+                .map((column) => {
+                const property = visibleProperties.find(({ name }) => name === column.name);
+                return {
+                    name: column.name,
+                    title: property?.title,
+                    visible: column?.options?.visible ?? true,
+                };
+            })
+            : visibleProperties.map((property) => ({
+                name: property.name,
+                title: property.title,
+                visible: true,
+            }));
+        return applyIncludeExclude(baseColumns, includeColumns, excludeColumns);
     }
     /**
      * Create Sort Definitions for Toolbar
@@ -3818,7 +3999,6 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.entityListTableService = inject(AXPEntityListTableService);
         this.entityListToolbarService = inject(AXPEntityListToolbarService);
         this.layoutThemeService = inject(AXPLayoutThemeService);
-        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
         this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
         this.entity = signal(null, ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.listNode = signal(null, ...(ngDevMode ? [{ debugName: "listNode" }] : []));
@@ -3826,7 +4006,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.allWidgets = viewChildren(AXPWidgetRendererDirective, ...(ngDevMode ? [{ debugName: "allWidgets" }] : []));
         this.listWidget = linkedSignal(() => this.allWidgets().find((widget) => widget.node()?.type === AXPWidgetsCatalog.list));
         this.toolbarWidget = computed(() => this.allWidgets().find((widget) => widget.node()?.type === AXPWidgetsCatalog.listToolbar), ...(ngDevMode ? [{ debugName: "toolbarWidget" }] : []));
-        this.selectedItems = computed(() => this.getValue()?.table || [], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
         this.toolbarNode = signal(null, ...(ngDevMode ? [{ debugName: "toolbarNode" }] : []));
         this.destroyed = new Subject();
         //options
@@ -3839,7 +4019,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         //actions
         this.allActions = computed(() => {
             const originalList = this.entity()?.interfaces?.master?.list?.actions ?? [];
-            const externalActionList = (this.options()['actions'] ?? []);
+            const externalActionList = this.externalActions() ?? [];
             const usedOverrideActions = new Set();
             const mergedActions = originalList.map((originalAction) => {
                 const originalCommandName = typeof originalAction.command === 'string' ? originalAction.command : originalAction.command?.name;
@@ -3948,7 +4128,9 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
                 parentKey: this.entity()?.parentKey,
                 source: this.entity()?.source,
             },
-            data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data,
+            data: action?.scope == AXPEntityCommandScope.Selected
+                ? this.selectedItems()
+                : action?.options?.['process']?.data || null,
             options: action?.options,
             metadata: action?.metadata,
         });
@@ -4014,10 +4196,30 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
      * TODO: Implement column change logic
      */
     handleColumnChanges(changeTracker) {
-        if (changeTracker.isColumnsChanged) {
-            // TODO: Implement column change handling
-            console.log('Column changes detected - implementation needed');
+        if (!changeTracker.isColumnsChanged) {
+            return;
         }
+        const listInstance = this.listWidget()?.instance;
+        const toolbarState = this.getValue()?.toolbar;
+        if (!listInstance || !toolbarState?.columns) {
+            return;
+        }
+        // Current columns from list options
+        const currentColumns = (listInstance.options()['columns'] || []);
+        const columnByName = new Map(currentColumns.map((c) => [c.name, c]));
+        // Build new ordered columns array based on toolbar order/visibility
+        const updatedColumns = toolbarState.columns
+            .map((q) => {
+            const base = columnByName.get(q.name);
+            if (!base) {
+                return null;
+            }
+            // Preserve all existing column config but update visibility
+            return { ...base, visible: q.visible };
+        })
+            .filter((c) => c != null);
+        // Apply updated columns to the list widget and refresh
+        listInstance.setOptions({ columns: updatedColumns });
     }
     async ngOnInit() {
         super.ngOnInit();
@@ -4035,7 +4237,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
             excludeColumns: this.excludeColumns(),
             includeColumns: this.includeColumns(),
         };
-        const listOptions = await this.entityListTableService.convertEntityToListOptions(resolvedEntity, options);
+        const listOptions = await this.entityListTableService.convertEntityToListOptions(resolvedEntity, options, this.allActions());
         const toolbarOptions = await this.entityListToolbarService.convertEntityToolbarOptions(resolvedEntity, options);
         this.listNode.set({
             type: AXPWidgetsCatalog.list,
@@ -4057,7 +4259,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
             },
         });
     }
-    ngAfterViewInit() {
+    async ngAfterViewInit() {
         this.workflow.events$
             .pipe(ofType(AXPRefreshEvent))
             .pipe(takeUntil(this.destroyed))
@@ -4066,6 +4268,15 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
                 this.listWidget()?.instance.call('refresh');
             }
         });
+        const listWidget = (await this.layoutService.waitForWidget(`${this.entitySource()}-tab-list_table`, 500));
+        if (listWidget?.api && typeof listWidget.api === 'function') {
+            const onSelectionChange = listWidget.api()['onSelectionChange'];
+            if (onSelectionChange) {
+                onSelectionChange.pipe(takeUntil(this.destroyed)).subscribe((e) => {
+                    this.selectedItems.set(e);
+                });
+            }
+        }
     }
     ngOnDestroy() {
         this.listWidget.set(undefined);
@@ -4073,7 +4284,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.destroyed.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityListWidgetViewComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "\"ax-h-full\"" } }, providers: [AXPEntityListTableService, AXPEntityListToolbarService], viewQueries: [{ propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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) {
@@ -4804,6 +5015,7 @@ class AXPLookupWidgetSelectorViewModel {
         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({
             byKey: (key) => {
                 const func = this.entityDef.queries.byKey.execute;
@@ -4833,15 +5045,33 @@ class AXPLookupWidgetSelectorViewModel {
             return this.inlineFiltersPlaceholders().length > 0;
         }, ...(ngDevMode ? [{ debugName: "hasInlineFilters" }] : []));
         this.columns = () => {
-            const listColumns = this.entityDef.columns ?? [];
-            const columns = listColumns?.map((c) => c.name) ?? [];
-            const props = this.entityDef.properties.filter((p) => p.schema.hidden != true);
-            const displayColumns = props.filter((p) => (this.options.columns?.length ?? 0) > 0
-                ? this.options.columns.some((c) => c == p.name)
-                : columns.some((c) => c == p.name));
-            //
-            return displayColumns.map((p) => {
-                return new AXPEntityListViewColumnViewModel(p, listColumns?.find((c) => c.name == p.name));
+            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,
+                            },
+                        },
+                    };
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
+                else {
+                    const property = visibleProperties.find(({ name }) => name === column.name);
+                    return new AXPEntityListViewColumnViewModel(property, column);
+                }
             });
         };
         this.inlineFilters = {
@@ -4950,13 +5180,24 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.entity = computed(() => this.options()['entity'], ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.columns = computed(() => this.options()['columns'] ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.textField = computed(() => this.options()['textField'] ?? '', ...(ngDevMode ? [{ debugName: "textField" }] : []));
         this.customFilter = computed(() => this.options()['filter'], ...(ngDevMode ? [{ debugName: "customFilter" }] : []));
         this.multiple = computed(() => (this.options()['multiple'] ?? false), ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.look = computed(() => this.options()['look'] ?? 'lookup', ...(ngDevMode ? [{ debugName: "look" }] : []));
         this.allowClear = computed(() => (this.options()['allowClear'] ?? false), ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
-        this.textField = computed(() => {
-            return (this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title');
-        }, ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.defaultTextField = computed(() => {
+            const textField = this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title';
+            return textField;
+        }, ...(ngDevMode ? [{ debugName: "defaultTextField" }] : []));
+        this.displayField = computed(() => {
+            if (this.textField()) {
+                return this.textField();
+            }
+            return this.defaultTextField();
+        }, ...(ngDevMode ? [{ debugName: "displayField" }] : []));
+        this.selectedItemsText = computed(() => {
+            return this.selectedItems().map((item) => get(item, this.displayField())).join(', ');
+        }, ...(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.searchTerm = signal(null, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
@@ -5096,6 +5337,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.selectedItems.set(items);
         //
         const keys = items.map((item) => get(item, this.valueField()));
+        const text = items.map((item) => get(item, this.displayField()));
         //
         // extract data from valueField and set context by expose path
         if (this.expose()) {
@@ -5151,7 +5393,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
       <ax-select-box
         [dataSource]="vm()?.dataSource!"
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         [disabled]="disabled()"
         [multiple]="multiple()"
@@ -5165,9 +5407,10 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         }
       </ax-select-box>
     } @else {
+      {{selectedItemsText()}}
       <ax-tag-box
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         (onValueChanged)="handleValueChange($event)"
         [placeholder]="placeholder() | translate | async"
@@ -5206,7 +5449,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     }
   `, 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: 
                 //
-                AXButtonModule }, { kind: "component", type: i3$1.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$1.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"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
@@ -5217,7 +5460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
       <ax-select-box
         [dataSource]="vm()?.dataSource!"
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         [disabled]="disabled()"
         [multiple]="multiple()"
@@ -5231,9 +5474,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }
       </ax-select-box>
     } @else {
+      {{selectedItemsText()}}
       <ax-tag-box
         [ngModel]="selectedItems()"
-        [textField]="textField()"
+        [textField]="displayField()"
         [valueField]="valueField()"
         (onValueChanged)="handleValueChange($event)"
         [placeholder]="placeholder() | translate | async"
@@ -5547,7 +5791,7 @@ class AXPTagableBoxWidgetEditComponent extends AXPValueWidgetComponent {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.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$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$1.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"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, decorators: [{
             type: Component,