@acorex/platform 19.3.0-next.1 → 19.3.0-next.3

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

@@ -8,9 +8,9 @@ import * as i1$4 from '@acorex/platform/common';
 import { resolveActionLook, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPSettingService, AXPRefreshEvent, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import * as i2$2 from '@acorex/platform/workflow';
 import { AXPWorkflowService, ofType, createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
-import { AXPExpressionEvaluatorService, AXPPlatformScope } from '@acorex/platform/core';
+import { AXPExpressionEvaluatorService, AXPPlatformScope, extractValue } from '@acorex/platform/core';
 import * as i7 from '@acorex/platform/layout/builder';
-import { AXPPageStatus, AXPWidgetRegistryService, AXPWidgetComponent, AXPLayoutBuilderModule, AXPColumnWidgetComponent, AXPWidgetsCatalog, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/builder';
+import { AXPPageStatus, AXPWidgetRegistryService, AXPValueWidgetComponent, AXPLayoutBuilderModule, AXPColumnWidgetComponent, AXPWidgetsCatalog, AXPWidgetGroupEnum, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/builder';
 import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import { Subject, takeUntil } from 'rxjs';
@@ -31,8 +31,10 @@ import * as i3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i4 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4$1 from '@acorex/components/form';
+import * as i6$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
+import * as i7$1 from '@acorex/components/tag-box';
+import { AXTagBoxComponent, AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXValidationModule } from '@acorex/core/validation';
 import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -42,10 +44,8 @@ import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i6 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i5$1 from '@acorex/components/tag-box';
-import { AXTagBoxComponent, AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXP_DISABLED_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_NAME_PROPERTY } from '@acorex/platform/widgets';
-import * as i5$2 from '@acorex/components/select-box';
+import * as i5$1 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i2$1 from '@acorex/components/text-box';
 import { AXTextBoxModule, AXTextBoxComponent } from '@acorex/components/text-box';
@@ -719,21 +719,8 @@ class AXPEntityMasterListViewModel {
         //****************** Beardcrumbs ******************//
         this.beardcrumbs = computed(() => {
             return [
-                {
-                    title: 'entity.home',
-                    icon: 'fa-solid ax-text-xs ax-me-2',
-                    url: [`/${this.session.application?.name}`],
-                },
                 {
                     title: this.title(),
-                    url: [
-                        `/${this.session.application?.name}`,
-                        'm',
-                        `${this.entityDef.module}`,
-                        'e',
-                        `${this.entityDef.name}`,
-                        'list',
-                    ],
                 },
             ];
         });
@@ -1031,6 +1018,20 @@ class AXPEntityMasterListViewModel {
             metadata: action?.metadata,
         });
     }
+    async execute(command) {
+        switch (command?.name) {
+            case 'navigate':
+                await this.workflow.execute('navigate', {
+                    options: {
+                        path: command.options?.['path'],
+                    },
+                });
+                break;
+            default:
+                this.executeCommand(command.name, command.options);
+                break;
+        }
+    }
     //
     destroy() {
         this.destroyed.next();
@@ -1540,21 +1541,14 @@ class AXPEntityMasterSingleViewModel {
         //****************** Beardcrumbs ******************//
         this.beardcrumbs = computed(() => {
             return [
-                {
-                    title: this.translateService.translateSync('entity.home'),
-                    icon: 'fa-solid fa-home ax-text-xs ax-me-2',
-                    url: [`/${this.session.application?.name}`],
-                },
                 {
                     title: this.entityDef.formats.plural ?? this.entityDef.formats.individual,
-                    url: [
-                        `/${this.session.application?.name}`,
-                        'm',
-                        `${this.entityDef.module}`,
-                        'e',
-                        `${this.entityDef.name}`,
-                        'list',
-                    ],
+                    command: {
+                        name: 'navigate',
+                        options: {
+                            path: `/${this.session.application?.name}/m/${this.entityDef.module}/e/${this.entityDef.name}/list`,
+                        },
+                    },
                 },
                 {
                     title: this.title(),
@@ -1609,6 +1603,20 @@ class AXPEntityMasterSingleViewModel {
             }
         }
     }
+    async execute(command) {
+        switch (command?.name) {
+            case 'navigate':
+                await this.workflow.execute('navigate', {
+                    options: {
+                        path: command.options?.['path'],
+                    },
+                });
+                break;
+            default:
+                this.executeCommand(command.name, command.options);
+                break;
+        }
+    }
     //
     //
     destroy() {
@@ -1767,7 +1775,7 @@ class AXPEntitySearchDefinitionProvider {
     }
 }
 
-class AXPLookupWidgetViewComponent extends AXPWidgetComponent {
+class AXPLookupWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.formatService = inject(AXFormatService);
@@ -1798,7 +1806,6 @@ class AXPLookupWidgetViewComponent extends AXPWidgetComponent {
         });
     }
     async extractItem(item) {
-        debugger;
         if (typeof item == 'object') {
             return {
                 id: item[this.valueField()],
@@ -1913,7 +1920,6 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
         }
     }
     async handleSelectedRowsChange(rows) {
-        debugger;
         this.selectedItems.set(rows);
     }
     handleChangeSearchValue(e) {
@@ -2201,7 +2207,7 @@ class AXPLookupWidgetSelectorViewModel {
     }
 }
 
-class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
+class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.injector = inject(Injector);
@@ -2225,12 +2231,17 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         this.isOpen = signal(false);
         this.vm = signal(null);
         this.placeholder = computed(() => {
-            return (this.selectedItems().length ? null : this.translateService.translateSync('widget.lookup.search') + this.vm()?.inlineFiltersPlaceholders().join(', '));
+            return this.selectedItems().length
+                ? ''
+                : this.translateService.translateSync('widget.lookup.search') + this.vm()?.inlineFiltersPlaceholders().join(', ');
         });
         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(), { parentFilters: this.filter, allowMultiple: this.multiple() }));
+            this.vm.set(new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef(), {
+                parentFilters: this.filter,
+                allowMultiple: this.multiple(),
+            }));
         });
         this.#efValue = effect(() => {
             if (this.getValue()) {
@@ -2247,12 +2258,11 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
             const rawValue = this.getValue();
             const values = castArray(rawValue);
             if (this.multiple()) {
-                console.log(values);
-                const items = await Promise.all(values.map(value => byKey(value)));
+                const items = await Promise.all(values.map((value) => byKey(extractValue(value, this.valueField()))));
                 this.setItems(items);
             }
             else {
-                const item = await byKey(values[0]);
+                const item = await byKey(extractValue(values[0], this.valueField()));
                 this.setItems(item);
             }
         }
@@ -2271,7 +2281,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
                 vm: new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef(), {
                     customFilter: this.customFilter(),
                     parentFilters: this.filter,
-                    allowMultiple: this.multiple()
+                    allowMultiple: this.multiple(),
                 }),
                 searchTerm: this.searchTerm(),
                 initialSelectedItems: this.selectedItems(),
@@ -2291,18 +2301,16 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         }
     }
     handleOnBlur(e) {
-        const com = e.component;
-        const input = e.htmlElement.querySelector('input');
         setTimeout(() => {
             if (!this.isOpen()) {
-                input.value = '';
-                this.searchTerm.set(null);
+                this.clearInput();
             }
         }, 100);
     }
