@acorex/platform 18.0.2 → 18.0.5

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

@@ -1,8 +1,8 @@
 import { AXFormatService } from '@acorex/core/format';
-import { cloneDeep, set, merge } from 'lodash-es';
+import { cloneDeep, set, merge, get } from 'lodash-es';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, computed, signal, Injector, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i1$1 from '@acorex/platform/workflow';
+import { InjectionToken, inject, Injectable, computed, signal, Injector, Component, ChangeDetectionStrategy, DestroyRef, ViewChild, NgModule } from '@angular/core';
+import * as i1$2 from '@acorex/platform/workflow';
 import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowService, ofType, AXPWorkflowModule } from '@acorex/platform/workflow';
 import { AXPSessionService } from '@acorex/platform/auth';
 import { resolveActionLook, AXPLayoutService, AXPEntityCommandScope, AXPWorkflowNavigateAction } from '@acorex/platform/common';
@@ -10,26 +10,34 @@ 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 { AXDataSource } from '@acorex/components/common';
+import * as i1 from '@acorex/components/common';
+import { AXDataSource, AXCommonModule } from '@acorex/components/common';
+import { Subject, takeUntil } from 'rxjs';
 import { RouterModule, ROUTES } from '@angular/router';
-import * as i4$1 from '@acorex/platform/layout/builder';
+import * as i6 from '@acorex/platform/layout/builder';
 import { AXPWidgetBase, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPColumnWidgetBase } from '@acorex/platform/layout/builder';
 import { CommonModule } from '@angular/common';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2$1 from '@acorex/components/text-box';
-import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i4 from '@acorex/components/decorators';
+import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/text-box';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i3$1 from '@acorex/components/button';
+import * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i2 from '@acorex/components/data-table';
+import * as i4 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
-import * as i3 from '@acorex/components/search-box';
+import * as i5 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i6$1 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
+import * as i5$1 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXValidationModule } from '@acorex/core/validation';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const AXP_ENTITY_CONFIG_TOKEN = new InjectionToken('AXP_ENTITY_CONFIG_TOKEN');
 const AXP_ENTITY_DEFINITION_LOADER = new InjectionToken('AXP_ENTITY_DEFINITION_LOADER');
@@ -75,7 +83,7 @@ class AXPEntityDefinitionRegistryService {
                 throw error; // Rethrow to allow error handling by caller
             }
             if (!config) {
-                throw new Error(`Invalid Entity name: ${key}`);
+                throw new Error(`Invalid entity name: ${key}`);
             }
         }
         return config;
