@toolbox-web/grid-angular 0.18.1 → 0.18.3

package/fesm2022/toolbox-web-grid-angular.mjs

@@ -1789,40 +1789,33 @@ class GridAdapter {
             this.editorViewRefs.push(viewRef);
             // Trigger change detection
             viewRef.detectChanges();
-            // Get the first root node (the component's host element)
-            const rootNode = viewRef.rootNodes[0];
+            // Use a stable wrapper so Angular's rootNodes (which may include comment
+            // placeholders from <ng-container>) are always inside one element node.
+            const container = document.createElement('span');
+            container.style.display = 'contents';
+            syncRootNodes(viewRef, container);
             // Auto-wire: Listen for commit/cancel events on the rendered component.
             // This allows components to just emit (commit) and (cancel) without
             // requiring explicit template bindings like (commit)="onCommit($event)".
-            if (rootNode && rootNode.addEventListener) {
-                rootNode.addEventListener('commit', (e) => {
-                    const customEvent = e;
-                    ctx.commit(customEvent.detail);
-                });
-                rootNode.addEventListener('cancel', () => {
-                    ctx.cancel();
-                });
-            }
-            // Auto-update editor when value changes externally (e.g., via updateRow cascade).
-            // This keeps Angular template editors in sync without manual DOM patching.
+            container.addEventListener('commit', (e) => {
+                const customEvent = e;
+                ctx.commit(customEvent.detail);
+            });
+            container.addEventListener('cancel', () => {
+                ctx.cancel();
+            });
+            // Auto-update editor when value changes externally (e.g., via updateRow cascade
+            // or Escape-revert in grid mode). Update the template context and run synchronous
+            // detectChanges() — Angular's own bindings and control flow (@for, @if) handle
+            // re-rendering regardless of editor type (inputs, chips, contenteditable, etc.).
             ctx.onValueChange?.((newVal) => {
                 context.$implicit = newVal;
                 context.value = newVal;
-                viewRef.markForCheck();
-                // Also patch raw DOM inputs as a fallback for editors that don't bind to context
-                if (rootNode) {
-                    const input = rootNode.querySelector?.('input,textarea,select');
-                    if (input) {
-                        if (input instanceof HTMLInputElement && input.type === 'checkbox') {
-                            input.checked = !!newVal;
-                        }
-                        else {
-                            input.value = String(newVal ?? '');
-                        }
-                    }
-                }
+                viewRef.detectChanges();
+                // Re-sync rootNodes in case Angular control flow changed them
+                syncRootNodes(viewRef, container);
             });
-            return rootNode;
+            return container;
         };
     }
     /**
@@ -2074,13 +2067,13 @@ class GridAdapter {
                 column: ctx.column,
             }, true);
             wireEditorCallbacks(hostElement, componentRef.instance, (value) => ctx.commit(value), () => ctx.cancel());
-            // Auto-update editor when value changes externally (e.g., via updateRow cascade).
-            // This keeps Angular component editors in sync without manual DOM patching.
+            // Auto-update editor when value changes externally (e.g., via updateRow cascade
+            // or Escape-revert). Update the component input and run detectChanges() —
+            // the component's own template handles rendering regardless of editor type.
             ctx.onValueChange?.((newVal) => {
                 try {
                     // Notify the editor so it can clear stale internal state (e.g., searchText
-                    // in autocomplete editors) before the value input updates. This ensures the
-                    // template reads fresh state during the synchronous detectChanges() below.
+                    // in autocomplete editors) before the value input updates.
                     const instance = componentRef.instance;
                     if (typeof instance['onExternalValueChange'] === 'function') {
                         instance.onExternalValueChange(newVal);
@@ -2089,16 +2082,7 @@ class GridAdapter {
                     componentRef.changeDetectorRef.detectChanges();
                 }
                 catch {
-                    // Input doesn't exist or component is destroyed — fall back to DOM patching
-                    const input = hostElement.querySelector?.('input,textarea,select');
-                    if (input) {
-                        if (input instanceof HTMLInputElement && input.type === 'checkbox') {
-                            input.checked = !!newVal;
-                        }
-                        else {
-                            input.value = String(newVal ?? '');
-                        }
-                    }
+                    // Component is destroyed — nothing to update.
                 }
             });
             return hostElement;
@@ -2190,13 +2174,26 @@ class GridAdapter {
      * @returns Processed GroupingColumnsConfig with actual renderer functions
      */
     processGroupingColumnsConfig(config) {
+        const processed = { ...config };
+        let changed = false;
+        // Bridge top-level groupHeaderRenderer component class
         if (config.groupHeaderRenderer && isComponentClass(config.groupHeaderRenderer)) {
-            return {
-                ...config,
-                groupHeaderRenderer: this.createComponentGroupHeaderRenderer(config.groupHeaderRenderer),
-            };
+            processed.groupHeaderRenderer = this.createComponentGroupHeaderRenderer(config.groupHeaderRenderer);
+            changed = true;
         }
-        return config;
+        // Bridge per-group renderer component classes inside columnGroups
+        if (Array.isArray(config.columnGroups)) {
+            const mappedGroups = config.columnGroups.map((def) => {
+                if (def.renderer && isComponentClass(def.renderer)) {
+                    changed = true;
+                    return { ...def, renderer: this.createComponentGroupHeaderRenderer(def.renderer) };
+                }
+                return def;
+            });
+            if (changed)
+                processed.columnGroups = mappedGroups;
+        }
+        return changed ? processed : config;
     }
     /**
      * Processes a GroupingRowsConfig, converting component class references
@@ -4588,7 +4585,14 @@ class Grid {
             if (columnsValue === undefined)
                 return;
             const grid = this.elementRef.nativeElement;
-            grid.columns = columnsValue;
+            // Process columns through the adapter to convert Angular component classes
+            // (renderer/editor) to functions — the grid's columns setter does NOT call
+            // processConfig, unlike gridConfig. Without this, raw component classes
+            // would be invoked without `new`, causing runtime errors.
+            const processed = this.adapter
+                ? columnsValue.map((col) => this.adapter.processColumn(col))
+                : columnsValue;
+            grid.columns = processed;
         });
         // Effect to sync fitMode to the grid element
         effect(() => {