@toolbox-web/grid-angular 0.17.0 → 0.18.1

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

@@ -356,9 +356,9 @@ function getFormArrayContext(gridElement) {
 class GridFormArray {
     destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
-    cellCommitListener = null;
-    cellCancelListener = null;
-    rowCommitListener = null;
+    cellCommitUnsub = null;
+    cellCancelUnsub = null;
+    rowCommitUnsub = null;
     touchListener = null;
     valueChangesSubscription = null;
     statusChangesSubscriptions = [];
@@ -416,25 +416,19 @@ class GridFormArray {
         // Store the form context on the grid element for other directives to access
         this.#storeFormContext(grid);
         // Intercept cell-commit events to update the FormArray
-        this.cellCommitListener = (e) => {
-            const detail = e.detail;
+        this.cellCommitUnsub = grid.on('cell-commit', (detail) => {
             this.#handleCellCommit(detail);
-        };
-        grid.addEventListener('cell-commit', this.cellCommitListener);
+        });
         // Intercept cell-cancel events to revert FormControls (grid mode Escape)
-        this.cellCancelListener = (e) => {
-            const detail = e.detail;
+        this.cellCancelUnsub = grid.on('cell-cancel', (detail) => {
             this.#handleCellCancel(detail);
-        };
-        grid.addEventListener('cell-cancel', this.cellCancelListener);
+        });
         // Intercept row-commit events to prevent if FormGroup is invalid
-        this.rowCommitListener = (e) => {
+        this.rowCommitUnsub = grid.on('row-commit', (detail, event) => {
             if (!this.syncValidation())
                 return;
-            const detail = e.detail;
-            this.#handleRowCommit(e, detail);
-        };
-        grid.addEventListener('row-commit', this.rowCommitListener);
+            this.#handleRowCommit(event, detail);
+        });
         // Mark FormArray as touched on first interaction
         this.touchListener = () => {
             this.formArray().markAsTouched();
@@ -459,15 +453,9 @@ class GridFormArray {
         const grid = this.elementRef.nativeElement;
         if (!grid)
             return;
-        if (this.cellCommitListener) {
-            grid.removeEventListener('cell-commit', this.cellCommitListener);
-        }
-        if (this.cellCancelListener) {
-            grid.removeEventListener('cell-cancel', this.cellCancelListener);
-        }
-        if (this.rowCommitListener) {
-            grid.removeEventListener('row-commit', this.rowCommitListener);
-        }
+        this.cellCommitUnsub?.();
+        this.cellCancelUnsub?.();
+        this.rowCommitUnsub?.();
         if (this.touchListener) {
             grid.removeEventListener('click', this.touchListener);
         }
@@ -1566,14 +1554,28 @@ class GridAdapter {
      * @returns Processed GridConfig with actual renderer/editor functions
      */
     processGridConfig(config) {
-        const result = { ...config };
+        return this.processConfig(config);
+    }
+    /**
+     * FrameworkAdapter.processConfig implementation.
+     * Called automatically by the grid's `set gridConfig` setter.
+     */
+    processConfig(config) {
+        // Cast to Angular's extended GridConfig since the config may contain
+        // Angular component classes as renderers/editors at runtime
+        const angularConfig = config;
+        const result = { ...angularConfig };
         // Process columns
-        if (config.columns) {
-            result.columns = config.columns.map((col) => this.processColumn(col));
+        if (angularConfig.columns) {
+            result.columns = angularConfig.columns.map((col) => this.processColumn(col));
         }
         // Process typeDefaults - convert Angular component classes to renderer/editor functions
-        if (config.typeDefaults) {
-            result.typeDefaults = this.processTypeDefaults(config.typeDefaults);
+        if (angularConfig.typeDefaults) {
+            result.typeDefaults = this.processTypeDefaults(angularConfig.typeDefaults);
+        }
+        // Process loadingRenderer - convert Angular component class to function
+        if (angularConfig.loadingRenderer && isComponentClass(angularConfig.loadingRenderer)) {
+            result.loadingRenderer = this.createComponentLoadingRenderer(angularConfig.loadingRenderer);
         }
         return result;
     }
@@ -1621,6 +1623,14 @@ class GridAdapter {
         if (column.editor && isComponentClass(column.editor)) {
             processed.editor = this.createComponentEditor(column.editor);
         }
+        // Convert headerRenderer component class to function
+        if (column.headerRenderer && isComponentClass(column.headerRenderer)) {
+            processed.headerRenderer = this.createComponentHeaderRenderer(column.headerRenderer);
+        }
+        // Convert headerLabelRenderer component class to function
+        if (column.headerLabelRenderer && isComponentClass(column.headerLabelRenderer)) {
+            processed.headerLabelRenderer = this.createComponentHeaderLabelRenderer(column.headerLabelRenderer);
+        }
         return processed;
     }
     /**
@@ -2094,6 +2104,222 @@ class GridAdapter {
             return hostElement;
         };
     }
+    /**
+     * Creates a header renderer function from an Angular component class.
+     * Mounts the component with full header context (column, value, sortState, etc.).
+     * @internal
+     */
+    createComponentHeaderRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                column: ctx.column,
+                value: ctx.value,
+                sortState: ctx.sortState,
+                filterActive: ctx.filterActive,
+                renderSortIcon: ctx.renderSortIcon,
+                renderFilterButton: ctx.renderFilterButton,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a header label renderer function from an Angular component class.
+     * Mounts the component with label context (column, value).
+     * @internal
+     */
+    createComponentHeaderLabelRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                column: ctx.column,
+                value: ctx.value,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a group header renderer function from an Angular component class.
+     *
+     * The component should accept group header inputs (id, label, columns, firstIndex, isImplicit).
+     * Returns the host element directly (groupHeaderRenderer returns an element, not void).
+     * @internal
+     */
+    createComponentGroupHeaderRenderer(componentClass) {
+        return (params) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                id: params.id,
+                label: params.label,
+                columns: params.columns,
+                firstIndex: params.firstIndex,
+                isImplicit: params.isImplicit,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Processes a GroupingColumnsConfig, converting component class references
+     * to actual renderer functions.
+     *
+     * @param config - Angular grouping columns configuration with possible component class references
+     * @returns Processed GroupingColumnsConfig with actual renderer functions
+     */
+    processGroupingColumnsConfig(config) {
+        if (config.groupHeaderRenderer && isComponentClass(config.groupHeaderRenderer)) {
+            return {
+                ...config,
+                groupHeaderRenderer: this.createComponentGroupHeaderRenderer(config.groupHeaderRenderer),
+            };
+        }
+        return config;
+    }
+    /**
+     * Processes a GroupingRowsConfig, converting component class references
+     * to actual renderer functions.
+     *
+     * @param config - Angular grouping rows configuration with possible component class references
+     * @returns Processed GroupingRowsConfig with actual renderer functions
+     */
+    processGroupingRowsConfig(config) {
+        if (config.groupRowRenderer && isComponentClass(config.groupRowRenderer)) {
+            return {
+                ...config,
+                groupRowRenderer: this.createComponentGroupRowRenderer(config.groupRowRenderer),
+            };
+        }
+        return config;
+    }
+    /**
+     * Processes a PinnedRowsConfig, converting component class references
+     * in `customPanels[].render` to actual renderer functions.
+     *
+     * @param config - Angular pinned rows configuration with possible component class references
+     * @returns Processed PinnedRowsConfig with actual renderer functions
+     */
+    processPinnedRowsConfig(config) {
+        if (!Array.isArray(config.customPanels))
+            return config;
+        const hasComponentRender = config.customPanels.some((panel) => isComponentClass(panel.render));
+        if (!hasComponentRender)
+            return config;
+        return {
+            ...config,
+            customPanels: config.customPanels.map((panel) => {
+                if (!isComponentClass(panel.render))
+                    return panel;
+                return {
+                    ...panel,
+                    render: this.createComponentPinnedRowsPanelRenderer(panel.render),
+                };
+            }),
+        };
+    }
+    /**
+     * Creates a pinned rows panel renderer function from an Angular component class.
+     *
+     * The component should accept inputs from PinnedRowsContext (totalRows, filteredRows,
+     * selectedRows, columns, rows, grid).
+     * @internal
+     */
+    createComponentPinnedRowsPanelRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                totalRows: ctx.totalRows,
+                filteredRows: ctx.filteredRows,
+                selectedRows: ctx.selectedRows,
+                columns: ctx.columns,
+                rows: ctx.rows,
+                grid: ctx.grid,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a loading renderer function from an Angular component class.
+     *
+     * The component should accept a `size` input ('large' | 'small').
+     * @internal
+     */
+    createComponentLoadingRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                size: ctx.size,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a group row renderer function from an Angular component class.
+     *
+     * The component should accept group row inputs (key, value, depth, rows, expanded, toggleExpand).
+     * Returns the host element directly (groupRowRenderer returns an element, not void).
+     * @internal
+     */
+    createComponentGroupRowRenderer(componentClass) {
+        return (params) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                key: params.key,
+                value: params.value,
+                depth: params.depth,
+                rows: params.rows,
+                expanded: params.expanded,
+                toggleExpand: params.toggleExpand,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
     /**
      * Creates a filter panel renderer function from an Angular component class.
      *
@@ -2202,7 +2428,7 @@ class GridAdapter {
     }
 }
 /**
- * @deprecated Use `GridAdapter` instead. This alias will be removed in a future version.
+ * @deprecated Use `GridAdapter` instead. This alias will be removed in v2.
  * @see {@link GridAdapter}
  */
 const AngularGridAdapter = GridAdapter;
@@ -2580,7 +2806,7 @@ function injectGrid() {
  * ## Usage
  *
  * ```typescript
- * import { Component } from '@angular/core';
+ * import { Component, viewChild, ElementRef } from '@angular/core';
  * import { BaseFilterPanel } from '@toolbox-web/grid-angular';
  *
  * @Component({
@@ -2592,10 +2818,10 @@ function injectGrid() {
  *   `
  * })
  * export class TextFilterComponent extends BaseFilterPanel {
- *   @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+ *   input = viewChild.required<ElementRef<HTMLInputElement>>('input');
  *
  *   applyFilter(): void {
- *     this.params().applyTextFilter('contains', this.input.nativeElement.value);
+ *     this.params().applyTextFilter('contains', this.input().nativeElement.value);
  *   }
  * }
  * ```
@@ -2832,13 +3058,21 @@ class BaseGridEditor {
         const grid = this.elementRef.nativeElement.closest('tbw-grid');
         if (!grid)
             return;
-        const beforeHandler = () => this.onBeforeEditClose();
-        grid.addEventListener('before-edit-close', beforeHandler, { once: true });
-        const handler = () => this.onEditClose();
-        grid.addEventListener('edit-close', handler, { once: true });
+        let unsubBefore;
+        let unsubClose;
+        unsubBefore = grid.on('before-edit-close', () => {
+            this.onBeforeEditClose();
+            unsubBefore?.();
+            unsubBefore = undefined;
+        });
+        unsubClose = grid.on('edit-close', () => {
+            this.onEditClose();
+            unsubClose?.();
+            unsubClose = undefined;
+        });
         this._editCloseCleanup = () => {
-            grid.removeEventListener('before-edit-close', beforeHandler);
-            grid.removeEventListener('edit-close', handler);
+            unsubBefore?.();
+            unsubClose?.();
         };
     }
     // ============================================================================
@@ -3188,7 +3422,7 @@ let anchorCounter = 0;
  * ## Usage
  *
  * ```typescript
- * import { Component, ViewChild, ElementRef } from '@angular/core';
+ * import { Component, viewChild, ElementRef, effect } from '@angular/core';
  * import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
  *
  * @Component({
@@ -3211,18 +3445,22 @@ let anchorCounter = 0;
  *   `
  * })
  * export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> {
- *   @ViewChild('panel') panelRef!: ElementRef<HTMLElement>;
- *   @ViewChild('inlineInput') inputRef!: ElementRef<HTMLInputElement>;
+ *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
+ *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
  *
  *   protected override overlayPosition = 'below' as const;
  *
- *   ngAfterViewInit(): void {
- *     this.initOverlay(this.panelRef.nativeElement);
- *     if (this.isCellFocused()) this.showOverlay();
+ *   constructor() {
+ *     super();
+ *     effect(() => {
+ *       const panel = this.panelRef().nativeElement;
+ *       this.initOverlay(panel);
+ *       if (this.isCellFocused()) this.showOverlay();
+ *     });
  *   }
  *
  *   protected getInlineInput(): HTMLInputElement | null {
- *     return this.inputRef?.nativeElement ?? null;
+ *     return this.inputRef()?.nativeElement ?? null;
  *   }
  *
  *   protected onOverlayOutsideClick(): void {
@@ -3283,7 +3521,7 @@ class BaseOverlayEditor extends BaseGridEditor {
     /**
      * Initialise the overlay with the panel element.
      *
-     * Call this in `ngAfterViewInit` with your `@ViewChild` panel reference.
+     * Call this in an `effect()` or `afterNextRender()` with your `viewChild` panel reference.
      * The panel is moved to `<body>` and hidden until {@link showOverlay} is called.
      *
      * @param panel - The overlay panel DOM element
@@ -3801,9 +4039,9 @@ class GridLazyForm {
     rowIndexMap = new Map();
     // Track which row is currently being edited
     editingRowIndex = null;
-    cellCommitListener = null;
-    rowCommitListener = null;
-    rowsChangeListener = null;
+    cellCommitUnsub = null;
+    rowCommitUnsub = null;
+    rowsChangeUnsub = null;
     /**
      * Factory function to create a FormGroup for a row.
      * Called lazily when the row first enters edit mode.
@@ -3850,22 +4088,17 @@ class GridLazyForm {
         // Store the form context for AngularGridAdapter to access
         this.#storeFormContext(grid);
         // Listen for cell-commit to update FormControl and sync validation
-        this.cellCommitListener = (e) => {
-            const detail = e.detail;
+        this.cellCommitUnsub = grid.on('cell-commit', (detail) => {
             this.#handleCellCommit(detail);
-        };
-        grid.addEventListener('cell-commit', this.cellCommitListener);
+        });
         // Listen for row-commit to sync FormGroup values back to row and cleanup
-        this.rowCommitListener = (e) => {
-            const detail = e.detail;
-            this.#handleRowCommit(e, detail);
-        };
-        grid.addEventListener('row-commit', this.rowCommitListener);
+        this.rowCommitUnsub = grid.on('row-commit', (detail, event) => {
+            this.#handleRowCommit(event, detail);
+        });
         // Listen for rows-change to update row index mappings
-        this.rowsChangeListener = () => {
+        this.rowsChangeUnsub = grid.on('rows-change', () => {
             this.#updateRowIndexMap();
-        };
-        grid.addEventListener('rows-change', this.rowsChangeListener);
+        });
         // Initial row index mapping
         this.#updateRowIndexMap();
     }
@@ -3873,15 +4106,9 @@ class GridLazyForm {
         const grid = this.elementRef.nativeElement;
         if (!grid)
             return;
-        if (this.cellCommitListener) {
-            grid.removeEventListener('cell-commit', this.cellCommitListener);
-        }
-        if (this.rowCommitListener) {
-            grid.removeEventListener('row-commit', this.rowCommitListener);
-        }
-        if (this.rowsChangeListener) {
-            grid.removeEventListener('rows-change', this.rowsChangeListener);
-        }
+        this.cellCommitUnsub?.();
+        this.rowCommitUnsub?.();
+        this.rowsChangeUnsub?.();
         this.#clearFormContext(grid);
         this.formGroupCache.clear();
         this.rowIndexMap.clear();
@@ -4565,7 +4792,7 @@ class Grid {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : []));
     /**
-     * @deprecated Use `gridConfig` instead. This input will be removed in a future version.
+     * @deprecated Use `gridConfig` instead. This input will be removed in v2.
      *
      * The `angularConfig` name was inconsistent with React and Vue adapters, which both use `gridConfig`.
      * The `gridConfig` input now accepts `GridConfig` directly.
@@ -4678,7 +4905,7 @@ class Grid {
      */
     multiSort = input(...(ngDevMode ? [undefined, { debugName: "multiSort" }] : []));
     /**
-     * @deprecated Use `[multiSort]` instead. Will be removed in a future version.
+     * @deprecated Use `[multiSort]` instead. Will be removed in v2.
      *
      * Enable column sorting. This is an alias for `[multiSort]`.
      *
@@ -4719,7 +4946,7 @@ class Grid {
      */
     reorderColumns = input(...(ngDevMode ? [undefined, { debugName: "reorderColumns" }] : []));
     /**
-     * @deprecated Use `reorderColumns` instead. Will be removed in v2.0.
+     * @deprecated Use `reorderColumns` instead. Will be removed in v2.
      */
     reorder = input(...(ngDevMode ? [undefined, { debugName: "reorder" }] : []));
     /**
@@ -4765,7 +4992,7 @@ class Grid {
      *
      * @example
      * ```html
-     * <tbw-grid [groupingColumns]="{ columnGroups: [...] }" />
+     * <tbw-grid [groupingColumns]="true" />
      * ```
      */
     groupingColumns = input(...(ngDevMode ? [undefined, { debugName: "groupingColumns" }] : []));
@@ -5220,54 +5447,13 @@ 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
-        // via the __frameworkAdapter hook during attach()
+        // Register adapter on the grid element so processConfig is called
+        // automatically by the grid's set gridConfig setter, and so
+        // MasterDetailPlugin can use it via the __frameworkAdapter hook during attach()
         // 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,
-        });
+        // Wire up all event listeners based on eventOutputMap
+        this.setupEventListeners(grid);
     }
     /**
      * Sets up event listeners for all outputs using the eventOutputMap.
@@ -5311,11 +5497,32 @@ class Grid {
         addPlugin('reorderColumns', this.reorderColumns() ?? this.reorder());
         addPlugin('visibility', this.visibility());
         addPlugin('pinnedColumns', this.pinnedColumns());
-        addPlugin('groupingColumns', this.groupingColumns());
+        // Pre-process groupingColumns config to bridge Angular component classes
+        const gcConfig = this.groupingColumns();
+        if (gcConfig && typeof gcConfig === 'object' && this.adapter) {
+            addPlugin('groupingColumns', this.adapter.processGroupingColumnsConfig(gcConfig));
+        }
+        else {
+            addPlugin('groupingColumns', gcConfig);
+        }
         addPlugin('columnVirtualization', this.columnVirtualization());
         addPlugin('reorderRows', this.reorderRows() ?? this.rowReorder());
-        addPlugin('groupingRows', this.groupingRows());
-        addPlugin('pinnedRows', this.pinnedRows());
+        // Pre-process groupingRows config to bridge Angular component classes
+        const grConfig = this.groupingRows();
+        if (grConfig && typeof grConfig === 'object' && this.adapter) {
+            addPlugin('groupingRows', this.adapter.processGroupingRowsConfig(grConfig));
+        }
+        else {
+            addPlugin('groupingRows', grConfig);
+        }
+        // Pre-process pinnedRows config to bridge Angular component classes in customPanels
+        const prConfig = this.pinnedRows();
+        if (prConfig && typeof prConfig === 'object' && this.adapter) {
+            addPlugin('pinnedRows', this.adapter.processPinnedRowsConfig(prConfig));
+        }
+        else {
+            addPlugin('pinnedRows', prConfig);
+        }
         addPlugin('tree', this.tree());
         addPlugin('masterDetail', this.masterDetail());
         addPlugin('responsive', this.responsive());
@@ -5442,10 +5649,6 @@ 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) {