@acorex-platform/framework-client 0.0.59 → 0.0.61

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, effect, untracked, Injectable, inject, ElementRef, DestroyRef, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { InjectionToken, signal, computed, effect, untracked, Injectable, inject, ElementRef, DestroyRef, PLATFORM_ID, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
 import { AXPContextStore, AXPDeviceService, AXPExpressionEvaluatorService, AXPDebugService, FORM_DIRTY_TRACE_NS, OVERLAY_WIDGET_SETTLE_TRACE_NS } from '@acorex-platform/framework-client/core';
 import { AXPPageStatus, AXPWidgetStatus, AXP_WIDGET_TOKEN, AXP_WIDGET_COLUMN_TOKEN, layoutProfileMediumFromRenderMode, resolveLayoutProfile, createStringProperty, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty } from '@acorex-platform/framework-shared/widget-core';
 import { cloneDeep, set, get, isEqual, isNil, isUndefined, isObjectLike, merge, sum, isEmpty, isString } from 'lodash-es';
@@ -15,7 +15,7 @@ import * as i2 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
-import { CommonModule, NgComponentOutlet } from '@angular/common';
+import { isPlatformBrowser, CommonModule, NgComponentOutlet } from '@angular/common';
 import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -1190,24 +1190,32 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
         this.contextService.update(path, value, { origin: 'user' });
         this.onValueChanged.next({ sender: this });
     }
