@acorex/platform 18.1.0 → 18.1.2

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

@@ -5,7 +5,7 @@ import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, inject, ElementRef, computed, afterNextRender, Injector, Component, ChangeDetectionStrategy, Input, EventEmitter, model, effect, Output, ChangeDetectorRef, ViewChild, NgModule, Optional, Inject } from '@angular/core';
+import { signal, Injectable, InjectionToken, inject, ElementRef, computed, afterNextRender, Injector, Component, ChangeDetectionStrategy, Input, EventEmitter, model, effect, Output, ChangeDetectorRef, ViewChild, input, ViewContainerRef, Directive, NgModule, Optional, Inject } from '@angular/core';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { set, get, isEqual, clone, merge, cloneDeep, isUndefined, sum } from 'lodash-es';
 import { Subject, debounceTime, filter } from 'rxjs';
@@ -143,9 +143,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }] });
 
+const AXPWidgetsCatalog = {
+    checkbox: 'checkbox-editor',
+    color: 'color-editor',
+    contact: 'contact-editor',
+    dateTime: 'date-time-editor',
+    email: 'email-editor',
+    largeText: 'large-text-editor',
+    link: 'link-editor',
+    number: 'number-editor',
+    password: 'password-editor',
+    phone: 'phone-editor',
+    richText: 'rich-text-editor',
+    select: 'select-editor',
+    selectionList: 'selection-list-editor',
+    text: 'text-editor',
+    toggle: 'toggle-editor',
+    blockLayout: 'block-layout',
+    pageLayout: 'page-layout',
+    repeaterLayout: 'repeater-layout',
+    textBlockLayout: 'text-block-layout',
+    file: 'file',
+    map: 'map',
+    gallery: 'gallery',
+    signature: 'signature',
+    buttonAction: 'button-action',
+    document: 'document-layout',
+    lookup: 'lookup-editor',
+    formField: 'form-field',
+    qrcode: 'qrcode',
+    grid: 'grid-layout',
+    gridItem: 'grid-item-layout',
+    gridRow: 'grid-row-layout',
+};
+
 function cloneProperty(property, values) {
     return merge(cloneDeep(property), values);
 }
+function createStringProperty(ctor) {
+    return {
+        name: ctor.name,
+        title: ctor.title,
+        group: ctor.group,
+        schema: {
+            dataType: 'string',
+            defaultValue: ctor.defaultValue,
+            interface: {
+                name: ctor.name,
+                path: ctor.path ?? ctor.name,
+                type: AXPWidgetsCatalog.text,
+            },
+        },
+        visible: ctor.visible ?? true,
+    };
+}
+function createBooleanProperty(ctor) {
+    return {
+        name: ctor.name,
+        title: ctor.title,
+        group: ctor.group,
+        schema: {
+            dataType: 'boolean',
+            defaultValue: ctor.defaultValue ?? false,
+            interface: {
+                name: ctor.name,
+                path: ctor.path ?? ctor.name,
+                type: AXPWidgetsCatalog.toggle,
+            },
+        },
+        visible: ctor.visible ?? true,
+    };
+}
+function createSelectProperty(ctor) {
+    return {
+        name: ctor.name,
+        title: ctor.title,
+        group: ctor.group,
+        schema: {
+            dataType: 'string',
+            defaultValue: Array.isArray(ctor.defaultValue)
+                ? ctor.defaultValue.map((item) => (typeof item === 'string' ? { id: item } : item))
+                : typeof ctor.defaultValue === 'string'
+                    ? { id: ctor.defaultValue, title: ctor.defaultValue }
+                    : ctor.defaultValue,
+            interface: {
+                name: ctor.name,
+                path: ctor.path ?? ctor.name,
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    dataSource: ctor.dataSource.map((item) => (typeof item === 'string' ? { id: item, title: item } : item)),
+                },
+            },
+        },
+        visible: ctor.visible ?? true,
+    };
+}
 const AXP_WIDGET_TOKEN = new InjectionToken('AXP_WIDGET_TOKEN');
 const AXP_WIDGET_COLUMN_TOKEN = new InjectionToken('AXP_WIDGET_COLUMN_TOKEN');
 class AXPWidgetComponent extends AXPLayoutElement {
@@ -741,7 +833,279 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 args: ['header']
             }] } });
 
