@toolbox-web/grid-angular 0.12.1 → 0.13.1

package/types/toolbox-web-grid-angular.d.ts

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { Type, EnvironmentInjector, ApplicationRef, ViewContainerRef, InjectionToken, EnvironmentProviders, Signal, TemplateRef, EventEmitter, OnInit, OnDestroy, AfterContentInit } from '@angular/core';
-import { GridConfig as GridConfig$1, ColumnConfig as ColumnConfig$1, FrameworkAdapter, TypeDefault as TypeDefault$1, ColumnViewRenderer, ColumnEditorSpec, GridIcons, DataGridElement, ExpandCollapseAnimation, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState } from '@toolbox-web/grid';
+import { GridConfig as GridConfig$1, ColumnConfig as ColumnConfig$1, FrameworkAdapter, TypeDefault as TypeDefault$1, ColumnViewRenderer, ColumnEditorSpec, GridIcons, DataGridElement, ExpandCollapseAnimation, FitMode, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState } from '@toolbox-web/grid';
 import { FilterPanelRenderer, FilterPanelParams } from '@toolbox-web/grid/plugins/filtering';
-import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
+import { AbstractControl, ControlValueAccessor, FormGroup, FormArray } from '@angular/forms';
 import { EditingConfig, ChangedRowsResetDetail } from '@toolbox-web/grid/plugins/editing';
 import { SelectionConfig, ClipboardConfig, ContextMenuConfig, MultiSortConfig, FilterConfig, ReorderConfig, VisibilityConfig, GroupingColumnsConfig, ColumnVirtualizationConfig, RowReorderConfig, GroupingRowsConfig, PinnedRowsConfig, TreeConfig, MasterDetailConfig, ResponsivePluginConfig, UndoRedoConfig, ExportConfig, PrintConfig, PivotConfig, ServerSideConfig, FilterChangeDetail, ColumnMoveDetail, ColumnVisibilityDetail, SelectionChangeDetail, RowMoveDetail, GroupToggleDetail, TreeExpandDetail, DetailExpandDetail, ResponsiveChangeDetail, CopyDetail, PasteDetail, UndoRedoDetail, ExportCompleteDetail, PrintStartDetail, PrintCompleteDetail } from '@toolbox-web/grid/all';
 
