@toolbox-web/grid-angular 0.11.0 → 0.11.1

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

@@ -1457,12 +1457,31 @@ class GridAdapter {
             // This is important when only an editor template is provided (no view template)
             return undefined;
         }
+        // Cell cache for this column - maps cell element to its view ref and root node.
+        // When the grid recycles pool elements during scroll, the same cellEl is reused
+        // for different row data. By caching per cellEl, we reuse the Angular view and
+        // just update its context instead of creating a new embedded view every time.
+        // This matches what React and Vue adapters do with their cell caches.
+        const cellCache = new WeakMap();
         return (ctx) => {
             // Skip rendering if the cell is in editing mode
             // This prevents the renderer from overwriting the editor when the grid re-renders
             if (ctx.cellEl?.classList.contains('editing')) {
                 return null;
             }
+            const cellEl = ctx.cellEl;
+            if (cellEl) {
+                const cached = cellCache.get(cellEl);
+                if (cached) {
+                    // Reuse existing view - just update context and re-run change detection
+                    cached.viewRef.context.$implicit = ctx.value;
+                    cached.viewRef.context.value = ctx.value;
+                    cached.viewRef.context.row = ctx.row;
+                    cached.viewRef.context.column = ctx.column;
+                    cached.viewRef.detectChanges();
+                    return cached.rootNode;
+                }
+            }
             // Create the context for the template
             const context = {
                 $implicit: ctx.value,
@@ -1477,6 +1496,10 @@ class GridAdapter {
             viewRef.detectChanges();
             // Get the first root node (the component's host element)
             const rootNode = viewRef.rootNodes[0];
+            // Cache for reuse on scroll recycles
+            if (cellEl) {
+                cellCache.set(cellEl, { viewRef, rootNode });
+            }
             return rootNode;
         };
     }
@@ -1782,12 +1805,32 @@ class GridAdapter {
      * @internal
      */
     createComponentRenderer(componentClass) {
+        // Cell cache for component-based renderers - maps cell element to its component ref
+        const cellCache = new WeakMap();
         return (ctx) => {
-            const { hostElement } = this.mountComponent(componentClass, {
+            const cellEl = ctx.cellEl;
+            if (cellEl) {
+                const cached = cellCache.get(cellEl);
+                if (cached) {
+                    // Reuse existing component - just update inputs
+                    this.setComponentInputs(cached.componentRef, {
+                        value: ctx.value,
+                        row: ctx.row,
+                        column: ctx.column,
+                    });
+                    cached.componentRef.changeDetectorRef.detectChanges();
+                    return cached.hostElement;
+                }
+            }
+            const { hostElement, componentRef } = this.mountComponent(componentClass, {
                 value: ctx.value,
                 row: ctx.row,
                 column: ctx.column,
             });
+            // Cache for reuse on scroll recycles
+            if (cellEl) {
+                cellCache.set(cellEl, { componentRef, hostElement });
+            }
             return hostElement;
         };
     }
@@ -3093,30 +3136,24 @@ class Grid {
                 const existingIcons = angularCfg?.icons || {};
                 coreConfigOverrides['icons'] = { ...registryIcons, ...existingIcons };
             }
-            // If gridConfig is provided, process it (converts component classes to renderer functions)
-            const processedConfig = angularCfg ? this.adapter.processGridConfig(angularCfg) : null;
-            // IMPORTANT: If user is NOT using gridConfig input, and there are no feature plugins
-            // or config overrides to merge, do NOT overwrite grid.gridConfig.
-            // This allows [gridConfig]="myConfig" binding to work correctly without the directive
-            // creating a new object that strips properties like typeDefaults.
+            // Nothing to do if there's no config input and no feature inputs
             const hasFeaturePlugins = featurePlugins.length > 0;
             const hasConfigOverrides = Object.keys(coreConfigOverrides).length > 0;
-            // The input signal gives us reactive tracking of the user's config
-            const existingConfig = angularCfg || {};
-            if (!processedConfig && !hasFeaturePlugins && !hasConfigOverrides && !angularCfg) {
-                // Nothing to merge and no config input - let the user's DOM binding work directly
+            if (!angularCfg && !hasFeaturePlugins && !hasConfigOverrides) {
                 return;
             }
-            // Merge: processed config < feature plugins
-            const configPlugins = processedConfig?.plugins || existingConfig.plugins || [];
+            const userConfig = angularCfg || {};
+            // Merge feature-input plugins with the user's own plugins
+            const configPlugins = userConfig.plugins || [];
             const mergedPlugins = [...featurePlugins, ...configPlugins];
-            // Build the final config, preserving ALL existing properties (including typeDefaults)
-            const baseConfig = processedConfig || existingConfig;
+            // The interceptor on element.gridConfig (installed in ngOnInit)
+            // handles converting component classes → functions via processGridConfig,
+            // so we can pass the raw Angular config through. The interceptor is
+            // idempotent, making this safe even if the config is already processed.
             grid.gridConfig = {
-                ...existingConfig, // Start with existing config to preserve all properties (including typeDefaults)
-                ...baseConfig, // Then apply processed/angular config
+                ...userConfig,
                 ...coreConfigOverrides,
-                plugins: mergedPlugins.length > 0 ? mergedPlugins : baseConfig.plugins,
+                plugins: mergedPlugins.length > 0 ? mergedPlugins : userConfig.plugins,
             };
         });
         // Effect to sync loading state to the grid element
@@ -3921,6 +3958,12 @@ class Grid {
         this.adapter = new GridAdapter(this.injector, this.appRef, this.viewContainerRef);
         DataGridElement.registerAdapter(this.adapter);
         const grid = this.elementRef.nativeElement;
+        // Intercept the element's gridConfig setter so that ALL writes
+        // (including Angular's own template property binding when CUSTOM_ELEMENTS_SCHEMA
+        // is used) go through the adapter's processGridConfig first.
+        // This converts Angular component classes to vanilla renderer/editor functions
+        // before the grid's internal ConfigManager ever sees them.
+        this.interceptElementGridConfig(grid);
         // Wire up all event listeners based on eventOutputMap
         this.setupEventListeners(grid);
         // Register adapter on the grid element so MasterDetailPlugin can use it
@@ -3928,6 +3971,42 @@ class Grid {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         grid.__frameworkAdapter = this.adapter;
     }
+    /**
+     * Overrides the element's `gridConfig` property so every write is processed
+     * through the adapter before reaching the grid core.
+     *
+     * Why: Angular with `CUSTOM_ELEMENTS_SCHEMA` may bind `[gridConfig]` to both
+     * the directive input AND the native custom-element property. The directive
+     * input feeds an effect that merges feature plugins, but the native property
+     * receives the raw config (with component classes as editors/renderers).
+     * Intercepting the setter guarantees only processed configs reach the grid.
+     */
+    interceptElementGridConfig(grid) {
+        const proto = Object.getPrototypeOf(grid);
+        const desc = Object.getOwnPropertyDescriptor(proto, 'gridConfig');
+        if (!desc?.set || !desc?.get)
+            return;
+        const originalSet = desc.set;
+        const originalGet = desc.get;
+        const adapter = this.adapter;
+        // Instance-level override (does not affect the prototype or other grid elements)
+        Object.defineProperty(grid, 'gridConfig', {
+            get() {
+                return originalGet.call(this);
+            },
+            set(value) {
+                if (value && adapter) {
+                    // processGridConfig is idempotent: already-processed functions pass
+                    // through isComponentClass unchanged, so double-processing is safe.
+                    originalSet.call(this, adapter.processGridConfig(value));
+                }
+                else {
+                    originalSet.call(this, value);
+                }
+            },
+            configurable: true,
+        });
+    }
     /**
      * Sets up event listeners for all outputs using the eventOutputMap.
      */
@@ -4101,6 +4180,10 @@ class Grid {
     }
     ngOnDestroy() {
         const grid = this.elementRef.nativeElement;
+        // Remove the gridConfig interceptor (restores prototype behavior)
+        if (grid) {
+            delete grid['gridConfig'];
+        }
         // Cleanup all event listeners
         if (grid) {
             for (const [eventName, listener] of this.eventListeners) {