-    async handleKeyDown(e) {
+    async handleKeyUp(e) {
         const keyEvent = e.nativeEvent;
-        const value = this.searchTerm()?.trim();
+        const value = this.textbox()?.inputValue();
+        this.searchTerm.set(value);
         if ((keyEvent.code == 'Enter' || keyEvent.code == 'NumpadEnter') && value) {
             this.isLoading.set(true);
             const result = await this.vm()?.find(value);
@@ -2314,6 +2322,9 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
             }
             this.isLoading.set(false);
         }
+        if (keyEvent.code == 'ArrowDown') {
+            this.showSelector();
+        }
     }
     setItems(items) {
         if (!items) {
@@ -2321,10 +2332,10 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         }
         //
         items = castArray(items);
-        this.searchTerm.set(null);
+        this.clearInput();
         this.selectedItems.set(items);
         //
-        const values = items.map(item => get(item, this.valueField()));
+        const values = items.map((item) => get(item, this.valueField()));
         //
         this.setValue(values);
         //
@@ -2334,12 +2345,12 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
             exposeValue.forEach((i) => {
                 if (typeof i == 'string') {
                     //const values = items.map(item => get(item, this.expose()));
-                    const values = items.map(item => set({}, this.expose(), get(item, this.expose())));
+                    const values = items.map((item) => set({}, this.expose(), get(item, this.expose())));
                     this.contextService.update(i, values);
                 }
                 else {
                     // extract data from item by source path and set context by target path
-                    const values = items.map(item => set({}, i.source, get(item, i.source)));
+                    const values = items.map((item) => set({}, i.source, get(item, i.source)));
                     this.contextService.update(i.target, values);
                 }
             });
@@ -2350,19 +2361,24 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
     }
     clear() {
         this.setValue(null);
-        this.searchTerm.set('');
+        this.clearInput();
         this.selectedItems.set([]);
     }