-const COMPONENTS = [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent];
+class AXPWidgetRendererDirective {
+    constructor() {
+        this.parentNode = input();
+        this.index = input();
+        this.mode = input.required();
+        this.node = input.required();
+        this.mergedOptions = signal({});
+        this.injector = inject(Injector);
+        this.builderService = inject(AXPLayoutBuilderService);
+        this.widgetRegistery = inject(AXPWidgetRegistryService);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.isLoading = signal(true);
+        this.expressionCache = new Map();
+        this.expressionEvaluators = new Map();
+        this.scope = null;
+        this.builderService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async (e) => {
+            if ((await this.updateOptionsBasedOnContext()) > 0) {
+                this.applyOptions();
+            }
+            if (this.checkFormulaForUpdate(this.node().formula, e.path)) {
+                await this.updateValueBasedOnFormula();
+            }
+        });
+        //
+        effect(async () => {
+            await this.loadComponent();
+        }, { allowSignalWrites: true });
+    }
+    async loadComponent() {
+        this.isLoading.set(true);
+        this.viewContainerRef.clear();
+        const widget = this.widgetRegistery.resolve(this.node().type);
+        //
+        const props = widget?.components[this.mode()]?.properties
+            ?.filter((c) => c.schema.defaultValue)
+            .map((c) => ({ [c.name]: c.schema.defaultValue }))
+            .reduce((acc, curr) => {
+            return { ...acc, ...curr };
+        }, {});
+        //
+        this.mergedOptions.set(merge(props, this.node().options) || {});
+        this.preprocessAndInitialOptions(cloneDeep(this.node().options));
+        await this.updateOptionsBasedOnContext();
+        //
+        const tokenValue = {
+            node: this.node(),
+            options: this.mergedOptions(),
+            config: widget,
+        };
+        const token = Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: AXP_WIDGET_TOKEN,
+                    useValue: tokenValue,
+                },
+            ],
+        });
+        //
+        var com = await widget?.components[this.mode()]?.component();
+        this.instance = this.viewContainerRef.createComponent(com, { injector: token }).instance;
+        this.instance.parent = this.parentNode();
+        this.instance.index = this.index();
+        this.instance.mode = this.mode();
+        await this.updateValueBasedOnFormula();
+        await this.assignTriggers();
+        //
+        this.isLoading.set(false);
+    }
+    applyOptions() {
+        if (!this.instance)
+            return;
+        this.instance.setOptions(this.mergedOptions());
+    }
+    checkFormulaForUpdate(formula, path) {
+        if (formula) {
+            const regex = /context\.eval\('([^']+)'\)/g;
+            const matches = formula.match(regex);
+            const nodes = matches ? matches.map((match) => match.match(/'([^']+)'/)[1]) : [];
+            return nodes.includes(path);
+        }
+        else
+            return false;
+    }
+    preprocessAndInitialOptions(obj, pathPrefix = '') {
+        if (!obj)
+            return;
+        Object.entries(obj).forEach(([key, value]) => {
+            const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
+            if (typeof value === 'string' && value.includes('{{')) {
+                // Cache dynamic expression for later evaluation
+                this.expressionEvaluators.set(currentPath, () => this.evaluateExpression(value));
+            }
+            else if (typeof value === 'object' && value !== null && (value.constructor === Object || Array.isArray(value))) {
+                // Recursively handle nested objects
+                this.preprocessAndInitialOptions(value, currentPath);
+            }
+            else {
+                // Apply static values directly
+                this.mergedOptions.update((currentOptions) => {
+                    return set(currentOptions, currentPath, value);
+                });
+            }
+        });
+    }
+    async updateOptionsBasedOnContext() {
+        const updates = [];
+        for (let [path, evaluator] of this.expressionEvaluators) {
+            const newValue = await evaluator();
+            updates.push({ path, newValue });
+        }
+        // Apply updates to mergedOptions
+        if (updates.length > 0) {
+            this.mergedOptions.update((o) => {
+                const updatedOptions = { ...o };
+                updates.forEach(({ path, newValue }) => {
+                    // Set the new value in the updatedOptions object by path
+                    set(updatedOptions, path, newValue); // Assuming 'set' can handle paths like 'property.subproperty'
+                });
+                return updatedOptions;
+            });
+        }
+        return updates.length;
+    }
+    async updateValueBasedOnFormula() {
+        if (this.node().formula) {
+            const value = await this.evaluateExpression(this.node().formula);
+            this.instance.setValue(value);
+        }
+    }
+    async evaluateExpression(templateExpression) {
+        try {
+            // Check cache first, but cache the function for evaluation, not the evaluated value
+            if (!this.expressionCache.has(templateExpression)) {
+                const expressionMatch = templateExpression.match(/\{\{\s*(.*?)\s*\}\}/);
+                if (!expressionMatch) {
+                    throw Error(`No valid expression found in "${templateExpression}"`);
+                }
+                const expression = expressionMatch[1];
+                // Cache the evaluation function instead of the result
+                const scope = this.getGlobalScope();
+                const evaluationFunction = async () => {
+                    const sandbox = new Function('scope', `with (scope) { return (async function() { return ${expression}; })(); }`);
+                    return await sandbox(scope);
+                };
+                this.expressionCache.set(templateExpression, evaluationFunction);
+            }
+            // Retrieve the function from the cache and call it to evaluate the expression
+            const evaluate = this.expressionCache.get(templateExpression);
+            if (evaluate) {
+                const result = await evaluate();
+                return result;
+            }
+            else {
+                throw Error(`Failed to retrieve evaluation function for expression: "${templateExpression}"`);
+            }
+        }
+        catch (error) {
+            console.error('Error evaluating expression:', error);
+            return false;
+        }
+    }
+    getGlobalScope() {
+        if (this.scope)
+            return this.scope;
+        this.scope = {};
+        set(this.scope, 'context', this.getContextScope());
+        set(this.scope, 'events', this.getEventScope());
+        set(this.scope, 'widget', this.getWidgetScope());
+        set(this.scope, 'methods', this.getFunctionScope());
+        set(this.scope, 'vars', this.getVariablesScope());
+        return this.scope;
+    }
+    getContextScope() {
+        const scope = {};
+        set(scope, 'eval', (path) => this.builderService.getValue(path));
+        return scope;
+    }
+    getEventScope() {
+        const scope = {};
+        set(scope, 'context', (path) => this.builderService.onChanged.pipe(filter((c) => c.path == path)));
+        set(scope, 'from', (event) => get(this.instance.api(), event));
+        return scope;
+    }
+    getWidgetScope() {
+        const scope = {};
+        set(scope, 'call', (name, ...args) => {
+            this.instance.call(name, ...args);
+        });
+        set(scope, 'find', (id) => {
+            return this.builderService.getWidget(id)?.api();
+        });
+        return scope;
+    }
+    getFunctionScope() {
+        const scope = {};
+        set(scope, 'sum', (values) => {
+            return sum(values);
+        });
+        Object.entries(this.builderService.functions).forEach((i) => {
+            set(scope, i[0], (...args) => {
+                return i[1](...args);
+            });
+        });
+        return scope;
+    }
+    getVariablesScope() {
+        const scope = {};
+        set(scope, 'eval', (path) => get(this.builderService.variables, path));
+        return scope;
+    }
+    async assignTriggers() {
+        this.node().triggers?.forEach((t) => {
+            const event = this.evaluateTrigger(t.event);
+            event?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+                this.evaluateAction(t.action);
+            });
+        });
+    }
+    evaluateTrigger(templateExpression) {
+        try {
+            const expressionMatch = templateExpression.match(/\{\{\s*(.*?)\s*\}\}/);
+            if (!expressionMatch) {
+                throw Error(`No valid expression found in "${templateExpression}"`);
+            }
+            const expression = expressionMatch[1];
+            // Cache the evaluation function instead of the result
+            const scope = this.getGlobalScope();
+            const sandbox = new Function('scope', `with (scope) { return (  function() { return ${expression}; })(); }`);
+            return sandbox(scope);
+        }
+        catch (error) {
+            console.error('Error evaluating expression:', error);
+            return null;
+        }
+    }
+    evaluateAction(templateExpression) {
+        try {
+            const expressionMatch = templateExpression.match(/\{\{\s*(.*?)\s*\}\}/);
+            if (!expressionMatch) {
+                throw Error(`No valid expression found in "${templateExpression}"`);
+            }
+            const expression = expressionMatch[1];
+            // Cache the evaluation function instead of the result
+            const scope = this.getGlobalScope();
+            const sandbox = new Function('scope', `with (scope) {  ${expression} }`);
+            sandbox(scope);
+        }
+        catch (error) {
+            console.error('Error evaluating expression:', error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: AXUnsubscriber,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axp-widget-renderer]',
+                    providers: [
+                        {
+                            provide: AXUnsubscriber,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
+const COMPONENTS = [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective];
 class AXPLayoutBuilderModule {
     static forRoot(config) {
         return {
@@ -782,7 +1146,7 @@ class AXPLayoutBuilderModule {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
@@ -799,40 +1163,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     args: ['AXPLayoutBuilderModuleFactory']
                 }] }] });
 
-const AXPWidgetsCatalog = {
-    checkbox: 'checkbox-editor',
-    color: 'color-editor',
-    contact: 'contact-editor',
-    dateTime: 'date-time-editor',
-    email: 'email-editor',
-    largeText: 'large-text-editor',
-    link: 'link-editor',
-    number: 'number-editor',
-    password: 'password-editor',
-    phone: 'phone-editor',
-    richText: 'rich-text-editor',
-    select: 'select-editor',
-    selectionList: 'selection-list-editor',
-    text: 'text-editor',
-    toggle: 'toggle-editor',
-    blockLayout: 'block-layout',
-    pageLayout: 'page-layout',
-    repeaterLayout: 'repeater-layout',
-    textBlockLayout: 'text-block-layout',
-    file: 'file',
-    map: 'map',
-    gallery: 'gallery',
-    signature: 'signature',
-    buttonAction: 'button-action',
-    document: 'document-layout',
-    lookup: 'lookup-editor',
-    formField: 'form-field',
-    qrcode: 'qrcode',
-    grid: 'grid-layout',
-    gridItem: 'grid-item-layout',
-    gridRow: 'grid-row-layout',
-};
-
 const AXP_WIDGETS_EDITOR_GROUP = {
     name: 'editor',
     order: 2,
@@ -864,5 +1194,5 @@ const AXP_WIDGETS_GROUPS = [
  * Generated bundle index. Do not edit.
  */
 
-export { AXPColumnWidgetComponent, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutElement, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetRegistryService, AXPWidgetRendererComponent, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_ADVANCE_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXP_WIDGETS_GROUPS, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty };
+export { AXPColumnWidgetComponent, AXPContainerWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutElement, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetRegistryService, AXPWidgetRendererComponent, AXPWidgetRendererDirective, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_ADVANCE_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXP_WIDGETS_GROUPS, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createSelectProperty, createStringProperty };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map