@@ -113,18 +121,19 @@ class AXPEntityCommandTriggerViewModel {
     }
 }
 class AXPEntityListViewColumnViewModel {
-    constructor(property) {
+    constructor(property, column) {
         this.property = property;
+        this.column = column;
         this.name = this.property.name;
-        this.title = this.property.title;
-        this.description = this.property.description;
-        this.visible = this.property.options?.table?.visible ?? true;
+        this.title = this.column.title ?? this.property.title;
+        this.visible = this.column?.options?.visible ?? true;
         this.node = computed(() => {
             const widget = this.property.schema.interface;
             return {
                 path: this.name,
                 type: widget.type,
-                options: { ...widget?.options, ...this.property.options?.table?.widget }
+                //... this.property.options?.table?.widget
+                options: { ...widget?.options }
             };
         });
     }
@@ -139,9 +148,10 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
         this.loadingDialog = inject(AXLoadingDialogService);
     }
     async execute(context) {
-        const moduleName = context.getVariable('module');
-        const entityName = context.getVariable('entity');
-        const ids = context.getVariable('ids');
+        const moduleEntity = context.getVariable('entity');
+        const [moduleName, entityName] = moduleEntity.split(".");
+        const items = context.getVariable('data');
+        const ids = items.map(c => c.id);
         const entity = await this.entityRegistery.resolve(moduleName, entityName);
         let deletedCount = 0;
         context.setVariable('deleteSuccessful', false);
@@ -188,13 +198,13 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
                 // All items deleted successfully
                 await this.dialogService.alert('Deletion Successful', `${successfulPromises} item(s) has been deleted.`, 'success');
                 // Dispatch actions
-                this.dispatch(AXPEntityDeletedEvent({ module: moduleName, entity: entityName, id: ids }));
+                this.dispatch(AXPEntityDeletedEvent({ entity: moduleEntity, ids: ids }));
             }
             else if (successfulPromises > 0 && failedPromises > 0) {
                 // Some items deleted successfully, some failed
                 await this.dialogService.alert('Partial Deletion Completed', `${successfulPromises} item(s) deleted successfully. However, ${failedPromises} item(s) could not be deleted.`, 'warning');
                 // Dispatch actions
-                this.dispatch(AXPEntityDeletedEvent({ module: moduleName, entity: entityName, id: ids }));
+                this.dispatch(AXPEntityDeletedEvent({ entity: moduleEntity, ids: ids }));
             }
             else if (successfulPromises === 0 && failedPromises > 0) {
                 // No items deleted, all failed
@@ -216,11 +226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Injectable
         }] });
 const AXPDeleteEntityWorkflow = {
-    startStepId: 'confirmDelete',
+    startStepId: 'confirm-delete',
     steps: {
-        confirmDelete: {
-            id: 'confirmDelete',
-            action: 'AXPDialogConfirmAction',
+        "confirm-delete": {
+            action: 'show-prompt-dialog',
             input: {
                 title: 'Warning',
                 message: `Are you sure want to delete selected item(s)?`,
@@ -232,17 +241,16 @@ const AXPDeleteEntityWorkflow = {
                         {
                             type: 'AND',
                             conditions: [
-                                { type: 'SINGLE', expression: 'context.getOutput("deleteConfirmed") == true' },
+                                { type: 'SINGLE', expression: 'context.getOutput("result") == true' },
                             ],
                         },
                     ],
-                    nextStepId: 'performDelete',
+                    nextStepId: 'perform-delete',
                 },
             ],
         },
-        performDelete: {
-            id: 'performDelete',
-            action: 'AXPEntityPerformDeleteAction',
+        "perform-delete": {
+            action: 'entity-perform-delete',
         },
     },
 };
@@ -255,15 +263,14 @@ class AXPEntityMasterUpdateElementViewModel {
         this.title = signal(this.property.title);
         this.description = signal(this.property.description);
         this.editable = computed(() => {
-            return !(this.property.schema.readonly ?? false) &&
-                (this.property.options?.update?.enabled ?? true);
+            return !(this.property.schema.readonly ?? false);
         });
-        this.order = signal(this.property.options?.view?.layout?.order ?? 0);
         this.isRequired = computed(() => {
             return this.property.validations?.some(c => c.rule == 'required') || false;
         });
         this.layout = computed(() => {
-            const source = cloneDeep(this.property.options?.update?.layout ?? this.property.options?.view?.layout ?? {});
+            const updateProp = this.entity.interfaces?.master?.update?.properties?.find(c => c.name == this.property.name);
+            const source = cloneDeep(updateProp?.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
@@ -277,7 +284,9 @@ class AXPEntityMasterUpdateElementViewModel {
                 children: widget.children,
                 formula: widget.formula,
                 triggers: widget.triggers,
-                options: merge(schema.interface?.options, this.property.options?.create?.widget, { validationRules: this.property.validations })
+                options: merge(schema.interface?.options, 
+                //this.property.options?.create?.widget,
+                { validationRules: this.property.validations })
             };
         });
     }
@@ -293,7 +302,8 @@ class AXPEntityMasterUpdateViewModel {
         this.isInProgress = signal(false);
         this.context = signal(cloneDeep(this.entityData));
         this.elements = computed(() => {
-            const props = this.entityDef.properties.filter(c => this.props.includes(c.name) && c.schema.hidden != true && c.options?.update?.enabled != false);
+            const props = this.entityDef.properties.filter(c => this.props.includes(c.name) &&
+                c.schema.hidden != true);
             return props.map(e => {
                 return new AXPEntityMasterUpdateElementViewModel(this.entityDef, e);
             });
@@ -353,10 +363,10 @@ class AXPEntityModifySectionPopupAction extends AXPWorkflowAction {
         this.factory = inject(AXPEntityMasterUpdateViewModelFactory);
     }
     async execute(context) {
-        const payload = context.getVariable('payload');
-        const { module, entity, properties, id, title } = payload;
-        const entityRef = await this.entityRegistery.resolve(module, entity);
-        const vm = await this.factory.create(module, entity, id, properties);
+        const [moduleName, entityName] = context.getVariable('entity').split(".");
+        const { properties, id, title } = context.getVariable('data');
+        const entityRef = await this.entityRegistery.resolve(moduleName, entityName);
+        const vm = await this.factory.create(moduleName, entityName, id, properties);
         const com = await this.config.viewers.master.modify();
         const popup = await this.popupService.open(com, {
             title: title ?? `Modify ${entityRef.formats.individual}`,
@@ -367,10 +377,10 @@ class AXPEntityModifySectionPopupAction extends AXPWorkflowAction {
                 entity: entityRef,
             },
         });
-        context.setOutput('popupResult', false);
+        context.setOutput('result', false);
         if (popup.data?.result == true) {
-            context.setOutput('popupResult', true);
-            context.setVariable('updatedData', cloneDeep(popup.data.context));
+            context.setOutput('result', true);
+            context.setVariable('data', cloneDeep(popup.data.context));
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifySectionPopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -380,15 +390,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Injectable
         }] });
 class AXPEntityModifyConfirmedAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.entityRegistery = inject(AXPEntityDefinitionRegistryService);
-    }
     async execute(context) {
-        const payload = context.getVariable('payload');
-        const updatedData = context.getVariable('updatedData');
-        const entity = await this.entityRegistery.resolve(payload.module, payload.entity);
-        this.dispatch(AXPEntityModifyEvent({ module: entity.module, entity: entity.name, updateValues: updatedData }));
+        const updatedData = context.getVariable('data');
+        this.dispatch(AXPEntityModifyEvent({ entity: context.getVariable('entity'), values: updatedData }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyConfirmedAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModifyConfirmedAction }); }
@@ -404,7 +408,7 @@ const AXPModifyEntitySectionWorkflow = {
             action: 'AXPEntityModifySectionPopupAction',
             nextSteps: [
                 {
-                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("popupResult") == true' }],
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
                     nextStepId: 'successToast',
                 },
             ],
@@ -427,12 +431,6 @@ const AXPModifyEntitySectionWorkflow = {
         modifyConfirmed: {
             id: 'modifyConfirmed',
             action: 'AXPEntityModifyConfirmedAction',
-            nextSteps: [
-                {
-                    conditions: [],
-                    nextStepId: '',
-                },
-            ],
         },
     },
 };
@@ -500,12 +498,13 @@ class AXPEntityDetailListViewModel {
         //****************** Columns ******************//
         this.columns = computed(() => {
             if (this.detailEntity()) {
-                const columns = this.detailEntityConfig.columns ?? [];
-                const props = this.detailEntity()?.properties.filter(c => c.schema.hidden != true &&
-                    c.options?.table?.enabled &&
-                    (columns?.length == 0 || columns?.includes(c.name))) ?? [];
-                return props.map(e => {
-                    return new AXPEntityListViewColumnViewModel(e);
+                const detailColumns = this.detailEntityConfig.columns ?? [];
+                const columns = this.detailEntity()?.columns?.map(c => c.name) ?? [];
+                const props = this.detailEntity()?.properties.filter(p => p.schema.hidden != true &&
+                    (detailColumns?.length == 0 || detailColumns?.includes(p.name))) ?? [];
+                const displayColumns = props.filter(p => columns.some(c => c == p.name));
+                return displayColumns.map(p => {
+                    return new AXPEntityListViewColumnViewModel(p, this.detailEntity()?.columns?.find(c => c.name == p.name));
                 });
             }
             return [];
@@ -550,7 +549,7 @@ class AXPEntityDetailListViewModel {
             return {
                 field: c.name,
                 operator: c.operator,
-                value: this.parent.data.id
+                value: this.parent.data?.id
             };
         }) ?? [];
         const parentFilterWrapper = {
@@ -586,37 +585,36 @@ class AXPEntityDetailListViewModel {
 }
 
 class AXPEntityMasterSingleViewGroupViewModel {
-    constructor(entity, group) {
+    constructor(entity, section) {
         this.entity = entity;
-        this.group = group;
+        this.section = section;
+        this.group = this.entity.groups?.find(c => c.id == this.section.id);
         this.name = signal(this.group.id);
         this.isLoading = signal(false);
         this.title = computed(() => {
-            if (this.group.title)
-                return this.group.title;
-            return this.group.id;
+            return this.group.title ?? this.group.id;
         });
         this.description = computed(() => {
-            if (this.group.description)
-                return this.group.description;
-            return null;
+            return this.group.description;
         });
         this.layout = computed(() => {
-            const source = cloneDeep(this.group.layout ?? {});
+            const source = cloneDeep(this.section.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
         this.props = computed(() => {
-            const props = this.entity.properties.filter(c => c.groupId == this.group.id && c.schema.hidden != true && c.options?.view?.enabled != false);
-            return props.map(e => {
-                return new AXPEntityMasterSingleElementViewModel(this.entity, this, e);
-            });
+            const { properties, interfaces } = this.entity;
+            const groupProperties = properties
+                .filter(({ groupId, schema }) => groupId === this.group.id && !schema.hidden)
+                .map(({ name }) => name);
+            const viewProperties = interfaces?.master?.single?.properties?.filter(({ name }) => groupProperties.includes(name)) ?? [];
+            return viewProperties.map(prop => new AXPEntityMasterSingleElementViewModel(this.entity, this, prop));
         });
         this.editableProps = computed(() => {
-            const props = this.entity.properties.filter(c => c.groupId == this.group.id && c.schema.hidden != true && c.options?.update?.enabled != false);
-            return props.map(e => {
-                return new AXPEntityMasterSingleElementViewModel(this.entity, this, e);
-            });
+            const { properties, interfaces } = this.entity;
+            const editablePropertyNames = interfaces?.master?.update?.properties?.map(({ name }) => name) ?? [];
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id && !schema.hidden && editablePropertyNames.includes(name));
+            return filteredProperties.map(prop => new AXPEntityMasterSingleElementViewModel(this.entity, this, prop));
         });
         this.editable = computed(() => {
             return this.editableProps().length > 0;
@@ -624,16 +622,17 @@ class AXPEntityMasterSingleViewGroupViewModel {
     }
 }
 class AXPEntityMasterSingleElementViewModel {
-    constructor(entity, section, property) {
+    constructor(entity, section, propertyView) {
         this.entity = entity;
         this.section = section;
-        this.property = property;
+        this.propertyView = propertyView;
+        this.property = this.entity.properties.find(c => c.name == this.propertyView.name);
         this.name = signal(this.property.name);
         this.title = signal(this.property.title);
         this.description = signal(this.property.description);
-        this.order = signal(this.property.options?.view?.layout?.order ?? 0);
         this.layout = computed(() => {
-            const source = cloneDeep(this.property.options?.view?.layout ?? {});
+            const viewProp = this.entity.interfaces?.master?.single?.properties?.find(c => c.name == this.property.name);
+            const source = cloneDeep(viewProp?.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
@@ -646,7 +645,9 @@ class AXPEntityMasterSingleElementViewModel {
                 path: this.name(),
                 children: widget.children,
                 formula: widget.formula,
-                options: merge(schema.interface?.options, this.property.options?.create?.widget, { validationRules: this.property.validations })
+                options: merge(schema.interface?.options, 
+                //this.property.options?.create?.widget,
+                { validationRules: this.property.validations })
             };
         });
     }
@@ -661,6 +662,8 @@ class AXPEntityMasterSingleViewModel {
         this.session = this.injector.get(AXPSessionService);
         this.formatService = this.injector.get(AXFormatService);
         this.workflow = this.injector.get(AXPWorkflowService);
+        this.destroyed = new Subject();
+        this.events$ = new Subject();
         this.context = signal(cloneDeep(this.entityData));
         this.actions = computed(() => {
             return this.entityDef.interfaces?.master?.single?.actions?.map((tr) => new AXPEntityCommandTriggerViewModel(this.entityDef, tr)) ?? [];
@@ -672,12 +675,11 @@ class AXPEntityMasterSingleViewModel {
             return this.actions().filter(c => c.priority == 'secondary');
         });
         this.sections = computed(() => {
-            const props = this.entityDef.properties.filter(c => c.groupId && c.schema.hidden != true && c.options?.view?.enabled != false);
-            const groups = this.entityDef.groups?.filter(g => props.some(p => p.groupId == g.id));
-            const result = groups?.map((section) => {
-                return new AXPEntityMasterSingleViewGroupViewModel(this.entityDef, section);
-            });
-            return (result ?? []);
+            const { interfaces, properties } = this.entityDef;
+            const viewProps = interfaces?.master?.single?.properties?.map(({ name }) => name) ?? [];
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && viewProps.includes(name));
+            const groups = interfaces?.master?.single?.sections?.filter(({ id }) => filteredProperties.some(({ groupId }) => groupId === id)) ?? [];
+            return groups.map(section => new AXPEntityMasterSingleViewGroupViewModel(this.entityDef, section));
         });
         //****************** Title ******************//
         this.title = computed(() => {
@@ -711,46 +713,42 @@ class AXPEntityMasterSingleViewModel {
         this.relatedEntities = computed(() => {
             return this.entityDef.relatedEntities?.map(re => new AXPEntityDetailListViewModel(this.injector, re, { entity: this.entityDef, data: this.entityData })) ?? [];
         });
-        this.workflow.events$.pipe(ofType(AXPEntityDeletedEvent)).subscribe((event) => {
-            // if (
-            //   event.payload.entity == this.loader.entity.name &&
-            //   event.payload.module == this.loader.entity.module &&
-            //   event.payload.id.includes(this.loader.data.id)
-            // ) {
-            //   this.workflow.execute('show-list-view', {
-            //     payload: {
-            //       module: this.loader.entity.module,
-            //       entity: this.loader.entity.name,
-            //     },
-            //   });
-            //}
-        });
-        this.workflow.events$.pipe(ofType(AXPEntityModifyEvent)).subscribe(async (event) => {
-            if (event.payload.entity == this.entityDef.name &&
-                event.payload.module == this.entityDef.module &&
-                event.payload.updateValues.id === this.context().id) {
-                this.context.set(event.payload.updateValues);
+        this.workflow.events$
+            .pipe(ofType(AXPEntityDeletedEvent))
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((event) => {
+            if (event.payload.entity == this.entityDef.source &&
+                event.payload.ids.includes(this.context().id)) {
+                this.workflow.execute('show-list-view', {
+                    entity: this.entityDef.source
+                });
+            }
+        });
+        this.workflow.events$
+            .pipe(ofType(AXPEntityModifyEvent))
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(async (event) => {
+            if (event.payload.entity == this.entityDef.source &&
+                event.payload.values.id === this.context().id) {
+                this.context.set(event.payload.values);
             }
         });
     }
     async executeCommand(commandName, data = null) {
-        // debugger
         //TODO: syntact for workflow
         switch (commandName) {
             case 'delete-entity':
                 this.workflow.execute('delete-entity', {
-                    module: this.entityDef.module,
-                    entity: this.entityDef.name,
-                    ids: [this.context().id],
+                    entity: this.entityDef.source,
+                    data: [this.context()],
                 });
                 break;
             case 'modify-entity-section': {
                 this.workflow.execute('modify-entity-section', {
-                    payload: {
+                    entity: this.entityDef.source,
+                    data: {
+                        id: this.context().id,
                         properties: data.editableProps().map(m => m.name()),
-                        id: this.entityData.id,
-                        module: this.entityDef.module,
-                        entity: this.entityDef.name,
                     },
                 });
                 break;
@@ -759,15 +757,18 @@ class AXPEntityMasterSingleViewModel {
                 {
                     const action = this.actions().find(c => c.name == commandName);
                     this.workflow.execute(commandName, {
-                        payload: {
-                            module: this.entityDef.module,
-                            entity: this.entityDef.name,
-                            data: action?.scope == AXPEntityCommandScope.Individual ? data : null
-                        }
+                        entity: this.entityDef.source,
+                        data: action?.scope == AXPEntityCommandScope.Individual ? this.context() : null
                     });
                 }
         }
     }
+    //
+    //
+    destroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
 }
 class AXPEntityDetailViewModelFactory {
     constructor() {
@@ -795,7 +796,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 const AXPEntityDetailViewModelResolver = (route, state, service = inject(AXPEntityDetailViewModelFactory)) => {
-    const appName = route.parent?.paramMap.get('app');
     const moduleName = route.parent?.paramMap.get('module');
     const entityName = route.paramMap.get('entity');
     const id = route.paramMap.get('id');
@@ -804,52 +804,54 @@ const AXPEntityDetailViewModelResolver = (route, state, service = inject(AXPEnti
 };
 
 class AXPEntityCreateViewSectionViewModel {
-    constructor(entity, group) {
+    constructor(entity, section) {
         this.entity = entity;
-        this.group = group;
+        this.section = section;
+        this.group = this.entity.groups?.find(c => c.id == this.section.id);
         this.name = signal(this.group.id);
         this.title = computed(() => {
-            if (this.group.title)
-                return this.group.title;
-            return this.group.id;
+            return this.group.title ?? this.group.id;
         });
         this.description = computed(() => {
-            if (this.group.description)
-                return this.group.description;
-            return null;
+            return this.group.description;
+            ;
         });
         this.layout = computed(() => {
-            const source = cloneDeep(this.group.layout ?? {});
+            const source = cloneDeep(this.section.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
         this.elements = computed(() => {
-            const props = this.entity.properties.filter(c => c.groupId == this.group.id &&
-                c.schema.hidden != true &&
-                c.options?.create?.enabled != false);
-            return props.map(e => {
-                return new AXPEntityCreateViewElementViewModel(this.entity, this, e);
+            const { interfaces, properties } = this.entity;
+            const createProps = interfaces?.master?.create?.properties ?? [];
+            const createPropNames = new Set(createProps.map(({ name }) => name));
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id &&
+                !schema.hidden &&
+                createPropNames.has(name));
+            return filteredProperties.map(property => {
+                const createProp = createProps.find(({ name }) => name === property.name);
+                return new AXPEntityCreateViewElementViewModel(this.entity, this, property, createProp);
             });
         });
     }
 }
 class AXPEntityCreateViewElementViewModel {
-    constructor(entity, section, property) {
+    constructor(entity, section, property, createProp) {
         this.entity = entity;
         this.section = section;
         this.property = property;
+        this.createProp = createProp;
         this.name = signal(this.property.name);
         this.title = signal(this.property.title);
         this.description = signal(this.property.description);
         this.editable = computed(() => {
             return !(this.property.schema.readonly ?? false);
         });
-        this.order = signal(this.property.options?.view?.layout?.order ?? 0);
         this.isRequired = computed(() => {
             return this.property.validations?.some(c => c.rule == 'required') || false;
         });
         this.layout = computed(() => {
-            const source = cloneDeep(this.property.options?.create?.layout ?? this.property.options?.view?.layout ?? {});
+            const source = cloneDeep(this.createProp.layout ?? {});
             set(source, "positions.default.colSpan", 12);
             return source;
         });
@@ -863,28 +865,43 @@ class AXPEntityCreateViewElementViewModel {
                 children: widget.children,
                 formula: widget.formula,
                 triggers: widget.triggers,
-                options: merge(schema.interface?.options, this.property.options?.create?.widget, { validationRules: this.property.validations })
+                options: merge(schema.interface?.options, 
+                //this.property.options?.create?.widget,
+                { validationRules: this.property.validations })
             };
         });
     }
 }
 class AXPEntityMasterCreateViewModel {
-    constructor(injector, config, initialData = null) {
+    constructor(injector, config, initialData = {}) {
         this.injector = injector;
         this.config = config;
         this.initialData = initialData;
         this.entityDef = cloneDeep(this.config);
         this.workflow = this.injector.get(AXPWorkflowService);
-        this.context = signal({});
+        this.context = signal(this.initialData ?? {});
         this.isInProgress = signal(false);
         this.sections = computed(() => {
-            const props = this.entityDef.properties.filter(p => p.groupId && p.schema.hidden != true && p.options?.create?.enabled == true);
-            const groups = this.entityDef.groups?.filter(g => props.some(p => p.groupId == g.id));
-            const result = groups?.map((section) => {
-                return new AXPEntityCreateViewSectionViewModel(this.entityDef, section);
-            });
-            return (result ?? []);
+            const { interfaces, properties } = this.entityDef;
+            const createProps = interfaces?.master?.create?.properties?.map(({ name }) => name) ?? [];
+            const visibleProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && createProps.includes(name));
+            const sections = interfaces?.master?.create?.sections?.filter(({ id }) => visibleProperties.some(({ groupId }) => groupId === id)) ?? [];
+            return sections.map(section => new AXPEntityCreateViewSectionViewModel(this.entityDef, section));
+        });
+        if (!initialData)
+            initialData = {};
+        this.config.properties
+            .filter(c => c.schema.defaultValue != null)
+            .forEach(p => {
+            if (typeof p.schema.defaultValue === 'function') {
+                const func = p.schema.defaultValue;
+                set(initialData, p.name, func(initialData));
+            }
+            else {
+                set(initialData, p.name, p.schema.defaultValue);
+            }
         });
+        this.context.set(initialData);
     }
     async save() {
         try {
@@ -946,6 +963,8 @@ class AXPEntityMasterListViewModel {
         this.formatService = this.injector.get(AXFormatService);
         this.session = this.injector.get(AXPSessionService);
         this.workflow = this.injector.get(AXPWorkflowService);
+        this.destroyed = new Subject();
+        this.events$ = new Subject();
         this.dataSource = new AXDataSource({
             byKey: (key) => {
                 const func = this.entityDef.queries.byKey.execute;
@@ -1020,9 +1039,14 @@ class AXPEntityMasterListViewModel {
         };
         //****************** Columns ******************//
         this.allAvailableColumns = () => {
-            const props = cloneDeep(this.entityDef.properties.filter(c => c.schema.hidden != true && c.options?.table?.enabled));
-            return props.map(e => {
-                return new AXPEntityListViewColumnViewModel(e);
+            const { columns = [], properties } = this.entityDef;
+            const visibleProperties = properties.filter(({ schema }) => !schema?.hidden);
+            const visiblePropNames = new Set(visibleProperties.map(({ name }) => name));
+            return columns
+                .filter(({ name }) => visiblePropNames.has(name))
+                .map(column => {
+                const property = visibleProperties.find(({ name }) => name === column.name);
+                return new AXPEntityListViewColumnViewModel(property, column);
             });
         };
         this.visibleColumnCount = () => {
@@ -1060,6 +1084,16 @@ class AXPEntityMasterListViewModel {
             });
         });
         this.view = signal(this.views()[0]);
+        this.workflow.events$
+            .pipe(ofType(AXPEntityDeletedEvent))
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((event) => {
+            debugger;
+            if (event.payload.entity == this.entityDef.source) {
+                this.selectedItems.set([]);
+                this.events$.next({ action: "refresh" });
+            }
+        });
     }
     clearSelection() {
         this.selectedItems.set([]);
@@ -1085,9 +1119,14 @@ class AXPEntityMasterListViewModel {
         //
         this.dataSource.sort(...this.sortedFields().map(s => ({ dir: s.dir, field: s.name })));
         //
+        this.advanceFilters.filters = this.view().conditions.map(f => ({
+            field: f.name,
+            operator: f.operator,
+            value: f.value
+        }));
+        //
         const inline = this.inlineFilters.filters?.length ?? 0;
         const advance = this.advanceFilters.filters?.length ?? 0;
-        debugger;
         if (inline && !advance) {
             this.dataSource.filter(this.inlineFilters);
         }
@@ -1115,8 +1154,10 @@ class AXPEntityMasterListViewModel {
         const cols = this.view().columns;
         const cloned = this.allAvailableColumns()
             .map(c => {
-            const col = new AXPEntityListViewColumnViewModel(this.entityDef.properties.find(p => p.name == c.name));
-            col.visible = !cols.some(c => c == col.name);
+            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);
+            col.visible = !cols.some(c => c == col.name) && col.visible != false;
             return col;
         });
         this.columns.set(cloned);
@@ -1155,16 +1196,17 @@ class AXPEntityMasterListViewModel {
     }
     //******************  Commands ******************//
     async executeCommand(commandName, data = null) {
-        // debugger
         const action = this.actions().find(c => c.name == commandName);
-        this.workflow.execute(commandName, {
-            payload: {
-                module: this.entityDef.module,
-                entity: this.entityDef.name,
-                data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems : data
-            }
+        await this.workflow.execute(commandName, {
+            entity: this.entityDef.source,
+            data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data
         });
     }
+    //
+    destroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
 }
 class AXPEntityListViewModelFactory {
     constructor() {
@@ -1204,21 +1246,22 @@ class AXPEntityCreatePopupAction extends AXPWorkflowAction {
         this.config = inject(AXP_ENTITY_CONFIG_TOKEN);
     }
     async execute(context) {
-        const { module, entity: entity } = context.getVariable('payload');
+        const [module, entity] = context.getVariable('entity').split(".");
+        const data = context.getVariable('data');
         const entityRef = await this.entityRegistery.resolve(module, entity);
         const com = await this.config.viewers.master.create();
         const result = await this.popupService.open(com, {
             title: `Create New ${entityRef.formats.individual}`,
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'md',
             data: {
-                vm: await this.factory.create(module, entity),
+                vm: await this.factory.create(module, entity, data),
                 entity,
             },
         });
+        context.setOutput('result', false);
         if (result.data?.save) {
-            context.setOutput('popupResult', true);
-            context.setVariable('redirect', result.data.redirect);
-            context.setVariable('id', result.data.recordId);
+            context.setOutput('result', true);
+            context.setVariable('data', result.data.item);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityCreatePopupAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1229,25 +1272,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }] });
 class AXPEntityCreateSubmittedAction extends AXPWorkflowAction {
     async execute(context) {
-        const { module, entity: entity } = context.getVariable('payload');
-        this.dispatch(AXPEntityCreateEvent({ entity, module }));
+        this.dispatch(AXPEntityCreateEvent({ entity: context.getVariable('entity') }));
     }
 }
 const AXPCreateEntityWorkflow = {
-    startStepId: 'createPopup',
+    startStepId: 'show-popup',
     steps: {
-        createPopup: {
-            id: 'createPopup',
+        "show-popup": {
             action: 'AXPEntityCreatePopupAction',
             nextSteps: [
                 {
-                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("popupResult") == true' }],
-                    nextStepId: 'successToast',
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
+                    nextStepId: 'show-toast',
                 },
             ],
         },
-        successToast: {
-            id: 'successToast',
+        "show-toast": {
             action: 'AXPToastAction',
             input: {
                 color: 'success',
@@ -1257,22 +1297,20 @@ const AXPCreateEntityWorkflow = {
             nextSteps: [
                 {
                     conditions: [],
-                    nextStepId: 'createSubmitted',
+                    nextStepId: 'dispatch-event',
                 },
             ],
         },
-        createSubmitted: {
-            id: 'createSubmitted',
+        "dispatch-event": {
             action: 'AXPEntityCreateSubmittedAction',
             nextSteps: [
                 {
                     conditions: [{ type: 'SINGLE', expression: 'context.getVariable("redirect") == true' }],
-                    nextStepId: 'showDetailView',
+                    nextStepId: 'show-entity',
                 },
             ],
         },
-        showDetailView: {
-            id: 'showDetailView',
+        "show-entity": {
             action: 'AXPShowDetailViewAction',
         },
     },
@@ -1285,8 +1323,8 @@ class AXPShowDetailViewAction extends AXPWorkflowAction {
         this.sessionService = inject(AXPSessionService);
     }
     async execute(context) {
-        const { module, entity, data } = context.getVariable('payload');
-        const id = data.id;
+        const [module, entity] = context.getVariable('entity').split(".");
+        const { id } = context.getVariable('data');
         const newPayload = {
             commands: `/${this.sessionService.application?.name}/m/${module}/e/${entity}/${id}/view`,
         };
@@ -1330,9 +1368,23 @@ var lookupWidgetView_component = /*#__PURE__*/Object.freeze({
 });
 
 class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
+    // protected override ngOnInit(): void {
+    //   super.ngOnInit();
+    // }
+    ngAfterViewInit() {
+        if (this.searchTerm) {
+            this.vm.applyInlineFilter(this.searchTerm);
+        }
+        else {
+            this.vm.applyFilterAndSort();
+        }
+    }
     handleRowDbClick(e) {
         this.close({ items: [e.data] });
     }
+    handleRowClick(e) {
+        this.focusedRow = e.data;
+    }
     async handleSelectedRowsChange(rows) {
         //this.vm.selectedItems.set(rows);
     }
@@ -1341,19 +1393,31 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
             this.vm.applyInlineFilter(e.value);
         }
     }
+    async handleCreateNewClick() {
+        this.close();
+        await this.vm.create();
+    }
+    handleCloseClick() {
+        this.close();
+    }
+    handleSelectClick() {
+        if (this.focusedRow) {
+            this.close({ items: [this.focusedRow] });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLookupWidgetSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPLookupWidgetSelectorComponent, isStandalone: true, selector: "ng-component", 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]="'Search on '+vm.inlineFiltersPlaceholders().join(', ')"
-          (onValueChanged)="handleChangeSearchValue($event)"><ax-clear-button></ax-clear-button></ax-search-box>
+        <ax-search-box [placeholder]="'Search on '+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]="'auto'"
-        [loading]="{ enabled: true, animation: true }" [dataSource]="vm.dataSource"
-        (selectedRowsChange)="handleSelectedRowsChange($event)" (onRowDbClick)="handleRowDbClick($event)">
+      <ax-data-table #grid [showFooter]="false" class="ax-h-[50vh]" [paging]="true" [fetchDataMode]="'manual'"
+        [loading]="{ enabled: true, animation: true }" [dataSource]="vm.dataSource" 
+        (selectedRowsChange)="handleSelectedRowsChange($event)" (onRowClick)="handleRowClick($event)" (onRowDbClick)="handleRowDbClick($event)">
         <!-- <ax-select-column fixed="start" [width]="'50px'"></ax-select-column> -->
         @for(col of vm.columns();track col.name) {
         @if(col.visible)
@@ -1363,19 +1427,21 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
         }
       </ax-data-table>
     </div>
-     <!-- <ax-footer>
+     <ax-footer>
      <ax-suffix>
-      <ax-button look="solid" color="ghost" text="Cancel" (onClick)="handleCloseClick()"> </ax-button>
-      <ax-dropdown-button [disabled]="vm.isInProgress()" color="primary" text="Save" look="solid"
-        (onClick)="handleSaveClick(form)">
-        <ax-loading *ngIf="vm.isInProgress()"></ax-loading>
-        <ax-button-item-list>
-          <ax-button-item text="Save & Create New" (onClick)="handleSaveAndNewClick(form)"> </ax-button-item>
-        </ax-button-item-list>
-      </ax-dropdown-button>
+      <ax-button look="solid" color="ghost" text="Close" (onClick)="handleCloseClick()"> </ax-button>
+      <ax-button look="solid" color="primary" text="Select" (onClick)="handleSelectClick()" [disabled]="focusedRow==null"> </ax-button>
+      @if(!vm.canCreate())
+      {
+        <ax-button look="solid" color="primary" text="Create New" (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: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i4$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "node", "footerTemplate", "cellTemplate", "headerTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+     </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { 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-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i6.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "node", "footerTemplate", "cellTemplate", "headerTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLookupWidgetSelectorComponent, decorators: [{
             type: Component,
@@ -1385,13 +1451,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
       @if(vm.hasInlineFilters())
       {
       <div class="ax-w-full" >
-        <ax-search-box [placeholder]="'Search on '+vm.inlineFiltersPlaceholders().join(', ')"
-          (onValueChanged)="handleChangeSearchValue($event)"><ax-clear-button></ax-clear-button></ax-search-box>
+        <ax-search-box [placeholder]="'Search on '+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]="'auto'"
-        [loading]="{ enabled: true, animation: true }" [dataSource]="vm.dataSource"
-        (selectedRowsChange)="handleSelectedRowsChange($event)" (onRowDbClick)="handleRowDbClick($event)">
+      <ax-data-table #grid [showFooter]="false" class="ax-h-[50vh]" [paging]="true" [fetchDataMode]="'manual'"
+        [loading]="{ enabled: true, animation: true }" [dataSource]="vm.dataSource" 
+        (selectedRowsChange)="handleSelectedRowsChange($event)" (onRowClick)="handleRowClick($event)" (onRowDbClick)="handleRowDbClick($event)">
         <!-- <ax-select-column fixed="start" [width]="'50px'"></ax-select-column> -->
         @for(col of vm.columns();track col.name) {
         @if(col.visible)
@@ -1401,29 +1467,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }
       </ax-data-table>
     </div>
-     <!-- <ax-footer>
+     <ax-footer>
      <ax-suffix>
-      <ax-button look="solid" color="ghost" text="Cancel" (onClick)="handleCloseClick()"> </ax-button>
-      <ax-dropdown-button [disabled]="vm.isInProgress()" color="primary" text="Save" look="solid"
-        (onClick)="handleSaveClick(form)">
-        <ax-loading *ngIf="vm.isInProgress()"></ax-loading>
-        <ax-button-item-list>
-          <ax-button-item text="Save & Create New" (onClick)="handleSaveAndNewClick(form)"> </ax-button-item>
-        </ax-button-item-list>
-      </ax-dropdown-button>
+      <ax-button look="solid" color="ghost" text="Close" (onClick)="handleCloseClick()"> </ax-button>
+      <ax-button look="solid" color="primary" text="Select" (onClick)="handleSelectClick()" [disabled]="focusedRow==null"> </ax-button>
+      @if(!vm.canCreate())
+      {
+        <ax-button look="solid" color="primary" text="Create New" (onClick)="handleCreateNewClick()"> 
+          <ax-prefix>
+              <ax-icon icon="fa-solid fa-add"></ax-icon>
+          </ax-prefix>
+        </ax-button>
+      }
     </ax-suffix>
-     </ax-footer> -->
+     </ax-footer>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXDecoratorModule, AXDropdownButtonModule, AXDataTableModule, AXSearchBoxModule, AXPLayoutBuilderModule],
+                    imports: [
+                        CommonModule,
+                        AXCommonModule,
+                        AXButtonModule,
+                        AXFormModule,
+                        AXDecoratorModule,
+                        AXDropdownButtonModule,
+                        AXDataTableModule,
+                        AXSearchBoxModule,
+                        AXPLayoutBuilderModule
+                    ],
                     inputs: []
                 }]
         }] });
 
 class AXPLookupWidgetSelectorViewModel {
-    constructor(entityDef) {
+    constructor(injector, entityDef, parentFilters = null) {
+        this.injector = injector;
         this.entityDef = entityDef;
+        this.parentFilters = parentFilters;
+        this.workflow = this.injector.get(AXPWorkflowService);
         this.dataSource = new AXDataSource({
             byKey: (key) => {
                 const func = this.entityDef.queries.byKey.execute;
@@ -1436,6 +1517,9 @@ class AXPLookupWidgetSelectorViewModel {
             pageSize: 10,
             key: 'id'
         });
+        this.canCreate = computed(() => {
+            return this.entityDef.commands?.create?.execute != null;
+        });
         this.inlineFiltersPlaceholders = computed(() => {
             return this.entityDef.properties.filter(p => p.options?.filter?.inline?.enabled).map(c => c.title);
         });
@@ -1443,9 +1527,12 @@ class AXPLookupWidgetSelectorViewModel {
             return this.inlineFiltersPlaceholders().length > 0;
         });
         this.columns = () => {
-            const props = this.entityDef.properties.filter(c => c.schema.hidden != true && c.options?.table?.enabled);
-            return props.map(e => {
-                return new AXPEntityListViewColumnViewModel(e);
+            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 => columns.some(c => c == p.name));
+            return displayColumns.map(p => {
+                return new AXPEntityListViewColumnViewModel(p, listColumns?.find(c => c.name == p.name));
             });
         };
         this.inlineFilters = {
@@ -1461,7 +1548,12 @@ class AXPLookupWidgetSelectorViewModel {
             filters: []
         };
     }
-    applyInlineFilter(value) {
+    async create() {
+        await this.workflow.execute('create-entity', {
+            entity: this.entityDef.source,
+        });
+    }
+    applyInlineFilter(value, refresh = true) {
         const props = this.entityDef.properties.filter(c => c.options?.filter?.inline?.enabled);
         this.inlineFilters.filters = [];
         if (value) {
@@ -1475,44 +1567,58 @@ class AXPLookupWidgetSelectorViewModel {
                 });
             });
         }
-        this.applyFilterAndSort();
+        if (refresh)
+            this.applyFilterAndSort();
     }
     applyFilterAndSort() {
         this.dataSource.clearFilter();
         //
         //this.dataSource.sort(...this.sortedFields().map(s => ({ dir: s.dir, field: s.name } as AXDataSourceSortOption)));
         //
-        const inline = this.inlineFilters.filters?.length ?? 0;
-        const advance = this.advanceFilters.filters?.length ?? 0;
-        if (inline && !advance) {
-            this.dataSource.filter(this.inlineFilters);
+        // Check if inlineFilters or parentFilters have any filters
+        const hasInlineFilters = (this.inlineFilters?.filters?.length ?? 0) > 0;
+        const hasParentFilters = (this.parentFilters?.filters?.length ?? 0) > 0;
+        // Construct the filters array based on the presence of filters
+        const filters = [];
+        if (hasInlineFilters) {
+            filters.push(this.inlineFilters);
         }
-        else if (!inline && advance) {
-            this.dataSource.filter(this.advanceFilters);
+        if (hasParentFilters && this.parentFilters) {
+            filters.push(this.parentFilters);
         }
-        else if (inline && advance) {
-            this.dataSource.filter({
-                field: null,
-                logic: 'and',
-                operator: null,
-                filters: [this.inlineFilters, this.advanceFilters]
-            });
-        }
-        //
+        // 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 }) ?? [];
+    }
 }
 
 class AXPLookupWidgetEditComponent extends AXPWidgetBase {
     constructor() {
         super(...arguments);
-        this.dataSource = [];
         this.textField = "title";
+        this.validationRules = [];
+        this.injector = inject(Injector);
         this.loader = inject(AXP_ENTITY_DEFINITION_LOADER);
         this.formatService = inject(AXFormatService);
         this.popupService = inject(AXPopupService);
         this.builderService = inject(AXPLayoutBuilderService);
+        this.destroyRef = inject(DestroyRef);
         this.displayText = signal("");
+        this.selectedItem = signal(null);
+        this.searchTerm = signal(null);
+        this.isLoading = signal(false);
+        this.isOpen = signal(false);
         this.vm = signal(null);
         this.placeholder = computed(() => {
             return 'Search on ' + this.vm()?.inlineFiltersPlaceholders().join(', ');
@@ -1524,76 +1630,160 @@ class AXPLookupWidgetEditComponent extends AXPWidgetBase {
         const [module, entity] = this.entity.split('.');
         this.entityDef = await this.loader.get(module, entity);
         //
-        this.vm.set(new AXPLookupWidgetSelectorViewModel(this.entityDef));
+        this.vm.set(new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef, this.filter));
         //
         this.textField = this.entityDef?.formats.lookup ?? this.entityDef?.properties.find(c => c.name != 'id')?.name ?? "title";
         const value = this.getValue();
         if (typeof value == 'object')
             this.displayText.set(this.formatService.format(this.textField, "string", value));
         else if (value != null) {
-            const byKey = this.entityDef?.queries.byKey?.execute;
-            const item = await byKey(this.getValue());
-            this.setItems(item);
+            await this.findByValue();
         }
+        //
+        this.builderService
+            .onChanged
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(async (c) => {
+            if (c.path == this.path) {
+                if (this.getValue())
+                    await this.findByValue();
+            }
+        });
+    }
+    async findByValue() {
+        const byKey = this.entityDef?.queries.byKey?.execute;
+        const item = await byKey(this.getValue());
+        this.setItems(item);
     }
     handleOnClick(e) {
+        this.showSelector();
+    }
+    showSelector() {
+        this.isOpen.set(true);
         this.popupService.open(AXPLookupWidgetSelectorComponent, {
             title: `${this.entityDef?.formats.plural} Lookup`,
-            size: 'md',
+            size: (this.vm()?.columns().length ?? 0) > 3 ? 'lg' : 'md',
             data: {
-                vm: new AXPLookupWidgetSelectorViewModel(this.entityDef)
+                vm: new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef, this.filter),
+                searchTerm: this.searchTerm() == this.displayText() ? null : this.searchTerm()
             }
         }).then((e) => {
+            this.isOpen.set(false);
+            this.textbox.focus();
             if (e.data?.items) {
                 this.setItems(e.data?.items[0]);
             }
         });
     }
+    handleValueChange(e) {
+        this.searchTerm.set(e.value);
+    }
+    handleOnBlur(e) {
+        const com = e.component;
+        const input = com['input'].nativeElement;
+        setTimeout(() => {
+            if (this.selectedItem()) {
+                input.value = this.displayText();
+            }
+            else {
+                if (!this.isOpen()) {
+                    input.value = '';
+                    this.searchTerm.set(null);
+                }
+            }
+        }, 100);
+    }
+    async handleKeyDown(e) {
+        const keyEvent = e.nativeEvent;
+        const value = this.searchTerm()?.trim();
+        if ((keyEvent.code == "Enter" || keyEvent.code == "NumpadEnter") && value) {
+            this.isLoading.set(true);
+            const result = await this.vm()?.find(value);
+            if (result?.total == 1) {
+                this.setItems(result.items[0]);
+            }
+            else {
+                this.showSelector();
+            }
+            this.isLoading.set(false);
+        }
+    }
     setItems(item) {
+        this.searchTerm.set(null);
+        this.displayText.set('');
+        this.selectedItem.set(item);
         const text = this.formatService.format(this.textField, "string", item);
         this.displayText.set(text);
         this.setValue(item.id);
         if (this.expose) {
-            this.builderService.setValue(this.expose, item);
+            if (typeof this.expose == 'string') {
+                this.builderService.setValue(this.expose, item);
+            }
+            else if (Array.isArray(this.expose)) {
+                this.expose.forEach(i => {
+                    if (typeof i == "string") {
+                        this.builderService.setValue(i, item);
+                    }
+                    else {
+                        const key = get(item, i.source);
+                        this.builderService.setValue(i.target, key);
+                    }
+                });
+            }
         }
     }
+    handleClearClick() {
+        this.clear();
+        this.setValue(null);
+    }
+    clear() {
+        this.searchTerm.set('');
+        this.displayText.set('');
+        this.selectedItem.set(null);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLookupWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "ng-component", inputs: { entity: "entity", conditions: "conditions", expose: "expose" }, usesInheritance: true, ngImport: i0, template: `
-    <!-- <ax-select-box 
-      [dataSource]="dataSource" 
-      [valueField]="'id'" 
-      [textField]="textField"   
-      [ngModel]="getValue()"
-      (onValueChanged)="handleValueChange($event);"
-      >
-    </ax-select-box> -->
-    <ax-text-box [ngModel]="displayText()"  readonly="true" [placeholder]="placeholder()">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "ng-component", inputs: { entity: "entity", conditions: "conditions", expose: "expose" }, viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-text-box [ngModel]="displayText()" (onValueChanged)="handleValueChange($event)"   [placeholder]="placeholder()" (onKeyUp)="handleKeyDown($event)" (onBlur)="handleOnBlur($event)">
+      @for (validation of validationRules; track $index) {
+          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
+      <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+
       <ax-suffix>
-          <ax-button color="ghost" look="twotone"  (onClick)="handleOnClick($event)">
-            <ax-icon icon="far fa-search">
-            </ax-icon>
+          <ax-button color="ghost" look="twotone"  [disabled]="isLoading()" (onClick)="handleOnClick($event)">
+            @if(isLoading())
+            {
+              <ax-loading></ax-loading>              
+            }
+            @else {
+              <ax-icon icon="far fa-search">
+              </ax-icon>
+            }
           </ax-button>
       </ax-suffix>
     </ax-text-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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: 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: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <!-- <ax-select-box 
-      [dataSource]="dataSource" 
-      [valueField]="'id'" 
-      [textField]="textField"   
-      [ngModel]="getValue()"
-      (onValueChanged)="handleValueChange($event);"
-      >
-    </ax-select-box> -->
-    <ax-text-box [ngModel]="displayText()"  readonly="true" [placeholder]="placeholder()">
+    <ax-text-box [ngModel]="displayText()" (onValueChanged)="handleValueChange($event)"   [placeholder]="placeholder()" (onKeyUp)="handleKeyDown($event)" (onBlur)="handleOnBlur($event)">
+      @for (validation of validationRules; track $index) {
+          <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
+      <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+
       <ax-suffix>
-          <ax-button color="ghost" look="twotone"  (onClick)="handleOnClick($event)">
-            <ax-icon icon="far fa-search">
-            </ax-icon>
+          <ax-button color="ghost" look="twotone"  [disabled]="isLoading()" (onClick)="handleOnClick($event)">
+            @if(isLoading())
+            {
+              <ax-loading></ax-loading>              
+            }
+            @else {
+              <ax-icon icon="far fa-search">
+              </ax-icon>
+            }
           </ax-button>
       </ax-suffix>
     </ax-text-box>
@@ -1606,11 +1796,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         AXSelectBoxModule,
                         AXTextBoxModule,
                         AXButtonModule,
-                        AXDecoratorModule
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXValidationModule,
+                        AXFormModule
                     ],
                     inputs: ["entity", "conditions", "expose"]
                 }]
-        }] });
+        }], propDecorators: { textbox: [{
+                type: ViewChild,
+                args: [AXTextBoxComponent]
+            }] } });
 
 var lookupWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1721,6 +1917,36 @@ const AXPLookupWidget = {
     }
 };
 
+class AXPShowListViewAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPWorkflowNavigateAction);
+        this.sessionService = inject(AXPSessionService);
+    }
+    async execute(context) {
+        const [moduleName, entityName] = context.getVariable('entity').split(".");
+        const newPayload = {
+            commands: `/${this.sessionService.application?.name}/m/${moduleName}/e/${entityName}/list`,
+        };
+        context.setVariable('payload', newPayload);
+        this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPShowListViewAction, decorators: [{
+            type: Injectable
+        }] });
+const AXPShowListViewWorkflow = {
+    startStepId: 'showListView',
+    steps: {
+        showListView: {
+            id: 'showListView',
+            action: 'AXPShowListViewAction',
+        },
+    },
+};
+
 function routesFacory() {
     const config = inject(AXP_ENTITY_CONFIG_TOKEN);
     let routes = [];
@@ -1773,7 +1999,7 @@ function routesFacory() {
 }
 class AXPEntityModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModule, imports: [RouterModule, i1$1.AXPWorkflowModule, i4$1.AXPLayoutBuilderModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModule, imports: [RouterModule, i1$2.AXPWorkflowModule, i6.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEntityModule, providers: [
             {
                 provide: ROUTES,
@@ -1785,15 +2011,19 @@ class AXPEntityModule {
                 actions: {
                     AXPEntityCreatePopupAction,
                     AXPEntityPerformDeleteAction,
+                    "entity-perform-delete": AXPEntityPerformDeleteAction,
                     AXPEntityModifySectionPopupAction,
                     AXPEntityModifyConfirmedAction,
-                    AXPShowDetailViewAction
+                    AXPShowDetailViewAction,
+                    AXPEntityCreateSubmittedAction,
+                    AXPShowListViewAction
                 },
                 workflows: {
                     'create-entity': AXPCreateEntityWorkflow,
                     'delete-entity': AXPDeleteEntityWorkflow,
                     'modify-entity-section': AXPModifyEntitySectionWorkflow,
                     'open-entity': AXPShowDetailsViewWorkflow,
+                    'show-list-view': AXPShowListViewWorkflow
                 },
             }),
             AXPLayoutBuilderModule.forChild({
@@ -1811,15 +2041,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                             actions: {
                                 AXPEntityCreatePopupAction,
                                 AXPEntityPerformDeleteAction,
+                                "entity-perform-delete": AXPEntityPerformDeleteAction,
                                 AXPEntityModifySectionPopupAction,
                                 AXPEntityModifyConfirmedAction,
-                                AXPShowDetailViewAction
+                                AXPShowDetailViewAction,
+                                AXPEntityCreateSubmittedAction,
+                                AXPShowListViewAction
                             },
                             workflows: {
                                 'create-entity': AXPCreateEntityWorkflow,
                                 'delete-entity': AXPDeleteEntityWorkflow,
                                 'modify-entity-section': AXPModifyEntitySectionWorkflow,
                                 'open-entity': AXPShowDetailsViewWorkflow,
+                                'show-list-view': AXPShowListViewWorkflow
                             },
                         }),
                         AXPLayoutBuilderModule.forChild({