@acorex/platform 20.3.0-next.0 → 20.3.0-next.10

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

@@ -158,10 +158,10 @@ class AXPLayoutBuilderService {
         });
     }
     ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
             type: Injectable
         }] });
 
@@ -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();
@@ -526,17 +526,17 @@ class AXPBaseWidgetComponent extends AXPLayoutElement {
         this._children.set([...children]);
     }
     onAdded() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBaseWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPLayoutBaseWidgetComponent extends AXPBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBaseWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBaseWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
@@ -640,10 +640,10 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
             this.setValue(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPValueWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
@@ -750,10 +750,10 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
                 [this.textField()]: item,
             };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataListWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
             type: Injectable
         }] });
 class AXPColumnWidgetComponent {
@@ -771,10 +771,10 @@ class AXPColumnWidgetComponent {
             return this.rawValue;
         }, ...(ngDevMode ? [{ debugName: "value" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColumnWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -828,7 +828,7 @@ class AXPBoxModelLayoutWidgetComponent extends AXPLayoutBaseWidgetComponent {
             return {
                 'ax-block': true,
                 'ax-w-full': true,
-                'ax-widget-outline': true,
+                // 'ax-widget-outline': true,
             };
         }, ...(ngDevMode ? [{ debugName: "blockClass" }] : []));
         this.inlineClass = computed(() => {
@@ -837,10 +837,10 @@ class AXPBoxModelLayoutWidgetComponent extends AXPLayoutBaseWidgetComponent {
             };
         }, ...(ngDevMode ? [{ debugName: "inlineClass" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -850,10 +850,10 @@ class AXPBlockBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent
         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.6", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -904,6 +904,7 @@ class AXPFlexBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
             return {
                 ...this.blockClass(),
                 'ax-flex': true,
+                'ax-h-full': true,
             };
         }, ...(ngDevMode ? [{ debugName: "hostFlexClass" }] : []));
         this.hostClass = computed(() => {
@@ -913,10 +914,10 @@ class AXPFlexBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
             return this.hostFlexStyle();
         }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -926,10 +927,10 @@ class AXPInlineBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponen
         this.hostClass = computed(() => this.inlineClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.inlineStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -985,17 +986,17 @@ class AXPFlexItemBaseLayoutWidgetComponent extends AXPInlineBaseLayoutWidgetComp
             return this.hostFlexItemStyle();
         }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
 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;
@@ -1024,20 +1025,28 @@ class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
         this.hostClass = computed(() => this.hostGridClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.hostGridStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, decorators: [{
             type: Injectable
         }] });
 
-class AXPGridItemBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+class AXPGridItemBaseLayoutWidgetComponent extends AXPFlexBaseLayoutWidgetComponent {
     constructor() {
         super(...arguments);
         this.gridItem = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "gridItem" }] : []));
-        this.hostGridItemStyle = computed(() => ({ ...this.inlineStyle() }), ...(ngDevMode ? [{ debugName: "hostGridItemStyle" }] : []));
+        this.hostGridItemStyle = computed(() => {
+            const style = { ...this.hostFlexStyle() };
+            const g = this.gridItem();
+            if (g?.alignSelf)
+                style['align-self'] = g.alignSelf;
+            if (g?.justifySelf)
+                style['justify-self'] = g.justifySelf;
+            return style;
+        }, ...(ngDevMode ? [{ debugName: "hostGridItemStyle" }] : []));
         this.hostGridItemClass = computed(() => {
-            const cls = { ...this.inlineClass() };
+            const cls = { ...this.hostFlexClass() };
             const g = this.gridItem();
             if (g?.colSpan)
                 cls[`lg:ax-col-span-${g.colSpan}`] = true;
@@ -1056,10 +1065,60 @@ class AXPGridItemBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetCompo
         this.hostClass = computed(() => this.hostGridItemClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
         this.hostStyle = computed(() => this.hostGridItemStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, decorators: [{
+            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.6", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, decorators: [{
+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
         }] });
 
@@ -1090,10 +1149,10 @@ class AXPWidgetRegistryService {
     all() {
         return Array.from(this.types.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1175,8 +1234,8 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             rowData: data,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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: `
@@ -1212,7 +1271,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     <ng-template #footer></ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-column-renderer',
@@ -1313,10 +1372,10 @@ class AXPWidgetContainerComponent {
     find(name) {
         return this.builderService.waitForWidget(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", 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.1.6", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widgets-container',
@@ -1335,12 +1394,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             }] } });
 
 class AXPWidgetPlaceholderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", 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.1.6", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-placeholder',
@@ -1354,6 +1413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }] });
 
 class AXPWidgetRendererDirective {
+    //#endregion
     //#endregion
     constructor() {
         this.parentNode = input(...(ngDevMode ? [undefined, { debugName: "parentNode" }] : []));
@@ -1380,29 +1440,314 @@ 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']) {
@@ -1428,6 +1773,9 @@ class AXPWidgetRendererDirective {
         if (this.renderTimeoutId) {
             clearTimeout(this.renderTimeoutId);
         }
+        if (this.contextUpdateTimeout) {
+            clearTimeout(this.contextUpdateTimeout);
+        }
         if (this.componentRef) {
             this.componentRef.destroy();
         }
@@ -1461,7 +1809,7 @@ class AXPWidgetRendererDirective {
                         props[property.name] = evaluatedValue;
                     }
                     catch (error) {
-                        console.error(`Error evaluating default value expression for property ${property.name}:`, error);
+                        // console.error(`Error evaluating default value expression for property ${property.name}:`, error);
                         props[property.name] = cloneDeep(defaultValue); // Fallback to original value
                     }
                 }
@@ -1472,6 +1820,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();
             //
@@ -1502,7 +1853,7 @@ class AXPWidgetRendererDirective {
             //
             const com = await widget?.components[this.mode()]?.component();
             if (!com) {
-                console.error(`${this.node().type} widget component not found with mode: ${this.mode()}`);
+                // console.error(`${this.node().type} widget component not found with mode: ${this.mode()}`);
                 return;
             }
             this.componentRef = this.viewContainerRef.createComponent(com, { injector: token });
@@ -1524,9 +1875,24 @@ 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);
+            // console.error('Error loading component:', error);
         }
         finally {
             this.isLoading.set(false);
@@ -1535,9 +1901,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;
@@ -1596,24 +1979,64 @@ 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) {
@@ -1627,7 +2050,7 @@ class AXPWidgetRendererDirective {
             return await this.expressionEvaluator.evaluate(templateExpression, scope);
         }
         catch (error) {
-            console.error('Error evaluating expression:', error);
+            // console.error('Error evaluating expression:', error);
             return false;
         }
     }
@@ -1763,7 +2186,7 @@ class AXPWidgetRendererDirective {
                 }
             }
             catch (error) {
-                console.error('Error assigning trigger:', error);
+                // console.error('Error assigning trigger:', error);
             }
         }
     }
@@ -1780,7 +2203,7 @@ class AXPWidgetRendererDirective {
             }
         }
         catch (error) {
-            console.error('Error evaluating trigger expression:', error);
+            // console.error('Error evaluating trigger expression:', error);
             return null;
         }
     }
@@ -1790,17 +2213,17 @@ class AXPWidgetRendererDirective {
             await this.expressionEvaluator.evaluate(templateExpression, scope);
         }
         catch (error) {
-            console.error('Error evaluating action expression:', templateExpression, error);
+            // console.error('Error evaluating action expression:', templateExpression, error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.8", 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.1.6", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axp-widget-renderer]',
@@ -1856,11 +2279,11 @@ class AXPLayoutBuilderModule {
             f();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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.1.6", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", 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.8", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule],
@@ -2091,5 +2514,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