+    clearInput() {
+        this.textbox()?.inputValue.set('');
+        this.searchTerm.set('');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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: `
     <ax-tag-box
-      [tags]="selectedItems()"
+      [ngModel]="selectedItems()"
       [textField]="textField()"
       [valueField]="valueField()"
-      (onValueChanged)="handleValueChange($event)"
-      [placeholder]="placeholder()"
+      (onValueChanged)="handleValueChange($event)"    
+      [placeholder]="placeholder() | translate | async"
       [addOnEnter]="false"
-      (onKeyUp)="handleKeyDown($event)"
+      [addOnComma]="false"
+      (onKeyUp)="handleKeyUp($event)"
       (onBlur)="handleOnBlur($event)"
     >
       @for (validation of validationRules(); track $index) {
@@ -2371,8 +2387,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         [message]="validation.options?.message"
         [options]="validation.options"
       ></ax-validation-rule>
-      }
-      @if(selectedItems().length > 1) {
+      } @if(selectedItems().length > 1) {
       <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
       }
 
@@ -2386,9 +2401,9 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         </ax-button>
       </ax-suffix>
     </ax-tag-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: 
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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: 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-subtitle, 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: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "showRemoveButton", "readonlyField", "allowDuplicateValues", "tags", "inputValue"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "tagsChange", "inputValueChange"] }], 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: 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-subtitle, 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"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i7$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
@@ -2396,13 +2411,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: 'axp-lookup-widget-edit',
                     template: `
     <ax-tag-box
-      [tags]="selectedItems()"
+      [ngModel]="selectedItems()"
       [textField]="textField()"
       [valueField]="valueField()"
-      (onValueChanged)="handleValueChange($event)"
-      [placeholder]="placeholder()"
+      (onValueChanged)="handleValueChange($event)"    
+      [placeholder]="placeholder() | translate | async"
       [addOnEnter]="false"
-      (onKeyUp)="handleKeyDown($event)"
+      [addOnComma]="false"
+      (onKeyUp)="handleKeyUp($event)"
       (onBlur)="handleOnBlur($event)"
     >
       @for (validation of validationRules(); track $index) {
@@ -2411,8 +2427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         [message]="validation.options?.message"
         [options]="validation.options"
       ></ax-validation-rule>
-      }
-      @if(selectedItems().length > 1) {
+      } @if(selectedItems().length > 1) {
       <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
       }
 
@@ -2437,7 +2452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXLoadingModule,
                         AXValidationModule,
                         AXFormModule,
-                        AXTagBoxModule
+                        AXTagBoxModule,
+                        AXTranslationModule,
                     ],
                 }]
         }] });
