@acorex/platform 20.0.5 → 20.0.7

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

@@ -6,9 +6,9 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, InjectionToken, inject, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, effect, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule, ElementRef } from '@angular/core';
 import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
-import { set, merge, cloneDeep, isNil, get, isEqual, sum, isEmpty, isString, isUndefined } from 'lodash-es';
+import { set, merge, cloneDeep, isNil, isEqual, get, sum, isEmpty, isString, isUndefined } from 'lodash-es';
 import { Subject, filter, BehaviorSubject } from 'rxjs';
-import { getSmart, setSmart } from '@acorex/platform/core';
+import { getSmart, setSmart, AXPExpressionEvaluatorService } from '@acorex/platform/core';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 import { AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -16,6 +16,8 @@ import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
 
 var AXPPageStatus;
 (function (AXPPageStatus) {
+    // Idle statuses
+    AXPPageStatus["Idle"] = "idle";
     // Rendering statuses
     AXPPageStatus["Rendering"] = "rendering";
     AXPPageStatus["Rendered"] = "rendered";
@@ -120,10 +122,10 @@ class AXPLayoutBuilderService {
     }
     ngOnDestroy() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutBuilderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPLayoutBuilderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable
         }] });
 
@@ -154,10 +156,10 @@ class AXPWidgetRegistryService {
     all() {
         return Array.from(this.types.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -409,8 +411,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             rowData: data
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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.0.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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: `
@@ -443,7 +445,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     <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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-column-renderer',
@@ -531,6 +533,7 @@ withComputed(({ data, state, lastChange, initialSnapshot, previousSnapshot }) =>
     isReset: computed(() => state() === 'restored'),
     isInitiated: computed(() => state() === 'initiated'),
     isEmpty: computed(() => Object.keys(data()).length === 0),
+    isDirty: computed(() => !isEqual(data(), previousSnapshot())),
     snapshot: computed(() => cloneDeep(data())), // Current data snapshot
     initial: computed(() => cloneDeep(initialSnapshot())), // Initial snapshot
     previous: computed(() => cloneDeep(previousSnapshot())), // Previous snapshot
@@ -646,10 +649,10 @@ class AXPWidgetContainerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", 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.0.6", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", 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.4", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widgets-container',
@@ -668,12 +671,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             }] } });
 
 class AXPWidgetPlaceholderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", 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.4", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-placeholder',
@@ -704,11 +707,10 @@ class AXPWidgetRendererDirective {
         this.unsubscriber = inject(AXUnsubscriber);
         this.translateService = inject(AXTranslationService);
         this.widgetService = inject(AXPWidgetRegistryService);
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.isLoading = signal(false);
-        this.expressionCache = new Map();
         this.expressionEvaluators = new Map();
-        this.scope = null;
         this.onContextChanged = new Subject();
         effect(async () => {
             const changed = this.contextService.changeEvent();
@@ -838,7 +840,7 @@ class AXPWidgetRendererDirective {
         }
         Object.entries(obj).forEach(([key, value]) => {
             const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
-            if (typeof value === 'string' && value.includes('{{')) {
+            if (typeof value === 'string' && this.expressionEvaluator.isExpression(value)) {
                 // Cache dynamic expression for later evaluation
                 this.expressionEvaluators.set(currentPath, () => this.evaluateExpression(value));
             }
@@ -884,170 +886,172 @@ class AXPWidgetRendererDirective {
     }
     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}"`);
-            }
+            const scope = this.buildExpressionScope();
+            return await this.expressionEvaluator.evaluate(templateExpression, scope);
         }
         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;
