@acorex/platform 20.0.23 → 20.1.0

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

@@ -50,15 +50,15 @@ class AXPLayoutElement {
 }
 class AXPLayoutBuilderService {
     constructor() {
-        this.variables$ = signal({});
-        this.functions$ = signal({});
+        this.variables$ = signal({}, ...(ngDevMode ? [{ debugName: "variables$" }] : []));
+        this.functions$ = signal({}, ...(ngDevMode ? [{ debugName: "functions$" }] : []));
         this.onRefresh = new Subject();
         this.widgets = new Map();
-        this.status$ = signal(AXPPageStatus.Rendering);
+        this.status$ = signal(AXPPageStatus.Rendering, ...(ngDevMode ? [{ debugName: "status$" }] : []));
         this.status = this.status$.asReadonly();
         this.isBusy = computed(() => {
             return [AXPPageStatus.Processing, AXPPageStatus.Submitting, AXPPageStatus.Rendering].includes(this.status());
-        });
+        }, ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
     }
     get variables() {
         return this.variables$();
@@ -122,10 +122,10 @@ class AXPLayoutBuilderService {
     }
     ngOnDestroy() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutBuilderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutBuilderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable
         }] });
 
@@ -156,10 +156,10 @@ class AXPWidgetRegistryService {
     all() {
         return Array.from(this.types.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -345,8 +345,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         super(...arguments);
         this.widgetRegistery = inject(AXPWidgetRegistryService);
         this.grid = inject(AXBaseDataTable);
-        this.mergedOptions = signal({});
-        this.loadingRow = signal(null);
+        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : []));
+        this.loadingRow = signal(null, ...(ngDevMode ? [{ debugName: "loadingRow" }] : []));
         this.injector = inject(Injector);
         this.cdr = inject(ChangeDetectorRef);
     }
@@ -415,8 +415,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             rowData: data
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
             AXPLayoutBuilderService,
             { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
         ], viewQueries: [{ propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
@@ -447,9 +447,9 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
       </div>
     </ng-template>
     <ng-template #footer></ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-column-renderer',
@@ -643,20 +643,20 @@ class AXPWidgetContainerComponent {
         this.onContextChanged = new EventEmitter();
         this.status = computed(() => {
             return this.builderService.status();
-        });
+        }, ...(ngDevMode ? [{ debugName: "status" }] : []));
         this.isBusy = computed(() => {
             return this.builderService.isBusy();
-        });
+        }, ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
         effect(() => {
             if (this.contextService.isChanged()) {
                 this.onContextChanged.emit(this.contextService.changeEvent());
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: "context", functions: "functions" }, outputs: { onContextChanged: "onContextChanged" }, host: { styleAttribute: "display: contents;" }, providers: [AXPLayoutBuilderService, AXPLayoutBuilderContextStore], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: "context", functions: "functions" }, outputs: { onContextChanged: "onContextChanged" }, host: { styleAttribute: "display: contents;" }, providers: [AXPLayoutBuilderService, AXPLayoutBuilderContextStore], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widgets-container',
@@ -675,12 +675,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }] } });
 
 class AXPWidgetPlaceholderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
     <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-placeholder',
@@ -696,16 +696,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 class AXPWidgetRendererDirective {
     //#endregion
     constructor() {
-        this.parentNode = input();
-        this.index = input();
-        this.mode = input.required();
-        this.node = input.required();
-        this._options = signal({});
+        this.parentNode = input(...(ngDevMode ? [undefined, { debugName: "parentNode" }] : []));
+        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : []));
+        this.mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+        this._options = signal({}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
         this.options = this._options.asReadonly();
         this.onOptionsChanged = output();
         this.onValueChanged = output();
         //#region ----   Properties   ----
-        this.mergedOptions = signal({});
+        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : []));
         this.injector = inject(Injector);
         this.builderService = inject(AXPLayoutBuilderService);
         this.contextService = inject(AXPLayoutBuilderContextStore);
