@acorex/platform 20.4.2 → 20.5.0-next.1

package/fesm2022/acorex-platform-layout-widget-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { computed, signal, Injectable, InjectionToken, inject, ElementRef, effect, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule, createComponent } from '@angular/core';
+import { computed, signal, Injectable, InjectionToken, inject, ElementRef, effect, untracked, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule, createComponent } from '@angular/core';
 import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
 import { setSmart, AXPDataSourceDefinitionProviderService, extractValue, getSmart, AXPExpressionEvaluatorService } from '@acorex/platform/core';
 import { cloneDeep, isEqual, get, set, merge, isNil, isUndefined, isObjectLike, sum, isEmpty, isString } from 'lodash-es';
@@ -160,6 +160,9 @@ class AXPWidgetCoreElement {
     api() {
         return {};
     }
+    actions() {
+        return [];
+    }
 }
 class AXPWidgetCoreService {
     constructor() {
@@ -173,6 +176,7 @@ class AXPWidgetCoreService {
         this.isBusy = computed(() => {
             return [AXPPageStatus.Processing, AXPPageStatus.Submitting, AXPPageStatus.Rendering].includes(this.status());
         }, ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
+        this.registeredWidgetsCount = signal(0, ...(ngDevMode ? [{ debugName: "registeredWidgetsCount" }] : []));
     }
     get variables() {
         return this.variables$();
@@ -182,6 +186,7 @@ class AXPWidgetCoreService {
     }
     updateStatus() {
         this.status$.update(() => this.detectStatus());
+        this.registeredWidgetsCount.set(this.widgets.size);
     }
     detectStatus() {
         const statuses = Array.from(this.widgets.values()).map((c) => c.status());
@@ -269,6 +274,12 @@ class AXPWidgetCoreService {
             }
         });
     }
+    /**
+     * Returns a list of registered widget ids (names).
+     */
+    listRegisteredWidgetNames() {
+        return Array.from(this.widgets.keys());
+    }
     ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetCoreService }); }
@@ -377,6 +388,7 @@ const AXPWidgetsCatalog = {
     entityList: 'entity-list',
     documentUploader: 'document-uploader',
     signatureList: 'signature-list',
+    stepWizard: 'step-wizard',
 };
 
 function cloneProperty(property, values) {
@@ -536,6 +548,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             type: Injectable
         }] });
 class AXPLayoutBaseWidgetComponent extends AXPBaseWidgetComponent {
+    //TODO change this approach
+    ngOnInit() {
+        if (this.name && !(this instanceof AXPValueWidgetComponent)) {
+            this.layoutService.registerWidget(this.name, this);
+        }
+        super.ngOnInit();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
 }
@@ -666,60 +685,64 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
         this.rf = effect(async () => {
             const rawValue = this.options()['dataSource'];
             // static  datasource class
-            if (rawValue instanceof AXDataSource) {
-                this.dataSource.set(rawValue);
-            }
-            // static array datasource
-            else if (Array.isArray(rawValue)) {
-                const ds = new AXDataSource({
-                    key: this.valueField(),
-                    pageSize: 10,
-                    load: async (e) => {
-                        const raw = this.options()['dataSource'];
-                        const skip = e.skip ?? 0;
-                        const take = e.take ?? raw.length;
-                        return {
-                            items: raw.slice(skip, skip + take),
-                            total: raw.length,
-                        };
-                    },
-                    byKey: (key) => {
-                        const raw = this.options()['dataSource'];
-                        const item = raw.filter((c) => c[this.valueField()] == key);
-                        return Promise.resolve(item[0]);
-                    },
-                });
-                this.dataSource.set(ds);
-            }
-            // resolve data source by name
-            else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
-                const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
-                const c = await this.dataService.get(id);
-                if (this.mode == 'designer' && c?.samples?.length) {
-                    this.dataSource.set(convertArrayToDataSource(c.samples, {
-                        key: this.valueField(),
-                        pageSize: 500,
-                    }));
-                }
-                else {
-                    const ds = c?.source();
-                    if (ds && ds instanceof Promise) {
-                        const d = await ds;
-                        this.dataSource.set(d);
+            untracked(async () => {
+                if (!isEqual(this.options()['dataSource'].config, this.dataSource().config)) {
+                    if (rawValue instanceof AXDataSource) {
+                        this.dataSource.set(rawValue);
                     }
-                    else if (ds) {
+                    // static array datasource
+                    else if (Array.isArray(rawValue)) {
+                        const ds = new AXDataSource({
+                            key: this.valueField(),
+                            pageSize: 10,
+                            load: async (e) => {
+                                const raw = this.options()['dataSource'];
+                                const skip = e.skip ?? 0;
+                                const take = e.take ?? raw.length;
+                                return {
+                                    items: raw.slice(skip, skip + take),
+                                    total: raw.length,
+                                };
+                            },
+                            byKey: (key) => {
+                                const raw = this.options()['dataSource'];
+                                const item = raw.filter((c) => c[this.valueField()] == key);
+                                return Promise.resolve(item[0]);
+                            },
+                        });
                         this.dataSource.set(ds);
                     }
+                    // resolve data source by name
+                    else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
+                        const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
+                        const c = await this.dataService.get(id);
+                        if (this.mode == 'designer' && c?.samples?.length) {
+                            this.dataSource.set(convertArrayToDataSource(c.samples, {
+                                key: this.valueField(),
+                                pageSize: 500,
+                            }));
+                        }
+                        else {
+                            const ds = c?.source();
+                            if (ds && ds instanceof Promise) {
+                                const d = await ds;
+                                this.dataSource.set(d);
+                            }
+                            else if (ds) {
+                                this.dataSource.set(ds);
+                            }
+                            // empty datasource
+                            else {
+                                this.dataSource.set(convertArrayToDataSource([]));
+                            }
+                        }
+                    }
                     // empty datasource
                     else {
                         this.dataSource.set(convertArrayToDataSource([]));
                     }
                 }
-            }
-            // empty datasource
-            else {
-                this.dataSource.set(convertArrayToDataSource([]));
-            }
+            });
         }, ...(ngDevMode ? [{ debugName: "rf" }] : []));
         this.effect2 = effect(async () => {
             const value = this.getValue();