@@ -2467,26 +2483,26 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPLookupWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `
-  <div class="ax-flex ax-gap-1">
-   @for (item of internalValue(); track $index) {
-    <ax-badge [text]="item[this.textField]" color="primary"></ax-badge>
-    }
-  </div>
+    <div class="ax-flex ax-gap-1">
+      @for (item of internalValue(); track $index) {
+      <ax-badge [text]="item[this.textField]" color="primary"></ax-badge>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-  <div class="ax-flex ax-gap-1">
-   @for (item of internalValue(); track $index) {
-    <ax-badge [text]="item[this.textField]" color="primary"></ax-badge>
-    }
-  </div>
+    <div class="ax-flex ax-gap-1">
+      @for (item of internalValue(); track $index) {
+      <ax-badge [text]="item[this.textField]" color="primary"></ax-badge>
+      }
+    </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXBadgeModule],
-                    inputs: ['rawValue']
+                    inputs: ['rawValue'],
                 }]
         }] });
 
@@ -2498,7 +2514,8 @@ var lookupWidgetColumn_component = /*#__PURE__*/Object.freeze({
 const AXPLookupWidget = {
     name: 'lookup-editor',
     title: 'Lookup',
-    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    categories: [],
+    groups: [AXPWidgetGroupEnum.EntityWidget],
     defaultFilterWidgetName: 'lookup-filter',
     type: 'editor',
     properties: [
@@ -2550,7 +2567,7 @@ const AXPLookupWidget = {
     },
 };
 
-class AXPTagableBoxWidgetColumnComponent extends AXPWidgetComponent {
+class AXPTagableBoxWidgetColumnComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
@@ -2608,7 +2625,7 @@ var tagableBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
     AXPTagableBoxWidgetColumnComponent: AXPTagableBoxWidgetColumnComponent
 });
 
-class AXPTagableBoxWidgetEditComponent extends AXPWidgetComponent {
+class AXPTagableBoxWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.entityResolver = inject(AXPEntityResolver);
@@ -2684,9 +2701,9 @@ class AXPTagableBoxWidgetEditComponent extends AXPWidgetComponent {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { 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: 
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { 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: 
                 //  AXTagBoxModule,
-                AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                AXSelectBoxModule }, { kind: "component", type: i5$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -2755,7 +2772,7 @@ var tagableBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPTagableBoxWidgetEditComponent: AXPTagableBoxWidgetEditComponent
 });
 
-class AXPTagableBoxWidgetFilterComponent extends AXPWidgetComponent {
+class AXPTagableBoxWidgetFilterComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTagableBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2774,7 +2791,7 @@ var tagableBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
     AXPTagableBoxWidgetFilterComponent: AXPTagableBoxWidgetFilterComponent
 });
 
-class AXPTagableBoxWidgetPrintComponent extends AXPWidgetComponent {
+class AXPTagableBoxWidgetPrintComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
@@ -2840,7 +2857,7 @@ var tagableBoxWidgetPrint_component = /*#__PURE__*/Object.freeze({
     AXPTagableBoxWidgetPrintComponent: AXPTagableBoxWidgetPrintComponent
 });
 
-class AXPTagableBoxWidgetViewComponent extends AXPWidgetComponent {
+class AXPTagableBoxWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
@@ -2918,7 +2935,7 @@ const AXPTagableBoxWidget = {
     },
 };
 
-class AXPWidgetSelectorWidgetEditComponent extends AXPWidgetComponent {
+class AXPWidgetSelectorWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.popupService = inject(AXPopupService);
@@ -2982,7 +2999,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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "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-subtitle, 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", "mode"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, decorators: [{
             type: Component,
@@ -3031,7 +3048,7 @@ var widgetSelectorWidgetEdit_component = /*#__PURE__*/Object.freeze({
     AXPWidgetSelectorWidgetEditComponent: AXPWidgetSelectorWidgetEditComponent
 });
 
-class AXPWidgetSelectorWidgetViewComponent extends AXPWidgetComponent {
+class AXPWidgetSelectorWidgetViewComponent extends AXPValueWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetSelectorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPWidgetSelectorWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `{{ getValue()?.title }}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }