@acorex/platform 18.2.1 → 18.2.2

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

@@ -1,7 +1,7 @@
 import { AXFormatService } from '@acorex/core/format';
-import { cloneDeep, set, merge, get, sortBy } from 'lodash-es';
+import { cloneDeep, set, merge, isNil, get, sortBy } from 'lodash-es';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, computed, signal, Injector, Component, ChangeDetectionStrategy, DestroyRef, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, computed, signal, Injector, effect, HostBinding, ChangeDetectionStrategy, Component, DestroyRef, ViewChild, NgModule } from '@angular/core';
 import * as i1$3 from '@acorex/platform/workflow';
 import { createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowService, ofType, AXPWorkflowModule } from '@acorex/platform/workflow';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
@@ -12,16 +12,18 @@ import * as i8 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
-import * as i2 from '@acorex/components/common';
+import * as i2$1 from '@acorex/components/common';
 import { AXDataSource, AXCommonModule } from '@acorex/components/common';
 import { Subject, takeUntil } from 'rxjs';
 import * as i7 from '@acorex/platform/layout/builder';
-import { AXPWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_GROUP, AXPWidgetsCatalog, AXPWidgetRegistryService } from '@acorex/platform/layout/builder';
+import { AXPWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPColumnWidgetComponent, AXPWidgetsCatalog, AXP_WIDGETS_EDITOR_GROUP, AXPWidgetRegistryService } from '@acorex/platform/layout/builder';
 import { RouterModule, ROUTES } from '@angular/router';
 import * as i1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i2 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
 import * as i3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i4 from '@acorex/components/decorators';
@@ -29,8 +31,8 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i6$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i2$1 from '@acorex/components/text-box';
-import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/text-box';
+import * as i2$2 from '@acorex/components/text-box';
+import { AXTextBoxModule, AXTextBoxComponent } from '@acorex/components/text-box';
 import { AXValidationModule } from '@acorex/core/validation';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/forms';
@@ -157,12 +159,14 @@ class AXPEntityListViewColumnViewModel {
         this.name = this.property.name;
         this.title = this.column.title ?? this.property.title;
         this.visible = this.column?.options?.visible ?? true;
+        this.dir = this.column.sort?.dir;
+        this.sortEnabled = this.property.options?.sort?.enabled;
         this.node = computed(() => {
             const widget = this.property.schema.interface;
             return {
-                path: this.name,
+                path: this.column.options?.dataPath ?? this.name,
                 type: widget.type,
-                options: { ...widget?.options, ...this.column?.options }
+                options: { ...widget?.options, ...this.column?.options },
             };
         });
     }
@@ -525,9 +529,8 @@ class AXPEntityDetailListViewModel {
                 ((a.scope == AXPEntityCommandScope.Selected && this.hasSelectedItems()) ||
                     (a.scope == AXPEntityCommandScope.TypeLevel && !this.hasSelectedItems())));
         });
