@toolbox-web/grid-angular 0.12.1 → 0.13.1

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

@@ -381,9 +381,20 @@ class GridFormArray {
         // Subscribe to valueChanges to sync grid rows when FormArray content changes.
         // Use startWith to immediately sync the current value.
         // Note: We use getRawValue() to include disabled controls.
+        //
+        // In grid mode, editors bind directly to FormControls, so every keystroke
+        // fires valueChanges. We skip the sync when an editor input is focused to
+        // prevent destroying/recreating editors mid-edit (which orphans overlays
+        // like mat-autocomplete/mat-select panels and causes focus loss).
         this.valueChangesSubscription = formArray.valueChanges
             .pipe(startWith(formArray.getRawValue()), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
+            // Skip sync while an editor is actively focused in the grid.
+            // The FormArray already has the latest values via its own controls;
+            // re-setting grid.rows would create new object references and trigger
+            // an unnecessary render cycle.
+            if (this.#isEditorFocused(grid))
+                return;
             grid.rows = formArray.getRawValue();
         });
     }, ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : []));
@@ -458,6 +469,20 @@ class GridFormArray {
         const editingPlugin = grid.getPluginByName?.('editing');
         return editingPlugin?.config?.mode === 'grid';
     }
+    /**
+     * Checks if a focusable editor element inside the grid currently has focus.
+     * Used to skip valueChanges → grid.rows sync while a user is actively editing,
+     * preventing editor destruction (which orphans overlay panels like autocomplete/select).
+     */
+    #isEditorFocused(grid) {
+        if (!this.#isGridMode())
+            return false;
+        const active = document.activeElement;
+        if (!active)
+            return false;
+        // Check if the focused element is inside the grid
+        return grid.contains(active) && active.closest('.editing') != null;
+    }
     /**
      * Sets up reactive validation syncing for grid mode.
      * Subscribes to statusChanges on all FormControls to update validation state in real-time.
@@ -552,6 +577,8 @@ class GridFormArray {
      */
     #storeFormContext(grid) {
         const getRowFormGroup = (rowIndex) => this.#getRowFormGroup(rowIndex);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
         const context = {
             getRow: (rowIndex) => {
                 const formArray = this.formArray();
@@ -571,7 +598,9 @@ class GridFormArray {
             getValue: () => {
                 return this.formArray().getRawValue();
             },
-            hasFormGroups: this.#isFormArrayOfFormGroups(),
+            get hasFormGroups() {
+                return self.#isFormArrayOfFormGroups();
+            },
             getControl: (rowIndex, field) => {
                 const rowFormGroup = getRowFormGroup(rowIndex);
                 if (!rowFormGroup)
@@ -1340,6 +1369,10 @@ class GridAdapter {
     viewContainerRef;
     viewRefs = [];
     componentRefs = [];
+    /** Editor-specific view refs tracked separately for per-cell cleanup via releaseCell. */
+    editorViewRefs = [];
+    /** Editor-specific component refs tracked separately for per-cell cleanup via releaseCell. */
+    editorComponentRefs = [];
     typeRegistry = null;
     constructor(injector, appRef, viewContainerRef) {
         this.injector = injector;
@@ -1498,8 +1531,24 @@ class GridAdapter {
             this.viewRefs.push(viewRef);
             // Trigger change detection
             viewRef.detectChanges();
-            // Get the first root node (the component's host element)
-            const rootNode = viewRef.rootNodes[0];
+            // Find the first Element root node. When *tbwRenderer is used on <ng-container>,
+            // rootNodes[0] is a comment node (<!--ng-container-->); the actual content is in
+            // subsequent root nodes. For single-element templates, rootNodes[0] IS the element.
+            let rootNode = viewRef.rootNodes[0];
+            const elementNodes = viewRef.rootNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
+            if (elementNodes.length === 1) {
+                // Single element among the root nodes — use it directly
+                rootNode = elementNodes[0];
+            }
+            else if (elementNodes.length > 1) {
+                // Multiple element nodes — wrap in a span container so all are rendered
+                const wrapper = document.createElement('span');
+                wrapper.style.display = 'contents';
+                for (const node of viewRef.rootNodes) {
+                    wrapper.appendChild(node);
+                }
+                rootNode = wrapper;
+            }
             // Cache for reuse on scroll recycles
             if (cellEl) {
                 cellCache.set(cellEl, { viewRef, rootNode });
@@ -1580,7 +1629,8 @@ class GridAdapter {
             };
             // Create embedded view from template
             const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
-            this.viewRefs.push(viewRef);
+            // Track in editor-specific array for per-cell cleanup via releaseCell
+            this.editorViewRefs.push(viewRef);
             // Trigger change detection
             viewRef.detectChanges();
             // Get the first root node (the component's host element)
@@ -1798,7 +1848,7 @@ class GridAdapter {
      * Shared logic between renderer and editor component creation.
      * @internal
      */
-    mountComponent(componentClass, inputs) {
+    mountComponent(componentClass, inputs, isEditor = false) {
         // Create a host element for the component
         const hostElement = document.createElement('span');
         hostElement.style.display = 'contents';
@@ -1811,7 +1861,13 @@ class GridAdapter {
         this.setComponentInputs(componentRef, inputs);
         // Attach to app for change detection
         this.appRef.attachView(componentRef.hostView);
-        this.componentRefs.push(componentRef);
+        // Track in editor-specific array for per-cell cleanup, or general array for renderers
+        if (isEditor) {
+            this.editorComponentRefs.push(componentRef);
+        }
+        else {
+            this.componentRefs.push(componentRef);
+        }
         // Trigger change detection
         componentRef.changeDetectorRef.detectChanges();
         return { hostElement, componentRef };
@@ -1878,7 +1934,7 @@ class GridAdapter {
                 value: ctx.value,
                 row: ctx.row,
                 column: ctx.column,
-            });
+            }, true);
             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.
@@ -1959,6 +2015,33 @@ class GridAdapter {
             }
         }
     }
+    /**
+     * Called when a cell's content is about to be wiped (e.g., exiting edit mode,
+     * scroll-recycling a row, or rebuilding a row).
+     *
+     * Destroys any editor embedded views or component refs whose DOM is
+     * inside the given cell element. This prevents memory leaks from
+     * orphaned Angular views that would otherwise stay in the change
+     * detection tree indefinitely.
+     */
+    releaseCell(cellEl) {
+        // Release editor embedded views whose root nodes are inside this cell
+        for (let i = this.editorViewRefs.length - 1; i >= 0; i--) {
+            const ref = this.editorViewRefs[i];
+            if (ref.rootNodes.some((n) => cellEl.contains(n))) {
+                ref.destroy();
+                this.editorViewRefs.splice(i, 1);
+            }
+        }
+        // Release editor component refs whose host element is inside this cell
+        for (let i = this.editorComponentRefs.length - 1; i >= 0; i--) {
+            const ref = this.editorComponentRefs[i];
+            if (cellEl.contains(ref.location.nativeElement)) {
+                ref.destroy();
+                this.editorComponentRefs.splice(i, 1);
+            }
+        }
+    }
     /**
      * Clean up all view references and component references.
      * Call this when your app/component is destroyed.
@@ -1966,8 +2049,12 @@ class GridAdapter {
     destroy() {
         this.viewRefs.forEach((ref) => ref.destroy());
         this.viewRefs = [];
+        this.editorViewRefs.forEach((ref) => ref.destroy());
+        this.editorViewRefs = [];
         this.componentRefs.forEach((ref) => ref.destroy());
         this.componentRefs = [];
+        this.editorComponentRefs.forEach((ref) => ref.destroy());
+        this.editorComponentRefs = [];
     }
 }
 /**
@@ -2429,6 +2516,94 @@ function clearFeatureRegistry() {
     warnedFeatures.clear();
 }
 
+/**
+ * Base class for Angular filter panel components.
+ *
+ * Provides a ready-made `params` input and common lifecycle helpers
+ * (`applyAndClose`, `clearAndClose`) so consumers only need to implement
+ * their filter logic in `applyFilter()`.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { BaseFilterPanel } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-text-filter',
+ *   template: `
+ *     <input #input (keydown.enter)="applyAndClose()" />
+ *     <button (click)="applyAndClose()">Apply</button>
+ *     <button (click)="clearAndClose()">Clear</button>
+ *   `
+ * })
+ * export class TextFilterComponent extends BaseFilterPanel {
+ *   @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+ *
+ *   applyFilter(): void {
+ *     this.params().applyTextFilter('contains', this.input.nativeElement.value);
+ *   }
+ * }
+ * ```
+ *
+ * ## Template Syntax
+ *
+ * The grid's filtering plugin will mount this component and provide `params`
+ * automatically. No manual wiring is required:
+ *
+ * ```typescript
+ * gridConfig = {
+ *   columns: [
+ *     { field: 'name', filterable: true, filterPanel: TextFilterComponent },
+ *   ],
+ * };
+ * ```
+ *
+ * @typeParam TRow - The row data type (available via `params().column`)
+ */
+class BaseFilterPanel {
+    /**
+     * Filter panel parameters injected by the grid's filtering plugin.
+     *
+     * Provides access to:
+     * - `field` — the column field name
+     * - `column` — full column configuration
+     * - `uniqueValues` — distinct values in the column
+     * - `excludedValues` — currently excluded values (set filter)
+     * - `searchText` — current search text
+     * - `applySetFilter(excluded)` — apply a set-based (include/exclude) filter
+     * - `applyTextFilter(operator, value, valueTo?)` — apply a text/number filter
+     * - `clearFilter()` — clear the filter for this column
+     * - `closePanel()` — close the filter panel
+     */
+    params = input.required(...(ngDevMode ? [{ debugName: "params" }] : []));
+    /**
+     * Apply the filter then close the panel.
+     *
+     * Calls {@link applyFilter} followed by `params().closePanel()`.
+     * Bind this to your "Apply" button or Enter key handler.
+     */
+    applyAndClose() {
+        this.applyFilter();
+        this.params().closePanel();
+    }
+    /**
+     * Clear the filter then close the panel.
+     *
+     * Calls `params().clearFilter()` followed by `params().closePanel()`.
+     * Bind this to your "Clear" / "Reset" button.
+     */
+    clearAndClose() {
+        this.params().clearFilter();
+        this.params().closePanel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseFilterPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: BaseFilterPanel, isStandalone: true, inputs: { params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseFilterPanel, decorators: [{
+            type: Directive
+        }], propDecorators: { params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: true }] }] } });
+
 /**
  * Base class for grid cell editors.
  *
@@ -2699,6 +2874,712 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Directive
         }], 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"] }] } });
 
+/**
+ * Base class for grid editors that also work as Angular form controls.
+ *
+ * Combines `BaseGridEditor` with `ControlValueAccessor` so the same component
+ * can be used inside a `<tbw-grid>` **and** in a standalone `<form>`.
+ *
+ * ## What it provides
+ *
+ * | Member | Purpose |
+ * |--------|---------|
+ * | `cvaValue` | Signal holding the value written by the form control |
+ * | `disabledState` | Signal tracking `setDisabledState` calls |
+ * | `displayValue` | Computed that prefers grid value (`currentValue`) and falls back to `cvaValue` |
+ * | `commitBoth(v)` | Commits via both CVA `onChange` and grid `commitValue` |
+ * | `writeValue` / `registerOn*` / `setDisabledState` | Full CVA implementation |
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, forwardRef } from '@angular/core';
+ * import { NG_VALUE_ACCESSOR } from '@angular/forms';
+ * import { BaseGridEditorCVA } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-date-picker',
+ *   providers: [{
+ *     provide: NG_VALUE_ACCESSOR,
+ *     useExisting: forwardRef(() => DatePickerComponent),
+ *     multi: true,
+ *   }],
+ *   template: `
+ *     <input
+ *       type="date"
+ *       [value]="displayValue()"
+ *       [disabled]="disabledState()"
+ *       (change)="commitBoth($event.target.value)"
+ *       (keydown.escape)="cancelEdit()"
+ *     />
+ *   `
+ * })
+ * export class DatePickerComponent extends BaseGridEditorCVA<MyRow, string> {}
+ * ```
+ *
+ * > **Note:** Subclasses must still provide `NG_VALUE_ACCESSOR` themselves
+ * > because `forwardRef(() => ConcreteClass)` must reference the concrete
+ * > component — this is an Angular limitation.
+ *
+ * @typeParam TRow - The row data type
+ * @typeParam TValue - The cell/control value type
+ */
+class BaseGridEditorCVA extends BaseGridEditor {
+    // ============================================================================
+    // CVA State
+    // ============================================================================
+    /** Internal onChange callback registered by the form control. */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onChange = () => { };
+    /** Internal onTouched callback registered by the form control. */
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onTouched = () => { };
+    /**
+     * Signal holding the value written by the form control via `writeValue()`.
+     * Updated when the form control pushes a new value (e.g. `patchValue`, `setValue`).
+     */
+    cvaValue = signal(null, ...(ngDevMode ? [{ debugName: "cvaValue" }] : []));
+    /**
+     * Signal tracking the disabled state set by the form control.
+     * Updated when `setDisabledState()` is called by Angular's forms module.
+     */
+    disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : []));
+    /**
+     * Resolved display value.
+     *
+     * Prefers `currentValue()` (grid context — from `control.value` or `value` input)
+     * and falls back to `cvaValue()` (standalone form context — from `writeValue`).
+     *
+     * Use this in your template instead of reading `currentValue()` directly
+     * so the component works in both grid and standalone form contexts.
+     */
+    displayValue = computed(() => {
+        return this.currentValue() ?? this.cvaValue();
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    // ============================================================================
+    // ControlValueAccessor Implementation
+    // ============================================================================
+    /**
+     * Called by Angular forms when the form control value changes programmatically.
+     */
+    writeValue(value) {
+        this.cvaValue.set(value);
+    }
+    /**
+     * Called by Angular forms to register a change callback.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Called by Angular forms to register a touched callback.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Called by Angular forms to set the disabled state.
+     */
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+    }
+    // ============================================================================
+    // Dual-Commit Helpers
+    // ============================================================================
+    /**
+     * Commit a value through both the CVA (form control) and the grid.
+     *
+     * - Calls the CVA `onChange` callback (updates the form control)
+     * - Marks the control as touched
+     * - Calls `commitValue()` (emits grid commit event + DOM `CustomEvent`)
+     *
+     * Use this instead of `commitValue()` when your editor doubles as a form control.
+     *
+     * @param value - The new value to commit
+     */
+    commitBoth(value) {
+        // Update CVA
+        this.cvaValue.set(value);
+        this._onChange(value);
+        this._onTouched();
+        // Update grid
+        if (value != null) {
+            this.commitValue(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseGridEditorCVA, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: BaseGridEditorCVA, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseGridEditorCVA, decorators: [{
+            type: Directive
+        }] });
+
+// #endregion
+// #region Global Styles
+/** Tracks whether the global overlay stylesheet has been injected. */
+let overlayStylesInjected = false;
+/**
+ * CSS for the overlay panel base layer.
+ * Injected once into `<head>` on first `BaseOverlayEditor` use.
+ *
+ * Uses CSS Anchor Positioning as primary strategy with a JS fallback
+ * for browsers that don't support it (Firefox, Safari as of late 2025).
+ */
+const OVERLAY_STYLES = /* css */ `
+.tbw-overlay-panel {
+  position: fixed;
+  z-index: 10000;
+  background: var(--tbw-overlay-bg, #fff);
+  border: 1px solid var(--tbw-overlay-border, #ccc);
+  border-radius: var(--tbw-overlay-radius, 4px);
+  box-shadow: var(--tbw-overlay-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.tbw-overlay-panel:popover-open {
+  display: block;
+}
+
+@supports (anchor-name: --a) {
+  .tbw-overlay-panel[data-anchor-id] {
+    position: fixed;
+    position-anchor: var(--tbw-overlay-anchor);
+    inset: unset;
+  }
+  .tbw-overlay-panel[data-pos="below"] {
+    top: anchor(bottom);
+    left: anchor(left);
+    position-try-fallbacks: flip-block;
+  }
+  .tbw-overlay-panel[data-pos="above"] {
+    bottom: anchor(top);
+    left: anchor(left);
+    position-try-fallbacks: flip-block;
+  }
+  .tbw-overlay-panel[data-pos="below-right"] {
+    top: anchor(bottom);
+    right: anchor(right);
+    position-try-fallbacks: flip-block;
+  }
+  .tbw-overlay-panel[data-pos="over-top-left"] {
+    top: anchor(top);
+    left: anchor(left);
+  }
+  .tbw-overlay-panel[data-pos="over-bottom-left"] {
+    bottom: anchor(bottom);
+    left: anchor(left);
+  }
+}
+`;
+function ensureOverlayStyles() {
+    if (overlayStylesInjected)
+        return;
+    overlayStylesInjected = true;
+    const style = document.createElement('style');
+    style.setAttribute('data-tbw-overlay', '');
+    style.textContent = OVERLAY_STYLES;
+    document.head.appendChild(style);
+}
+// #endregion
+// #region Anchor ID Counter
+let anchorCounter = 0;
+// #endregion
+/**
+ * Base class for grid editors that display a floating overlay panel.
+ *
+ * Provides infrastructure for:
+ * - **Overlay positioning** — CSS Anchor Positioning with JS fallback
+ * - **Focus gating** — in row editing mode, the panel only opens for the focused cell
+ * - **Click-outside detection** — closes the panel when clicking outside
+ * - **MutationObserver** — detects cell focus changes (row editing mode)
+ * - **Escape handling** — closes the panel and returns focus to the inline input
+ * - **Synthetic Tab dispatch** — advances grid focus after overlay close
+ * - **Automatic teardown** — removes the panel from `<body>` and cleans up listeners
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, ViewChild, ElementRef } from '@angular/core';
+ * import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-date-editor',
+ *   template: `
+ *     <input
+ *       #inlineInput
+ *       readonly
+ *       [value]="currentValue()"
+ *       (click)="onInlineClick()"
+ *       (keydown)="onInlineKeydown($event)"
+ *     />
+ *     <div #panel class="tbw-overlay-panel" style="width: 280px;">
+ *       <!-- your date picker UI here -->
+ *       <div class="actions">
+ *         <button (click)="selectAndClose(selectedDate)">OK</button>
+ *         <button (click)="hideOverlay()">Cancel</button>
+ *       </div>
+ *     </div>
+ *   `
+ * })
+ * export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> {
+ *   @ViewChild('panel') panelRef!: ElementRef<HTMLElement>;
+ *   @ViewChild('inlineInput') inputRef!: ElementRef<HTMLInputElement>;
+ *
+ *   protected override overlayPosition = 'below' as const;
+ *
+ *   ngAfterViewInit(): void {
+ *     this.initOverlay(this.panelRef.nativeElement);
+ *     if (this.isCellFocused()) this.showOverlay();
+ *   }
+ *
+ *   protected getInlineInput(): HTMLInputElement | null {
+ *     return this.inputRef?.nativeElement ?? null;
+ *   }
+ *
+ *   protected onOverlayOutsideClick(): void {
+ *     this.hideOverlay();
+ *   }
+ *
+ *   selectAndClose(date: string): void {
+ *     this.commitValue(date);
+ *     this.hideOverlay();
+ *   }
+ * }
+ * ```
+ *
+ * @typeParam TRow - The row data type
+ * @typeParam TValue - The cell value type
+ */
+class BaseOverlayEditor extends BaseGridEditor {
+    _elementRef = inject(ElementRef);
+    _overlayDestroyRef = inject(DestroyRef);
+    // ============================================================================
+    // Configuration
+    // ============================================================================
+    /**
+     * Position of the overlay panel relative to the anchor cell.
+     * Override in subclasses to change the default position.
+     *
+     * @default 'below'
+     */
+    overlayPosition = 'below';
+    // ============================================================================
+    // Internal State
+    // ============================================================================
+    /** The overlay panel element (set via `initOverlay()`). */
+    _panel = null;
+    /** Whether the overlay is currently visible. */
+    _isOpen = false;
+    /** Unique anchor ID for CSS Anchor Positioning. */
+    _anchorId = '';
+    /** Whether the browser supports CSS Anchor Positioning. */
+    _supportsAnchor = false;
+    /** AbortController for all overlay-related listeners. */
+    _abortCtrl = null;
+    /** MutationObserver watching cell focus class changes. */
+    _focusObserver = null;
+    // ============================================================================
+    // Lifecycle
+    // ============================================================================
+    constructor() {
+        super();
+        this._supportsAnchor = typeof CSS !== 'undefined' && CSS.supports('anchor-name', '--a');
+        ensureOverlayStyles();
+        afterNextRender(() => this._setupFocusObserver());
+        this._overlayDestroyRef.onDestroy(() => this.teardownOverlay());
+    }
+    // ============================================================================
+    // Public API — Subclass Interface
+    // ============================================================================
+    /**
+     * Initialise the overlay with the panel element.
+     *
+     * Call this in `ngAfterViewInit` 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
+     */
+    initOverlay(panel) {
+        this._panel = panel;
+        // Assign a unique anchor ID
+        this._anchorId = `tbw-anchor-${++anchorCounter}`;
+        panel.classList.add('tbw-overlay-panel');
+        panel.setAttribute('data-pos', this.overlayPosition);
+        panel.setAttribute('data-anchor-id', this._anchorId);
+        panel.style.display = 'none';
+        // Set up CSS Anchor Positioning on the cell
+        if (this._supportsAnchor) {
+            const cell = this._getCell();
+            if (cell) {
+                cell.style.setProperty('anchor-name', `--${this._anchorId}`);
+                panel.style.setProperty('--tbw-overlay-anchor', `--${this._anchorId}`);
+            }
+        }
+        // Move panel to body so it escapes grid overflow clipping
+        document.body.appendChild(panel);
+        // Set up click-outside detection
+        this._abortCtrl = new AbortController();
+        document.addEventListener('pointerdown', (e) => this._onDocumentPointerDown(e), {
+            signal: this._abortCtrl.signal,
+        });
+    }
+    /**
+     * Show the overlay panel.
+     *
+     * If CSS Anchor Positioning is not supported, falls back to JS-based
+     * positioning using `getBoundingClientRect()`.
+     */
+    showOverlay() {
+        if (!this._panel || this._isOpen)
+            return;
+        this._isOpen = true;
+        this._panel.style.display = '';
+        // JS fallback positioning for browsers without CSS Anchor Positioning
+        if (!this._supportsAnchor) {
+            this._positionWithJs();
+        }
+    }
+    /**
+     * Hide the overlay panel.
+     *
+     * @param suppressTabAdvance - When `true`, skip synthetic Tab dispatch
+     *   (useful when hiding is triggered by an external focus change).
+     */
+    hideOverlay(suppressTabAdvance) {
+        if (!this._panel || !this._isOpen)
+            return;
+        this._isOpen = false;
+        this._panel.style.display = 'none';
+        if (!suppressTabAdvance) {
+            this.getInlineInput()?.focus();
+        }
+    }
+    /**
+     * Close and immediately re-open the overlay.
+     * Useful after the panel content changes size and needs repositioning.
+     */
+    reopenOverlay() {
+        if (!this._panel)
+            return;
+        this._isOpen = false;
+        this._panel.style.display = 'none';
+        this.showOverlay();
+    }
+    /**
+     * Remove the overlay from the DOM and clean up all listeners.
+     *
+     * Called automatically on `DestroyRef.onDestroy`. Can also be called
+     * manually if the editor needs early cleanup.
+     */
+    teardownOverlay() {
+        this._abortCtrl?.abort();
+        this._abortCtrl = null;
+        this._focusObserver?.disconnect();
+        this._focusObserver = null;
+        if (this._panel?.parentNode) {
+            this._panel.parentNode.removeChild(this._panel);
+        }
+        this._panel = null;
+        this._isOpen = false;
+        // Clean up anchor-name on the cell
+        if (this._supportsAnchor) {
+            const cell = this._getCell();
+            if (cell) {
+                cell.style.removeProperty('anchor-name');
+            }
+        }
+    }
+    /**
+     * Override in `edit-close` handler to also hide the overlay.
+     * This is called automatically by `BaseGridEditor` when the grid
+     * ends the editing session.
+     */
+    onEditClose() {
+        this.hideOverlay(true);
+    }
+    // ============================================================================
+    // Keyboard & Click Helpers
+    // ============================================================================
+    /**
+     * Keydown handler for the inline readonly input.
+     *
+     * - **Enter / Space / ArrowDown / F2** → open overlay
+     * - **Escape** → calls {@link handleEscape}
+     *
+     * Bind this to `(keydown)` on your inline input element.
+     */
+    onInlineKeydown(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'F2':
+                event.preventDefault();
+                this.showOverlay();
+                this.onOverlayOpened();
+                break;
+            case 'Escape':
+                this.handleEscape(event);
+                break;
+        }
+    }
+    /**
+     * Click handler for the inline input.
+     * Opens the overlay and calls {@link onOverlayOpened}.
+     *
+     * Bind this to `(click)` on your inline input element.
+     */
+    onInlineClick() {
+        if (this._isOpen) {
+            this.hideOverlay();
+        }
+        else {
+            this.showOverlay();
+            this.onOverlayOpened();
+        }
+    }
+    /**
+     * Handle Escape key press.
+     *
+     * If the overlay is open, closes it and returns focus to the inline input.
+     * If the overlay is already closed, cancels the edit entirely.
+     */
+    handleEscape(event) {
+        if (this._isOpen) {
+            event.stopPropagation();
+            this.hideOverlay();
+        }
+        else {
+            this.cancelEdit();
+        }
+    }
+    /**
+     * Dispatch a synthetic Tab key event to advance grid focus.
+     *
+     * Call this after committing a value and closing the overlay so the
+     * grid moves focus to the next cell.
+     *
+     * @param backward - When `true`, dispatch Shift+Tab to move backwards.
+     */
+    advanceGridFocus(backward = false) {
+        const cell = this._getCell();
+        if (!cell)
+            return;
+        cell.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'Tab',
+            shiftKey: backward,
+            bubbles: true,
+            cancelable: true,
+        }));
+    }
+    /**
+     * Called after the overlay is shown.
+     *
+     * Override to focus an element inside the panel, start animations, etc.
+     * Default implementation is a no-op.
+     */
+    onOverlayOpened() {
+        // Default: no-op. Subclasses override.
+    }
+    // ============================================================================
+    // Private Helpers
+    // ============================================================================
+    /** Find the parent cell element for this editor. */
+    _getCell() {
+        return this._elementRef.nativeElement.closest('[part="cell"]') ?? null;
+    }
+    /**
+     * JS fallback positioning for browsers without CSS Anchor Positioning.
+     * Uses `getBoundingClientRect()` with viewport overflow detection.
+     */
+    _positionWithJs() {
+        const cell = this._getCell();
+        const panel = this._panel;
+        if (!cell || !panel)
+            return;
+        const cellRect = cell.getBoundingClientRect();
+        // Temporarily make visible to measure
+        panel.style.visibility = 'hidden';
+        panel.style.display = '';
+        const panelRect = panel.getBoundingClientRect();
+        panel.style.visibility = '';
+        const viewportH = window.innerHeight;
+        const viewportW = window.innerWidth;
+        let top;
+        let left;
+        switch (this.overlayPosition) {
+            case 'above': {
+                top = cellRect.top - panelRect.height;
+                left = cellRect.left;
+                // Flip to below if off-screen
+                if (top < 0)
+                    top = cellRect.bottom;
+                break;
+            }
+            case 'below-right': {
+                top = cellRect.bottom;
+                left = cellRect.right - panelRect.width;
+                // Flip to above if off-screen
+                if (top + panelRect.height > viewportH)
+                    top = cellRect.top - panelRect.height;
+                break;
+            }
+            case 'over-top-left': {
+                top = cellRect.top;
+                left = cellRect.left;
+                break;
+            }
+            case 'over-bottom-left': {
+                top = cellRect.bottom - panelRect.height;
+                left = cellRect.left;
+                break;
+            }
+            case 'below':
+            default: {
+                top = cellRect.bottom;
+                left = cellRect.left;
+                // Flip to above if off-screen
+                if (top + panelRect.height > viewportH)
+                    top = cellRect.top - panelRect.height;
+                break;
+            }
+        }
+        // Clamp to viewport
+        if (left + panelRect.width > viewportW)
+            left = viewportW - panelRect.width - 4;
+        if (left < 0)
+            left = 4;
+        if (top < 0)
+            top = 4;
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
+    }
+    /**
+     * Document pointerdown handler for click-outside detection.
+     * Fires `onOverlayOutsideClick()` if the click is outside the panel
+     * and outside the editor's host element.
+     */
+    _onDocumentPointerDown(event) {
+        if (!this._isOpen || !this._panel)
+            return;
+        const target = event.target;
+        const hostEl = this._elementRef.nativeElement;
+        // Click inside panel or host — ignore
+        if (this._panel.contains(target) || hostEl.contains(target))
+            return;
+        this.onOverlayOutsideClick();
+    }
+    /**
+     * Set up a MutationObserver on the parent cell to watch for
+     * `cell-focus` class changes. This handles row-editing mode where
+     * all editors exist simultaneously but only the focused cell's
+     * editor should have its overlay visible.
+     */
+    _setupFocusObserver() {
+        const cell = this._getCell();
+        if (!cell)
+            return;
+        this._focusObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type !== 'attributes' || mutation.attributeName !== 'class')
+                    continue;
+                const isFocused = cell.classList.contains('cell-focus');
+                if (isFocused && !this._isOpen) {
+                    // Cell just gained focus — open overlay if appropriate
+                    this.showOverlay();
+                    this.onOverlayOpened();
+                }
+                else if (!isFocused && this._isOpen) {
+                    // Cell lost focus — hide overlay silently
+                    this.hideOverlay(true);
+                }
+            }
+        });
+        this._focusObserver.observe(cell, { attributes: true, attributeFilter: ['class'] });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOverlayEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: BaseOverlayEditor, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseOverlayEditor, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/**
+ * Directive that registers `<tbw-grid-column>` as a known Angular element.
+ *
+ * This directive exists so that Angular's template compiler recognises
+ * `<tbw-grid-column>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
+ * The underlying web component reads its attributes (`field`, `header`,
+ * `type`, `width`, etc.) directly from the DOM, so no `@Input()` forwarding
+ * is needed — Angular's standard property/attribute binding handles it.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { Grid, TbwGridColumn, TbwRenderer } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [Grid, TbwGridColumn, TbwRenderer],
+ *   template: `
+ *     <tbw-grid [rows]="rows" [gridConfig]="config">
+ *       <tbw-grid-column field="status">
+ *         <app-status-badge *tbwRenderer="let value" [value]="value" />
+ *       </tbw-grid-column>
+ *     </tbw-grid>
+ *   `
+ * })
+ * export class MyComponent { }
+ * ```
+ */
+class TbwGridColumn {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwGridColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TbwGridColumn, isStandalone: true, selector: "tbw-grid-column", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwGridColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid-column',
+                }]
+        }] });
+
+/**
+ * Directive that registers `<tbw-grid-header>` as a known Angular element.
+ *
+ * This directive exists so that Angular's template compiler recognises
+ * `<tbw-grid-header>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
+ * The grid's `config-manager` reads attributes like `title` directly
+ * from the DOM element.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { Grid, TbwGridHeader } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [Grid, TbwGridHeader],
+ *   template: `
+ *     <tbw-grid [rows]="rows" [gridConfig]="config">
+ *       <tbw-grid-header title="My Grid Title"></tbw-grid-header>
+ *     </tbw-grid>
+ *   `
+ * })
+ * export class MyComponent { }
+ * ```
+ */
+class TbwGridHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwGridHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TbwGridHeader, isStandalone: true, selector: "tbw-grid-header", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwGridHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid-header',
+                }]
+        }] });
+
 // Symbol for storing form context on the grid element (shared with GridFormArray)
 const FORM_ARRAY_CONTEXT = Symbol('formArrayContext');
 /**
@@ -3183,6 +4064,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }], propDecorators: { lazyForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyForm", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }], keepFormGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepFormGroups", required: false }] }], rowFormChange: [{ type: i0.Output, args: ["rowFormChange"] }] } });
 
+/**
+ * Directive that registers `<tbw-grid-tool-buttons>` as a known Angular element.
+ *
+ * This directive exists so that Angular's template compiler recognises
+ * `<tbw-grid-tool-buttons>` without requiring `CUSTOM_ELEMENTS_SCHEMA`.
+ * The grid's shell reads toolbar buttons directly from the DOM.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { Grid, TbwGridToolButtons } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [Grid, TbwGridToolButtons],
+ *   template: `
+ *     <tbw-grid [rows]="rows" [gridConfig]="config">
+ *       <tbw-grid-tool-buttons>
+ *         <button (click)="doSomething()">Action</button>
+ *       </tbw-grid-tool-buttons>
+ *     </tbw-grid>
+ *   `
+ * })
+ * export class MyComponent { }
+ * ```
+ */
+class TbwGridToolButtons {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwGridToolButtons, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TbwGridToolButtons, isStandalone: true, selector: "tbw-grid-tool-buttons", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwGridToolButtons, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid-tool-buttons',
+                }]
+        }] });
+
 /**
  * Directive that automatically registers the Angular adapter with tbw-grid elements.
  *
@@ -3192,13 +4110,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * ## Usage
  *
  * ```typescript
- * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ * import { Component } from '@angular/core';
  * import { Grid } from '@toolbox-web/grid-angular';
  *
  * @Component({
  *   selector: 'app-root',
  *   imports: [Grid],
- *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
  *   template: `
  *     <tbw-grid [rows]="rows" [gridConfig]="config" [customStyles]="myStyles">
  *       <!-- column templates -->
@@ -3292,6 +4209,30 @@ class Grid {
             const grid = this.elementRef.nativeElement;
             grid.loading = loadingValue;
         });
+        // Effect to sync rows to the grid element
+        effect(() => {
+            const rowsValue = this.rows();
+            if (rowsValue === undefined)
+                return;
+            const grid = this.elementRef.nativeElement;
+            grid.rows = rowsValue;
+        });
+        // Effect to sync columns to the grid element
+        effect(() => {
+            const columnsValue = this.columns();
+            if (columnsValue === undefined)
+                return;
+            const grid = this.elementRef.nativeElement;
+            grid.columns = columnsValue;
+        });
+        // Effect to sync fitMode to the grid element
+        effect(() => {
+            const fitModeValue = this.fitMode();
+            if (fitModeValue === undefined)
+                return;
+            const grid = this.elementRef.nativeElement;
+            grid.fitMode = fitModeValue;
+        });
     }
     /**
      * Custom CSS styles to inject into the grid.
@@ -3400,6 +4341,53 @@ class Grid {
      * ```
      */
     loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : []));
