@acorex/platform 18.0.4 → 18.0.6

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

@@ -1,7 +1,7 @@
 import { AXFormatService } from '@acorex/core/format';
 import { cloneDeep, set, merge, get } from 'lodash-es';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, computed, signal, Injector, Component, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+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';
@@ -12,7 +12,7 @@ import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
 import * as i1 from '@acorex/components/common';
 import { AXDataSource, AXCommonModule } from '@acorex/components/common';
-import { Subject } from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 import { RouterModule, ROUTES } from '@angular/router';
 import * as i6 from '@acorex/platform/layout/builder';
 import { AXPWidgetBase, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPColumnWidgetBase } from '@acorex/platform/layout/builder';
@@ -37,6 +37,7 @@ 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');
@@ -147,11 +148,10 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
         this.loadingDialog = inject(AXLoadingDialogService);
     }
     async execute(context) {
-        debugger;
         const moduleEntity = context.getVariable('entity');
         const [moduleName, entityName] = moduleEntity.split(".");
-        const items = context.getVariable('data');
-        const ids = items.map(c => c.id);
+        const data = context.getVariable('data');
+        const ids = Array.isArray(data) ? data.map(c => c.id) : [data.id];
         const entity = await this.entityRegistery.resolve(moduleName, entityName);
         let deletedCount = 0;
         context.setVariable('deleteSuccessful', false);
@@ -197,14 +197,12 @@ class AXPEntityPerformDeleteAction extends AXPWorkflowAction {
             if (successfulPromises > 0 && failedPromises === 0) {
                 // All items deleted successfully
                 await this.dialogService.alert('Deletion Successful', `${successfulPromises} item(s) has been deleted.`, 'success');
-                debugger;
                 // Dispatch actions
                 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');
-                debugger;
                 // Dispatch actions
                 this.dispatch(AXPEntityDeletedEvent({ entity: moduleEntity, ids: ids }));
             }
@@ -474,21 +472,26 @@ class AXPEntityDetailListViewModel {
             return this.inlineFiltersPlaceholders().length > 0;
         });
         //****************** Actions ******************//
-        this.actions = computed(() => {
-            // const list = this.detailEntity.interfaces?.master?.list?.actions ?? [];
-            // return list
-            //     .filter(a =>
-            //         (a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
-            //         (a.scope != AXPEntityCommandScope.Selected && !this.hasSelectedItems())
-            //     )
-            //     .map((tr) => new AXPEntityCommandTriggerViewModel(this.entityDef, tr)) ?? [];
-            return [];
+        this.allActions = computed(() => {
+            const list = this.detailEntity()?.interfaces?.master?.list?.actions ?? [];
+            return list
+                .map((tr) => new AXPEntityCommandTriggerViewModel(this.detailEntity(), tr)) ?? [];
         });
         this.primaryActions = computed(() => {
-            return this.actions().filter(c => c.priority == 'primary');
+            return this.allActions()
+                .filter(a => (a.priority == 'primary') &&
+                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
+                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
         });
         this.secondaryActions = computed(() => {
-            return this.actions().filter(c => c.priority == 'secondary');
+            return this.allActions()
+                .filter(a => (a.priority == 'secondary') &&
+                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
+                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
+        });
+        this.rowActions = computed(() => {
+            return this.allActions()
+                .filter(a => (a.scope == AXPEntityCommandScope.Individual));
         });
         //****************** Filter ******************//
         this.inlineFilters = {
@@ -583,6 +586,15 @@ class AXPEntityDetailListViewModel {
     }
     //******************  Commands ******************//
     async executeCommand(commandName, data = null) {
+        const action = this.allActions().find(c => c.name == commandName &&
+            ((this.selectedItems().length ?
+                c.scope == AXPEntityCommandScope.Selected :
+                c.scope == AXPEntityCommandScope.Individual) ||
+                c.scope == AXPEntityCommandScope.TypeLevel));
+        await this.workflow.execute(commandName, {
+            entity: this.detailEntity()?.source,
+            data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data
+        });
     }
 }
 
@@ -605,21 +617,18 @@ class AXPEntityMasterSingleViewGroupViewModel {
             return source;
         });
         this.props = computed(() => {
-            const props = this.entity.properties.filter(c => c.groupId == this.group.id &&
-                c.schema.hidden != true).map(c => c.name);
-            const viewProps = this.entity.interfaces?.master?.single?.properties?.filter(c => props.includes(c.name)) ?? [];
-            return viewProps.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 editableProps = this.entity.interfaces?.master?.update?.properties?.map(c => c.name) ?? [];
-            const props = this.entity.properties.filter(c => c.groupId == this.group.id &&
-                c.schema.hidden != true &&
-                editableProps.includes(c.name));
-            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;
@@ -667,6 +676,7 @@ 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(() => {
@@ -679,15 +689,11 @@ class AXPEntityMasterSingleViewModel {
             return this.actions().filter(c => c.priority == 'secondary');
         });
         this.sections = computed(() => {
-            const viewProps = this.entityDef.interfaces?.master?.single?.properties?.map(c => c.name);
-            const props = this.entityDef.properties.filter(c => c.groupId &&
-                c.schema.hidden != true &&
-                viewProps?.includes(c.name));
-            const groups = this.entityDef.interfaces?.master?.single?.sections?.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(() => {
@@ -721,7 +727,10 @@ 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) => {
+        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', {
@@ -729,7 +738,10 @@ class AXPEntityMasterSingleViewModel {
                 });
             }
         });
-        this.workflow.events$.pipe(ofType(AXPEntityModifyEvent)).subscribe(async (event) => {
+        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);
@@ -737,15 +749,8 @@ class AXPEntityMasterSingleViewModel {
         });
     }
     async executeCommand(commandName, data = null) {
-        // debugger
         //TODO: syntact for workflow
         switch (commandName) {
-            case 'delete-entity':
-                this.workflow.execute('delete-entity', {
-                    entity: this.entityDef.source,
-                    data: [this.context()],
-                });
-                break;
             case 'modify-entity-section': {
                 this.workflow.execute('modify-entity-section', {
                     entity: this.entityDef.source,
@@ -761,11 +766,17 @@ class AXPEntityMasterSingleViewModel {
                     const action = this.actions().find(c => c.name == commandName);
                     this.workflow.execute(commandName, {
                         entity: this.entityDef.source,
-                        data: action?.scope == AXPEntityCommandScope.Individual ? data : null
+                        data: action?.scope == AXPEntityCommandScope.Individual ? this.context() : null
                     });
                 }
         }
     }
+    //
+    //
+    destroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
 }
 class AXPEntityDetailViewModelFactory {
     constructor() {
@@ -819,13 +830,15 @@ class AXPEntityCreateViewSectionViewModel {
             return source;
         });
         this.elements = computed(() => {
-            const createProps = this.entity.interfaces?.master?.create?.properties ?? [];
-            const createPropsNames = createProps.map(c => c.name);
-            const props = this.entity.properties.filter(c => c.groupId == this.group.id &&
-                c.schema.hidden != true &&
-                createPropsNames.includes(c.name));
-            return props.map(p => {
-                return new AXPEntityCreateViewElementViewModel(this.entity, this, p, createProps.find(c => c.name == p.name));
+            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);
             });
         });
     }
@@ -877,22 +890,24 @@ class AXPEntityMasterCreateViewModel {
         this.context = signal(this.initialData ?? {});
         this.isInProgress = signal(false);
         this.sections = computed(() => {
-            const createProps = this.entityDef.interfaces?.master?.create?.properties?.map(c => c.name) ?? [];
-            const props = this.entityDef.properties.filter(p => p.groupId && p.schema.hidden != true && createProps.includes(p.name));
-            const groups = this.entityDef.interfaces?.master?.create?.sections?.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 && typeof c.schema.defaultValue === 'function')
+            .filter(c => c.schema.defaultValue != null)
             .forEach(p => {
-            debugger;
-            const func = p.schema.defaultValue;
-            set(initialData, p.name, func(initialData));
+            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);
     }
@@ -956,6 +971,7 @@ 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) => {
@@ -1003,18 +1019,26 @@ class AXPEntityMasterListViewModel {
             ];
         });
         //****************** Actions ******************//
-        this.actions = computed(() => {
+        this.allActions = computed(() => {
             const list = this.entityDef.interfaces?.master?.list?.actions ?? [];
             return list
-                .filter(a => (a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
-                (a.scope != AXPEntityCommandScope.Selected && !this.hasSelectedItems()))
                 .map((tr) => new AXPEntityCommandTriggerViewModel(this.entityDef, tr)) ?? [];
         });
         this.primaryActions = computed(() => {
-            return this.actions().filter(c => c.priority == 'primary');
+            return this.allActions()
+                .filter(a => (a.priority == 'primary') &&
+                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
+                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
         });
         this.secondaryActions = computed(() => {
-            return this.actions().filter(c => c.priority == 'secondary');
+            return this.allActions()
+                .filter(a => (a.priority == 'secondary') &&
+                ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
+                    (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
+        });
+        this.rowActions = computed(() => {
+            return this.allActions()
+                .filter(a => (a.scope == AXPEntityCommandScope.Individual));
         });
         //****************** Filter ******************//
         this.inlineFilters = {
@@ -1031,11 +1055,14 @@ class AXPEntityMasterListViewModel {
         };
         //****************** Columns ******************//
         this.allAvailableColumns = () => {
-            const columns = this.entityDef.columns?.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, this.entityDef.columns?.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 }) => visiblePropNames.has(name))
+                .map(column => {
+                const property = visibleProperties.find(({ name }) => name === column.name);
+                return new AXPEntityListViewColumnViewModel(property, column);
             });
         };
         this.visibleColumnCount = () => {
@@ -1073,7 +1100,11 @@ class AXPEntityMasterListViewModel {
             });
         });
         this.view = signal(this.views()[0]);
-        this.workflow.events$.pipe(ofType(AXPEntityDeletedEvent)).subscribe((event) => {
+        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" });
@@ -1104,6 +1135,12 @@ 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;
         if (inline && !advance) {
@@ -1175,12 +1212,21 @@ class AXPEntityMasterListViewModel {
     }
     //******************  Commands ******************//
     async executeCommand(commandName, data = null) {
-        const action = this.actions().find(c => c.name == commandName);
+        const action = this.allActions().find(c => c.name == commandName &&
+            ((this.selectedItems().length ?
+                c.scope == AXPEntityCommandScope.Selected :
+                c.scope == AXPEntityCommandScope.Individual) ||
+                c.scope == AXPEntityCommandScope.TypeLevel));
         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() {
@@ -1221,21 +1267,20 @@ class AXPEntityCreatePopupAction extends AXPWorkflowAction {
     }
     async execute(context) {
         const [module, entity] = context.getVariable('entity').split(".");
-        const dataContext = context.getVariable('context');
+        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, dataContext),
+                vm: await this.factory.create(module, entity, data),
                 entity,
             },
         });
         context.setOutput('result', false);
         if (result.data?.save) {
             context.setOutput('result', true);
-            context.setVariable('redirect', result.data.redirect);
             context.setVariable('data', result.data.item);
         }
     }
@@ -1247,6 +1292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }] });
 class AXPEntityCreateSubmittedAction extends AXPWorkflowAction {
     async execute(context) {
+        debugger;
         this.dispatch(AXPEntityCreateEvent({ entity: context.getVariable('entity') }));
     }
 }
@@ -1280,7 +1326,7 @@ const AXPCreateEntityWorkflow = {
             action: 'AXPEntityCreateSubmittedAction',
             nextSteps: [
                 {
-                    conditions: [{ type: 'SINGLE', expression: 'context.getVariable("redirect") == true' }],
+                    conditions: [{ type: 'SINGLE', expression: 'context.getVariable("redirect") != false' }],
                     nextStepId: 'show-entity',
                 },
             ],
@@ -1316,7 +1362,6 @@ const AXPShowDetailsViewWorkflow = {
     startStepId: 'showDetailView',
     steps: {
         showDetailView: {
-            id: 'showDetailView',
             action: 'AXPShowDetailViewAction',
         },
     },
@@ -1347,7 +1392,6 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
     //   super.ngOnInit();
     // }
     ngAfterViewInit() {
-        debugger;
         if (this.searchTerm) {
             this.vm.applyInlineFilter(this.searchTerm);
         }
@@ -1382,81 +1426,81 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
         }
     }
     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(', ')" [value]="searchTerm"
-          (onValueChanged)="handleChangeSearchValue($event)" [axAutoFocus]="true"><ax-clear-button></ax-clear-button></ax-search-box>
-      </div>
-      }
-      <ax-data-table #grid [showFooter]="false" class="ax-h-[50vh]" [paging]="true" [fetchDataMode]="'manual'"
-        [loading]="{ enabled: true, animation: true }" [dataSource]="vm.dataSource" 
-        (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)
-        {
-        <axp-widget-column-renderer [caption]="col.title" [node]="col.node()"></axp-widget-column-renderer>
-        }
-        }
-      </ax-data-table>
-    </div>
-     <ax-footer>
-     <ax-suffix>
-      <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: 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 }); }
+    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(', ')" [value]="searchTerm"
+          (onValueChanged)="handleChangeSearchValue($event)" [axAutoFocus]="true"><ax-clear-button></ax-clear-button></ax-search-box>
+      </div>
+      }
+      <ax-data-table #grid [showFooter]="false" class="ax-h-[50vh]" [paging]="true" [fetchDataMode]="'manual'"
+        [loading]="{ enabled: true, animation: true }" [dataSource]="vm.dataSource" 
+        (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)
+        {
+        <axp-widget-column-renderer [caption]="col.title" [node]="col.node()"></axp-widget-column-renderer>
+        }
+        }
+      </ax-data-table>
+    </div>
+     <ax-footer>
+     <ax-suffix>
+      <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: 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", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-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,
             args: [{
-                    template: `
-    <div class="ax-p-4 ax-flex ax-flex-col ax-gap-4  ax-overflow-hidden">
-      @if(vm.hasInlineFilters())
-      {
-      <div class="ax-w-full" >
-        <ax-search-box [placeholder]="'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]="'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)
-        {
-        <axp-widget-column-renderer [caption]="col.title" [node]="col.node()"></axp-widget-column-renderer>
-        }
-        }
-      </ax-data-table>
-    </div>
-     <ax-footer>
-     <ax-suffix>
-      <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>
+                    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(', ')" [value]="searchTerm"
+          (onValueChanged)="handleChangeSearchValue($event)" [axAutoFocus]="true"><ax-clear-button></ax-clear-button></ax-search-box>
+      </div>
+      }
+      <ax-data-table #grid [showFooter]="false" class="ax-h-[50vh]" [paging]="true" [fetchDataMode]="'manual'"
+        [loading]="{ enabled: true, animation: true }" [dataSource]="vm.dataSource" 
+        (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)
+        {
+        <axp-widget-column-renderer [caption]="col.title" [node]="col.node()"></axp-widget-column-renderer>
+        }
+        }
+      </ax-data-table>
+    </div>
+     <ax-footer>
+     <ax-suffix>
+      <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>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1551,13 +1595,25 @@ class AXPLookupWidgetSelectorViewModel {
         //
         //this.dataSource.sort(...this.sortedFields().map(s => ({ dir: s.dir, field: s.name } as AXDataSourceSortOption)));
         //
+        // Check if inlineFilters or parentFilters have any filters
+        const hasInlineFilters = (this.inlineFilters?.filters?.length ?? 0) > 0;
+        const hasParentFilters = (this.parentFilters?.filters?.length ?? 0) > 0;
+        // Construct the filters array based on the presence of filters
+        const filters = [];
+        if (hasInlineFilters) {
+            filters.push(this.inlineFilters);
+        }
+        if (hasParentFilters && this.parentFilters) {
+            filters.push(this.parentFilters);
+        }
+        // Apply the filters to the dataSource
         this.dataSource.filter({
             field: null,
             logic: 'and',
             operator: null,
-            filters: this.parentFilters ? [this.inlineFilters, this.parentFilters] : [this.inlineFilters]
+            filters: filters
         });
-        //
+        // Refresh the dataSource
         this.dataSource.refresh();
     }
     async find(value) {
@@ -1577,6 +1633,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetBase {
         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);
@@ -1602,17 +1659,23 @@ class AXPLookupWidgetEditComponent extends AXPWidgetBase {
         else if (value != null) {
             await this.findByValue();
         }
-        this.builderService.onChanged.subscribe(async (c) => {
+        //
+        this.builderService
+            .onChanged
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(async (c) => {
             if (c.path == this.path) {
-                console.log(c, this.getValue());
-                await this.findByValue();
+                if (this.getValue())
+                    await this.findByValue();
             }
         });
     }
     async findByValue() {
+        this.isLoading.set(true);
         const byKey = this.entityDef?.queries.byKey?.execute;
         const item = await byKey(this.getValue());
         this.setItems(item);
+        this.isLoading.set(false);
     }
     handleOnClick(e) {
         this.showSelector();
@@ -1684,59 +1747,68 @@ class AXPLookupWidgetEditComponent extends AXPWidgetBase {
                         this.builderService.setValue(i, item);
                     }
                     else {
-                        this.builderService.setValue(i.target, get(item, i.source));
+                        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: "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-suffix>
-          <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$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.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 }); }
+    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"  [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$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", "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-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-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-suffix>
-          <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>
+                    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"  [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>
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,