+    buildExpressionScope() {
+        return {
+            context: this.getContextScope(),
+            events: this.getEventScope(),
+            widget: this.getWidgetScope(),
+            methods: this.getFunctionScope(),
+            vars: this.getVariablesScope(),
+        };
     }
     getContextScope() {
-        const scope = {};
-        set(scope, 'eval', (path) => this.contextService.getValue(path));
-        set(scope, 'set', (path, value) => {
-            this.contextService.update(path, value);
-        });
-        return scope;
+        return {
+            eval: (path) => {
+                //TODO: Handle array index
+                const fullPath = path.startsWith('>') ? `${this.instance?.parentPath()}.${path.substring(1)}` : path;
+                const value = this.contextService.getValue(fullPath);
+                return value;
+            },
+            set: (path, value) => {
+                this.contextService.update(path, value);
+            },
+            isDirty: () => {
+                return this.contextService.isDirty();
+            },
+        };
     }
     getEventScope() {
-        const scope = {};
-        set(scope, 'context', (path) => {
-            return this.onContextChanged.pipe(filter((c) => {
-                if (path == null) {
-                    return true;
-                }
-                if (path.endsWith('*')) {
-                    return c.path.startsWith(path.substring(0, path.length - 1));
-                }
-                else if (path.startsWith('*')) {
-                    return c.path.startsWith(path.substring(1, path.length));
-                }
-                else {
-                    return path == c.path;
-                }
-            }));
-        });
-        set(scope, 'from', (event) => get(this.instance.api(), event));
-        return scope;
+        return {
+            context: (path) => {
+                return this.onContextChanged.pipe(filter((c) => {
+                    // If no path filter specified, pass all events
+                    if (path == null || path === '') {
+                        return true;
+                    }
+                    // Ensure c.path exists
+                    if (!c.path) {
+                        return false;
+                    }
+                    // Pattern: "prefix*" - matches paths that start with prefix
+                    if (path.endsWith('*')) {
+                        const prefix = path.substring(0, path.length - 1);
+                        return c.path.startsWith(prefix);
+                    }
+                    // Pattern: "*suffix" - matches paths that end with suffix
+                    else if (path.startsWith('*')) {
+                        const suffix = path.substring(1);
+                        return c.path.endsWith(suffix);
+                    }
+                    // Exact match
+                    else {
+                        return c.path === path;
+                    }
+                }));
+            },
+            from: (event) => get(this.instance.api(), event),
+        };
     }
     getWidgetScope() {
-        const scope = {};
-        set(scope, 'call', (name, ...args) => {
-            this.instance.call(name, ...args);
-        });
-        set(scope, 'setValue', (value) => {
-            this.instance.setValue(value);
-        });
-        set(scope, 'output', (name) => {
-            this.instance.output(name);
-        });
-        set(scope, 'find', (id) => {
-            return this.builderService.getWidget(id);
-        });
-        return scope;
+        return {
+            call: (name, ...args) => {
+                this.instance.call(name, ...args);
+            },
+            setValue: (value) => {
+                this.instance.setValue(value);
+            },
+            output: (name) => {
+                this.instance.output(name);
+            },
+            find: (id) => {
+                return this.builderService.getWidget(id);
+            },
+        };
     }
     getFunctionScope() {
-        const scope = {};
-        set(scope, 'sum', (values) => {
-            return sum(values);
-        });
-        set(scope, 'translate', (text, options) => {
-            return this.translateService.translateAsync(text, options);
-        });
-        set(scope, 'widgetInfo', (name) => {
-            return this.widgetService.resolve(name);
-        });
-        Object.entries(this.builderService.functions).forEach((i) => {
-            set(scope, i[0], (...args) => {
-                return i[1](...args);
-            });
+        const scope = {
+            sum: (values) => {
+                return sum(values);
+            },
+            translate: (text, options) => {
+                return this.translateService.translateAsync(text, options);
+            },
+            widgetInfo: (name) => {
+                return this.widgetService.resolve(name);
+            },
+        };
+        // Add custom functions from builder service
+        Object.entries(this.builderService.functions).forEach(([key, fn]) => {
+            scope[key] = (...args) => {
+                return fn(...args);
+            };
         });
         return scope;
     }
     getVariablesScope() {
-        const scope = {};
-        set(scope, 'eval', (path) => get(this.builderService.variables, path));
-        return scope;
+        return {
+            eval: (path) => get(this.builderService.variables, path),
+        };
     }
     async assignTriggers() {
-        this.node().triggers?.forEach((t) => {
-            const event = this.evaluateTrigger(t.event);
-            event?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-                const exec = (action) => {
-                    if (!isEmpty(action) && isString(action)) {
-                        this.evaluateAction(action);
-                    }
-                };
-                const actions = Array.isArray(t.action) ? t.action : [t.action];
-                actions.forEach((a) => exec(a));
-            });
-        });
+        const node = this.node();
+        // Check multiple possible locations for triggers
+        const triggers = node.triggers || node.options?.['triggers'] || this.mergedOptions()?.triggers;
+        if (!triggers) {
+            return;
+        }
+        for (const trigger of triggers) {
+            try {
+                const event = await this.evaluateTrigger(trigger.event);
+                if (event) {
+                    event.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
+                        const exec = async (action) => {
+                            if (!isEmpty(action) && isString(action)) {
+                                await this.evaluateAction(action);
+                            }
+                        };
+                        const actions = Array.isArray(trigger.action) ? trigger.action : [trigger.action];
+                        actions.forEach((a) => exec(a));
+                    });
+                }
+            }
+            catch (error) {
+                console.error('Error assigning trigger:', error);
+            }
+        }
     }