+    /**
+     * The data rows to display in the grid.
+     *
+     * Accepts an array of data objects. Each object represents one row.
+     * The grid reads property values for each column's `field` from these objects.
+     *
+     * @example
+     * ```html
+     * <tbw-grid [rows]="employees()" [gridConfig]="config" />
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    rows = input(...(ngDevMode ? [undefined, { debugName: "rows" }] : []));
+    /**
+     * Column configuration array.
+     *
+     * Shorthand for setting columns without wrapping them in a full `gridConfig`.
+     * If both `columns` and `gridConfig.columns` are set, `columns` takes precedence
+     * (see configuration precedence system).
+     *
+     * @example
+     * ```html
+     * <tbw-grid [rows]="data" [columns]="[
+     *   { field: 'id', header: 'ID', pinned: 'left', width: 80 },
+     *   { field: 'name', header: 'Name' },
+     *   { field: 'email', header: 'Email' }
+     * ]" />
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    columns = input(...(ngDevMode ? [undefined, { debugName: "columns" }] : []));
+    /**
+     * Column sizing strategy.
+     *
+     * - `'stretch'` (default) — columns stretch to fill available width
+     * - `'fixed'` — columns use their declared widths; enables horizontal scrolling
+     * - `'auto-fit'` — columns auto-size to content, then stretch to fill
+     *
+     * @default 'stretch'
+     *
+     * @example
+     * ```html
+     * <tbw-grid [rows]="data" fitMode="fixed" />
+     * <tbw-grid [rows]="data" [fitMode]="dynamicMode()" />
+     * ```
+     */
+    fitMode = input(...(ngDevMode ? [undefined, { debugName: "fitMode" }] : []));
     /**
      * Grid configuration object with optional Angular-specific extensions.
      *
@@ -3618,9 +4606,9 @@ class Grid {
      * @example
      * ```html
      * <tbw-grid [pinnedColumns]="true" [columns]="[
-     *   { field: 'id', sticky: 'left' },
+     *   { field: 'id', pinned: 'left' },
      *   { field: 'name' },
-     *   { field: 'actions', sticky: 'right' }
+     *   { field: 'actions', pinned: 'right' }
      * ]" />
      * ```
      */
@@ -4330,12 +5318,12 @@ class Grid {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorder: { classPropertyName: "reorder", publicName: "reorder", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, rowReorder: { classPropertyName: "rowReorder", publicName: "rowReorder", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", groupToggle: "groupToggle", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", copy: "copy", paste: "paste", undoRedoAction: "undoRedoAction", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorder: { classPropertyName: "reorder", publicName: "reorder", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, rowReorder: { classPropertyName: "rowReorder", publicName: "rowReorder", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", groupToggle: "groupToggle", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", copy: "copy", paste: "paste", undoRedoAction: "undoRedoAction", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Grid, decorators: [{
             type: Directive,
             args: [{ selector: 'tbw-grid' }]
-        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], angularConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "angularConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorder", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], rowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorder", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], angularConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "angularConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorder", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], rowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorder", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }] } });
 
 /**
  * @packageDocumentation
@@ -4349,5 +5337,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularGridAdapter, BaseGridEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getLazyFormContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridIcons, provideGridTypeDefaults, registerFeature };
+export { AngularGridAdapter, BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getLazyFormContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridIcons, provideGridTypeDefaults, registerFeature };
 //# sourceMappingURL=toolbox-web-grid-angular.mjs.map