@acorex/platform 20.6.0-next.2 → 20.6.0-next.4

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

@@ -3577,7 +3577,7 @@ class AXPMainEntityContentBuilder {
             ? this.createExpressionEvaluator(rootContext, dependencies.expressionEvaluator)
             : null;
         // Prepare merge-details structures (sections and properties per section)
-        let evaluatedRelatedEntities = { ...(entity?.relatedEntities ?? []) };
+        let evaluatedRelatedEntities = [...(entity?.relatedEntities ?? [])];
         if (evaluatedRelatedEntities && evaluateExpressions) {
             // Only evaluate the 'hidden' property for each related entity
             evaluatedRelatedEntities = await Promise.all((entity.relatedEntities ?? []).map(async (re) => {
@@ -3657,6 +3657,7 @@ class AXPMainEntityContentBuilder {
                         return;
                     }
                     const relSingle = entityDef?.interfaces?.master?.single;
+                    const relUpdate = entityDef?.interfaces?.master?.update;
                     const relGroups = entityDef?.groups ?? [];
                     // Merge related groups into allGroups (avoid duplicates by id)
                     for (const rg of relGroups) {
@@ -3705,6 +3706,7 @@ class AXPMainEntityContentBuilder {
                         const propClone = { ...p };
                         propClone.__dataPath = relatedEntity?.persistence?.dataPath || entityName;
                         propClone.__layout = relSingle?.properties?.find((x) => x.name === p.name)?.layout;
+                        propClone.__isEditable = !!relUpdate?.properties?.some((x) => x.name === p.name);
                         acc[p.groupId].push(propClone);
                         return acc;
                     }, {});
@@ -3991,12 +3993,19 @@ class AXPMainEntityContentBuilder {
                                             },
                                         },
                                         children: (await getVisiblePropertyByGroupId(s.id))
-                                            .filter((p) => visiblePropertyNames.has(p.name))
+                                            .filter((p) => {
+                                            const isFromRelated = p.__dataPath != null;
+                                            const visibleInMain = visiblePropertyNames.has(p.name);
+                                            const visibleInRelated = isFromRelated ? !!p.__layout : false;
+                                            return visibleInMain || visibleInRelated;
+                                        })
                                             .map((p) => {
                                             const layout = getPropertyLayout(p.name, p);
                                             const prefixed = p.__dataPath ? `${p.__dataPath}.${p.name}` : p.name;
                                             // Check if property is editable (exists in update interface)
-                                            const isEditable = editablePropertyNames.has(p.name);
+                                            const isEditable = p.__isEditable != null
+                                                ? p.__isEditable
+                                                : editablePropertyNames.has(p.name);
                                             // Check if property has its own disabled option
                                             const hasOwnDisabled = p.schema.interface?.options?.disabled !== undefined;
                                             return {
@@ -4113,6 +4122,7 @@ class AXPMainEntityContentBuilder {
                 disabled: disabled || false,
                 zone: 'header',
                 priority: action.priority,
+                scope: action.scope,
                 command: {
                     name: action.name,
                     options: options,
@@ -4999,6 +5009,9 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.context = {};
         this.previousQueries = null;
     }
+    handleUnselectAll() {
+        this.selectedItems.set([]);
+    }
     handleActionClick(item) {
         if (item.command && (item.items?.length ?? 0) == 0) {
             this.execute(item.command.name, null);
@@ -5277,6 +5290,17 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
           [mode]="this.mode"
         ></ng-container>
       }
+      <!-- <div class="ax-flex ax-items-center ax-justify-between ax-gap-1 ">
+        <span
+          >{{ selectedItems().length }}
+          <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>
+        </span>
+        <ax-button
+          text="@general:terms.interface.unselect-all"
+          class="ax-xs"
+          (onClick)="handleUnselectAll()"
+        ></ax-button>
+      </div> -->
       @if (listNode() != null) {
         <ng-container
           #list
@@ -5383,6 +5407,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
           [mode]="this.mode"
         ></ng-container>
       }
+      <!-- <div class="ax-flex ax-items-center ax-justify-between ax-gap-1 ">
+        <span
+          >{{ selectedItems().length }}
+          <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>
+        </span>
+        <ax-button
+          text="@general:terms.interface.unselect-all"
+          class="ax-xs"
+          (onClick)="handleUnselectAll()"
+        ></ax-button>
+      </div> -->
       @if (listNode() != null) {
         <ng-container
           #list
@@ -5585,6 +5620,7 @@ class AXPLookupFilterWidgetEditComponent extends AXPValueWidgetComponent {
         super(...arguments);
         //#region ----   Computed Properties   ----
         this.editorPath = `__${this.path}EditorValue`;
+        this.lookupWidgetRenderer = viewChild('widgetRenderer', ...(ngDevMode ? [{ debugName: "lookupWidgetRenderer" }] : []));
         this.entity = computed(() => this.options()['entity'], ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
         this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
@@ -5629,7 +5665,6 @@ class AXPLookupFilterWidgetEditComponent extends AXPValueWidgetComponent {
             this.lookupNode.set(node);
         }, ...(ngDevMode ? [{ debugName: "#efUpdateLookupNode" }] : []));
         this.#efUpdateValue = effect(() => {
-            debugger;
             const newValueObj = this.contextService.getValue(`${this.path}EditorObj`);
             const prevValue = untracked(() => this.getValue()?.value);
             const newValue = this.multiple()
@@ -5653,18 +5688,73 @@ class AXPLookupFilterWidgetEditComponent extends AXPValueWidgetComponent {
                 displayText: displayText,
             });
         }, ...(ngDevMode ? [{ debugName: "#efUpdateValue" }] : []));
+        //#endregion
+        //#region ----   Focus Management   ----
+        this.shouldFocus = signal(false, ...(ngDevMode ? [{ debugName: "shouldFocus" }] : []));
+        /**
+         * Reactive effect to auto-focus the lookup editor when component is ready
+         */
+        this.#focusEffect = effect(() => {
+            const renderer = this.lookupWidgetRenderer();
+            const shouldFocus = this.shouldFocus();
+            // Early return if no renderer or shouldn't focus
+            if (!renderer || !shouldFocus) {
+                return;
+            }
+            // Listen to componentRefSignal reactively
+            const componentRef = renderer.componentRefSignal();
+            // When componentRef is set (not null), focus the widget
+            if (componentRef) {
+                const componentInstance = componentRef.instance;
+                // Try to use the component's native focus method
+                if (componentInstance && typeof componentInstance.focus === 'function') {
+                    try {
+                        componentInstance.focus();
+                        // Reset focus flag after successful focus
+                        this.shouldFocus.set(false);
+                    }
+                    catch (error) {
+                        // console.error('Error focusing lookup widget component:', error);
+                    }
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "#focusEffect" }] : []));
     }
     //#endregion
     //#region ----   Effects   ----
     #efUpdateLookupNode;
     #efUpdateValue;
+    /**
+     * Reactive effect to auto-focus the lookup editor when component is ready
+     */
+    #focusEffect;
+    /**
+     * Public focus method to trigger focusing
+     */
+    focus() {
+        this.shouldFocus.set(true);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLookupFilterWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPLookupFilterWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ` <ng-container axp-widget-renderer [node]="lookupNode()" [mode]="'edit'"></ng-container> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: AXPLookupFilterWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "lookupWidgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-container
+      axp-widget-renderer
+      #widgetRenderer="widgetRenderer"
+      [node]="lookupNode()"
+      [mode]="'edit'"
+    ></ng-container>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLookupFilterWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
-                    template: ` <ng-container axp-widget-renderer [node]="lookupNode()" [mode]="'edit'"></ng-container> `,
+                    template: `
+    <ng-container
+      axp-widget-renderer
+      #widgetRenderer="widgetRenderer"
+      [node]="lookupNode()"
+      [mode]="'edit'"
+    ></ng-container>
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         FormsModule,
@@ -5678,7 +5768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         AXPWidgetCoreModule,
                     ],
                 }]
-        }] });
+        }], propDecorators: { lookupWidgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }] } });
 
 var lookupFilterWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6018,6 +6108,9 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.popupService = inject(AXPopupService);
         this.entityDataSelectorService = inject(AXPEntityDataSelectorService);
         this.translateService = inject(AXTranslationService);