-    evaluateTrigger(templateExpression) {
+    async evaluateTrigger(templateExpression) {
         try {
-            const expressionMatch = templateExpression.match(/\{\{\s*(.*?)\s*\}\}/);
-            if (!expressionMatch) {
-                throw Error(`No valid expression found in "${templateExpression}"`);
+            const scope = this.buildExpressionScope();
+            const result = await this.expressionEvaluator.evaluate(templateExpression, scope);
+            // Check if result is an Observable
+            if (result && typeof result.subscribe === 'function') {
+                return result;
+            }
+            else {
+                return null;
             }
-            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);
+            console.error('Error evaluating trigger expression:', error);
             return null;
         }
     }
-    evaluateAction(templateExpression) {
+    async 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);
+            const scope = this.buildExpressionScope();
+            await this.expressionEvaluator.evaluate(templateExpression, scope);
         }
         catch (error) {
-            console.error('Error evaluating expression:', error);
+            console.error('Error evaluating action expression:', templateExpression, error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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.0.6", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", 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.4", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-widget-renderer]',
@@ -1103,11 +1107,11 @@ class AXPLayoutBuilderModule {
             f();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", 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.4", 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.4", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", 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.6", 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.6", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
@@ -1138,10 +1142,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.4", ngImport: i0, type: AXPWidgetDataSourceProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetDataSourceProviderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetDataSourceProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetDataSourceProviderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPWidgetDataSourceProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPWidgetDataSourceProviderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1249,17 +1253,17 @@ class AXPBaseWidgetComponent extends AXPLayoutElement {
         this._children.set([...children]);
     }
     onAdded() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPBaseWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPBaseWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPLayoutWidgetComponent extends AXPBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
@@ -1271,6 +1275,7 @@ class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
         this.isValueWidget = () => this._isValueWidget;
         this.onValueChanged = new Subject();
         this.fullPath = signal(null);
+        this.parentPath = signal(null);
         this.getValue = computed(() => {
             return this.fullPath() ? this.extractValue(this.fullPath()) : null;
         }, { equal: isEqual });
@@ -1351,6 +1356,7 @@ class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
         }
         //
         this.fullPath.set(sections.reverse().join('.'));
+        this.parentPath.set(sections.slice(0, sections.length - 1).join('.'));
         this._id = this.name || this.parent ? ids.reverse().join('_') : null;
         if (this._id) {
             this.layoutService.registerWidget(this._id, this);
@@ -1361,10 +1367,10 @@ class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
             this.setValue(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPValueWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPValueWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
@@ -1432,10 +1438,10 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDataListWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPDataListWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPColumnWidgetComponent {
@@ -1445,10 +1451,10 @@ class AXPColumnWidgetComponent {
         this.options = this.token.options ?? {};
         this.rawValue = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPColumnWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPColumnWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
             type: Injectable
         }] });