@acorex/platform 20.3.0-next.7 → 20.3.0-next.9

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

@@ -284,13 +284,10 @@ const AXPWidgetsCatalog = {
     color: 'color-editor',
     contact: 'contact-editor',
     dateTime: 'date-time-editor',
-    email: 'email-editor',
     largeText: 'large-text-editor',
-    link: 'link-editor',
     number: 'number-editor',
     numberUnit: 'number-unit-editor',
     password: 'password-editor',
-    phone: 'phone-editor',
     richText: 'rich-text-editor',
     select: 'select-editor',
     selectionList: 'selection-list-editor',
@@ -317,7 +314,7 @@ const AXPWidgetsCatalog = {
     advancedGridItem: 'advanced-grid-item-layout',
     grid: 'grid-layout',
     gridItem: 'grid-item-layout',
-    gridRow: 'grid-row-layout',
+    // gridRow: 'grid-row-layout',
     widgetSelector: 'widget-selector',
     template: 'template',
     templateDesigner: 'template-designer',
@@ -327,6 +324,8 @@ const AXPWidgetsCatalog = {
     border: 'border',
     flexLayout: 'flex-layout',
     flexItem: 'flex-item-layout',
+    tableLayout: 'table-layout',
+    tableItem: 'table-item-layout',
     avatar: 'avatar',
     themePaletteChooser: 'theme-palette-chooser',
     themeModeChooser: 'theme-mode-chooser',
@@ -469,6 +468,7 @@ class AXPBaseWidgetComponent extends AXPLayoutElement {
         this.config = this.token.config;
         this.node = this.token.node;
         this.name = this.token.node.name;
+        this.component = this;
         this._options = signal(this.token.options ?? {}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
         this.options = this._options.asReadonly();
         this.onOptionsChanged = new Subject();
@@ -996,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
 class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
     constructor() {
         super(...arguments);
-        this.grid = computed(() => this.options()?.grid, ...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.grid = computed(() => this.options()?.['grid'], ...(ngDevMode ? [{ debugName: "grid" }] : []));
         this.hostGridStyle = computed(() => {
             const style = { ...this.inlineStyle() };
             const g = this.grid()?.default;
@@ -1072,6 +1072,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
             type: Injectable
         }] });
 
+class AXPTableBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.hostTableClass = computed(() => ({
+            ...this.blockClass(),
+        }), ...(ngDevMode ? [{ debugName: "hostTableClass" }] : []));
+        this.hostTableStyle = computed(() => {
+            const style = { ...this.blockStyle() };
+            style['overflow-x'] = 'auto';
+            return style;
+        }, ...(ngDevMode ? [{ debugName: "hostTableStyle" }] : []));
+        this.hostClass = computed(() => this.hostTableClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
+        this.hostStyle = computed(() => this.hostTableStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPTableItemOpsBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPTableItemBaseLayoutWidgetComponent extends AXPTableItemOpsBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.colSpan = computed(() => {
+            const v = this.options()?.colSpan;
+            return v ? Math.max(1, v) : 1;
+        }, ...(ngDevMode ? [{ debugName: "colSpan" }] : []));
+        this.rowSpan = computed(() => {
+            const v = this.options()?.rowSpan;
+            return v ? Math.max(1, v) : 1;
+        }, ...(ngDevMode ? [{ debugName: "rowSpan" }] : []));
+        this.hostClass = computed(() => this.blockClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
+        this.hostStyle = computed(() => this.blockStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
 class AXPWidgetRegistryService {
     /**
      *
@@ -1363,6 +1413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
         }] });
 
 class AXPWidgetRendererDirective {
+    //#endregion
     //#endregion
     constructor() {
         this.parentNode = input(...(ngDevMode ? [undefined, { debugName: "parentNode" }] : []));
@@ -1389,29 +1440,304 @@ class AXPWidgetRendererDirective {
         this.renderTimeoutId = null;
         this.hasInitialRender = false;
         this.onContextChanged = new Subject();
+        //#region ----   Performance Optimization Properties   ----
+        this.contextUpdateQueue = new Set();
+        this.contextUpdateTimeout = null;
+        this.CONTEXT_UPDATE_DEBOUNCE_MS = 4; // ~250fps for large forms
+        // Removed visibility detection - not needed for current implementation
+        // Expression result caching
+        this.expressionCache = new Map();
+        this.EXPRESSION_CACHE_TTL = 500; // Cache for 500ms (increased for better hit rate)
+        // Options change tracking
+        this.lastAppliedOptions = null;
+        // Expression result tracking
+        this.lastExpressionResults = new Map();
+        // Buffer for context changes that happen before initial render completes
+        this.preRenderContextQueue = new Set();
         effect(async () => {
             const changed = this.contextService.changeEvent();
             // Don't trigger re-render during initial setup
             if (!this.hasInitialRender) {
+                if (changed.path) {
+                    this.preRenderContextQueue.add(changed.path);
+                    console.log(`📝 [${this.node().type}] Buffered pre-render context change: ${changed.path}`);
+                }
                 return;
             }
-            if ((await this.updateOptionsBasedOnContext()) > 0) {
-                this.applyOptions();
-            }
-            if (this.checkFormulaForUpdate(this.node().formula, changed.path)) {
-                await this.updateValueBasedOnFormula();
-            }
-            //
-            if (changed.path) {
-                this.onContextChanged.next({ path: changed.path });
+            // CRITICAL PERFORMANCE FIX: Only respond to relevant context changes
+            if (changed.path && this.isRelevantContextChange(changed.path)) {
+                console.log(`🎯 [${this.node().type}] Context change detected: ${changed.path}`);
+                this.queueContextUpdate(changed.path);
             }
         });
         this.builderService.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
-            if ((await this.updateOptionsBasedOnContext()) > 0) {
-                this.applyOptions();
+            await this.processBatchedUpdates();
+        });
+    }
+    //#region ----   Expression Caching Methods   ----
+    getCachedExpressionResult(expressionKey) {
+        const cached = this.expressionCache.get(expressionKey);
+        if (cached && performance.now() - cached.timestamp < this.EXPRESSION_CACHE_TTL) {
+            console.log(`💾 [${this.node().type}] Using cached expression result for '${expressionKey}'`);
+            return cached.value;
+        }
+        return null;
+    }
+    setCachedExpressionResult(expressionKey, value) {
+        this.expressionCache.set(expressionKey, {
+            value,
+            timestamp: performance.now(),
+        });
+    }
+    clearExpressionCache() {
+        this.expressionCache.clear();
+    }
+    isPathAffectingExpressions(changedPath) {
+        console.log(`🔍 [${this.node().type}] Checking if path '${changedPath}' affects expressions. Expression count: ${this.expressionEvaluators.size}`);
+        // If widget has no expressions, no need to clear cache
+        if (this.expressionEvaluators.size === 0) {
+            console.log(`🔍 [${this.node().type}] Path '${changedPath}' - no expressions, keeping cache`);
+            return false;
+        }
+        // Use the same logic as hasExpressionDependency to check for actual dependencies
+        if (this.hasExpressionDependency(changedPath)) {
+            console.log(`🔍 [${this.node().type}] Path '${changedPath}' affects expressions - clearing cache`);
+            return true;
+        }
+        console.log(`🔍 [${this.node().type}] Path '${changedPath}' does not affect expressions - keeping cache`);
+        return false;
+    }
+    //#endregion
+    //#region ----   Context Batching Methods   ----
+    queueContextUpdate(path) {
+        if (path) {
+            console.log(`🔄 [${this.node().type}] Queueing context update for path: ${path}`);
+            this.contextUpdateQueue.add(path);
+            // Clear existing timeout
+            if (this.contextUpdateTimeout) {
+                clearTimeout(this.contextUpdateTimeout);
             }
+            // Debounce updates
+            this.contextUpdateTimeout = setTimeout(() => {
+                console.log(`⚡ [${this.node().type}] Processing batched updates for ${this.contextUpdateQueue.size} paths`);
+                this.processBatchedUpdates();
+            }, this.CONTEXT_UPDATE_DEBOUNCE_MS);
+        }
+    }
+    async processBatchedUpdates() {
+        if (this.contextUpdateQueue.size === 0)
+            return;
+        const startTime = performance.now();
+        const paths = Array.from(this.contextUpdateQueue);
+        this.contextUpdateQueue.clear();
+        console.log(`📊 [${this.node().type}] Processing ${paths.length} paths:`, paths);
+        // Clear expression cache only if changed paths affect this widget's expressions
+        const shouldClearCache = paths.some((path) => this.isPathAffectingExpressions(path));
+        if (shouldClearCache) {
+            console.log(`🗑️ [${this.node().type}] Clearing expression cache due to expression-affecting path change`);
+            this.clearExpressionCache();
+        }
+        // Process updates in batches
+        const optionsStartTime = performance.now();
+        const hasOptionsUpdate = await this.updateOptionsBasedOnContext();
+        const optionsTime = performance.now() - optionsStartTime;
+        if (typeof hasOptionsUpdate === 'number' && hasOptionsUpdate > 0) {
+            console.log(`🔧 [${this.node().type}] Options updated (${optionsTime.toFixed(2)}ms)`);
+            this.applyOptions();
+        }
+        // Check formulas for any of the changed paths
+        const formulaStartTime = performance.now();
+        const formulaNeedsUpdate = paths.some((path) => this.checkFormulaForUpdate(this.node().formula, path));
+        if (formulaNeedsUpdate) {
+            console.log(`🧮 [${this.node().type}] Formula needs update`);
+            await this.updateValueBasedOnFormula();
+        }
+        const formulaTime = performance.now() - formulaStartTime;
+        // Emit context changes
+        paths.forEach((path) => {
+            this.onContextChanged.next({ path });
         });
+        const totalTime = performance.now() - startTime;
+        console.log(`✅ [${this.node().type}] Batch processing completed in ${totalTime.toFixed(2)}ms (options: ${optionsTime.toFixed(2)}ms, formula: ${formulaTime.toFixed(2)}ms)`);
+    }
+    //#endregion
+    //#region ----   Context Relevance Filtering   ----
+    isRelevantContextChange(changedPath) {
+        const node = this.node();
+        // 1. Direct path match - widget's own field
+        if (node.path === changedPath) {
+            return true;
+        }
+        // 2. Parent path match - widget is inside the changed container
+        if (node.path && changedPath.startsWith(node.path + '.')) {
+            return true;
+        }
+        // 3. Child path match - changed field is inside this widget's container
+        if (node.path && node.path.startsWith(changedPath + '.')) {
+            return true;
+        }
+        // 4. Expression dependency check - if widget has expressions that depend on this path
+        if (this.hasExpressionDependency(changedPath)) {
+            return true;
+        }
+        // 5. Formula dependency check - if widget's formula depends on this path
+        if (node.formula && this.checkFormulaForUpdate(node.formula, changedPath)) {
+            return true;
+        }
+        // 6. Trigger dependency check - if widget has triggers that depend on this path
+        if (this.hasTriggerDependency(changedPath)) {
+            return true;
+        }
+        return false;
+    }
+    hasExpressionDependency(changedPath) {
+        // Check if any cached expressions depend on the changed path
+        for (const [path, evaluator] of this.expressionEvaluators) {
+            // Check if the expression path itself contains the changed path
+            if (path.includes(changedPath)) {
+                return true;
+            }
+            // Parse the actual expression content to check for context.eval() calls
+            // We need to get the original expression string to analyze it
+            const node = this.node();
+            const expressionValue = this.getExpressionValueFromNode(node, path);
+            if (expressionValue && typeof expressionValue === 'string') {
+                // Look for context.eval() calls that reference the changed path
+                const contextEvalRegex = /context\.eval\(['"]([^'\"]+)['"]\)/g;
+                let match;
+                while ((match = contextEvalRegex.exec(expressionValue)) !== null) {
+                    const evalPath = match[1];
+                    // Normalize Id-suffixed segments to dot-id form (e.g., 'typeId' -> 'type.id', 'party.typeId' -> 'party.type.id')
+                    const normalizePath = (p) => {
+                        if (!p)
+                            return p;
+                        const parts = p.split('.');
+                        const last = parts[parts.length - 1];
+                        if (last && last.endsWith('Id')) {
+                            parts.splice(parts.length - 1, 1, last.slice(0, -2), 'id');
+                        }
+                        return parts.join('.');
+                    };
+                    const isSegmentSuffix = (a, b) => {
+                        if (!a || !b)
+                            return false;
+                        const pa = a.split('.');
+                        const pb = b.split('.');
+                        if (pb.length > pa.length)
+                            return false;
+                        for (let i = 1; i <= pb.length; i++) {
+                            if (pa[pa.length - i] !== pb[pb.length - i])
+                                return false;
+                        }
+                        return true;
+                    };
+                    const evalNorm = normalizePath(evalPath);
+                    const changedNorm = normalizePath(changedPath);
+                    // Debug log for dependency check
+                    console.log(`🧭 [${this.node().type}] dep-check expr='${path}', changed='${changedPath}', eval='${evalPath}', evalNorm='${evalNorm}', changedNorm='${changedNorm}'`);
+                    // Generic direct and hierarchical dependency checks (raw and normalized)
+                    const rawMatch = evalPath === changedPath ||
+                        evalPath.startsWith(changedPath + '.') ||
+                        changedPath.startsWith(evalPath + '.') ||
+                        isSegmentSuffix(evalPath, changedPath) ||
+                        isSegmentSuffix(changedPath, evalPath);
+                    const normMatch = evalNorm === changedNorm ||
+                        evalNorm.startsWith(changedNorm + '.') ||
+                        changedNorm.startsWith(evalNorm + '.') ||
+                        isSegmentSuffix(evalNorm, changedNorm) ||
+                        isSegmentSuffix(changedNorm, evalNorm);
+                    if (rawMatch || normMatch) {
+                        console.log(`🔍 [${this.node().type}] Expression '${path}' depends on '${changedPath}' via context.eval('${evalPath}') (generic match)`);
+                        return true;
+                    }
+                    // Check for path aliases/mappings (e.g., typeId.id <-> type.id)
+                    if (this.isPathAlias(evalPath, changedPath)) {
+                        console.log(`🔍 [${this.node().type}] Expression '${path}' depends on '${changedPath}' via context.eval('${evalPath}') (path alias)`);
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    isPathAlias(evalPath, changedPath) {
+        // Dynamic path alias detection based on 'Id' suffix pattern
+        // Examples: typeId.id <-> type.id, categoryId.name <-> category.name
+        // Check if evalPath ends with 'Id' and has a property
+        if (evalPath.endsWith('Id') && evalPath.includes('.')) {
+            const basePath = evalPath.substring(0, evalPath.lastIndexOf('Id'));
+            const property = evalPath.substring(evalPath.lastIndexOf('.') + 1);
+            const mappedPath = `${basePath}.${property}`;
+            if (changedPath === mappedPath) {
+                console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        // Check if changedPath ends with 'Id' and has a property
+        if (changedPath.endsWith('Id') && changedPath.includes('.')) {
+            const basePath = changedPath.substring(0, changedPath.lastIndexOf('Id'));
+            const property = changedPath.substring(changedPath.lastIndexOf('.') + 1);
+            const mappedPath = `${basePath}.${property}`;
+            if (evalPath === mappedPath) {
+                console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        // Check for direct 'Id' suffix mapping (e.g., typeId <-> type.id)
+        if (evalPath.endsWith('Id') && !evalPath.includes('.')) {
+            const basePath = evalPath.substring(0, evalPath.lastIndexOf('Id'));
+            const mappedPath = `${basePath}.id`;
+            if (changedPath === mappedPath) {
+                console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        if (changedPath.endsWith('Id') && !changedPath.includes('.')) {
+            const basePath = changedPath.substring(0, changedPath.lastIndexOf('Id'));
+            const mappedPath = `${basePath}.id`;
+            if (evalPath === mappedPath) {
+                console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        return false;
     }
+    getExpressionValueFromNode(node, path) {
+        try {
+            // Navigate through the node structure to find the expression value
+            const pathParts = path.split('.');
+            let current = node.options || {};
+            // Navigate through the path parts
+            for (const part of pathParts) {
+                if (current && typeof current === 'object' && part in current) {
+                    current = current[part];
+                }
+                else {
+                    return null;
+                }
+            }
+            return typeof current === 'string' ? current : null;
+        }
+        catch (error) {
+            console.error('Error extracting expression value from node:', error);
+            return null;
+        }
+    }
+    hasTriggerDependency(changedPath) {
+        const node = this.node();
+        const triggers = node.triggers || node.options?.['triggers'] || this.mergedOptions()?.triggers;
+        if (!triggers)
+            return false;
+        // Check if any trigger event depends on the changed path
+        for (const trigger of triggers) {
+            if (trigger.event && trigger.event.includes(changedPath)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    //#endregion
+    // Removed visibility detection methods - not needed for current implementation
     // Detect input changes
     ngOnChanges(changes) {
         if (changes['mode'] || changes['node']) {
@@ -1437,6 +1763,9 @@ class AXPWidgetRendererDirective {
         if (this.renderTimeoutId) {
             clearTimeout(this.renderTimeoutId);
         }
+        if (this.contextUpdateTimeout) {
+            clearTimeout(this.contextUpdateTimeout);
+        }
         if (this.componentRef) {
             this.componentRef.destroy();
         }
@@ -1481,6 +1810,9 @@ class AXPWidgetRendererDirective {
             }
             //
             this.mergedOptions.set(merge(props, widget?.options, this.node().options) || {});
+            this.expressionEvaluators.clear();
+            // Register expressions from widget defaults and node options to cover related-entity cases
+            this.preprocessAndInitialOptions(cloneDeep(widget?.options));
             this.preprocessAndInitialOptions(cloneDeep(this.node().options));
             await this.updateOptionsBasedOnContext();
             //
@@ -1533,6 +1865,19 @@ class AXPWidgetRendererDirective {
             loadingRef.destroy();
             // Mark that initial render is complete
             this.hasInitialRender = true;
+            // Re-evaluate expressions after initial render to catch late-arriving related context
+            if (this.expressionEvaluators.size > 0) {
+                console.log(`🔄 [${this.node().type}] Re-evaluating expressions after initial render`);
+                await this.updateOptionsBasedOnContext();
+                this.applyOptions();
+            }
+            // Process any buffered pre-render context changes now that the component is ready
+            if (this.preRenderContextQueue.size > 0) {
+                console.log(`🚀 [${this.node().type}] Processing ${this.preRenderContextQueue.size} buffered pre-render changes`);
+                this.preRenderContextQueue.forEach((p) => this.contextUpdateQueue.add(p));
+                this.preRenderContextQueue.clear();
+                await this.processBatchedUpdates();
+            }
         }
         catch (error) {
             console.error('Error loading component:', error);
@@ -1544,9 +1889,26 @@ class AXPWidgetRendererDirective {
     applyOptions() {
         if (!this.instance)
             return;
-        this._options.update((val) => ({ ...val, ...this.mergedOptions() }));
-        this.instance.setOptions(this.mergedOptions());
+        const currentOptions = this.mergedOptions();
+        // Check if options have actually changed
+        if (this.hasOptionsChanged(currentOptions)) {
+            console.log('applyOptions', this.node().path, '- options changed');
+            this._options.update((val) => ({ ...val, ...currentOptions }));
+            this.instance.setOptions(currentOptions);
+            this.lastAppliedOptions = cloneDeep(currentOptions); // Deep clone using Lodash
+        }
+        else {
+            console.log('applyOptions', this.node().path, '- no changes, skipping');
+        }
     }
+    hasOptionsChanged(newOptions) {
+        if (!this.lastAppliedOptions) {
+            return true; // First time, always apply
+        }
+        // Deep comparison of options using Lodash isEqual
+        return !isEqual(newOptions, this.lastAppliedOptions);
+    }
+    // Removed deepCloneValue method - now using Lodash cloneDeep
     checkFormulaForUpdate(formula, path) {
         if (formula) {
             const regex = /context\.eval\('([^']+)'\)/g;
@@ -1605,24 +1967,58 @@ class AXPWidgetRendererDirective {
         });
     }
     async updateOptionsBasedOnContext() {
+        // Early return if no expressions to evaluate
+        if (this.expressionEvaluators.size === 0) {
+            return 0;
+        }
+        console.log(`🔍 [${this.node().type}] Evaluating ${this.expressionEvaluators.size} expressions`);
         const updatePromises = Array.from(this.expressionEvaluators).map(async ([path, evaluator]) => {
+            // Check cache first
+            const cachedValue = this.getCachedExpressionResult(path);
+            if (cachedValue !== null) {
+                console.log(`💾 [${this.node().type}] Using cached expression result for '${path}'`);
+                return { path, newValue: cachedValue, fromCache: true };
+            }
+            // Evaluate expression if not cached
+            const evalStartTime = performance.now();
             const newValue = await evaluator();
-            return { path, newValue };
+            const evalTime = performance.now() - evalStartTime;
+            // Check if result has actually changed using Lodash isEqual
+            const lastValue = this.lastExpressionResults.get(path);
+            const hasChanged = !isEqual(newValue, lastValue);
+            if (hasChanged) {
+                console.log(`📝 [${this.node().type}] Expression '${path}' evaluated in ${evalTime.toFixed(2)}ms - value changed`);
+                // Cache the result and track it
+                this.setCachedExpressionResult(path, newValue);
+                this.lastExpressionResults.set(path, cloneDeep(newValue));
+                return { path, newValue, fromCache: false, hasChanged: true };
+            }
+            else {
+                console.log(`📝 [${this.node().type}] Expression '${path}' evaluated in ${evalTime.toFixed(2)}ms - value unchanged, skipping update`);
+                // Cache the result but don't update
+                this.setCachedExpressionResult(path, newValue);
+                this.lastExpressionResults.set(path, cloneDeep(newValue));
+                return { path, newValue, fromCache: false, hasChanged: false };
+            }
         });
         // Wait for all evaluators to complete
         const updates = await Promise.all(updatePromises);
-        // Apply updates to mergedOptions
-        if (updates.length > 0) {
+        // Filter updates to only include those that have actually changed
+        const changedUpdates = updates.filter((update) => update.hasChanged !== false);
+        // Apply updates to mergedOptions only for changed values
+        if (changedUpdates.length > 0) {
             this.mergedOptions.update((o) => {
                 const updatedOptions = { ...o };
-                updates.forEach(({ path, newValue }) => {
-                    // Set the new value in the updatedOptions object by path
-                    set(updatedOptions, path, newValue); // Assuming 'set' can handle paths like 'property.subproperty'
+                changedUpdates.forEach(({ path, newValue }) => {
+                    set(updatedOptions, path, newValue);
                 });
                 return updatedOptions;
             });
         }
-        return updates.length;
+        const cacheHits = updates.filter((update) => update.fromCache).length;
+        const skippedUpdates = updates.length - changedUpdates.length;
+        console.log(`📋 [${this.node().type}] Applied ${changedUpdates.length} expression updates (${cacheHits} cache hits, ${skippedUpdates} skipped)`);
+        return changedUpdates.length;
     }
     async updateValueBasedOnFormula() {
         if (this.node().formula) {
@@ -2100,5 +2496,5 @@ var AXPWidgetGroupEnum;
  * Generated bundle index. Do not edit.
  */
 
-export { AXPBaseWidgetComponent, AXPBlockBaseLayoutWidgetComponent, AXPBoxModelLayoutWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXPGridItemBaseLayoutWidgetComponent, AXPInlineBaseLayoutWidgetComponent, AXPLayoutBaseWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPPageStatus, AXPPropertyEditorHelper, AXPValueWidgetComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetGroupEnum, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetStatus, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createNumberProperty, createSelectProperty, createStringProperty, findNonEmptyBreakpoints };
+export { AXPBaseWidgetComponent, AXPBlockBaseLayoutWidgetComponent, AXPBoxModelLayoutWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXPGridItemBaseLayoutWidgetComponent, AXPInlineBaseLayoutWidgetComponent, AXPLayoutBaseWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPPageStatus, AXPPropertyEditorHelper, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, AXPTableItemOpsBaseLayoutWidgetComponent, AXPValueWidgetComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetGroupEnum, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetStatus, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createNumberProperty, createSelectProperty, createStringProperty, findNonEmptyBreakpoints };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map