+        this.selectBox = viewChild('selectBox', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
+        this.tagBox = viewChild('tagBox', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
+        this.shouldFocus = signal(false, ...(ngDevMode ? [{ debugName: "shouldFocus" }] : []));
         this.expose = computed(() => this.options()['expose'], ...(ngDevMode ? [{ debugName: "expose" }] : []));
         this.entity = computed(() => this.options()['entity'], ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -6038,7 +6131,9 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
             return this.defaultTextField();
         }, ...(ngDevMode ? [{ debugName: "displayField" }] : []));
         this.selectedItemsText = computed(() => {
-            return this.selectedItems().map((item) => get(item, this.displayField())).join(', ');
+            return this.selectedItems()
+                .map((item) => get(item, this.displayField()))
+                .join(', ');
         }, ...(ngDevMode ? [{ debugName: "selectedItemsText" }] : []));
         this.valueField = computed(() => this.entityDef()?.properties.find((c) => c.name == 'id')?.name ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
@@ -6066,9 +6161,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.placeholder = computed(() => {
-            return this.selectedItems().length
-                ? ''
-                : this.translateService.translateSync('@general:widgets.lookup.search');
+            return this.selectedItems().length ? '' : this.translateService.translateSync('@general:widgets.lookup.search');
         }, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.#efEntity = effect(async () => {
             const [module, entity] = this.entity().split('.');
@@ -6082,6 +6175,46 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
                 this.clear();
             }
         }, ...(ngDevMode ? [{ debugName: "#efValue" }] : []));
