@toolbox-web/grid-angular 0.11.0 → 0.12.0

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

@@ -1,4 +1,4 @@
-import { inject, ElementRef, signal } from '@angular/core';
+import { inject, ElementRef, DestroyRef, signal } from '@angular/core';
 import { registerFeature } from '@toolbox-web/grid-angular';
 import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';
 
@@ -85,10 +85,40 @@ registerFeature('selection', (config) => {
  */
 function injectGridSelection() {
     const elementRef = inject(ElementRef);
+    const destroyRef = inject(DestroyRef);
     const isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
+    // Reactive selection state
+    const selectionSignal = signal(null, ...(ngDevMode ? [{ debugName: "selectionSignal" }] : []));
+    const selectedRowIndicesSignal = signal([], ...(ngDevMode ? [{ debugName: "selectedRowIndicesSignal" }] : []));
     // Lazy discovery: cached grid reference
     let cachedGrid = null;
     let readyPromiseStarted = false;
+    let listenerAttached = false;
+    /**
+     * Handle selection-change events from the grid.
+     * Updates both reactive signals.
+     */
+    const onSelectionChange = (e) => {
+        const detail = e.detail;
+        const plugin = getPlugin();
+        if (plugin) {
+            selectionSignal.set(plugin.getSelection());
+            selectedRowIndicesSignal.set(detail.mode === 'row' ? plugin.getSelectedRowIndices() : []);
+        }
+    };
+    /**
+     * Attach the selection-change event listener to the grid element.
+     * Called once when the grid is first discovered.
+     */
+    const attachListener = (grid) => {
+        if (listenerAttached)
+            return;
+        listenerAttached = true;
+        grid.addEventListener('selection-change', onSelectionChange);
+        destroyRef.onDestroy(() => {
+            grid.removeEventListener('selection-change', onSelectionChange);
+        });
+    };
     /**
      * Lazily find the grid element. Called on each method invocation.
      * Caches the reference once found and triggers ready() check.
@@ -99,6 +129,7 @@ function injectGridSelection() {
         const grid = elementRef.nativeElement.querySelector('tbw-grid');
         if (grid) {
             cachedGrid = grid;
+            attachListener(grid);
             // Start ready() check only once
             if (!readyPromiseStarted) {
                 readyPromiseStarted = true;
@@ -112,6 +143,8 @@ function injectGridSelection() {
     };
     return {
         isReady: isReady.asReadonly(),
+        selection: selectionSignal.asReadonly(),
+        selectedRowIndices: selectedRowIndicesSignal.asReadonly(),
         selectAll: () => {
             const plugin = getPlugin();
             if (!plugin) {

package/fesm2022/toolbox-web-grid-angular-features-selection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-selection.mjs","sources":["../../../../libs/grid-angular/features/selection/src/index.ts","../../../../libs/grid-angular/features/selection/src/toolbox-web-grid-angular-features-selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `selection` input on Grid directive.\n * Also exports `injectGridSelection()` for programmatic selection control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n *\n * <tbw-grid [selection]=\"'range'\" />\n * ```\n *\n * @example Using injectGridSelection\n * ```typescript\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({...})\n * export class MyComponent {\n *   private selection = injectGridSelection<Employee>();\n *\n *   selectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelected() {\n *     return this.selection.getSelection();\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { SelectionPlugin, type CellRange, type SelectionResult } from '@toolbox-web/grid/plugins/selection';\n\nregisterFeature('selection', (config) => {\n  // Handle shorthand: 'cell', 'row', 'range'\n  if (config === 'cell' || config === 'row' || config === 'range') {\n    return new SelectionPlugin({ mode: config });\n  }\n  // Full config object\n  return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from injectGridSelection.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface SelectionMethods {\n  /**\n   * Select all rows (row mode) or all cells (range mode).\n   */\n  selectAll: () => void;\n\n  /**\n   * Clear all selection.\n   */\n  clearSelection: () => void;\n\n  /**\n   * Get the current selection state.\n   * Use this to derive selected rows, indices, etc.\n   */\n  getSelection: () => SelectionResult | null;\n\n  /**\n   * Check if a specific cell is selected.\n   */\n  isCellSelected: (row: number, col: number) => boolean;\n\n  /**\n   * Set selection ranges programmatically.\n   */\n  setRanges: (ranges: CellRange[]) => void;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic selection control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/selection';\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleSelectAll()\">Select All</button>\n *     <tbw-grid [rows]=\"rows\" [selection]=\"'range'\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   selection = injectGridSelection();\n *\n *   handleSelectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelectedRows() {\n *     const selection = this.selection.getSelection();\n *     if (!selection) return [];\n *     // Derive rows from selection.ranges as needed\n *   }\n * }\n * ```\n */\nexport function injectGridSelection<TRow = unknown>(): SelectionMethods {\n  const elementRef = inject(ElementRef);\n  const isReady = signal(false);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement<TRow> | null = null;\n  let readyPromiseStarted = false;\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement<TRow> | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement<TRow> | null;\n    if (grid) {\n      cachedGrid = grid;\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): SelectionPlugin | undefined => {\n    return getGrid()?.getPlugin(SelectionPlugin);\n  };\n\n  return {\n    isReady: isReady.asReadonly(),\n\n    selectAll: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n            `  → Enable selection on the grid:\\n` +\n            `    <tbw-grid [selection]=\"'range'\" />`,\n        );\n        return;\n      }\n      const grid = getGrid();\n      // Cast to any to access protected config\n      const mode = (plugin as any).config?.mode;\n\n      if (mode === 'row') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const allIndices = new Set<number>();\n        for (let i = 0; i < rowCount; i++) allIndices.add(i);\n        (plugin as any).selected = allIndices;\n        (plugin as any).requestAfterRender?.();\n      } else if (mode === 'range') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const colCount = (grid as any)?._columns?.length ?? 0;\n        if (rowCount > 0 && colCount > 0) {\n          plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n        }\n      }\n    },\n\n    clearSelection: () => {\n      getPlugin()?.clearSelection();\n    },\n\n    getSelection: () => {\n      return getPlugin()?.getSelection() ?? null;\n    },\n\n    isCellSelected: (row: number, col: number) => {\n      return getPlugin()?.isCellSelected(row, col) ?? false;\n    },\n\n    setRanges: (ranges: CellRange[]) => {\n      getPlugin()?.setRanges(ranges);\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbox-web-grid-angular-features-selection.mjs","sources":["../../../../libs/grid-angular/features/selection/src/index.ts","../../../../libs/grid-angular/features/selection/src/toolbox-web-grid-angular-features-selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `selection` input on Grid directive.\n * Also exports `injectGridSelection()` for programmatic selection control.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n *\n * <tbw-grid [selection]=\"'range'\" />\n * ```\n *\n * @example Using injectGridSelection\n * ```typescript\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({...})\n * export class MyComponent {\n *   private selection = injectGridSelection<Employee>();\n *\n *   selectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelected() {\n *     return this.selection.getSelection();\n *   }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport {\n  SelectionPlugin,\n  type CellRange,\n  type SelectionChangeDetail,\n  type SelectionResult,\n} from '@toolbox-web/grid/plugins/selection';\n\nregisterFeature('selection', (config) => {\n  // Handle shorthand: 'cell', 'row', 'range'\n  if (config === 'cell' || config === 'row' || config === 'range') {\n    return new SelectionPlugin({ mode: config });\n  }\n  // Full config object\n  return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from injectGridSelection.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n * This ensures it works with lazy-rendered tabs, conditional rendering, etc.\n */\nexport interface SelectionMethods {\n  /**\n   * Select all rows (row mode) or all cells (range mode).\n   */\n  selectAll: () => void;\n\n  /**\n   * Clear all selection.\n   */\n  clearSelection: () => void;\n\n  /**\n   * Get the current selection state (imperative, point-in-time snapshot).\n   * For reactive selection state, use the `selection` signal instead.\n   */\n  getSelection: () => SelectionResult | null;\n\n  /**\n   * Check if a specific cell is selected.\n   */\n  isCellSelected: (row: number, col: number) => boolean;\n\n  /**\n   * Set selection ranges programmatically.\n   */\n  setRanges: (ranges: CellRange[]) => void;\n\n  /**\n   * Reactive selection state. Updates automatically whenever the selection changes.\n   * Null when no SelectionPlugin is active or no selection has been made yet.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selection()?.ranges?.length ?? 0 }} cells selected\n   *\n   * // In computed:\n   * readonly hasSelection = computed(() => (this.selection.selection()?.ranges?.length ?? 0) > 0);\n   * ```\n   */\n  selection: Signal<SelectionResult | null>;\n\n  /**\n   * Reactive selected row indices (sorted ascending). Updates automatically.\n   * Convenience signal for row-mode selection — returns `[]` in cell/range modes\n   * or when nothing is selected.\n   *\n   * @example\n   * ```typescript\n   * readonly selection = injectGridSelection();\n   *\n   * // In template:\n   * // {{ selection.selectedRowIndices().length }} rows selected\n   *\n   * // In computed:\n   * readonly selectedRows = computed(() =>\n   *   this.selection.selectedRowIndices().map(i => this.rows[i])\n   * );\n   * ```\n   */\n  selectedRowIndices: Signal<number[]>;\n\n  /**\n   * Signal indicating if grid is ready.\n   * The grid is discovered lazily, so this updates when first method call succeeds.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic selection control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization. This ensures it works reliably with:\n * - Lazy-rendered tabs\n * - Conditional rendering (*ngIf)\n * - Dynamic component loading\n *\n * @example\n * ```typescript\n * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/selection';\n * import { injectGridSelection } from '@toolbox-web/grid-angular/features/selection';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   schemas: [CUSTOM_ELEMENTS_SCHEMA],\n *   template: `\n *     <button (click)=\"handleSelectAll()\">Select All</button>\n *     <tbw-grid [rows]=\"rows\" [selection]=\"'range'\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   selection = injectGridSelection();\n *\n *   handleSelectAll() {\n *     this.selection.selectAll();\n *   }\n *\n *   getSelectedRows() {\n *     const selection = this.selection.getSelection();\n *     if (!selection) return [];\n *     // Derive rows from selection.ranges as needed\n *   }\n * }\n * ```\n */\nexport function injectGridSelection<TRow = unknown>(): SelectionMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Reactive selection state\n  const selectionSignal = signal<SelectionResult | null>(null);\n  const selectedRowIndicesSignal = signal<number[]>([]);\n\n  // Lazy discovery: cached grid reference\n  let cachedGrid: DataGridElement<TRow> | null = null;\n  let readyPromiseStarted = false;\n  let listenerAttached = false;\n\n  /**\n   * Handle selection-change events from the grid.\n   * Updates both reactive signals.\n   */\n  const onSelectionChange = (e: Event): void => {\n    const detail = (e as CustomEvent<SelectionChangeDetail>).detail;\n    const plugin = getPlugin();\n    if (plugin) {\n      selectionSignal.set(plugin.getSelection());\n      selectedRowIndicesSignal.set(detail.mode === 'row' ? plugin.getSelectedRowIndices() : []);\n    }\n  };\n\n  /**\n   * Attach the selection-change event listener to the grid element.\n   * Called once when the grid is first discovered.\n   */\n  const attachListener = (grid: DataGridElement<TRow>): void => {\n    if (listenerAttached) return;\n    listenerAttached = true;\n\n    grid.addEventListener('selection-change', onSelectionChange);\n\n    destroyRef.onDestroy(() => {\n      grid.removeEventListener('selection-change', onSelectionChange);\n    });\n  };\n\n  /**\n   * Lazily find the grid element. Called on each method invocation.\n   * Caches the reference once found and triggers ready() check.\n   */\n  const getGrid = (): DataGridElement<TRow> | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement<TRow> | null;\n    if (grid) {\n      cachedGrid = grid;\n      attachListener(grid);\n      // Start ready() check only once\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): SelectionPlugin | undefined => {\n    return getGrid()?.getPlugin(SelectionPlugin);\n  };\n\n  return {\n    isReady: isReady.asReadonly(),\n    selection: selectionSignal.asReadonly(),\n    selectedRowIndices: selectedRowIndicesSignal.asReadonly(),\n\n    selectAll: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n            `  → Enable selection on the grid:\\n` +\n            `    <tbw-grid [selection]=\"'range'\" />`,\n        );\n        return;\n      }\n      const grid = getGrid();\n      // Cast to any to access protected config\n      const mode = (plugin as any).config?.mode;\n\n      if (mode === 'row') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const allIndices = new Set<number>();\n        for (let i = 0; i < rowCount; i++) allIndices.add(i);\n        (plugin as any).selected = allIndices;\n        (plugin as any).requestAfterRender?.();\n      } else if (mode === 'range') {\n        const rowCount = grid?.rows?.length ?? 0;\n        const colCount = (grid as any)?._columns?.length ?? 0;\n        if (rowCount > 0 && colCount > 0) {\n          plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n        }\n      }\n    },\n\n    clearSelection: () => {\n      getPlugin()?.clearSelection();\n    },\n\n    getSelection: () => {\n      return getPlugin()?.getSelection() ?? null;\n    },\n\n    isCellSelected: (row: number, col: number) => {\n      return getPlugin()?.isCellSelected(row, col) ?? false;\n    },\n\n    setRanges: (ranges: CellRange[]) => {\n      getPlugin()?.setRanges(ranges);\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1413,6 +1413,10 @@ class GridAdapter {
             if (config.editor && isComponentClass(config.editor)) {
                 processedConfig.editor = this.createComponentEditor(config.editor);
             }
+            // Convert filterPanelRenderer component class to function
+            if (config.filterPanelRenderer && isComponentClass(config.filterPanelRenderer)) {
+                processedConfig.filterPanelRenderer = this.createComponentFilterPanelRenderer(config.filterPanelRenderer);
+            }
             processed[type] = processedConfig;
         }
         return processed;
@@ -1457,12 +1461,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 +1500,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;
         };
     }
