@acorex/platform 18.1.2 → 18.1.4

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

@@ -1,5 +1,5 @@
 import { AXFormatService } from '@acorex/core/format';
-import { cloneDeep, set, merge, get } from 'lodash-es';
+import { cloneDeep, set, merge, get, sortBy } from 'lodash-es';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, computed, signal, Injector, Component, ChangeDetectionStrategy, DestroyRef, ViewChild, NgModule } from '@angular/core';
 import * as i1$3 from '@acorex/platform/workflow';
@@ -16,7 +16,7 @@ import { Subject, takeUntil } from 'rxjs';
 import * as i8 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import * as i7 from '@acorex/platform/layout/builder';
-import { AXPWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_GROUP, AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
+import { AXPWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_GROUP, AXPWidgetsCatalog, AXPWidgetRegistryService } from '@acorex/platform/layout/builder';
 import { RouterModule, ROUTES } from '@angular/router';
 import * as i1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
@@ -41,7 +41,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 { AXP_DISABLED_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP } from '@acorex/platform/widgets';
+import { AXP_DISABLED_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_NAME_PROPERTY } from '@acorex/platform/widgets';
+import { AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/designer';
 
 const AXP_ENTITY_CONFIG_TOKEN = new InjectionToken('AXP_ENTITY_CONFIG_TOKEN');
 const AXP_ENTITY_DEFINITION_LOADER = new InjectionToken('AXP_ENTITY_DEFINITION_LOADER');
@@ -1600,7 +1601,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         this.isOpen = signal(false);
         this.vm = signal(null);
         this.placeholder = computed(() => {
-            return this.translateService.translateSync('widget.lookup.search') + this.vm()?.inlineFiltersPlaceholders().join(', ');
+            return (this.translateService.translateSync('widget.lookup.search') + this.vm()?.inlineFiltersPlaceholders().join(', '));
         });
     }
     async ngOnInit() {
@@ -1695,21 +1696,30 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         const text = this.formatService.format(this.textField(), 'string', item);
         this.displayText.set(text);
         this.setValue(item.id);
+        // extract data from valueField and set context by expose path
         if (this.expose()) {
             if (typeof this.expose() == 'string') {
                 this.builderService.setValue(this.expose(), item);
             }
+            // support multiple expose items
             else if (Array.isArray(this.expose())) {
                 this.expose().forEach((i) => {
                     if (typeof i == 'string') {
                         this.builderService.setValue(i, item);
                     }
                     else {
+                        // extract data from item by source path and set context by target path
                         const key = get(item, i.source);
                         this.builderService.setValue(i.target, key);
                     }
                 });
             }
+            // extract data from item by source path and set context by target path
+            else if (typeof this.expose() == 'object') {
+                const i = this.expose();
+                const key = get(item, i.source);
+                this.builderService.setValue(i.target, key);
+            }
         }
     }
     handleClearClick() {
@@ -1731,7 +1741,11 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
       (onBlur)="handleOnBlur($event)"
     >
       @for (validation of validationRules; track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
       }
       <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
 
@@ -1759,7 +1773,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
       (onBlur)="handleOnBlur($event)"
     >
       @for (validation of validationRules; track $index) {
-      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
       }
       <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
 
@@ -1918,6 +1936,157 @@ const AXPLookupWidget = {
     },
 };
 
+class AXPWidgetSelectorWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.widgetRegisteryService = inject(AXPWidgetRegistryService);
+        this.searchTerm = signal(null);
+        this.isOpen = signal(false);
+        this.textField = signal('');
+        this.displayText = computed(() => this.getValue()?.title || '');
+        this.selectedWidgetNode = signal(null);
+        this.selectedItem = signal(null);
+        this.placeholder = computed(() => this.options()['placeholder'] ?? '');
+        this.loading = computed(() => this.options()['loading'] ?? false);
+        this.validationRules = computed(() => this.options()['validationRules']);
+    }
+    ngAfterViewInit() {
+        if (this.getValue()) {
+            this.selectedWidgetNode.set(this.getValue());
+        }
+    }
+    async showSelector() {
+        const com = await import('@acorex/platform/layout/designer').then((c) => c.AXPDesignerWidgetPickerComponent);
+        const result = await this.popupService.open(com, {
+            title: 'Widget Gallery',
+            size: 'md',
+            closeButton: true,
+            data: {
+                widgets: sortBy(this.widgetRegisteryService.all().filter((c) => c.visible != false), (c) => c.title),
+            },
+        });
+        if ((result.data?.widgets ?? []).length) {
+            const selected = result.data?.widgets;
+            const selectedNode = this.convertWidgetConfigToNode(selected[0]);
+            this.selectedWidgetNode.set(selectedNode);
+        }
+    }
+    convertWidgetConfigToNode(config) {
+        return {
+            type: config.name,
+        };
+    }
+    handleChangeWidget(e) {
+        const widget = this.widgetRegisteryService.resolve(e.values.type);
+        this.setValue({ title: widget?.title, ...e.values });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXPWidgetSelectorWidgetEditComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-text-box [ngModel]="displayText()" [placeholder]="placeholder()" [readonly]="true">
+      @for (validation of validationRules(); track $index) {
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
+      }
+      <ax-suffix>
+        <ax-button color="ghost" look="twotone" (onClick)="showSelector()">
+          <ax-icon icon="far fa-search"> </ax-icon>
+        </ax-button>
+      </ax-suffix>
+    </ax-text-box>
+    @if(selectedWidgetNode()){
+    <axp-widget-property-viewer [widget]="selectedWidgetNode()!" (onChanged)="handleChangeWidget($event)">
+    </axp-widget-property-viewer>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <ax-text-box [ngModel]="displayText()" [placeholder]="placeholder()" [readonly]="true">
+      @for (validation of validationRules(); track $index) {
+      <ax-validation-rule
+        [rule]="validation.rule"
+        [message]="validation.options?.message"
+        [options]="validation.options"
+      ></ax-validation-rule>
+      }
+      <ax-suffix>
+        <ax-button color="ghost" look="twotone" (onClick)="showSelector()">
+          <ax-icon icon="far fa-search"> </ax-icon>
+        </ax-button>
+      </ax-suffix>
+    </ax-text-box>
+    @if(selectedWidgetNode()){
+    <axp-widget-property-viewer [widget]="selectedWidgetNode()!" (onChanged)="handleChangeWidget($event)">
+    </axp-widget-property-viewer>
+    }
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXSelectBoxModule,
+                        AXTextBoxModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXValidationModule,
+                        AXFormModule,
+                        AXPWidgetPropertyViewerComponent,
+                    ],
+                }]
+        }], propDecorators: { textbox: [{
+                type: ViewChild,
+                args: [AXTextBoxComponent]
+            }] } });
+
+var widgetSelectorWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPWidgetSelectorWidgetEditComponent: AXPWidgetSelectorWidgetEditComponent
+});
+
+class AXPWidgetSelectorWidgetViewComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetSelectorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetSelectorWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `{{ getValue()?.title }}`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                }]
+        }] });
+
+var widgetSelectorWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPWidgetSelectorWidgetViewComponent: AXPWidgetSelectorWidgetViewComponent
+});
+
+const AXPWidgetSelectorWidget = {
+    name: 'widget-selector',
+    title: 'Widget Selector',
+    group: AXP_WIDGETS_EDITOR_GROUP,
+    type: 'editor',
+    icon: 'fa-solid fa-square',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return widgetSelectorWidgetView_component; }).then((c) => c.AXPWidgetSelectorWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return widgetSelectorWidgetEdit_component; }).then((c) => c.AXPWidgetSelectorWidgetEditComponent),
+        },
+    },
+};
+
 const AXPEntityCreateEvent = createWorkFlowEvent('[Entity] Created!');
 class AXPEntityCreatePopupAction extends AXPWorkflowAction {
     constructor() {
@@ -2143,7 +2312,7 @@ class AXPEntityModule {
                 },
             }),
             AXPLayoutBuilderModule.forChild({
-                widgets: [AXPLookupWidget],
+                widgets: [AXPLookupWidget, AXPWidgetSelectorWidget],
             })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPEntityModule, decorators: [{
@@ -2171,7 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             },
                         }),
                         AXPLayoutBuilderModule.forChild({
-                            widgets: [AXPLookupWidget],
+                            widgets: [AXPLookupWidget, AXPWidgetSelectorWidget],
                         }),
                     ],
                     exports: [],