+    /**
+     * Repeater clones pass the row index onto every descendant. Attach that index
+     * to the ancestor array path (`rows[0].field`), not after the leaf (`rows.field.[0]`).
+     * Lodash paths need `rows[0].field` — a dotted `.[0].` segment is a literal key.
+     */
+    joinIndexedWidgetPath(sections) {
+        return sections.filter((section) => section != null && section !== '').join('.').replace(/\.\[(\d+)\]/g, '[$1]');
+    }
     detectFullPath() {
         const sections = [];
         const ids = [];
-        //
+        const rowIndex = this.index;
+        let attachedRowIndex = false;
         let parent = this;
-        //
         while (parent) {
             const isValueWidget = parent instanceof AXPValueWidgetComponent && parent.isValueWidget();
             const valueParent = parent;
             const path = valueParent.path ?? (isValueWidget ? valueParent.name : null);
             const id = valueParent.name;
-            //
             if (path) {
+                if (parent !== this && isValueWidget && rowIndex != null && !attachedRowIndex) {
+                    sections.push(`[${rowIndex}]`);
+                    attachedRowIndex = true;
+                }
                 sections.push(path);
             }
-            if (parent.index != null && isValueWidget) {
-                sections.push(`[${parent.index}]`);
-            }
             if (id) {
                 ids.push(id);
                 if (parent.index != null) {
@@ -1216,9 +1224,9 @@ class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
             }
             parent = parent.parent;
         }
-        //
-        this.fullPath.set(sections.reverse().join('.'));
-        this.parentPath.set(sections.slice(0, sections.length - 1).join('.'));
+        sections.reverse();
+        this.fullPath.set(this.joinIndexedWidgetPath(sections));
+        this.parentPath.set(this.joinIndexedWidgetPath(sections.slice(0, Math.max(0, sections.length - 1))));
         this._id = this.name || this.parent ? ids.reverse().join('_') : null;
         if (this._id) {
             this.layoutService.registerWidget(this._id, this);
@@ -1255,6 +1263,8 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
         ...(ngDevMode ? [{ debugName: "textTemplate" }] : /* istanbul ignore next */ []));
         this.dataSource = signal(convertArrayToDataSource([]), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /** AXDataSource instance from options that the isolated widget copy was built from. */
+        this.boundRemoteDataSource = null;
         /** Query key from options, when options.dataSource is a string or `{ id }` object. */
         this.queryDataSourceName = computed(() => {
             const rawValue = this.options()['dataSource'];
@@ -1365,8 +1375,15 @@ class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
         try {
             if (rawValue instanceof AXDataSource) {
                 this.loadedQueryDefinition.set(null);
-                if (!isEqual(rawValue.config, this.dataSource().config)) {
-                    this.dataSource.set(rawValue);
+                if (this.boundRemoteDataSource !== rawValue) {
+                    this.boundRemoteDataSource = rawValue;
+                    const sourceConfig = rawValue.config;
+                    this.dataSource.set(new AXDataSource({
+                        key: sourceConfig.key,
+                        pageSize: sourceConfig.pageSize,
+                        load: (event) => sourceConfig.load(event),
+                        byKey: sourceConfig.byKey ? (key) => sourceConfig.byKey(key) : undefined,
+                    }));
                 }
                 this.queryDataSourceReady.set(true);
                 return;
@@ -1885,6 +1902,12 @@ class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent
             const g = this.resolvedGrid();
             if (g?.gap)
                 style['gap'] = g.gap;
+            // Numeric columns cannot rely on dynamic Tailwind `grid-cols-${n}` (often purged).
+            // Mirror fieldset-layout and set the template via inline style.
+            const columns = g?.columns;
+            if (typeof columns === 'number' && columns > 0) {
+                style['grid-template-columns'] = `repeat(${columns}, minmax(0, 1fr))`;
+            }
             return style;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostGridStyle" }] : /* istanbul ignore next */ []));
@@ -2100,6 +2123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+const AXP_WIDGET_COLUMN_AUTO_FIT = new InjectionToken('AXP_WIDGET_COLUMN_AUTO_FIT');
+
 class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
@@ -2108,6 +2133,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.translation = inject(AXTranslationService);
         this.destroyRef = inject(DestroyRef);
+        this.platformId = inject(PLATFORM_ID);
         /** Original band title key; caption becomes resolved text and must not be re-read for i18n. */
         this.bandCaptionI18nKey = null;
         this.bandLocaleWatchStarted = false;
@@ -2120,6 +2146,21 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         this.pendingEvaluations = new Set();
         this.changeDetectionScheduled = false;
         this.MAX_CACHE_SIZE = 1000; // Limit cache size to prevent memory leaks
+        /** Column was configured with `width: 'auto'` and should follow cell content. */
+        this.autoWidthColumn = false;
+        /** Further content passes are ignored after the directive-rendered cell has been measured. */
+        this.contentAutoFitSettled = false;
+        this.contentAutoFitShouldSettle = false;
+        this.contentAutoFitAttempts = 0;
+        this.contentAutoFitTimer = null;
+        /** Matches the cap `ax-data-table` uses for its own auto-width pass. */
+        this.contentAutoFitMaxWidth = 500;
+        this.stopContentAutoFit = this.destroyRef.onDestroy(() => {
+            if (this.contentAutoFitTimer != null) {
+                clearTimeout(this.contentAutoFitTimer);
+                this.contentAutoFitTimer = null;
+            }
+        });
         /** When true, header click cycles sort (handled by parent; synced with list sort state). */
         this.sortEnabled = false;
         this.sortToggle = new EventEmitter();
@@ -2281,8 +2322,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                     : (this.mergedOptions().width ?? '200px');
         this.allowResizing = this.mergedOptions().allowResizing !== false;
         this.allowSorting = this.sortEnabled;
+        this.syncAutoWidthIntent();
         this.cdr.detectChanges();
         this.fixed = this.columnFixed;
+        this.scheduleContentAutoFit();
     }
     ngAfterContentInit() {
         if (!this.isBand) {
@@ -2302,6 +2345,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         if (this.customWidth) {
             this.width = this.customWidth;
         }
+        this.syncAutoWidthIntent();
         if (this.node) {
             this.allowResizing = this.mergedOptions().allowResizing !== false;
         }
@@ -2414,6 +2458,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         requestAnimationFrame(() => {
             this.cdr.detectChanges();
             this.changeDetectionScheduled = false;
+            this.scheduleContentAutoFit();
         });
     }
     /**
@@ -2428,6 +2473,52 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         }
     }
     //#endregion
+    /**
+     * Re-measures this column after cell widgets exist.
+     * The table's own pass runs once, about 100ms after rows arrive, which is before
+     * `ngComponentOutlet` / `axp-widget-renderer` have painted.
+     */
+    scheduleContentAutoFit(request) {
+        if (!isPlatformBrowser(this.platformId) || !this.autoWidthColumn || this.contentAutoFitSettled) {
+            return;
+        }
+        this.contentAutoFitShouldSettle = this.contentAutoFitShouldSettle || request?.settle === true;
+        if (this.contentAutoFitTimer != null) {
+            clearTimeout(this.contentAutoFitTimer);
+        }
+        this.contentAutoFitTimer = setTimeout(() => {
+            this.contentAutoFitTimer = null;
+            if (!this.autoWidthColumn || this.contentAutoFitSettled) {
+                return;
+            }
+            if (this.pendingEvaluations.size > 0 && this.contentAutoFitAttempts < 20) {
+                this.contentAutoFitAttempts += 1;
+                this.scheduleContentAutoFit({ settle: this.contentAutoFitShouldSettle });
+                return;
+            }
+            this.contentAutoFitAttempts = 0;
+            if (this.contentAutoFitShouldSettle) {
+                this.contentAutoFitSettled = true;
+            }
+            this.contentAutoFitShouldSettle = false;
+            this.grid.autoFitColumnByName(this.name, { maxWidth: this.contentAutoFitMaxWidth });
+        }, 100);
+    }
+    syncAutoWidthIntent() {
+        if (!this.node || this.isBand) {
+            this.autoWidthColumn = false;
+        }
+        else {
+            const configured = this.customWidth || this.mergedOptions()?.width;
+            this.autoWidthColumn = configured === 'auto' || this.width === 'auto';
+        }
+        if (!this.autoWidthColumn && this.contentAutoFitTimer != null) {
+            clearTimeout(this.contentAutoFitTimer);
+            this.contentAutoFitTimer = null;
+            this.contentAutoFitShouldSettle = false;
+            this.contentAutoFitAttempts = 0;
+        }
+    }
     requireNode() {
         if (!this.node) {
             throw new Error('axp-widget-column-renderer: node is required for leaf columns');
@@ -2462,6 +2553,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                             provide: AXP_WIDGET_COLUMN_TOKEN,
                             useValue: tokenValue,
                         },
+                        {
+                            provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                            useValue: this,
+                        },
                     ],
                 });
                 this.evictCacheIfNeeded();
@@ -2497,6 +2592,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                                 provide: AXP_WIDGET_COLUMN_TOKEN,
                                 useValue: tokenValue,
                             },
+                            {
+                                provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                                useValue: this,
+                            },
                         ],
                     });
                     // Replace cached injector to force component recreation on next render
@@ -2525,6 +2624,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                         provide: AXP_WIDGET_COLUMN_TOKEN,
                         useValue: tokenValue,
                     },
+                    {
+                        provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                        useValue: this,
+                    },
                 ],
             });
             // Cache the initial injector