@@ -1537,10 +1564,14 @@ class GridAdapter {
                 $implicit: ctx.value,
                 value: ctx.value,
                 row: ctx.row,
+                field: ctx.field,
                 column: ctx.column,
+                rowId: ctx.rowId ?? '',
                 // Preferred: simple callback functions
                 onCommit,
                 onCancel,
+                updateRow: ctx.updateRow,
+                onValueChange: ctx.onValueChange,
                 // FormControl from FormArray (if available)
                 control,
                 // Deprecated: EventEmitters (for backwards compatibility)
@@ -1566,6 +1597,25 @@ class GridAdapter {
                     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.
+            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 ?? '');
+                        }
+                    }
+                }
+            });
             return rootNode;
         };
     }
@@ -1734,6 +1784,13 @@ class GridAdapter {
             // Type assertion needed: adapter bridges TRow to core's unknown
             typeDefault.editor = this.createComponentEditor(config.editor);
         }
+        // Create filterPanelRenderer function that instantiates the Angular component
+        if (config.filterPanelRenderer && isComponentClass(config.filterPanelRenderer)) {
+            typeDefault.filterPanelRenderer = this.createComponentFilterPanelRenderer(config.filterPanelRenderer);
+        }
+        else if (config.filterPanelRenderer) {
+            typeDefault.filterPanelRenderer = config.filterPanelRenderer;
+        }
         return typeDefault;
     }
     /**
@@ -1782,12 +1839,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;
         };
     }
@@ -1803,9 +1880,57 @@ class GridAdapter {
                 column: ctx.column,
             });
             this.wireEditorCallbacks(hostElement, componentRef, (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.
+            ctx.onValueChange?.((newVal) => {
+                try {
+                    componentRef.setInput('value', newVal);
+                    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 ?? '');
+                        }
+                    }
+                }
+            });
             return hostElement;
         };
     }
+    /**
+     * Creates a filter panel renderer function from an Angular component class.
+     *
+     * The component must implement `FilterPanel` (i.e., have a `params` input).
+     * The component is mounted into the filter panel container element.
+     * @internal
+     */
+    createComponentFilterPanelRenderer(componentClass) {
+        return (container, params) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            // Set params input
+            try {
+                componentRef.setInput('params', params);
+            }
+            catch {
+                // Input doesn't exist on component — ignore
+            }
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            container.appendChild(hostElement);
+        };
+    }
     /**
      * Subscribes to an Angular output on a component instance.
      * Works with both EventEmitter and OutputEmitterRef (signal outputs).
@@ -2366,6 +2491,9 @@ function clearFeatureRegistry() {
  */
 class BaseGridEditor {
     elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    /** Cleanup function for the edit-close listener */
+    _editCloseCleanup = null;
     // ============================================================================
     // Inputs
     // ============================================================================
@@ -2461,8 +2589,51 @@ class BaseGridEditor {
         return Object.entries(ctrl.errors).map(([key, value]) => this.getErrorMessage(key, value));
     }, ...(ngDevMode ? [{ debugName: "allErrorMessages" }] : []));
     // ============================================================================