@@ -715,7 +715,7 @@ class AXPWidgetRendererDirective {
         this.widgetService = inject(AXPWidgetRegistryService);
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.isLoading = signal(false);
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.expressionEvaluators = new Map();
         this.renderTimeoutId = null;
         this.hasInitialRender = false;
@@ -751,12 +751,14 @@ class AXPWidgetRendererDirective {
         }
     }
     rerenderComponent() {
-        // Clear any pending render operation
+        // Clear any pending render operation to prevent double rendering
         if (this.renderTimeoutId) {
             clearTimeout(this.renderTimeoutId);
             this.renderTimeoutId = null;
         }
-        // Don't reset loading state here to prevent race conditions
+        // Reset loading state to allow re-rendering
+        this.isLoading.set(false);
+        // Schedule the component loading
         this.renderTimeoutId = setTimeout(async () => {
             await this.loadComponent();
             this.renderTimeoutId = null;
@@ -784,21 +786,43 @@ class AXPWidgetRendererDirective {
             //
             const widget = this.widgetRegistery.resolve(this.node().type);
             //
-            const props = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]
-                ?.filter((c) => c.schema.defaultValue != null)
-                .map((c) => ({ [c.name]: cloneDeep(c.schema.defaultValue) }))
-                .reduce((acc, curr) => {
-                return { ...acc, ...curr };
-            }, {});
+            const propertiesToProcess = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]
+                ?.filter((c) => c.schema.defaultValue != null);
+            // Process default values (evaluate expressions if needed)
+            const props = {};
+            for (const property of propertiesToProcess) {
+                const defaultValue = property.schema.defaultValue;
+                if (typeof defaultValue === 'string' && this.expressionEvaluator.isExpression(defaultValue)) {
+                    // Evaluate expression for default value
+                    try {
+                        const evaluatedValue = await this.evaluateExpression(defaultValue);
+                        props[property.name] = evaluatedValue;
+                    }
+                    catch (error) {
+                        console.error(`Error evaluating default value expression for property ${property.name}:`, error);
+                        props[property.name] = cloneDeep(defaultValue); // Fallback to original value
+                    }
+                }
+                else {
+                    // Use static default value
+                    props[property.name] = cloneDeep(defaultValue);
+                }
+            }
             //
             this.mergedOptions.set(merge(props, widget?.options, this.node().options) || {});
             this.preprocessAndInitialOptions(cloneDeep(this.node().options));
             await this.updateOptionsBasedOnContext();
             //
             this._options.update((val) => ({ ...val, ...this.mergedOptions() }));
+            // Evaluate default value
+            let defaultValue = this.node().defaultValue;
+            if (defaultValue && this.expressionEvaluator.isExpression(defaultValue)) {
+                defaultValue = await this.evaluateExpression(defaultValue);
+            }
             //
             const tokenValue = {
                 node: this.node(),
+                defaultValue: defaultValue,
                 options: this.mergedOptions(),
                 config: widget,
             };
@@ -1075,14 +1099,14 @@ class AXPWidgetRendererDirective {
             console.error('Error evaluating action expression:', templateExpression, error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: AXPWidgetRendererDirective, isStandalone: false, 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 } }, outputs: { onOptionsChanged: "onOptionsChanged", onValueChanged: "onValueChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: AXPWidgetRendererDirective, isStandalone: false, 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 } }, outputs: { onOptionsChanged: "onOptionsChanged", onValueChanged: "onValueChanged" }, providers: [
             {
                 provide: AXUnsubscriber,
             },
         ], exportAs: ["widgetRenderer"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-widget-renderer]',
@@ -1138,11 +1162,11 @@ class AXPLayoutBuilderModule {
             f();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
@@ -1173,10 +1197,10 @@ class AXPWidgetDataSourceProviderService {
     async get(name) {
         return (await this.items()).find((c) => c.name == name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetDataSourceProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetDataSourceProviderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPWidgetDataSourceProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1229,17 +1253,17 @@ class AXPBaseWidgetComponent extends AXPLayoutElement {
         this.config = this.token.config;
         this.node = this.token.node;
         this.name = this.token.node.name;
-        this._options = signal(this.token.options ?? {});
+        this._options = signal(this.token.options ?? {}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
         this.options = this._options.asReadonly();
         this.onOptionsChanged = new Subject();
-        this._status = signal(AXPWidgetStatus.Rendering);
+        this._status = signal(AXPWidgetStatus.Rendering, ...(ngDevMode ? [{ debugName: "_status" }] : []));
         this.status = this._status.asReadonly();
         this.onStatusChanged = new BehaviorSubject(this._status());
         this.#statusEffect = effect(() => {
             this.onStatusChanged.next(this.status());
-        });
-        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()));
-        this._children = signal(this.token.node.children ?? []);
+        }, ...(ngDevMode ? [{ debugName: "#statusEffect" }] : []));
+        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()), ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
+        this._children = signal(this.token.node.children ?? [], ...(ngDevMode ? [{ debugName: "_children" }] : []));
         this.children = this._children.asReadonly();
     }
     get id() {
@@ -1284,32 +1308,32 @@ class AXPBaseWidgetComponent extends AXPLayoutElement {
         this._children.set([...children]);
     }
     onAdded() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPBaseWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPBaseWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPLayoutWidgetComponent extends AXPBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
     constructor() {
         super(...arguments);
         this.path = this.token.node.path;
-        this.defaultValue = this.token.node.defaultValue;
+        this.defaultValue = this.token.defaultValue ?? this.token.node.defaultValue;
         this._isValueWidget = false;
         this.isValueWidget = () => this._isValueWidget;
         this.onValueChanged = new Subject();
-        this.fullPath = signal(null);
-        this.parentPath = signal(null);
+        this.fullPath = signal(null, ...(ngDevMode ? [{ debugName: "fullPath" }] : []));
+        this.parentPath = signal(null, ...(ngDevMode ? [{ debugName: "parentPath" }] : []));
         this.getValue = computed(() => {
             return this.fullPath() ? this.extractValue(this.fullPath()) : null;
-        }, { equal: isEqual });
+        }, ...(ngDevMode ? [{ debugName: "getValue", equal: isEqual }] : [{ equal: isEqual }]));
         this.validationRules = computed(() => {
             const validationsRaw = this.options()['validations'];
             if (validationsRaw == null) {
@@ -1322,7 +1346,7 @@ class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
                 message: c.message,
                 options: c.options,
             }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "validationRules" }] : []));
     }
     ngOnInit() {
         this._isValueWidget = this.config.properties?.some((c) => c.name == 'path') ?? false;
@@ -1398,20 +1422,20 @@ class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
             this.setValue(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPValueWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPValueWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.dataService = inject(AXPWidgetDataSourceProviderService);
-        this.dataSource = signal(convertArrayToDataSource([]));
-        this.textField = computed(() => this.options()['textField'] ?? 'title');
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
-        this.selectedItems = signal([]);
+        this.dataSource = signal(convertArrayToDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
         this.rf = effect(async () => {
             const rawValue = this.options()['dataSource'];
             // static  datasource class
@@ -1467,12 +1491,12 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
             else {
                 this.dataSource.set(convertArrayToDataSource([]));
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "rf" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDataListWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPDataListWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPColumnWidgetComponent {
@@ -1482,10 +1506,10 @@ class AXPColumnWidgetComponent {
         this.options = this.token.options ?? {};
         this.rawValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColumnWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPColumnWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
             type: Injectable
         }] });