-        this.rowActions = computed(() => {
-            return this.allActions().filter((a) => a.scope == AXPEntityCommandScope.Individual);
-        });
+        this.primaryRowActions = computed(() => this.allActions().filter((a) => a.scope == AXPEntityCommandScope.Individual && a.priority === 'primary'));
+        this.secondaryRowActions = computed(() => this.allActions().filter((a) => a.scope == AXPEntityCommandScope.Individual && a.priority === 'secondary'));
         //****************** Filter ******************//
         this.inlineFilters = {
             field: null,
@@ -691,6 +694,7 @@ class AXPEntityMasterSingleElementViewModel {
         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.showLabel = signal(this.propertyView.layout?.label?.visible != false);
         this.description = signal(this.property.description);
         this.layout = computed(() => {
             const viewProp = this.entity.interfaces?.master?.single?.properties?.find(c => c.name == this.property.name);
@@ -1015,7 +1019,6 @@ class AXPEntityMasterListViewModel {
         this.session = this.injector.get(AXPSessionService);
         this.workflow = this.injector.get(AXPWorkflowService);
         this.destroyed = new Subject();
-        this.translateService = this.injector.get(AXTranslationService);
         this.events$ = new Subject();
         this.dataSource = new AXDataSource({
             byKey: (key) => {
@@ -1052,7 +1055,7 @@ class AXPEntityMasterListViewModel {
         this.beardcrumbs = computed(() => {
             return [
                 {
-                    title: this.translateService.translateSync('entity.home'),
+                    title: 'entity.home',
                     icon: 'fa-solid fa-home ax-text-xs ax-me-2',
                     url: [`/${this.session.application?.name}`],
                 },
@@ -1121,8 +1124,8 @@ class AXPEntityMasterListViewModel {
             return props.map((e) => {
                 return {
                     name: e.name,
-                    title: this.translateService.translateSync(e.title) ?? cloneDeep.name,
-                    dir: 'asc',
+                    title: e.title,
+                    dir: undefined,
                 };
             });
         };
@@ -1136,7 +1139,7 @@ class AXPEntityMasterListViewModel {
             return this.sortedCount() < this.sortableFieldsCount();
         };
         this.sortedCount = () => {
-            return this.sortedFields().length;
+            return this.sortedFields().filter((i) => i.dir).length;
         };
         this.sortedFields = signal([]);
         this.views = computed(() => {
@@ -1155,6 +1158,8 @@ class AXPEntityMasterListViewModel {
                 this.events$.next({ action: 'refresh' });
             }
         });
+        console.log(this.sortableFields());
+        this.sortedFields.set(this.sortableFields());
     }
     clearSelection() {
         this.selectedItems.set([]);
@@ -1185,7 +1190,6 @@ class AXPEntityMasterListViewModel {
             operator: f.operator,
             value: f.value,
         }));
-        console.log(this.advanceFilters.filters);
         //
         const inline = this.inlineFilters.filters?.length ?? 0;
         const advance = this.advanceFilters.filters?.length ?? 0;
@@ -1239,12 +1243,17 @@ class AXPEntityMasterListViewModel {
         this.sortedFields.set(this.sortedFields().filter((c) => c.name != name));
     }
     applyViewSorts() {
-        const fileds = this.view().sorts.map((c) => ({
-            name: c.name,
-            title: c.name,
-            dir: c.dir ?? 'asc',
-        }));
-        this.sortedFields.set(fileds);
+        const viewSorts = this.view().sorts;
+        this.sortedFields.update((prev) => {
+            const viewSortsMap = new Map(viewSorts.map((vs) => [vs.name, vs]));
+            return prev.map((sf) => {
+                const updatedSort = viewSortsMap.get(sf.name);
+                if (updatedSort) {
+                    return { ...updatedSort, title: sf.title };
+                }
+                return sf;
+            });
+        });
     }
     //****************** Views ******************//
     setView(viewName = null) {
@@ -1302,65 +1311,101 @@ const AXPEntityListViewModelResolver = (route, state, service = inject(AXPEntity
 class AXPLookupWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.textField = 'title';
-        //protected entity: string;
-        this.entity = computed(() => this.options()['entity']);
         this.formatService = inject(AXFormatService);
         this.entityResolver = inject(AXPEntityResolver);
-        this.displayText = signal('');
+        this.entity = computed(() => this.options()['entity']);
+        this.multiple = computed(() => this.options()['multiple']);
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
+        this.displayField = computed(() => {
+            return this.textField() ?? this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title';
+        });
         this.loading = signal(false);
-        this.selectedItem = signal(null);
+        this.entityDef = signal(null);
+        this.displayItems = signal([]);
+        this.efEntity = effect(async () => {
+            const [module, entity] = this.entity().split('.');
+            this.entityDef.set(await this.entityResolver.get(module, entity));
+        }, { allowSignalWrites: true });
+        this.efDisplay = effect(async () => {
+            const value = this.getValue();
+            if (isNil(value)) {
+                this.displayItems.set([]);
+            }
+            else {
+                const items = Array.isArray(value)
+                    ? value.map(async (item) => await this.extractItem(item))
+                    : [await this.extractItem(value)];
+                this.displayItems.set(items);
+            }
+        }, { allowSignalWrites: true });
     }
-    async ngOnInit() {
-        super.ngOnInit();
-        const [module, entity] = this.entity().split('.');
-        this.entityDef = await this.entityResolver.get(module, entity);
-        this.textField =
-            this.entityDef?.formats.lookup ?? this.entityDef?.properties.find((c) => c.name != 'id')?.name ?? 'title';
-        const value = this.getValue();
-        if (typeof value == 'object' && !Array.isArray(value))
-            this.displayText.set(this.formatService.format(this.textField, 'string', value));
-        else if (value != null) {
-            this.setItem();
+    async extractItem(item) {
+        if (typeof item == 'object') {
+            return {
+                id: item[this.valueField()],
+                text: this.formatService.format(this.displayField(), 'string', item),
+            };
+        }
+        else {
+            const byKey = this.entityDef()?.queries.byKey?.execute;
+            if (byKey) {
+                this.loading.set(true);
+                const item = await byKey(this.getValue());
+                this.loading.set(false);
+                return {
+                    id: item[this.valueField()],
+                    text: this.formatService.format(this.textField(), 'string', item),
+                };
+            }
+            return {
+                id: item,
+                text: item
+            };
         }
     }
-    async setItem() {
-        this.loading.set(true);
-        const byKey = this.entityDef?.queries.byKey?.execute;
-        const item = await byKey(this.getValue());
-        const text = this.formatService.format(this.textField, 'string', item);
-        this.loading.set(false);
-        this.displayText.set(text);
+    get __class() {
+        const cls = {};
+        cls[`ax-flex`] = true;
+        cls[`ax-gap-1`] = true;
+        return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLookupWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLookupWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <span>
-      @if(loading()){
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLookupWidgetViewComponent, isStandalone: true, selector: "axp-lookup-widget-view", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    @if(loading())
+    {
       <ax-loading></ax-loading>
-      }@else{
-      {{ displayText() }}
+    }
+    @else{
+      @for (item of displayItems(); track $index) {
+        <ax-badge  [look]="'twotone'" [text]="item.text" color="primary"></ax-badge>
       }
-    </span>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLookupWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-lookup-widget-view',
                     template: `
-    <span>
-      @if(loading()){
+    @if(loading())
+    {
       <ax-loading></ax-loading>
-      }@else{
-      {{ displayText() }}
+    }
+    @else{
+      @for (item of displayItems(); track $index) {
+        <ax-badge  [look]="'twotone'" [text]="item.text" color="primary"></ax-badge>
       }
-    </span>
+    }
   `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXLoadingModule],
-                    inputs: [],
+                    imports: [CommonModule, AXLoadingModule, AXBadgeModule],
                 }]
-        }] });
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 var lookupWidgetView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1433,7 +1478,7 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
       >
         <!-- <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>
+        <axp-widget-column-renderer [caption]="col.title | translate  | async" [node]="col.node()"></axp-widget-column-renderer>
         } }
       </ax-data-table>
     </div>
@@ -1468,7 +1513,7 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
         }
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i5.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: i6.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: i7.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "node", "footerTemplate", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i5.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: i6.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: i7.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "node", "footerTemplate", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLookupWidgetSelectorComponent, decorators: [{
             type: Component,
@@ -1500,7 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       >
         <!-- <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>
+        <axp-widget-column-renderer [caption]="col.title | translate  | async" [node]="col.node()"></axp-widget-column-renderer>
         } }
       </ax-data-table>
     </div>
@@ -1576,7 +1621,6 @@ class AXPLookupWidgetSelectorViewModel {
             return this.entityDef.commands?.create?.execute != null;
         });
         this.inlineFiltersPlaceholders = computed(() => {
-            console.log(this.entityDef);
             return (this.entityDef?.properties.filter((p) => p.options?.filter?.inline?.enabled).map((c) => c.title ?? c.name) ?? []);
         });
         this.hasInlineFilters = computed(() => {
@@ -1662,10 +1706,6 @@ class AXPLookupWidgetSelectorViewModel {
 class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
-        this.expose = computed(() => this.options()['expose']);
-        this.entity = computed(() => this.options()['entity']);
-        this.textField = signal('');
-        this.validationRules = [];
         this.injector = inject(Injector);
         this.entityResolver = inject(AXPEntityResolver);
         this.formatService = inject(AXFormatService);
@@ -1673,6 +1713,13 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         this.builderService = inject(AXPLayoutBuilderService);
         this.destroyRef = inject(DestroyRef);
         this.translateService = inject(AXTranslationService);
+        this.expose = computed(() => this.options()['expose']);
+        this.entity = computed(() => this.options()['entity']);
+        this.validationRules = computed(() => this.options()["validationRules"] ?? []);
+        this.textField = computed(() => {
+            return this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title';
+        });
+        this.entityDef = signal(null);
         this.searchTerm = signal(null);
         this.displayText = signal('');
         this.selectedItem = signal(null);
@@ -1682,35 +1729,42 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         this.placeholder = computed(() => {
             return (this.translateService.translateSync('widget.lookup.search') + this.vm()?.inlineFiltersPlaceholders().join(', '));
         });
-    }
-    async ngOnInit() {
+        this.efDisplay = effect(async () => {
+            const value = this.getValue();
+            if (isNil(value)) {
+                this.displayText.set('');
+            }
+            else if (typeof value == 'object' && !Array.isArray(value)) {
+                this.displayText.set(this.formatService.format(this.textField(), 'string', value));
+            }
+            else if (value != null) {
+                await this.findByValue();
+            }
+        }, { allowSignalWrites: true });
+        this.efEntity = effect(async () => {
+            const [module, entity] = this.entity().split('.');
+            this.entityDef.set(await this.entityResolver.get(module, entity));
+            this.vm.set(new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef(), this.filter));
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
         super.ngOnInit();
         //
-        const [module, entity] = this.entity().split('.');
-        this.entityDef = await this.entityResolver.get(module, entity);
-        //
-        this.vm.set(new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef, this.filter));
-        //
-        this.textField.set(this.entityDef?.formats.lookup ?? this.entityDef?.properties.find((c) => c.name != 'id')?.name ?? 'title');
-        const value = this.getValue();
-        if (typeof value == 'object' && !Array.isArray(value))
-            this.displayText.set(this.formatService.format(this.textField(), 'string', value));
-        else if (value != null) {
-            await this.findByValue();
-        }
-        //
         this.builderService.onChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(async (c) => {
             if (c.path == this.path) {
-                if (this.getValue())
+                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);
+        const byKey = this.entityDef()?.queries.byKey?.execute;
+        if (byKey) {
+            const item = await byKey(this.getValue());
+            this.setItems(item);
+        }
         this.isLoading.set(false);
     }
     handleOnClick(e) {
@@ -1720,10 +1774,10 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         this.isOpen.set(true);
         this.popupService
             .open(AXPLookupWidgetSelectorComponent, {
-            title: this.translateService.translateSync('widget.lookup.search') + ' ' + this.entityDef?.formats.plural,
+            title: `${this.translateService.translateSync('widget.lookup.search')} ${this.translateService.translateSync(this.entityDef()?.formats.plural)}`,
             size: (this.vm()?.columns().length ?? 0) > 3 ? 'lg' : 'md',
             data: {
-                vm: new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef, this.filter),
+                vm: new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef(), this.filter),
                 searchTerm: this.searchTerm() == this.displayText() ? null : this.searchTerm(),
             },
         })
@@ -1803,15 +1857,14 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
     }
     handleClearClick() {
         this.clear();
-        this.setValue(null);
     }
     clear() {
+        this.setValue(null);
         this.searchTerm.set('');
-        this.displayText.set('');
         this.selectedItem.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLookupWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "axp-lookup-widget-edit", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ax-text-box
       [ngModel]="displayText()"
       (onValueChanged)="handleValueChange($event)"
@@ -1819,7 +1872,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
       (onKeyUp)="handleKeyDown($event)"
       (onBlur)="handleOnBlur($event)"
     >
-      @for (validation of validationRules; track $index) {
+      @for (validation of validationRules(); track $index) {
       <ax-validation-rule
         [rule]="validation.rule"
         [message]="validation.options?.message"
@@ -1838,11 +1891,12 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         </ax-button>
       </ax-suffix>
     </ax-text-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-lookup-widget-edit',
                     template: `
     <ax-text-box
       [ngModel]="displayText()"
@@ -1851,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       (onKeyUp)="handleKeyDown($event)"
       (onBlur)="handleOnBlur($event)"
     >
-      @for (validation of validationRules; track $index) {
+      @for (validation of validationRules(); track $index) {
       <ax-validation-rule
         [rule]="validation.rule"
         [message]="validation.options?.message"
@@ -1917,15 +1971,19 @@ var lookupWidgetFilter_component = /*#__PURE__*/Object.freeze({
 
 class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLookupWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLookupWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{rawValue}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXPLookupWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `
+   <ax-badge [look]="'twotone'" [text]="rawValue" color="primary"></ax-badge>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLookupWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `{{rawValue}}`,
+                    template: `
+   <ax-badge [look]="'twotone'" [text]="rawValue" color="primary"></ax-badge>
+  `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule],
+                    imports: [CommonModule, AXBadgeModule],
                     inputs: ['rawValue']
                 }]
         }] });
@@ -2080,7 +2138,7 @@ class AXPWidgetSelectorWidgetEditComponent extends AXPWidgetComponent {
     <axp-widget-property-viewer [widget]="selectedWidgetNode()!" (onChanged)="handleChangeWidget($event)">
     </axp-widget-property-viewer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { 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" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { 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" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, decorators: [{
             type: Component,