@@ -2540,6 +2643,10 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                 provide: AXDataTableColumnComponent,
                 useExisting: AXPWidgetColumnRendererComponent,
             },
+            {
+                provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                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, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #header>
       <div
@@ -2784,6 +2891,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             provide: AXDataTableColumnComponent,
                             useExisting: AXPWidgetColumnRendererComponent,
                         },
+                        {
+                            provide: AXP_WIDGET_COLUMN_AUTO_FIT,
+                            useExisting: AXPWidgetColumnRendererComponent,
+                        },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['caption'], standalone: false, styles: ["@layer properties;.axp-widget-column-header--sortable{position:relative;width:100%;min-width:0px;cursor:pointer}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header--sortable:hover .axp-widget-column-header__caption,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__caption{padding-inline-end:calc(var(--spacing, .25rem) * 5)}.axp-widget-column-header--sortable.axp-widget-column-header--sort-at-start:hover .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-at-start:focus-within .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-at-start.axp-widget-column-header--sort-active .axp-widget-column-header__caption{padding-inline-start:calc(var(--spacing, .25rem) * 5);padding-inline-end:0px}.axp-widget-column-header__caption{display:block;width:100%;min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-widget-column-header__sort{position:absolute;inset-block:0;inset-inline-end:0;z-index:1;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sort-at-start .axp-widget-column-header__sort{inset-inline-start:0;inset-inline-end:auto}.axp-widget-column-header__sort i{display:block;--tw-leading: 1;line-height:1;font-size:.625rem}.axp-widget-column-header__sort-priority{--tw-leading: 1;line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { customExpandIcon: [{
                 type: Input
@@ -3223,6 +3334,7 @@ class AXPWidgetRendererDirective {
         this.widgetService = inject(AXPWidgetRegistryService);
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.viewContainerRef = inject(ViewContainerRef);
+        this.columnAutoFit = inject(AXP_WIDGET_COLUMN_AUTO_FIT, { optional: true });
         this.isLoading = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
         this.isVisible = signal(true, /* @ts-ignore */
@@ -3429,8 +3541,16 @@ class AXPWidgetRendererDirective {
     /**
      * True when a context store path used in an expression (`context.eval`, `context.options`) is
      * affected by `changedPath`.
+     *
+     * Do not drop `repeaterRowIndexConflicts` or re-enable last-segment matching across rows.
+     * `applicationRoleRows[0].applicationId` and `applicationRoleRows[1].applicationId` share the
+     * suffix `applicationId`; treating that as a match clears sibling repeater fields (roles).
+     * Canonical: `libs/framework/client/layout/widget-core/README.md` (repeater context isolation).
      */
     contextStorePathDependsOnChangedPath(evalPath, changedPath) {
+        if (this.repeaterRowIndexConflicts(evalPath, changedPath)) {
+            return false;
+        }
         const normalizePath = (p) => {
             if (!p)
                 return p;
@@ -3454,23 +3574,87 @@ class AXPWidgetRendererDirective {
             }
             return true;
         };
+        const isIndexedOrChildPath = (parent, child) => {
+            if (!parent || !child) {
+                return false;
+            }
+            if (child === parent) {
+                return true;
+            }
+            if (child.startsWith(`${parent}.`) || child.startsWith(`${parent}[`)) {
+                return true;
+            }
+            const wildcardBase = parent.replace(/\.\{[^}]+\}$/, '');
+            if (wildcardBase !== parent) {
+                return child === wildcardBase || child.startsWith(`${wildcardBase}.`) || child.startsWith(`${wildcardBase}[`);
+            }
+            return false;
+        };
         const evalNorm = normalizePath(evalPath);
         const changedNorm = normalizePath(changedPath);
-        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);
+        const rawMatch = evalPath === changedPath ||
+            isIndexedOrChildPath(evalPath, changedPath) ||
+            isIndexedOrChildPath(changedPath, evalPath) ||
+            isSegmentSuffix(evalPath, changedPath) ||
+            isSegmentSuffix(changedPath, evalPath);
+        const normMatch = evalNorm === changedNorm ||
+            isIndexedOrChildPath(evalNorm, changedNorm) ||
+            isIndexedOrChildPath(changedNorm, evalNorm) ||
+            isSegmentSuffix(evalNorm, changedNorm) ||
+            isSegmentSuffix(changedNorm, evalNorm);
         if (rawMatch || normMatch) {
             return true;
         }
         return this.isPathAlias(evalPath, changedPath);
     }
+    /**
+     * Different indexed rows of the same array must not share context events.
+     * `rows[0].applicationId` must not match `rows[1].applicationId` via suffix (`applicationId`).
+     * Bare `rows` (no `[n]`) still matches every indexed child so list-wide expressions can refresh.
+     * Do not remove this gate or “simplify” it back to suffix-only matching.
+     */
+    repeaterRowIndexConflicts(evalPath, changedPath) {
+        const indexByArray = (path) => {
+            const found = new Map();
+            const matcher = /([^.\[]+)\[(\d+)\]/g;
+            let match;
+            while ((match = matcher.exec(path)) !== null) {
+                found.set(match[1], match[2]);
+            }
+            return found;
+        };
+        const left = indexByArray(evalPath);
+        const right = indexByArray(changedPath);
+        for (const [name, index] of left) {
+            const other = right.get(name);
+            if (other != null && other !== index) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * Whether an expression template string reads context store paths affected by `changedPath`.
+     *
+     * Unresolved `>field` (parentPath empty) is `field` only — never suffix-match every `*.field`.
+     * Do not fold `>` back into generic suffix matching.
      */
     expressionTextDependsOnContextPath(expressionValue, changedPath) {
         const contextEvalRegex = /context\.eval\(['"]([^'\"]+)['"]\)/g;
         let match;
         while ((match = contextEvalRegex.exec(expressionValue)) !== null) {
-            if (this.contextStorePathDependsOnChangedPath(match[1], changedPath)) {
+            const rawPath = match[1];
+            const evalPath = this.resolveRowRelativeContextPath(rawPath);
+            if (rawPath.startsWith('>')) {
+                const relativeField = rawPath.substring(1);
+                if (evalPath === relativeField) {
+                    if (changedPath === evalPath) {
+                        return true;
+                    }
+                    continue;
+                }
+            }
+            if (this.contextStorePathDependsOnChangedPath(evalPath, changedPath)) {
                 return true;
             }
         }
@@ -3568,16 +3752,42 @@ class AXPWidgetRendererDirective {
             return null;
         }
     }
+    /**
+     * `events.context('>field')` is this row only (exact resolved path).
+     * Do not use `*field` / suffix matching for row-local reset triggers — that fires on every
+     * repeater row that has a field of the same name.
+     */
     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)) {
+            const event = typeof trigger.event === 'string' ? trigger.event : '';
+            if (event.includes(changedPath)) {
                 return true;
             }
+            const contextEvent = /events\.context\(\s*['"]([^'"]*)['"]\s*\)/g;
+            let match;
+            while ((match = contextEvent.exec(event)) !== null) {
+                const pattern = match[1];
+                if (!pattern) {
+                    return true;
+                }
+                if (pattern.endsWith('*') && changedPath.startsWith(pattern.slice(0, -1))) {
+                    return true;
+                }
+                if (pattern.startsWith('*') && changedPath.endsWith(pattern.slice(1))) {
+                    return true;
+                }
+                if (pattern.startsWith('>')) {
+                    return changedPath === this.resolveRowRelativeContextPath(pattern);
+                }
+                const resolved = this.resolveRowRelativeContextPath(pattern);
+                if (this.contextStorePathDependsOnChangedPath(resolved, changedPath)) {
+                    return true;
+                }
+            }
         }
         return false;
     }
@@ -3779,6 +3989,7 @@ class AXPWidgetRendererDirective {
             const loadEvent = { sender: this, widget: this.instance };
             this.onLoadEvent.next(loadEvent);
             this.onLoad.emit(loadEvent);
+            this.columnAutoFit?.scheduleContentAutoFit({ settle: true });
         }
         catch (error) {
             // console.error('Error loading component:', error);
@@ -3987,6 +4198,20 @@ class AXPWidgetRendererDirective {
             return false;
         }
     }
+    /**
+     * Repeater-relative paths (`>applicationId`) resolve against this widget's parent
+     * row (`applicationRoleRows[0].applicationId`), not every field with the same name.
+     * When `parentPath` is empty the result is the bare field — callers must not treat that
+     * as “any `*.applicationId`”.
+     */
+    resolveRowRelativeContextPath(path) {
+        if (!path.startsWith('>')) {
+            return path;
+        }
+        const rest = path.substring(1);
+        const parent = this.instance?.parentPath?.() ?? '';
+        return parent ? `${parent}.${rest}` : rest;
+    }
     buildExpressionScope() {
         return {
             context: this.getContextScope(),
@@ -3999,10 +4224,7 @@ class AXPWidgetRendererDirective {
     getContextScope() {
         return {
             eval: (path) => {
-                //TODO: Handle array index
-                const fullPath = path.startsWith('>') ? `${this.instance?.parentPath()}.${path.substring(1)}` : path;
-                const value = this.contextService.getValue(fullPath);
-                return value;
+                return this.contextService.getValue(this.resolveRowRelativeContextPath(path));
             },
             set: (path, value) => {
                 this.contextService.update(path, value, { origin: 'user' });
@@ -4029,6 +4251,10 @@ class AXPWidgetRendererDirective {
             },
         };
     }
+    /**
+     * `events.context('>…')` is exact row path only. Do not OR it with
+     * `contextStorePathDependsOnChangedPath` — that suffix-matches sibling rows.
+     */
     getEventScope() {
         return {
             context: (...paths) => {
@@ -4043,18 +4269,19 @@ class AXPWidgetRendererDirective {
                         return false;
                     }
                     return activePaths.some((path) => {
-                        // Pattern: "prefix*" - matches paths that start with prefix
-                        if (path.endsWith('*')) {
-                            const prefix = path.substring(0, path.length - 1);
+                        if (path.startsWith('>')) {
+                            return c.path === this.resolveRowRelativeContextPath(path);
+                        }
+                        const resolved = this.resolveRowRelativeContextPath(path);
+                        if (resolved.endsWith('*')) {
+                            const prefix = resolved.substring(0, resolved.length - 1);
                             return c.path.startsWith(prefix);
                         }
-                        // Pattern: "*suffix" - matches paths that end with suffix
-                        if (path.startsWith('*')) {
-                            const suffix = path.substring(1);
+                        if (resolved.startsWith('*')) {
+                            const suffix = resolved.substring(1);
                             return c.path.endsWith(suffix);
                         }
-                        // Exact match
-                        return c.path === path;
+                        return c.path === resolved || this.contextStorePathDependsOnChangedPath(resolved, c.path);
                     });
                 }));
             },