@acorex/platform 18.0.4 → 18.0.5

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,7 +148,6 @@ 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');
@@ -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 }));
             }
@@ -605,21 +603,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 +662,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 +675,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 +713,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 +724,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,7 +735,6 @@ class AXPEntityMasterSingleViewModel {
         });
     }
     async executeCommand(commandName, data = null) {
-        // debugger
         //TODO: syntact for workflow
         switch (commandName) {
             case 'delete-entity':
@@ -761,11 +758,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 +822,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 +882,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 +963,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) => {
@@ -1031,11 +1039,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 +1084,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 +1119,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) {
@@ -1181,6 +1202,11 @@ class AXPEntityMasterListViewModel {
             data: action?.scope == AXPEntityCommandScope.Selected ? this.selectedItems() : data
         });
     }
+    //
+    destroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
 }
 class AXPEntityListViewModelFactory {
     constructor() {
@@ -1221,21 +1247,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);
         }
     }
@@ -1347,7 +1372,6 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
     //   super.ngOnInit();
     // }
     ngAfterViewInit() {
-        debugger;
         if (this.searchTerm) {
             this.vm.applyInlineFilter(this.searchTerm);
         }
@@ -1551,13 +1575,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 +1613,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,10 +1639,14 @@ 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();
             }
         });
     }
@@ -1684,12 +1725,17 @@ 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('');
@@ -1701,6 +1747,8 @@ class AXPLookupWidgetEditComponent extends AXPWidgetBase {
       @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())
@@ -1714,7 +1762,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetBase {
           </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 }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
@@ -1724,6 +1772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
       @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())