@acorex/platform 18.1.6 → 18.2.1

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

@@ -5,10 +5,11 @@ 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, afterNextRender, computed, Injector, Component, ChangeDetectionStrategy, Input, EventEmitter, model, effect, Output, ChangeDetectorRef, ViewChild, input, ViewContainerRef, Directive, NgModule, Optional, Inject } from '@angular/core';
+import { signal, Injectable, InjectionToken, inject, ElementRef, afterNextRender, computed, effect, Injector, Component, ChangeDetectionStrategy, Input, EventEmitter, model, 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';
+import { convertArrayToDataSource, AXDataSource } from '@acorex/components/common';
 import { AXDataTableColumnComponent } from '@acorex/components/data-table';
 
 class AXPLayoutElement {
@@ -22,12 +23,12 @@ class AXPLayoutBuilderService {
         this.variables$ = signal({});
         this.functions$ = signal({});
         this.onChanged = new Subject();
+        this.onRefresh = new Subject();
         this.debouncers = {};
         this.debouncerSubscriptions = {};
         this.widgets = new Map();
         this.context = this.context$.asReadonly();
     }
-    ;
     get variables() {
         return this.variables$();
     }
@@ -36,13 +37,12 @@ class AXPLayoutBuilderService {
     }
     initial(value) {
         this.context$.set(value);
-        // TODO: check performance
-        this.onChanged.next({
-            oldValue: null,
-            newValue: null,
-            data: this.context(),
-            init: true
-        });
+        this.refresh();
+    }
+    refresh() {
+        setTimeout(() => {
+            this.onRefresh.next();
+        }, 0);
     }
     setVariables(...args) {
         if (args.length == 0)
@@ -50,7 +50,7 @@ class AXPLayoutBuilderService {
         else if (args.length == 1)
             this.variables$.set(args[0]);
         else if (args.length == 2) {
-            this.variables$.update(v => set(v, args[0], args[1]));
+            this.variables$.update((v) => set(v, args[0], args[1]));
         }
     }
     setFunctions(...args) {
@@ -59,7 +59,7 @@ class AXPLayoutBuilderService {
         else if (args.length == 1)
             this.functions$.set(args[0]);
         else if (args.length == 2) {
-            this.functions$.update(v => set(v, args[0], args[1]));
+            this.functions$.update((v) => set(v, args[0], args[1]));
         }
     }
     setValue(path, value, init = false) {
@@ -70,19 +70,16 @@ class AXPLayoutBuilderService {
             // Create a new Subject for debouncing if it doesn't exist
             this.debouncers[path] = new Subject();
             // Subscribe to the subject with debounceTime
-            this.debouncerSubscriptions[path] =
-                this.debouncers[path]
-                    .pipe(debounceTime(150))
-                    .subscribe(({ value, init }) => {
-                    // Only emit onChanged event after debounce time
-                    this.onChanged.next({
-                        oldValue: oldValue,
-                        newValue: value,
-                        data: this.context(),
-                        path,
-                        init
-                    });
+            this.debouncerSubscriptions[path] = this.debouncers[path].pipe(debounceTime(150)).subscribe(({ value, init }) => {
+                // Only emit onChanged event after debounce time
+                this.onChanged.next({
+                    oldValue: oldValue,
+                    newValue: value,
+                    data: this.context(),
+                    path,
+                    init,
                 });
+            });
         }
         // Update context immediately
         this.context$.update((ctx) => set(clone(ctx), path, value));
@@ -148,6 +145,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }] });
 
+const AXP_WIDGET_DATASOURCE_PROVIDER = new InjectionToken('AXP_WIDGET_DATASOURCE_PROVIDER');
+class AXPWidgetDataSourceProviderService {
+    constructor() {
+        this.providers = inject(AXP_WIDGET_DATASOURCE_PROVIDER, { optional: true });
+    }
+    async items() {
+        const items = [];
+        if (Array.isArray(this.providers)) {
+            for (const provider of this.providers) {
+                items.push(...(await provider.items()));
+            }
+        }
+        return items;
+    }
+    async get(name) {
+        return (await this.items()).find((c) => c.name == name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDataSourceProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDataSourceProviderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPWidgetDataSourceProviderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const AXPWidgetsCatalog = {
     checkbox: 'checkbox-editor',
     color: 'color-editor',
@@ -287,7 +309,6 @@ class AXPWidgetComponent extends AXPLayoutElement {
         this.initRender();
     }
     initRender() {
-        // debugger;
         this._isValueWidget = this.config.properties?.some((c) => c.name == 'path') ?? false;
         if (this.isValueWidget()) {
             this.detectFullPath();
@@ -370,6 +391,54 @@ class AXPContainerWidgetComponent extends AXPWidgetComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPContainerWidgetComponent, decorators: [{
             type: Injectable
         }] });
+class AXPDataListWidgetComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.dataService = inject(AXPWidgetDataSourceProviderService);
+        this.rawDataSource = computed(() => this.options()['dataSource']);
+        this.dataSource = signal(convertArrayToDataSource([]));
+        this.items = computed(() => this.options()['items'] ?? []);
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
+        this.rf = effect(() => {
+            const rawValue = this.options()['dataSource'];
+            // static  datasource class
+            if (rawValue instanceof AXDataSource) {
+                this.dataSource.set(rawValue);
+            } // static array datasource
+            else if (Array.isArray(rawValue)) {
+                this.dataSource.set(convertArrayToDataSource(rawValue));
+            } // resolve data source by name
+            else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
+                const name = typeof rawValue == 'object' ? rawValue[this.valueField()] : rawValue;
+                this.dataService.get(name).then((c) => {
+                    if (this.mode == 'designer' && c?.samples?.length) {
+                        this.dataSource.set(convertArrayToDataSource(c.samples));
+                    }
+                    else {
+                        const ds = c?.source();
+                        if (ds) {
+                            this.dataSource.set(ds);
+                        }
+                        // empty datasource
+                        else {
+                            this.dataSource.set(convertArrayToDataSource([]));
+                        }
+                    }
+                });
+            }
+            // empty datasource
+            else {
+                this.dataSource.set(convertArrayToDataSource([]));
+            }
+        }, { allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDataListWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
 class AXPColumnWidgetComponent {
     constructor() {
         this.token = inject(AXP_WIDGET_COLUMN_TOKEN);
@@ -694,17 +763,10 @@ class AXPWidgetContainerComponent {
     constructor() {
         this.onChanged = new EventEmitter();
         this.context = model({});
-        this.init = false;
         this.unsubscriber = inject(AXUnsubscriber);
         this.builderService = inject(AXPLayoutBuilderService);
         this.ef = effect(() => {
-            //console.log('effect', this.context(), this.init);
             this.builderService.initial(this.context());
-            // if (!this.init) {
-            //   this.init = true;
-            // } else {
-            //   this.builderService.refresh();
-            // }
         }, { allowSignalWrites: true });
     }
     set variables(v) {
@@ -864,9 +926,7 @@ class AXPWidgetRendererDirective {
         this.expressionCache = new Map();
         this.expressionEvaluators = new Map();
         this.scope = null;
-        this.builderService.onChanged
-            .pipe(this.unsubscriber.takeUntilDestroy)
-            .subscribe(async (e) => {
+        this.builderService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async (e) => {
             if ((await this.updateOptionsBasedOnContext()) > 0) {
                 this.applyOptions();
             }
@@ -874,23 +934,25 @@ class AXPWidgetRendererDirective {
                 await this.updateValueBasedOnFormula();
             }
         });
+        this.builderService.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
+            if ((await this.updateOptionsBasedOnContext()) > 0) {
+                this.applyOptions();
+            }
+        });
     }
     // Detect input changes
-    async ngOnChanges(changes) {
+    ngOnChanges(changes) {
         if (changes['mode'] || changes['node']) {
             // Check if either 'mode' or 'node' has changed
-            await this.rerenderComponent();
+            this.rerenderComponent();
         }
     }
-    async rerenderComponent() {
-        // Destroy the existing component if it exists
-        if (this.componentRef) {
-            this.componentRef.destroy();
-        }
-        this.viewContainerRef.clear();
+    rerenderComponent() {
         this.isLoading.set(false);
         // Call loadComponent to create and render the component
-        await this.loadComponent();
+        setTimeout(async () => {
+            await this.loadComponent();
+        });
     }
     ngOnDestroy() {
         if (this.componentRef) {
@@ -898,14 +960,20 @@ class AXPWidgetRendererDirective {
         }
     }
     async loadComponent() {
-        if (this.isLoading())
+        if (this.isLoading()) {
             return;
+        }
         this.isLoading.set(true);
+        // Destroy the existing component if it exists
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
         this.viewContainerRef.clear();
+        //
         const widget = this.widgetRegistery.resolve(this.node().type);
         //
-        const props = widget?.components[this.mode()]?.properties
-            ?.filter((c) => c.schema.defaultValue)
+        const props = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]
+            ?.filter((c) => c.schema.defaultValue != null)
             .map((c) => ({ [c.name]: c.schema.defaultValue }))
             .reduce((acc, curr) => {
             return { ...acc, ...curr };
@@ -957,15 +1025,18 @@ class AXPWidgetRendererDirective {
             return false;
     }
     preprocessAndInitialOptions(obj, pathPrefix = '') {
-        if (!obj)
+        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))) {
+            else if (typeof value === 'object' &&
+                value !== null &&
+                (value.constructor === Object || Array.isArray(value))) {
                 // Recursively handle nested objects
                 this.preprocessAndInitialOptions(value, currentPath);
             }
@@ -978,11 +1049,12 @@ class AXPWidgetRendererDirective {
         });
     }
     async updateOptionsBasedOnContext() {
-        const updates = [];
-        for (let [path, evaluator] of this.expressionEvaluators) {
+        const updatePromises = Array.from(this.expressionEvaluators).map(async ([path, evaluator]) => {
             const newValue = await evaluator();
-            updates.push({ path, newValue });
-        }
+            return { path, newValue };
+        });
+        // Wait for all evaluators to complete
+        const updates = await Promise.all(updatePromises);
         // Apply updates to mergedOptions
         if (updates.length > 0) {
             this.mergedOptions.update((o) => {
@@ -1232,5 +1304,5 @@ const AXP_WIDGETS_GROUPS = [
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AXPColumnWidgetComponent, AXPContainerWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutElement, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetDataSourceProviderService, 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_DATASOURCE_PROVIDER, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createSelectProperty, createStringProperty };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map