@@ -336,6 +336,10 @@ declare class GridAdapter implements FrameworkAdapter {
     private viewContainerRef;
     private viewRefs;
     private componentRefs;
+    /** Editor-specific view refs tracked separately for per-cell cleanup via releaseCell. */
+    private editorViewRefs;
+    /** Editor-specific component refs tracked separately for per-cell cleanup via releaseCell. */
+    private editorComponentRefs;
     private typeRegistry;
     constructor(injector: EnvironmentInjector, appRef: ApplicationRef, viewContainerRef: ViewContainerRef);
     /**
@@ -508,6 +512,16 @@ declare class GridAdapter implements FrameworkAdapter {
      * @internal
      */
     private setComponentInputs;
+    /**
+     * 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: HTMLElement): void;
     /**
      * Clean up all view references and component references.
      * Call this when your app/component is destroyed.
@@ -989,6 +1003,99 @@ declare function createPluginFromFeature<TConfig = unknown>(name: FeatureName, c
  */
 declare function clearFeatureRegistry(): void;
 
+/**
+ * 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`)
+ */
+declare abstract class BaseFilterPanel implements FilterPanel {
+    /**
+     * 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
+     */
+    readonly params: _angular_core.InputSignal<FilterPanelParams>;
+    /**
+     * Implement this to apply your filter logic.
+     *
+     * Called by {@link applyAndClose} before closing the panel.
+     * Use `this.params()` to access the filter API.
+     *
+     * @example
+     * ```typescript
+     * applyFilter(): void {
+     *   this.params().applyTextFilter('contains', this.searchText);
+     * }
+     * ```
+     */
+    abstract applyFilter(): void;
+    /**
+     * 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(): void;
+    /**
+     * Clear the filter then close the panel.
+     *
+     * Calls `params().clearFilter()` followed by `params().closePanel()`.
+     * Bind this to your "Clear" / "Reset" button.
+     */
+    clearAndClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseFilterPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseFilterPanel, never, never, { "params": { "alias": "params"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Base class for grid cell editors.
  *
@@ -1160,6 +1267,330 @@ declare abstract class BaseGridEditor<TRow = unknown, TValue = unknown> {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseGridEditor<any, any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "row": { "alias": "row"; "required": false; "isSignal": true; }; "column": { "alias": "column"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; }, { "commit": "commit"; "cancel": "cancel"; }, never, never, true, never>;
 }
 
+/**
+ * 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
+ */
+declare abstract class BaseGridEditorCVA<TRow = unknown, TValue = unknown> extends BaseGridEditor<TRow, TValue> implements ControlValueAccessor {
+    /** Internal onChange callback registered by the form control. */
+    private _onChange;
+    /** Internal onTouched callback registered by the form control. */
+    private _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`).
+     */
+    protected readonly cvaValue: _angular_core.WritableSignal<TValue | null>;
+    /**
+     * Signal tracking the disabled state set by the form control.
+     * Updated when `setDisabledState()` is called by Angular's forms module.
+     */
+    readonly disabledState: _angular_core.WritableSignal<boolean>;
+    /**
+     * 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.
+     */
+    readonly displayValue: _angular_core.Signal<TValue | null>;
+    /**
+     * Called by Angular forms when the form control value changes programmatically.
+     */
+    writeValue(value: TValue | null): void;
+    /**
+     * Called by Angular forms to register a change callback.
+     */
+    registerOnChange(fn: (value: TValue | null) => void): void;
+    /**
+     * Called by Angular forms to register a touched callback.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Called by Angular forms to set the disabled state.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * 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
+     */
+    protected commitBoth(value: TValue | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseGridEditorCVA<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseGridEditorCVA<any, any>, never, never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Position of the overlay panel relative to its anchor cell.
+ *
+ * - `'below'` — panel appears below the cell, left-aligned (default)
+ * - `'above'` — panel appears above the cell, left-aligned
+ * - `'below-right'` — panel appears below the cell, right-aligned
+ * - `'over-top-left'` — panel top-left corner aligns with cell top-left corner (opens downward)
+ * - `'over-bottom-left'` — panel bottom-left corner aligns with cell bottom-left corner (opens upward)
+ */
+type OverlayPosition = 'below' | 'above' | 'below-right' | 'over-top-left' | 'over-bottom-left';
+/**
+ * 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
+ */
+declare abstract class BaseOverlayEditor<TRow = unknown, TValue = unknown> extends BaseGridEditor<TRow, TValue> {
+    private readonly _elementRef;
+    private readonly _overlayDestroyRef;
+    /**
+     * Position of the overlay panel relative to the anchor cell.
+     * Override in subclasses to change the default position.
+     *
+     * @default 'below'
+     */
+    protected overlayPosition: OverlayPosition;
+    /** The overlay panel element (set via `initOverlay()`). */
+    private _panel;
+    /** Whether the overlay is currently visible. */
+    private _isOpen;
+    /** Unique anchor ID for CSS Anchor Positioning. */
+    private _anchorId;
+    /** Whether the browser supports CSS Anchor Positioning. */
+    private _supportsAnchor;
+    /** AbortController for all overlay-related listeners. */
+    private _abortCtrl;
+    /** MutationObserver watching cell focus class changes. */
+    private _focusObserver;
+    constructor();
+    /**
+     * 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
+     */
+    protected initOverlay(panel: HTMLElement): void;
+    /**
+     * Show the overlay panel.
+     *
+     * If CSS Anchor Positioning is not supported, falls back to JS-based
+     * positioning using `getBoundingClientRect()`.
+     */
+    protected showOverlay(): void;
+    /**
+     * Hide the overlay panel.
+     *
+     * @param suppressTabAdvance - When `true`, skip synthetic Tab dispatch
+     *   (useful when hiding is triggered by an external focus change).
+     */
+    protected hideOverlay(suppressTabAdvance?: boolean): void;
+    /**
+     * Close and immediately re-open the overlay.
+     * Useful after the panel content changes size and needs repositioning.
+     */
+    protected reopenOverlay(): void;
+    /**
+     * 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.
+     */
+    protected teardownOverlay(): void;
+    /**
+     * Override in `edit-close` handler to also hide the overlay.
+     * This is called automatically by `BaseGridEditor` when the grid
+     * ends the editing session.
+     */
+    protected onEditClose(): void;
+    /**
+     * 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: KeyboardEvent): void;
+    /**
+     * Click handler for the inline input.
+     * Opens the overlay and calls {@link onOverlayOpened}.
+     *
+     * Bind this to `(click)` on your inline input element.
+     */
+    onInlineClick(): void;
+    /**
+     * 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.
+     */
+    protected handleEscape(event: Event): void;
+    /**
+     * 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.
+     */
+    protected advanceGridFocus(backward?: boolean): void;
+    /**
+     * Return the inline input element, if any.
+     *
+     * Used by overlay infrastructure to return focus after hiding.
+     * Return `null` if there is no inline input.
+     */
+    protected abstract getInlineInput(): HTMLInputElement | null;
+    /**
+     * Called when a pointerdown event occurs outside the overlay panel
+     * and outside the editor's host element.
+     *
+     * Typically, subclasses call `hideOverlay()` here.
+     */
+    protected abstract onOverlayOutsideClick(): void;
+    /**
+     * Called after the overlay is shown.
+     *
+     * Override to focus an element inside the panel, start animations, etc.
+     * Default implementation is a no-op.
+     */
+    protected onOverlayOpened(): void;
+    /** Find the parent cell element for this editor. */
+    private _getCell;
+    /**
+     * JS fallback positioning for browsers without CSS Anchor Positioning.
+     * Uses `getBoundingClientRect()` with viewport overflow detection.
+     */
+    private _positionWithJs;
+    /**
+     * Document pointerdown handler for click-outside detection.
+     * Fires `onOverlayOutsideClick()` if the click is outside the panel
+     * and outside the editor's host element.
+     */
+    private _onDocumentPointerDown;
+    /**
+     * 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.
+     */
+    private _setupFocusObserver;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseOverlayEditor<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseOverlayEditor<any, any>, never, never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Context object passed to the cell editor template.
  * Contains the cell value, row data, column configuration, and commit/cancel functions.
@@ -1350,6 +1781,39 @@ declare class GridColumnView {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnView, "tbw-grid-column-view", never, {}, {}, ["template"], never, true, never>;
 }
 
+/**
+ * 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 { }
+ * ```
+ */
+declare class TbwGridColumn {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridColumn, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridColumn, "tbw-grid-column", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Context object passed to the detail renderer template.
  * Contains the row data for the expanded detail view.
@@ -1571,6 +2035,36 @@ declare class GridFormArray implements OnInit, OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridFormArray, "tbw-grid[formArray]", never, { "formArray": { "alias": "formArray"; "required": true; "isSignal": true; }; "syncValidation": { "alias": "syncValidation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * 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 { }
+ * ```
+ */
+declare class TbwGridHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridHeader, "tbw-grid-header", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Gets the FormArrayContext from a grid element, if present.
  * @internal
@@ -1836,6 +2330,37 @@ declare class GridResponsiveCard<TRow = unknown> {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridResponsiveCard<any>, "tbw-grid-responsive-card", never, {}, {}, ["template"], never, true, never>;
 }
 
+/**
+ * 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 { }
+ * ```
+ */
+declare class TbwGridToolButtons {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwGridToolButtons, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwGridToolButtons, "tbw-grid-tool-buttons", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Context object passed to the tool panel template.
  * Provides access to grid-related information for the panel content.
@@ -1962,13 +2487,12 @@ interface RowCommitEvent<TRow = unknown> {
  * ## 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 -->
@@ -2103,6 +2627,51 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
      * ```
      */
     loading: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * 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" />
+     * ```
+     */
+    rows: _angular_core.InputSignal<any[] | undefined>;
+    /**
+     * 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' }
+     * ]" />
+     * ```
+     */
+    columns: _angular_core.InputSignal<ColumnConfig<any>[] | undefined>;
+    /**
+     * 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: _angular_core.InputSignal<FitMode | undefined>;
     /**
      * Grid configuration object with optional Angular-specific extensions.
      *
@@ -2314,9 +2883,9 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
      * @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' }
      * ]" />
      * ```
      */
@@ -2781,7 +3350,7 @@ declare class Grid implements OnInit, AfterContentInit, OnDestroy {
     private configureResponsiveCard;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "tbw-grid", never, { "customStyles": { "alias": "customStyles"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; "angularConfig": { "alias": "angularConfig"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "editing": { "alias": "editing"; "required": false; "isSignal": true; }; "clipboard": { "alias": "clipboard"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "multiSort": { "alias": "multiSort"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "filtering": { "alias": "filtering"; "required": false; "isSignal": true; }; "reorder": { "alias": "reorder"; "required": false; "isSignal": true; }; "visibility": { "alias": "visibility"; "required": false; "isSignal": true; }; "pinnedColumns": { "alias": "pinnedColumns"; "required": false; "isSignal": true; }; "groupingColumns": { "alias": "groupingColumns"; "required": false; "isSignal": true; }; "columnVirtualization": { "alias": "columnVirtualization"; "required": false; "isSignal": true; }; "rowReorder": { "alias": "rowReorder"; "required": false; "isSignal": true; }; "groupingRows": { "alias": "groupingRows"; "required": false; "isSignal": true; }; "pinnedRows": { "alias": "pinnedRows"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "masterDetail": { "alias": "masterDetail"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "undoRedo": { "alias": "undoRedo"; "required": false; "isSignal": true; }; "exportFeature": { "alias": "export"; "required": false; "isSignal": true; }; "print": { "alias": "print"; "required": false; "isSignal": true; }; "pivot": { "alias": "pivot"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; }, { "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"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "tbw-grid", never, { "customStyles": { "alias": "customStyles"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "fitMode": { "alias": "fitMode"; "required": false; "isSignal": true; }; "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; "angularConfig": { "alias": "angularConfig"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "editing": { "alias": "editing"; "required": false; "isSignal": true; }; "clipboard": { "alias": "clipboard"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "multiSort": { "alias": "multiSort"; "required": false; "isSignal": true; }; "sorting": { "alias": "sorting"; "required": false; "isSignal": true; }; "filtering": { "alias": "filtering"; "required": false; "isSignal": true; }; "reorder": { "alias": "reorder"; "required": false; "isSignal": true; }; "visibility": { "alias": "visibility"; "required": false; "isSignal": true; }; "pinnedColumns": { "alias": "pinnedColumns"; "required": false; "isSignal": true; }; "groupingColumns": { "alias": "groupingColumns"; "required": false; "isSignal": true; }; "columnVirtualization": { "alias": "columnVirtualization"; "required": false; "isSignal": true; }; "rowReorder": { "alias": "rowReorder"; "required": false; "isSignal": true; }; "groupingRows": { "alias": "groupingRows"; "required": false; "isSignal": true; }; "pinnedRows": { "alias": "pinnedRows"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "masterDetail": { "alias": "masterDetail"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "undoRedo": { "alias": "undoRedo"; "required": false; "isSignal": true; }; "exportFeature": { "alias": "export"; "required": false; "isSignal": true; }; "print": { "alias": "print"; "required": false; "isSignal": true; }; "pivot": { "alias": "pivot"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; }, { "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"; }, never, never, true, never>;
 }
 
 /**
@@ -2950,6 +3519,6 @@ declare class TbwEditor implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwEditor, "[tbwEditor]", never, {}, {}, never, never, true, never>;
 }
 
-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 type { AngularCellEditor, AngularCellRenderer, AngularColumnConfig, AngularGridConfig, AngularTypeDefault, CellCommitEvent, CellEditor, CellRenderer, ColumnConfig, ExportMethods, FeatureName, FilterPanel, FormArrayContext, GridCellContext, GridConfig, GridDetailContext, GridEditorContext, GridResponsiveCardContext, GridToolPanelContext, InjectGridReturn, LazyFormFactory, PluginFactory, RowCommitEvent, RowFormChangeEvent, SelectionMethods, StructuralCellContext, StructuralEditorContext, TypeDefault, TypeDefaultRegistration };
+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 };
+export type { AngularCellEditor, AngularCellRenderer, AngularColumnConfig, AngularGridConfig, AngularTypeDefault, CellCommitEvent, CellEditor, CellRenderer, ColumnConfig, ExportMethods, FeatureName, FilterPanel, FormArrayContext, GridCellContext, GridConfig, GridDetailContext, GridEditorContext, GridResponsiveCardContext, GridToolPanelContext, InjectGridReturn, LazyFormFactory, OverlayPosition, PluginFactory, RowCommitEvent, RowFormChangeEvent, SelectionMethods, StructuralCellContext, StructuralEditorContext, TypeDefault, TypeDefaultRegistration };
 //# sourceMappingURL=toolbox-web-grid-angular.d.ts.map