+        //#region ----   Focus Management   ----
+        /**
+         * Reactive effect to auto-focus when viewChild is ready
+         * This handles the case where selectBox/tagBox are inside @if conditions
+         */
+        this.#focusEffect = effect(() => {
+            const shouldFocus = this.shouldFocus();
+            // Early return if shouldn't focus
+            if (!shouldFocus) {
+                return;
+            }
+            // Check which viewChild is available based on look type
+            const look = this.look();
+            if (look === 'select') {
+                const selectBox = this.selectBox();
+                if (selectBox) {
+                    try {
+                        selectBox.focus();
+                        // Reset focus flag after successful focus
+                        this.shouldFocus.set(false);
+                    }
+                    catch (error) {
+                        // console.error('Error focusing select box:', error);
+                    }
+                }
+            }
+            else {
+                const tagBox = this.tagBox();
+                if (tagBox) {
+                    try {
+                        tagBox.focus();
+                        // Reset focus flag after successful focus
+                        this.shouldFocus.set(false);
+                    }
+                    catch (error) {
+                        // console.error('Error focusing tag box:', error);
+                    }
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "#focusEffect" }] : []));
     }
     #efEntity;
     #efValue;
@@ -6119,7 +6252,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
                 filters: this.customFilter(),
                 parentFilters: this.filter,
                 columns: this.columns(),