+    // Lifecycle
+    // ============================================================================
+    constructor() {
+        afterNextRender(() => this._initEditCloseListener());
+        this._destroyRef.onDestroy(() => {
+            this._editCloseCleanup?.();
+            this._editCloseCleanup = null;
+        });
+    }
+    _initEditCloseListener() {
+        const grid = this.elementRef.nativeElement.closest('tbw-grid');
+        if (!grid)
+            return;
+        const handler = () => this.onEditClose();
+        grid.addEventListener('edit-close', handler, { once: true });
+        this._editCloseCleanup = () => grid.removeEventListener('edit-close', handler);
+    }
+    // ============================================================================
     // Methods
     // ============================================================================
+    /**
+     * Whether this editor's cell is the currently focused cell.
+     *
+     * In row editing mode the grid creates editors for every editable cell
+     * in the row simultaneously. Use this to conditionally auto-focus inputs
+     * or open panels only in the active cell.
+     *
+     * Performs a synchronous DOM check — safe to call from `ngAfterViewInit`.
+     */
+    isCellFocused() {
+        return this.elementRef.nativeElement.closest('[part="cell"]')?.classList.contains('cell-focus') ?? false;
+    }
+    /**
+     * Called when the grid ends the editing session for this cell.
+     *
+     * Override to perform cleanup such as closing overlay panels, autocomplete
+     * dropdowns, or other floating UI that lives at `<body>` level and would
+     * otherwise persist after the editor DOM is removed.
+     *
+     * The listener is set up automatically via `afterNextRender` — no manual
+     * wiring required.
+     */
+    onEditClose() {
+        // Default: no-op. Subclasses override.
+    }
     /**
      * Commit a new value. Emits the commit output AND dispatches a DOM event.
      * The DOM event enables the grid's auto-wiring to catch the commit.
@@ -2526,7 +2697,7 @@ class BaseGridEditor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseGridEditor, decorators: [{
             type: Directive
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
 
 // Symbol for storing form context on the grid element (shared with GridFormArray)
 const FORM_ARRAY_CONTEXT = Symbol('formArrayContext');
@@ -3093,30 +3264,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 +4086,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 +4099,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 +4308,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) {