-                allowCreate: true
+                allowCreate: true,
             });
             if (result && 'items' in result) {
                 this.setItems(result.items);
@@ -6232,7 +6365,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         if (!this.entityDef())
             return null;
         const entity = this.entityDef();
-        const searchFields = entity.properties.filter(p => p.options?.filter?.inline?.enabled);
+        const searchFields = entity.properties.filter((p) => p.options?.filter?.inline?.enabled);
         const inlineFilters = {
             field: null,
             logic: 'or',
@@ -6258,7 +6391,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         if (request.filter) {
             request.filter = {
                 logic: 'and',
-                filters: [...[request.filter], ...(filter.filters ?? [])]
+                filters: [...[request.filter], ...(filter.filters ?? [])],
             };
         }
         else {
@@ -6269,149 +6402,165 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     singleOrMultiple(values) {
         return this.multiple() ? values : values[0];
     }
+    //#region ----   Focus Management   ----
+    /**
+     * Reactive effect to auto-focus when viewChild is ready
+     * This handles the case where selectBox/tagBox are inside @if conditions
+     */
+    #focusEffect;
+    /**
+     * Public focus method to trigger focusing
+     */
+    focus() {
+        this.shouldFocus.set(true);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLookupWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "axp-lookup-widget-edit", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTagBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-  @if(dataSource()) {
-    @if (look() == 'select') {
-      <ax-select-box
-        [dataSource]="dataSource()!"
-        [ngModel]="selectedItems()"
-        [textField]="displayField()"
-        [valueField]="valueField()"
-        [disabled]="disabled()"
-        [multiple]="multiple()"
-        (onValueChanged)="selectBoxValueChange($event)"
-      >
-        <ax-search-box>
-          <ax-clear-button></ax-clear-button>
-        </ax-search-box>
-        @for (validation of validationRules(); track $index) {
-          <ax-validation-rule
-            [rule]="validation.rule"
-            [message]="validation.options?.message"
-            [options]="validation.options"
-          ></ax-validation-rule>
-        }
-        @if (allowClear()) {
-          <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
-        }
-      </ax-select-box>
-    } @else {
-      <ax-tag-box
-        [ngModel]="selectedItems()"
-        [textField]="displayField()"
-        [valueField]="valueField()"
-        (onValueChanged)="handleValueChange($event)"
-        [placeholder]="placeholder() | translate | async"
-        [addOnEnter]="false"
-        [addOnComma]="false"
-        [disabled]="disabled()"
-        (onKeyUp)="handleKeyUp($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>
-        }
-        @if (selectedItems().length > 1 || allowClear()) {
-          <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
-        }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPLookupWidgetEditComponent, isStandalone: true, selector: "axp-lookup-widget-edit", viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }, { propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "textbox", first: true, predicate: AXTagBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (dataSource()) {
+      @if (look() == 'select') {
+        <ax-select-box
+          #selectBox
+          [dataSource]="dataSource()!"
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          [disabled]="disabled()"
+          [multiple]="multiple()"
+          (onValueChanged)="selectBoxValueChange($event)"
+        >
+          <ax-search-box>
+            <ax-clear-button></ax-clear-button>
+          </ax-search-box>
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
+        </ax-select-box>
+      } @else {
+        <ax-tag-box
+          #tagBox
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          (onValueChanged)="handleValueChange($event)"
+          [placeholder]="placeholder() | translate | async"
+          [addOnEnter]="false"
+          [addOnComma]="false"
+          [disabled]="disabled()"
+          (onKeyUp)="handleKeyUp($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>
+          }
+          @if (selectedItems().length > 1 || allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
 
-        <ax-suffix>
-          <ax-button
-            color="ghost"
-            look="blank"
-            [disabled]="isLoading() || disabled()"
-            (onClick)="handleOnClick($event)"
-          >
-            @if (isLoading()) {
-              <ax-loading></ax-loading>
-            } @else {
-              <ax-icon icon="far fa-search"> </ax-icon>
-            }
-          </ax-button>
-        </ax-suffix>
-      </ax-tag-box>
+          <ax-suffix>
+            <ax-button
+              color="ghost"
+              look="blank"
+              [disabled]="isLoading() || disabled()"
+              (onClick)="handleOnClick($event)"
+            >
+              @if (isLoading()) {
+                <ax-loading></ax-loading>
+              } @else {
+                <ax-icon icon="far fa-search"> </ax-icon>
+              }
+            </ax-button>
+          </ax-suffix>
+        </ax-tag-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: 
                 //
-                AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-lookup-widget-edit',
                     template: `
-  @if(dataSource()) {
-    @if (look() == 'select') {
-      <ax-select-box
-        [dataSource]="dataSource()!"
-        [ngModel]="selectedItems()"
-        [textField]="displayField()"
-        [valueField]="valueField()"
-        [disabled]="disabled()"
-        [multiple]="multiple()"
-        (onValueChanged)="selectBoxValueChange($event)"
-      >
-        <ax-search-box>
-          <ax-clear-button></ax-clear-button>
-        </ax-search-box>
-        @for (validation of validationRules(); track $index) {
-          <ax-validation-rule
-            [rule]="validation.rule"
-            [message]="validation.options?.message"
-            [options]="validation.options"
-          ></ax-validation-rule>
-        }
-        @if (allowClear()) {
-          <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
-        }
-      </ax-select-box>
-    } @else {
-      <ax-tag-box
-        [ngModel]="selectedItems()"
-        [textField]="displayField()"
-        [valueField]="valueField()"
-        (onValueChanged)="handleValueChange($event)"
-        [placeholder]="placeholder() | translate | async"
-        [addOnEnter]="false"
-        [addOnComma]="false"
-        [disabled]="disabled()"
-        (onKeyUp)="handleKeyUp($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>
-        }
-        @if (selectedItems().length > 1 || allowClear()) {
-          <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
-        }
+    @if (dataSource()) {
+      @if (look() == 'select') {
+        <ax-select-box
+          #selectBox
+          [dataSource]="dataSource()!"
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          [disabled]="disabled()"
+          [multiple]="multiple()"
+          (onValueChanged)="selectBoxValueChange($event)"
+        >
+          <ax-search-box>
+            <ax-clear-button></ax-clear-button>
+          </ax-search-box>
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
+        </ax-select-box>
+      } @else {
+        <ax-tag-box
+          #tagBox
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          (onValueChanged)="handleValueChange($event)"
+          [placeholder]="placeholder() | translate | async"
+          [addOnEnter]="false"
+          [addOnComma]="false"
+          [disabled]="disabled()"
+          (onKeyUp)="handleKeyUp($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>
+          }
+          @if (selectedItems().length > 1 || allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
 
-        <ax-suffix>
-          <ax-button
-            color="ghost"
-            look="blank"
-            [disabled]="isLoading() || disabled()"
-            (onClick)="handleOnClick($event)"
-          >
-            @if (isLoading()) {
-              <ax-loading></ax-loading>
-            } @else {
-              <ax-icon icon="far fa-search"> </ax-icon>
-            }
-          </ax-button>
-        </ax-suffix>
-      </ax-tag-box>
+          <ax-suffix>
+            <ax-button
+              color="ghost"
+              look="blank"
+              [disabled]="isLoading() || disabled()"
+              (onClick)="handleOnClick($event)"
+            >
+              @if (isLoading()) {
+                <ax-loading></ax-loading>
+              } @else {
+                <ax-icon icon="far fa-search"> </ax-icon>
+              }
+            </ax-button>
+          </ax-suffix>
+        </ax-tag-box>
+      }
     }
-  }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
@@ -6429,7 +6578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         AXSearchBoxComponent,
                     ],
                 }]
-        }], propDecorators: { textbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXTagBoxComponent), { isSignal: true }] }] } });
+        }], propDecorators: { selectBox: [{ type: i0.ViewChild, args: ['selectBox', { isSignal: true }] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], textbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXTagBoxComponent), { isSignal: true }] }] } });
 
 var lookupWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,