@toolbox-web/grid-angular 0.7.1 → 0.8.0

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

@@ -0,0 +1,2468 @@
+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, ColumnConfig, FrameworkAdapter, ColumnViewRenderer, ColumnEditorSpec, TypeDefault, GridIcons, DataGridElement, ExpandCollapseAnimation, CellClickDetail, RowClickDetail, CellActivateDetail, CellChangeDetail, ChangedRowsResetDetail, SortChangeDetail, ColumnResizeDetail, GridColumnState } from '@toolbox-web/grid';
+import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
+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';
+
+/**
+ * Angular-specific column configuration types.
+ *
+ * These types extend the base grid column config to allow Angular component
+ * classes to be used directly as renderers and editors.
+ */
+
+/**
+ * Interface for Angular renderer components.
+ *
+ * Renderer components receive the cell value, row data, and column config as inputs.
+ * Use Angular signal inputs for reactive updates.
+ *
+ * @example
+ * ```typescript
+ * import { Component, input } from '@angular/core';
+ * import type { AngularCellRenderer } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-status-badge',
+ *   template: `<span [class]="'badge-' + value()">{{ value() }}</span>`
+ * })
+ * export class StatusBadgeComponent implements AngularCellRenderer<Employee, string> {
+ *   value = input.required<string>();
+ *   row = input.required<Employee>();
+ *   column = input<unknown>();
+ * }
+ * ```
+ */
+interface AngularCellRenderer<TRow = unknown, TValue = unknown> {
+    /** The cell value - use `input<TValue>()` or `input.required<TValue>()` */
+    value: {
+        (): TValue | undefined;
+    };
+    /** The full row data - use `input<TRow>()` or `input.required<TRow>()` */
+    row: {
+        (): TRow | undefined;
+    };
+    /** The column configuration (optional) - use `input<unknown>()` */
+    column?: {
+        (): unknown;
+    };
+}
+/**
+ * Interface for Angular editor components.
+ *
+ * Editor components receive the cell value, row data, and column config as inputs,
+ * plus must emit `commit` and `cancel` outputs.
+ *
+ * @example
+ * ```typescript
+ * import { Component, input, output } from '@angular/core';
+ * import type { AngularCellEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-status-editor',
+ *   template: `
+ *     <select [value]="value()" (change)="commit.emit($any($event.target).value)">
+ *       <option value="active">Active</option>
+ *       <option value="inactive">Inactive</option>
+ *     </select>
+ *   `
+ * })
+ * export class StatusEditorComponent implements AngularCellEditor<Employee, string> {
+ *   value = input.required<string>();
+ *   row = input.required<Employee>();
+ *   column = input<unknown>();
+ *   commit = output<string>();
+ *   cancel = output<void>();
+ * }
+ * ```
+ */
+interface AngularCellEditor<TRow = unknown, TValue = unknown> extends AngularCellRenderer<TRow, TValue> {
+    /** Emit to commit the new value - use `output<TValue>()` */
+    commit: {
+        emit(value: TValue): void;
+        subscribe?(fn: (value: TValue) => void): {
+            unsubscribe(): void;
+        };
+    };
+    /** Emit to cancel editing - use `output<void>()` */
+    cancel: {
+        emit(): void;
+        subscribe?(fn: () => void): {
+            unsubscribe(): void;
+        };
+    };
+}
+/**
+ * Angular-specific column configuration.
+ *
+ * Extends the base ColumnConfig to allow Angular component classes
+ * to be used directly as renderers and editors.
+ *
+ * @example
+ * ```typescript
+ * import type { AngularColumnConfig } from '@toolbox-web/grid-angular';
+ * import { StatusBadgeComponent, StatusEditorComponent } from './components';
+ *
+ * const columns: AngularColumnConfig<Employee>[] = [
+ *   { field: 'name', header: 'Name' },
+ *   {
+ *     field: 'status',
+ *     header: 'Status',
+ *     editable: true,
+ *     renderer: StatusBadgeComponent,
+ *     editor: StatusEditorComponent,
+ *   },
+ * ];
+ * ```
+ */
+interface AngularColumnConfig<TRow = unknown> extends Omit<ColumnConfig<TRow>, 'renderer' | 'editor'> {
+    /**
+     * Cell renderer - can be:
+     * - A function `(ctx) => HTMLElement | string`
+     * - An Angular component class implementing AngularCellRenderer
+     */
+    renderer?: ColumnConfig<TRow>['renderer'] | Type<AngularCellRenderer<TRow, unknown>>;
+    /**
+     * Cell editor - can be:
+     * - A function `(ctx) => HTMLElement`
+     * - An Angular component class implementing AngularCellEditor
+     */
+    editor?: ColumnConfig<TRow>['editor'] | Type<AngularCellEditor<TRow, unknown>>;
+}
+/**
+ * Angular-specific grid configuration.
+ *
+ * Extends the base GridConfig to use AngularColumnConfig.
+ */
+interface AngularGridConfig<TRow = unknown> extends Omit<GridConfig<TRow>, 'columns'> {
+    columns?: AngularColumnConfig<TRow>[];
+}
+/**
+ * Type guard to check if a value is an Angular component class.
+ *
+ * Detects Angular components by checking for internal Angular markers:
+ * - ɵcmp (component definition)
+ * - ɵfac (factory function)
+ *
+ * Also checks if it's an ES6 class (vs function) by inspecting the
+ * string representation.
+ */
+declare function isComponentClass(value: unknown): value is Type<unknown>;
+
+/**
+ * Framework adapter that enables zero-boilerplate integration of Angular components
+ * with the grid's light DOM configuration API.
+ *
+ * ## Usage
+ *
+ * **One-time setup in your app:**
+ * ```typescript
+ * import { Component, inject, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+ * import { GridElement } from '@toolbox-web/grid';
+ * import { AngularGridAdapter } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-root',
+ *   // ...
+ * })
+ * export class AppComponent {
+ *   constructor() {
+ *     const injector = inject(EnvironmentInjector);
+ *     const appRef = inject(ApplicationRef);
+ *     const viewContainerRef = inject(ViewContainerRef);
+ *     GridElement.registerAdapter(new AngularGridAdapter(injector, appRef, viewContainerRef));
+ *   }
+ * }
+ * ```
+ *
+ * **Declarative configuration in templates (structural directive - recommended):**
+ * ```html
+ * <tbw-grid>
+ *   <tbw-grid-column field="status">
+ *     <app-status-badge *tbwRenderer="let value; row as row" [value]="value" />
+ *     <app-status-editor *tbwEditor="let value" [value]="value" />
+ *   </tbw-grid-column>
+ * </tbw-grid>
+ * ```
+ *
+ * **Declarative configuration in templates (nested directive - legacy):**
+ * ```html
+ * <tbw-grid>
+ *   <tbw-grid-column field="status">
+ *     <tbw-grid-column-view>
+ *       <ng-template let-value let-row="row">
+ *         <app-status-badge [value]="value" [row]="row" />
+ *       </ng-template>
+ *     </tbw-grid-column-view>
+ *     <tbw-grid-column-editor>
+ *       <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
+ *         <app-status-select [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
+ *       </ng-template>
+ *     </tbw-grid-column-editor>
+ *   </tbw-grid-column>
+ * </tbw-grid>
+ * ```
+ *
+ * The adapter automatically:
+ * - Detects Angular templates registered by directives (both structural and nested)
+ * - Creates embedded views with cell context (value, row, column)
+ * - Handles editor callbacks (onCommit/onCancel)
+ * - Manages view lifecycle and change detection
+ */
+declare class AngularGridAdapter implements FrameworkAdapter {
+    private injector;
+    private appRef;
+    private viewContainerRef;
+    private viewRefs;
+    private componentRefs;
+    private typeRegistry;
+    constructor(injector: EnvironmentInjector, appRef: ApplicationRef, viewContainerRef: ViewContainerRef);
+    /**
+     * Processes an Angular grid configuration, converting component class references
+     * to actual renderer/editor functions.
+     *
+     * Call this method on your gridConfig before passing it to the grid.
+     *
+     * @example
+     * ```typescript
+     * import { AngularGridAdapter, type AngularGridConfig } from '@toolbox-web/grid-angular';
+     *
+     * const config: AngularGridConfig<Employee> = {
+     *   columns: [
+     *     { field: 'status', renderer: StatusBadgeComponent, editor: StatusEditorComponent },
+     *   ],
+     * };
+     *
+     * // In component
+     * constructor() {
+     *   const adapter = inject(AngularGridAdapter); // or create new instance
+     *   this.processedConfig = adapter.processGridConfig(config);
+     * }
+     * ```
+     *
+     * @param config - Angular grid configuration with possible component class references
+     * @returns Processed GridConfig with actual renderer/editor functions
+     */
+    processGridConfig<TRow = unknown>(config: AngularGridConfig<TRow>): GridConfig<TRow>;
+    /**
+     * Processes a single column configuration, converting component class references
+     * to actual renderer/editor functions.
+     *
+     * @param column - Angular column configuration
+     * @returns Processed ColumnConfig
+     */
+    processColumn<TRow = unknown>(column: AngularColumnConfig<TRow>): ColumnConfig<TRow>;
+    /**
+     * Determines if this adapter can handle the given element.
+     * Checks if a template is registered for this element (structural or nested).
+     */
+    canHandle(element: HTMLElement): boolean;
+    /**
+     * Creates a view renderer function that creates an embedded view
+     * from the registered template and returns its DOM element.
+     *
+     * Returns undefined if no template is registered for this element,
+     * allowing the grid to use its default rendering.
+     */
+    createRenderer<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnViewRenderer<TRow, TValue>;
+    /**
+     * Creates an editor spec that creates an embedded view.
+     *
+     * **Auto-wiring**: The adapter automatically listens for `commit` and `cancel`
+     * CustomEvents on the rendered component. If the component emits these events,
+     * the adapter will call the grid's commit/cancel functions automatically.
+     *
+     * This means templates can be simplified from:
+     * ```html
+     * <app-editor *tbwEditor="let value; onCommit as onCommit"
+     *   [value]="value" (commit)="onCommit($event)" />
+     * ```
+     * To just:
+     * ```html
+     * <app-editor *tbwEditor="let value" [value]="value" />
+     * ```
+     * As long as the component emits `(commit)` with the new value.
+     */
+    createEditor<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnEditorSpec<TRow, TValue>;
+    /**
+     * Creates a detail renderer function for MasterDetailPlugin.
+     * Renders Angular templates for expandable detail rows.
+     */
+    createDetailRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow) => HTMLElement) | undefined;
+    /**
+     * Framework adapter hook called by MasterDetailPlugin during attach().
+     * Parses the <tbw-grid-detail> element and returns an Angular template-based renderer.
+     *
+     * This enables MasterDetailPlugin to automatically use Angular templates
+     * without manual configuration in the Grid directive.
+     */
+    parseDetailElement<TRow = unknown>(detailElement: Element): ((row: TRow, rowIndex: number) => HTMLElement | string) | undefined;
+    /**
+     * Creates a responsive card renderer function for ResponsivePlugin.
+     * Renders Angular templates for card layout in responsive mode.
+     *
+     * @param gridElement - The grid element to look up the template for
+     * @returns A card renderer function or undefined if no template is found
+     */
+    createResponsiveCardRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
+    /**
+     * Creates a tool panel renderer from a light DOM element.
+     * The renderer creates an Angular template-based panel content.
+     */
+    createToolPanelRenderer(element: HTMLElement): ((container: HTMLElement) => void | (() => void)) | undefined;
+    /**
+     * Gets type-level defaults from the application's GridTypeRegistry.
+     *
+     * This enables application-wide type defaults configured via `provideGridTypeDefaults()`.
+     * The returned TypeDefault contains renderer/editor functions that instantiate
+     * Angular components dynamically.
+     *
+     * @example
+     * ```typescript
+     * // app.config.ts
+     * export const appConfig: ApplicationConfig = {
+     *   providers: [
+     *     provideGridTypeDefaults({
+     *       country: {
+     *         renderer: CountryCellComponent,
+     *         editor: CountryEditorComponent
+     *       }
+     *     })
+     *   ]
+     * };
+     *
+     * // Any grid with type: 'country' columns will use these components
+     * gridConfig = {
+     *   columns: [{ field: 'country', type: 'country' }]
+     * };
+     * ```
+     */
+    getTypeDefault<TRow = unknown>(type: string): TypeDefault<TRow> | undefined;
+    /**
+     * Creates a renderer function from an Angular component class.
+     * @internal
+     */
+    private createComponentRenderer;
+    /**
+     * Creates an editor function from an Angular component class.
+     * @internal
+     */
+    private createComponentEditor;
+    /**
+     * Subscribes to an Angular output on a component instance.
+     * Works with both EventEmitter and OutputEmitterRef (signal outputs).
+     * @internal
+     */
+    private subscribeToOutput;
+    /**
+     * Sets component inputs using Angular's setInput API.
+     * @internal
+     */
+    private setComponentInputs;
+    /**
+     * Clean up all view references and component references.
+     * Call this when your app/component is destroyed.
+     */
+    destroy(): void;
+}
+
+/**
+ * Type-level default registry for Angular applications.
+ *
+ * Provides application-wide type defaults for renderers and editors
+ * that all grids inherit automatically.
+ */
+
+/**
+ * Angular-specific type default configuration.
+ * Uses Angular component types instead of function-based renderers/editors.
+ */
+interface AngularTypeDefault<TRow = unknown> {
+    /** Angular component class for rendering cells of this type */
+    renderer?: Type<any>;
+    /** Angular component class for editing cells of this type */
+    editor?: Type<any>;
+    /** Default editorParams for this type */
+    editorParams?: Record<string, unknown>;
+}
+/**
+ * Injection token for providing type defaults at app level.
+ */
+declare const GRID_TYPE_DEFAULTS: InjectionToken<Record<string, AngularTypeDefault<unknown>>>;
+/**
+ * Injectable service for managing type-level defaults.
+ *
+ * Use `provideGridTypeDefaults()` in your app config to set up defaults,
+ * or inject this service for dynamic registration.
+ *
+ * @example
+ * ```typescript
+ * // App-level setup (app.config.ts)
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideGridTypeDefaults({
+ *       country: {
+ *         renderer: CountryCellComponent,
+ *         editor: CountryEditorComponent
+ *       },
+ *       status: {
+ *         renderer: StatusBadgeComponent
+ *       }
+ *     })
+ *   ]
+ * };
+ *
+ * // Dynamic registration
+ * @Component({ ... })
+ * export class AppComponent {
+ *   private registry = inject(GridTypeRegistry);
+ *
+ *   ngOnInit() {
+ *     this.registry.register('currency', {
+ *       renderer: CurrencyCellComponent
+ *     });
+ *   }
+ * }
+ * ```
+ */
+declare class GridTypeRegistry {
+    private readonly defaults;
+    constructor();
+    /**
+     * Register type-level defaults for a custom type.
+     *
+     * @param type - The type name (e.g., 'country', 'currency')
+     * @param defaults - Renderer/editor configuration
+     */
+    register<T = unknown>(type: string, defaults: AngularTypeDefault<T>): void;
+    /**
+     * Get type defaults for a given type.
+     */
+    get(type: string): AngularTypeDefault | undefined;
+    /**
+     * Remove type defaults for a type.
+     */
+    unregister(type: string): void;
+    /**
+     * Check if a type has registered defaults.
+     */
+    has(type: string): boolean;
+    /**
+     * Get all registered type names.
+     */
+    getRegisteredTypes(): string[];
+    /**
+     * Convert to TypeDefault for use with grid's typeDefaults.
+     * This is used internally by the adapter.
+     *
+     * @internal
+     */
+    getAsTypeDefault(type: string): TypeDefault | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridTypeRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GridTypeRegistry>;
+}
+/**
+ * Provides application-level type defaults for all grids.
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideGridTypeDefaults } from '@toolbox-web/grid-angular';
+ * import { CountryCellComponent, StatusBadgeComponent } from './components';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideGridTypeDefaults({
+ *       country: { renderer: CountryCellComponent },
+ *       status: { renderer: StatusBadgeComponent },
+ *       date: { editor: DatePickerComponent }
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+declare function provideGridTypeDefaults(defaults: Record<string, AngularTypeDefault>): EnvironmentProviders;
+
+/**
+ * Icon configuration registry for Angular applications.
+ *
+ * Provides application-wide icon overrides for all grids via
+ * Angular's dependency injection.
+ */
+
+/**
+ * Injection token for providing icon overrides at app level.
+ */
+declare const GRID_ICONS: InjectionToken<Partial<GridIcons>>;
+/**
+ * Injectable service for managing grid icons.
+ *
+ * Use `provideGridIcons()` in your app config to set up icons,
+ * or inject this service for dynamic registration.
+ *
+ * @example
+ * ```typescript
+ * // App-level setup (app.config.ts)
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideGridIcons({
+ *       expand: '➕',
+ *       collapse: '➖',
+ *       sortAsc: '↑',
+ *       sortDesc: '↓',
+ *     })
+ *   ]
+ * };
+ *
+ * // Dynamic registration
+ * @Component({ ... })
+ * export class AppComponent {
+ *   private registry = inject(GridIconRegistry);
+ *
+ *   ngOnInit() {
+ *     this.registry.set('filter', '<svg>...</svg>');
+ *   }
+ * }
+ * ```
+ */
+declare class GridIconRegistry {
+    private readonly icons;
+    constructor();
+    /**
+     * Set an icon override.
+     *
+     * @param name - The icon name (e.g., 'expand', 'collapse', 'filter')
+     * @param value - The icon value (string text or SVG markup)
+     */
+    set<K extends keyof GridIcons>(name: K, value: GridIcons[K]): void;
+    /**
+     * Get an icon value.
+     */
+    get<K extends keyof GridIcons>(name: K): GridIcons[K] | undefined;
+    /**
+     * Remove an icon override.
+     */
+    remove(name: keyof GridIcons): void;
+    /**
+     * Check if an icon has an override.
+     */
+    has(name: keyof GridIcons): boolean;
+    /**
+     * Get all icon overrides as a GridIcons partial.
+     * Used internally by the adapter.
+     *
+     * @internal
+     */
+    getAll(): Partial<GridIcons>;
+    /**
+     * Get all registered icon names.
+     */
+    getRegisteredIcons(): (keyof GridIcons)[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridIconRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GridIconRegistry>;
+}
+/**
+ * Provides application-level icon overrides for all grids.
+ *
+ * Available icons to override:
+ * - `expand` - Expand icon for collapsed items (trees, groups, details)
+ * - `collapse` - Collapse icon for expanded items
+ * - `sortAsc` - Sort ascending indicator
+ * - `sortDesc` - Sort descending indicator
+ * - `sortNone` - Sort neutral/unsorted indicator
+ * - `submenuArrow` - Submenu arrow for context menus
+ * - `dragHandle` - Drag handle icon for reordering
+ * - `toolPanel` - Tool panel toggle icon in toolbar
+ * - `filter` - Filter icon in column headers
+ * - `filterActive` - Filter icon when filter is active
+ * - `print` - Print icon for print button
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideGridIcons } from '@toolbox-web/grid-angular';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideGridIcons({
+ *       expand: '➕',
+ *       collapse: '➖',
+ *       sortAsc: '↑',
+ *       sortDesc: '↓',
+ *       filter: '<svg viewBox="0 0 16 16">...</svg>',
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+declare function provideGridIcons(icons: Partial<GridIcons>): EnvironmentProviders;
+
+/**
+ * Selection convenience methods returned from injectGrid.
+ */
+interface SelectionMethods<TRow = unknown> {
+    /**
+     * Select all rows in the grid.
+     * Requires SelectionPlugin with mode: 'row'.
+     */
+    selectAll: () => void;
+    /**
+     * Clear all selection.
+     * Works with any SelectionPlugin mode.
+     */
+    clearSelection: () => void;
+    /**
+     * Get selected row indices.
+     * Returns Set of selected row indices.
+     */
+    getSelectedIndices: () => Set<number>;
+    /**
+     * Get selected rows data.
+     * Returns array of selected row objects.
+     */
+    getSelectedRows: () => TRow[];
+}
+/**
+ * Export convenience methods returned from injectGrid.
+ */
+interface ExportMethods {
+    /**
+     * Export grid data to CSV file.
+     * Requires ExportPlugin to be loaded.
+     *
+     * @param filename - Optional filename (defaults to 'export.csv')
+     */
+    exportToCsv: (filename?: string) => void;
+    /**
+     * Export grid data to JSON file.
+     * Requires ExportPlugin to be loaded.
+     *
+     * @param filename - Optional filename (defaults to 'export.json')
+     */
+    exportToJson: (filename?: string) => void;
+}
+/**
+ * Return type for injectGrid function.
+ */
+interface InjectGridReturn<TRow = unknown> extends SelectionMethods<TRow>, ExportMethods {
+    /** Direct access to the typed grid element */
+    element: Signal<DataGridElement<TRow> | null>;
+    /** Whether the grid is ready */
+    isReady: Signal<boolean>;
+    /** Current grid configuration */
+    config: Signal<GridConfig<TRow> | null>;
+    /** Get the effective configuration */
+    getConfig: () => Promise<GridConfig<TRow> | null>;
+    /** Force a layout recalculation */
+    forceLayout: () => Promise<void>;
+    /** Toggle a group row */
+    toggleGroup: (key: string) => Promise<void>;
+    /** Register custom styles */
+    registerStyles: (id: string, css: string) => void;
+    /** Unregister custom styles */
+    unregisterStyles: (id: string) => void;
+    /** Get current visible columns */
+    visibleColumns: Signal<ColumnConfig<TRow>[]>;
+}
+/**
+ * Angular inject function for programmatic access to a grid instance.
+ *
+ * This function should be called in the constructor or as a field initializer
+ * of an Angular component that contains a `<tbw-grid>` element.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ * import { Grid, injectGrid } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-my-grid',
+ *   imports: [Grid],
+ *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ *   template: `
+ *     <button (click)="handleResize()">Force Layout</button>
+ *     <button (click)="handleExport()" [disabled]="!grid.isReady()">Export</button>
+ *     <tbw-grid [rows]="rows" [gridConfig]="config"></tbw-grid>
+ *   `
+ * })
+ * export class MyGridComponent {
+ *   grid = injectGrid<Employee>();
+ *
+ *   async handleResize() {
+ *     await this.grid.forceLayout();
+ *   }
+ *
+ *   async handleExport() {
+ *     const config = await this.grid.getConfig();
+ *     console.log('Exporting with columns:', config?.columns);
+ *   }
+ * }
+ * ```
+ *
+ * @returns Object with grid access methods and state signals
+ */
+declare function injectGrid<TRow = unknown>(): InjectGridReturn<TRow>;
+
+/**
+ * Feature Registry for @toolbox-web/grid-angular
+ *
+ * This module provides a synchronous registry for plugin factories.
+ * Features are registered via side-effect imports, enabling tree-shaking
+ * while maintaining the clean input-based API.
+ *
+ * @example
+ * ```typescript
+ * // Import features you need (side-effect imports)
+ * import '@toolbox-web/grid-angular/features/selection';
+ * import '@toolbox-web/grid-angular/features/filtering';
+ *
+ * // Inputs work automatically - no async loading, no HTTP requests
+ * <tbw-grid [selection]="'range'" [filtering]="{ debounceMs: 200 }" />
+ * ```
+ */
+/**
+ * Feature names supported by the Grid directive.
+ */
+type FeatureName = 'selection' | 'editing' | 'clipboard' | 'contextMenu' | 'multiSort' | 'sorting' | 'filtering' | 'reorder' | 'visibility' | 'pinnedColumns' | 'groupingColumns' | 'columnVirtualization' | 'rowReorder' | 'groupingRows' | 'pinnedRows' | 'tree' | 'masterDetail' | 'responsive' | 'undoRedo' | 'export' | 'print' | 'pivot' | 'serverSide';
+/**
+ * Plugin factory function type.
+ * Takes configuration and returns a plugin instance.
+ */
+type PluginFactory<TConfig = unknown> = (config: TConfig) => unknown;
+/**
+ * Register a feature's plugin factory.
+ * Called by side-effect feature imports.
+ *
+ * @param name - The feature name (matches the input name on Grid directive)
+ * @param factory - Function that creates the plugin instance
+ *
+ * @example
+ * ```ts
+ * // features/selection.ts
+ * import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';
+ * import { registerFeature } from '../lib/feature-registry';
+ *
+ * registerFeature('selection', (config) => new SelectionPlugin(config));
+ * ```
+ */
+declare function registerFeature<TConfig = unknown>(name: FeatureName, factory: PluginFactory<TConfig>): void;
+/**
+ * Check if a feature is registered.
+ */
+declare function isFeatureRegistered(name: FeatureName): boolean;
+/**
+ * Get a registered feature's factory.
+ * Returns undefined if not registered.
+ */
+declare function getFeatureFactory(name: FeatureName): PluginFactory | undefined;
+/**
+ * Get all registered feature names.
+ * Useful for debugging.
+ */
+declare function getRegisteredFeatures(): FeatureName[];
+/**
+ * Create a plugin instance for a feature.
+ * Shows a helpful warning if the feature is not registered.
+ *
+ * @param name - Feature name
+ * @param config - Plugin configuration
+ * @returns Plugin instance or undefined if not registered
+ */
+declare function createPluginFromFeature<TConfig = unknown>(name: FeatureName, config: TConfig): unknown | undefined;
+/**
+ * Clear the registry. For testing only.
+ * @internal
+ */
+declare function clearFeatureRegistry(): void;
+
+/**
+ * Base class for grid cell editors.
+ *
+ * Provides common functionality for Angular cell editors:
+ * - Automatic value resolution from FormControl or value input
+ * - Common inputs (value, row, column, control)
+ * - Common outputs (commit, cancel)
+ * - Validation state helpers
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { BaseGridEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   selector: 'app-my-editor',
+ *   template: \`
+ *     <input
+ *       [value]="currentValue()"
+ *       [class.is-invalid]="isInvalid()"
+ *       (input)="commitValue($event.target.value)"
+ *       (keydown.escape)="cancelEdit()"
+ *     />
+ *     @if (hasErrors()) {
+ *       <div class="error">{{ firstErrorMessage() }}</div>
+ *     }
+ *   \`
+ * })
+ * export class MyEditorComponent extends BaseGridEditor<MyRow, string> {
+ *   // Override to customize error messages
+ *   protected override getErrorMessage(errorKey: string): string {
+ *     if (errorKey === 'required') return 'This field is required';
+ *     if (errorKey === 'minlength') return 'Too short';
+ *     return super.getErrorMessage(errorKey);
+ *   }
+ * }
+ * ```
+ *
+ * ## Template Syntax
+ *
+ * When using the base class, you only need to pass the control:
+ *
+ * ```html
+ * <tbw-grid-column field="name">
+ *   <app-my-editor *tbwEditor="let _; control as control" [control]="control" />
+ * </tbw-grid-column>
+ * ```
+ *
+ * Or without FormArray binding (fallback to value):
+ *
+ * ```html
+ * <tbw-grid-column field="name">
+ *   <app-my-editor *tbwEditor="let value" [value]="value" />
+ * </tbw-grid-column>
+ * ```
+ *
+ * @typeParam TRow - The row data type
+ * @typeParam TValue - The cell value type
+ */
+declare abstract class BaseGridEditor<TRow = unknown, TValue = unknown> {
+    private readonly elementRef;
+    /**
+     * The cell value. Used when FormControl is not available.
+     * When a FormControl is provided, value is derived from control.value instead.
+     */
+    readonly value: _angular_core.InputSignal<TValue | undefined>;
+    /**
+     * The full row data object.
+     */
+    readonly row: _angular_core.InputSignal<TRow | undefined>;
+    /**
+     * The column configuration.
+     */
+    readonly column: _angular_core.InputSignal<ColumnConfig<TRow> | undefined>;
+    /**
+     * The FormControl for this cell, if the grid is bound to a FormArray.
+     * When provided, the editor uses control.value instead of the value input.
+     */
+    readonly control: _angular_core.InputSignal<AbstractControl<any, any, any> | undefined>;
+    /**
+     * Emits when the user commits a new value.
+     */
+    readonly commit: _angular_core.OutputEmitterRef<TValue>;
+    /**
+     * Emits when the user cancels editing.
+     */
+    readonly cancel: _angular_core.OutputEmitterRef<void>;
+    /**
+     * The current value, derived from FormControl if available, otherwise from value input.
+     * This is the recommended way to get the current value in your editor template.
+     */
+    readonly currentValue: _angular_core.Signal<TValue | undefined>;
+    /**
+     * Whether the control is invalid (has validation errors).
+     * Returns false if no FormControl is available.
+     */
+    readonly isInvalid: _angular_core.Signal<boolean>;
+    /**
+     * Whether the control is dirty (has been modified).
+     * Returns false if no FormControl is available.
+     */
+    readonly isDirty: _angular_core.Signal<boolean>;
+    /**
+     * Whether the control has been touched.
+     * Returns false if no FormControl is available.
+     */
+    readonly isTouched: _angular_core.Signal<boolean>;
+    /**
+     * Whether the control has any validation errors.
+     */
+    readonly hasErrors: _angular_core.Signal<boolean>;
+    /**
+     * The first error message from the control's validation errors.
+     * Returns an empty string if no errors.
+     */
+    readonly firstErrorMessage: _angular_core.Signal<string>;
+    /**
+     * All error messages from the control's validation errors.
+     */
+    readonly allErrorMessages: _angular_core.Signal<string[]>;
+    /**
+     * Commit a new value. Emits the commit output AND dispatches a DOM event.
+     * The DOM event enables the grid's auto-wiring to catch the commit.
+     * Call this when the user confirms their edit.
+     */
+    commitValue(newValue: TValue): void;
+    /**
+     * Cancel editing. Emits the cancel output AND dispatches a DOM event.
+     * Call this when the user cancels (e.g., presses Escape).
+     */
+    cancelEdit(): void;
+    /**
+     * Get a human-readable error message for a validation error.
+     * Override this method to customize error messages for your editor.
+     *
+     * @param errorKey - The validation error key (e.g., 'required', 'minlength')
+     * @param errorValue - The error value (e.g., { requiredLength: 5, actualLength: 3 })
+     * @returns A human-readable error message
+     */
+    protected getErrorMessage(errorKey: string, errorValue?: unknown): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseGridEditor<any, any>, never>;
+    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>;
+}
+
+/**
+ * Context object passed to the cell editor template.
+ * Contains the cell value, row data, column configuration, and commit/cancel functions.
+ */
+interface GridEditorContext<TValue = unknown, TRow = unknown> {
+    /** The cell value for this column */
+    $implicit: TValue;
+    /** The cell value (explicit binding) */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: unknown;
+    /**
+     * Callback function to commit the edited value.
+     * Use with Angular event binding: `(commit)="onCommit($event)"`
+     */
+    onCommit: (value: TValue) => void;
+    /**
+     * Callback function to cancel editing.
+     * Use with Angular event binding: `(cancel)="onCancel()"`
+     */
+    onCancel: () => void;
+    /**
+     * The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
+     *
+     * This allows custom editors to bind directly to the control for validation display:
+     * ```html
+     * <input *tbwEditor="let value; control as ctrl"
+     *        [formControl]="ctrl"
+     *        [class.is-invalid]="ctrl?.invalid && ctrl?.touched" />
+     * ```
+     *
+     * Returns `undefined` if:
+     * - The grid is not bound to a FormArray
+     * - The FormArray doesn't contain FormGroups
+     * - The field doesn't exist in the FormGroup
+     */
+    control?: AbstractControl;
+    /**
+     * @deprecated Use `onCommit` callback function instead. Will be removed in v2.0.
+     * EventEmitter for commit - requires `.emit()` call.
+     */
+    commit: EventEmitter<TValue>;
+    /**
+     * @deprecated Use `onCancel` callback function instead. Will be removed in v2.0.
+     * EventEmitter for cancel - requires `.emit()` call.
+     */
+    cancel: EventEmitter<void>;
+}
+/**
+ * Directive that captures an `<ng-template>` for use as a cell editor.
+ *
+ * This enables declarative Angular component usage with proper input bindings
+ * that satisfy Angular's AOT compiler.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid-column field="status" editable>
+ *   <tbw-grid-column-editor>
+ *     <ng-template let-value let-row="row" let-onCommit="onCommit" let-onCancel="onCancel">
+ *       <app-status-select
+ *         [value]="value"
+ *         [row]="row"
+ *         (commit)="onCommit($event)"
+ *         (cancel)="onCancel()"
+ *       />
+ *     </ng-template>
+ *   </tbw-grid-column-editor>
+ * </tbw-grid-column>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `value`: The cell value
+ * - `row`: The full row data object
+ * - `column`: The column configuration
+ * - `onCommit`: Callback function to commit the new value
+ * - `onCancel`: Callback function to cancel editing
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridColumnEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridColumnEditor],
+ *   // ...
+ * })
+ * ```
+ */
+declare class GridColumnEditor {
+    private elementRef;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridColumnEditor, ctx: unknown): ctx is GridEditorContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnEditor, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnEditor, "tbw-grid-column-editor", never, {}, {}, ["template"], never, true, never>;
+}
+
+/**
+ * Context object passed to the cell renderer template.
+ * Contains the cell value, row data, and column configuration.
+ */
+interface GridCellContext<TValue = unknown, TRow = unknown> {
+    /** The cell value for this column */
+    $implicit: TValue;
+    /** The cell value (explicit binding) */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: unknown;
+}
+/**
+ * Directive that captures an `<ng-template>` for use as a cell renderer.
+ *
+ * This enables declarative Angular component usage with proper input bindings
+ * that satisfy Angular's AOT compiler.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid-column field="status">
+ *   <tbw-grid-column-view>
+ *     <ng-template let-value let-row="row">
+ *       <app-status-badge [value]="value" [row]="row" />
+ *     </ng-template>
+ *   </tbw-grid-column-view>
+ * </tbw-grid-column>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `value`: The cell value
+ * - `row`: The full row data object
+ * - `column`: The column configuration
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridColumnView } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridColumnView],
+ *   // ...
+ * })
+ * ```
+ */
+declare class GridColumnView {
+    private elementRef;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridColumnView, ctx: unknown): ctx is GridCellContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnView, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnView, "tbw-grid-column-view", never, {}, {}, ["template"], never, true, never>;
+}
+
+/**
+ * Context object passed to the detail renderer template.
+ * Contains the row data for the expanded detail view.
+ */
+interface GridDetailContext<TRow = unknown> {
+    /** The row data (implicit binding for let-row) */
+    $implicit: TRow;
+    /** The row data (explicit binding) */
+    row: TRow;
+}
+/**
+ * Directive that captures an `<ng-template>` for use as a master-detail row renderer.
+ *
+ * This enables declarative Angular component usage for expandable detail rows
+ * that appear below the main row when expanded.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-detail [showExpandColumn]="true" animation="slide">
+ *     <ng-template let-row>
+ *       <app-detail-panel [employee]="row" />
+ *     </ng-template>
+ *   </tbw-grid-detail>
+ * </tbw-grid>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `row`: The full row data object
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridDetailView } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridDetailView],
+ *   // ...
+ * })
+ * ```
+ */
+declare class GridDetailView {
+    private elementRef;
+    /** Whether to show the expand/collapse column. Default: true */
+    showExpandColumn: _angular_core.InputSignal<boolean>;
+    /** Animation style for expand/collapse. Default: 'slide' */
+    animation: _angular_core.InputSignal<ExpandCollapseAnimation>;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridDetailView, ctx: unknown): ctx is GridDetailContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridDetailView, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridDetailView, "tbw-grid-detail", never, { "showExpandColumn": { "alias": "showExpandColumn"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
+}
+
+/**
+ * Context provided to the grid containing form-related information.
+ * This can be accessed by other directives to get form controls.
+ */
+interface FormArrayContext {
+    /** Get the row data at a specific index */
+    getRow<T = unknown>(rowIndex: number): T | null;
+    /** Update a field value at a specific row */
+    updateField(rowIndex: number, field: string, value: unknown): void;
+    /** Get the current form value (all rows) */
+    getValue<T = unknown>(): T[];
+    /**
+     * Get the FormControl for a specific cell.
+     * Only available when using FormArray with FormGroup rows.
+     *
+     * @param rowIndex - The row index
+     * @param field - The field name
+     * @returns The AbstractControl for the cell, or undefined if not available
+     */
+    getControl(rowIndex: number, field: string): AbstractControl | undefined;
+    /**
+     * Whether the grid is backed by a FormArray of FormGroups.
+     * When true, `getControl()` will return cell-level controls.
+     */
+    hasFormGroups: boolean;
+    /**
+     * Get the FormGroup for a specific row.
+     * Only available when using FormArray with FormGroup rows.
+     *
+     * @param rowIndex - The row index
+     * @returns The FormGroup for the row, or undefined if not available
+     */
+    getRowFormGroup(rowIndex: number): FormGroup | undefined;
+    /**
+     * Check if a row is valid (all controls in the FormGroup are valid).
+     * Returns true if not using FormArray or if the row doesn't exist.
+     *
+     * @param rowIndex - The row index
+     * @returns true if the row is valid, false if any control is invalid
+     */
+    isRowValid(rowIndex: number): boolean;
+    /**
+     * Check if a row has been touched (any control in the FormGroup is touched).
+     * Returns false if not using FormArray or if the row doesn't exist.
+     *
+     * @param rowIndex - The row index
+     * @returns true if any control in the row is touched
+     */
+    isRowTouched(rowIndex: number): boolean;
+    /**
+     * Check if a row is dirty (any control in the FormGroup is dirty).
+     * Returns false if not using FormArray or if the row doesn't exist.
+     *
+     * @param rowIndex - The row index
+     * @returns true if any control in the row is dirty
+     */
+    isRowDirty(rowIndex: number): boolean;
+    /**
+     * Get validation errors for a specific row.
+     * Aggregates errors from all controls in the FormGroup.
+     *
+     * @param rowIndex - The row index
+     * @returns Object with field names as keys and their errors, or null if no errors
+     */
+    getRowErrors(rowIndex: number): Record<string, unknown> | null;
+}
+/**
+ * Gets the FormArrayContext from a grid element, if present.
+ * @internal
+ */
+declare function getFormArrayContext(gridElement: HTMLElement): FormArrayContext | undefined;
+/**
+ * Directive that binds a FormArray directly to the grid.
+ *
+ * This is the recommended way to integrate tbw-grid with Angular Reactive Forms.
+ * Use a FormArray of FormGroups for row-level validation and cell-level control access.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, inject } from '@angular/core';
+ * import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+ * import { Grid, GridFormArray } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [Grid, GridFormArray, ReactiveFormsModule],
+ *   template: \`
+ *     <form [formGroup]="form">
+ *       <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
+ *     </form>
+ *   \`
+ * })
+ * export class MyComponent {
+ *   private fb = inject(FormBuilder);
+ *
+ *   form = this.fb.group({
+ *     rows: this.fb.array([
+ *       this.fb.group({ name: 'Alice', age: 30 }),
+ *       this.fb.group({ name: 'Bob', age: 25 }),
+ *     ])
+ *   });
+ *
+ *   columns = [
+ *     { field: 'name', header: 'Name', editable: true },
+ *     { field: 'age', header: 'Age', editable: true }
+ *   ];
+ * }
+ * ```
+ *
+ * ## How It Works
+ *
+ * - **FormArray → Grid**: The grid displays the FormArray's value as rows
+ * - **Grid → FormArray**: When a cell is edited, the corresponding FormControl is updated
+ * - FormArrayContext is available for accessing cell-level controls
+ *
+ * ## Features
+ *
+ * - Works naturally with FormArray inside a FormGroup
+ * - Provides cell-level FormControl access for validation
+ * - Supports row-level validation state aggregation
+ * - Automatically syncs FormArray changes to the grid
+ */
+declare class GridFormArray implements OnInit, OnDestroy {
+    #private;
+    private elementRef;
+    private cellCommitListener;
+    private touchListener;
+    /**
+     * The FormArray to bind to the grid.
+     */
+    readonly formArray: _angular_core.InputSignal<FormArray<any>>;
+    /**
+     * Effect that syncs the FormArray value to the grid rows.
+     */
+    private syncFormArrayToGrid;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridFormArray, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridFormArray, "tbw-grid[formArray]", never, { "formArray": { "alias": "formArray"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Context object passed to the responsive card template.
+ *
+ * @template TRow - The type of row data
+ *
+ * @example
+ * ```html
+ * <tbw-grid-responsive-card>
+ *   <ng-template let-row let-index="index">
+ *     <div class="card-content">
+ *       <span>{{ row.name }}</span>
+ *       <span>Row #{{ index }}</span>
+ *     </div>
+ *   </ng-template>
+ * </tbw-grid-responsive-card>
+ * ```
+ */
+interface GridResponsiveCardContext<TRow = unknown> {
+    /**
+     * The row data (available as `let-row` or `let-myVar`).
+     */
+    $implicit: TRow;
+    /**
+     * The row data (explicit access via `let-row="row"`).
+     */
+    row: TRow;
+    /**
+     * The row index (zero-based).
+     */
+    index: number;
+}
+/**
+ * Directive for providing custom Angular templates for responsive card layout.
+ *
+ * Use this directive to define how each row should render when the grid
+ * is in responsive/mobile mode. The template receives the row data and index.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="employees">
+ *   <tbw-grid-responsive-card>
+ *     <ng-template let-employee let-idx="index">
+ *       <div class="employee-card">
+ *         <img [src]="employee.avatar" alt="">
+ *         <div class="info">
+ *           <strong>{{ employee.name }}</strong>
+ *           <span>{{ employee.department }}</span>
+ *         </div>
+ *       </div>
+ *     </ng-template>
+ *   </tbw-grid-responsive-card>
+ * </tbw-grid>
+ * ```
+ *
+ * ## Important Notes
+ *
+ * - The ResponsivePlugin must be added to your grid config
+ * - The Grid directive will automatically configure the plugin's cardRenderer
+ * - Template context provides `$implicit` (row), `row`, and `index`
+ *
+ * @see ResponsivePlugin
+ */
+declare class GridResponsiveCard<TRow = unknown> {
+    private elementRef;
+    /**
+     * The ng-template containing the card content.
+     */
+    template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /**
+     * Effect that registers the template when it becomes available.
+     */
+    private onTemplateReceived;
+    /**
+     * Type guard for template context inference.
+     */
+    static ngTemplateContextGuard<T>(_directive: GridResponsiveCard<T>, context: unknown): context is GridResponsiveCardContext<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridResponsiveCard<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridResponsiveCard<any>, "tbw-grid-responsive-card", never, {}, {}, ["template"], never, true, never>;
+}
+
+/**
+ * Context object passed to the tool panel template.
+ * Provides access to grid-related information for the panel content.
+ */
+interface GridToolPanelContext {
+    /** The grid element (implicit binding) */
+    $implicit: HTMLElement;
+    /** The grid element */
+    grid: HTMLElement;
+}
+/**
+ * Directive that captures an `<ng-template>` for use as a custom tool panel.
+ *
+ * This enables declarative Angular component usage for tool panels
+ * that appear in the grid's side panel.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-tool-panel
+ *     id="quick-filters"
+ *     title="Quick Filters"
+ *     icon="🔍"
+ *     tooltip="Apply quick filters"
+ *     [order]="10"
+ *   >
+ *     <ng-template let-grid>
+ *       <app-quick-filters [grid]="grid" />
+ *     </ng-template>
+ *   </tbw-grid-tool-panel>
+ * </tbw-grid>
+ * ```
+ *
+ * The template context provides:
+ * - `$implicit` / `grid`: The grid element reference
+ *
+ * ### Attributes
+ *
+ * - `id` (required): Unique identifier for the panel
+ * - `title` (required): Panel title shown in accordion header
+ * - `icon`: Icon for accordion section header (emoji or text)
+ * - `tooltip`: Tooltip for accordion section header
+ * - `order`: Panel order priority (lower = first, default: 100)
+ *
+ * Import the directive in your component:
+ *
+ * ```typescript
+ * import { GridToolPanel } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [GridToolPanel],
+ *   // ...
+ * })
+ * ```
+ */
+declare class GridToolPanel {
+    private elementRef;
+    /** Unique panel identifier (required) */
+    id: _angular_core.InputSignal<string>;
+    /** Panel title shown in accordion header (required) */
+    title: _angular_core.InputSignal<string>;
+    /** Icon for accordion section header (emoji or text) */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /** Tooltip for accordion section header */
+    tooltip: _angular_core.InputSignal<string | undefined>;
+    /** Panel order priority (lower = first, default: 100) */
+    order: _angular_core.InputSignal<number>;
+    /**
+     * Query for the ng-template content child.
+     */
+    template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Effect that triggers when the template is available */
+    private onTemplateReceived;
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir: GridToolPanel, ctx: unknown): ctx is GridToolPanelContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridToolPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridToolPanel, "tbw-grid-tool-panel", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
+}
+
+/**
+ * Event detail for cell commit events.
+ */
+interface CellCommitEvent<TRow = unknown, TValue = unknown> {
+    /** The row data object */
+    row: TRow;
+    /** The field name of the edited column */
+    field: string;
+    /** The new value after edit */
+    value: TValue;
+    /** The row index in the data array */
+    rowIndex: number;
+    /** Array of all rows that have been modified */
+    changedRows: TRow[];
+    /** Set of row indices that have been modified */
+    changedRowIndices: Set<number>;
+    /** Whether this is the first modification to this row */
+    firstTimeForRow: boolean;
+}
+/**
+ * Event detail for row commit events (bulk editing).
+ */
+interface RowCommitEvent<TRow = unknown> {
+    /** The row data object */
+    row: TRow;
+    /** The row index in the data array */
+    rowIndex: number;
+    /** Array of all rows that have been modified */
+    changedRows: TRow[];
+    /** Set of row indices that have been modified */
+    changedRowIndices: Set<number>;
+    /** Whether this is the first modification to this row */
+    firstTimeForRow: boolean;
+}
+/**
+ * Directive that automatically registers the Angular adapter with tbw-grid elements.
+ *
+ * This directive eliminates the need to manually register the adapter in your component
+ * constructor. Simply import this directive and it will handle adapter registration.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { Component, CUSTOM_ELEMENTS_SCHEMA } 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 -->
+ *     </tbw-grid>
+ *   `
+ * })
+ * export class AppComponent {
+ *   rows = [...];
+ *   config = {...};
+ *   myStyles = `.my-class { color: red; }`;
+ * }
+ * ```
+ *
+ * The directive automatically:
+ * - Creates an AngularGridAdapter instance
+ * - Registers it with the GridElement
+ * - Injects custom styles into the grid
+ * - Handles cleanup on destruction
+ */
+declare class Grid implements OnInit, AfterContentInit, OnDestroy {
+    private elementRef;
+    private injector;
+    private appRef;
+    private viewContainerRef;
+    private iconRegistry;
+    private adapter;
+    constructor();
+    /**
+     * Custom CSS styles to inject into the grid.
+     * Use this to style custom cell renderers, editors, or detail panels.
+     *
+     * @example
+     * ```typescript
+     * // In your component
+     * customStyles = `
+     *   .my-detail-panel { padding: 16px; }
+     *   .my-status-badge { border-radius: 4px; }
+     * `;
+     * ```
+     *
+     * ```html
+     * <tbw-grid [customStyles]="customStyles">...</tbw-grid>
+     * ```
+     */
+    customStyles: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Grid-wide sorting toggle.
+     * When false, disables sorting for all columns regardless of their individual `sortable` setting.
+     * When true (default), columns with `sortable: true` can be sorted.
+     *
+     * This is a core grid config property, not a plugin feature.
+     * For multi-column sorting, also add the `[multiSort]` feature.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Disable all sorting -->
+     * <tbw-grid [sortable]="false" />
+     *
+     * <!-- Enable sorting (default) - columns still need sortable: true -->
+     * <tbw-grid [sortable]="true" />
+     *
+     * <!-- Enable multi-column sorting -->
+     * <tbw-grid [sortable]="true" [multiSort]="true" />
+     * ```
+     */
+    sortable: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Grid-wide filtering toggle.
+     * When false, disables filtering for all columns regardless of their individual `filterable` setting.
+     * When true (default), columns with `filterable: true` can be filtered.
+     *
+     * Requires the FilteringPlugin to be loaded.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Disable all filtering -->
+     * <tbw-grid [filterable]="false" [filtering]="true" />
+     *
+     * <!-- Enable filtering (default) -->
+     * <tbw-grid [filterable]="true" [filtering]="true" />
+     * ```
+     */
+    filterable: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Grid-wide selection toggle.
+     * When false, disables selection for all rows/cells.
+     * When true (default), selection is enabled based on plugin mode.
+     *
+     * Requires the SelectionPlugin to be loaded.
+     *
+     * @default true
+     *
+     * @example
+     * ```html
+     * <!-- Disable all selection -->
+     * <tbw-grid [selectable]="false" [selection]="'range'" />
+     *
+     * <!-- Enable selection (default) -->
+     * <tbw-grid [selectable]="true" [selection]="'range'" />
+     * ```
+     */
+    selectable: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Show a loading overlay on the grid.
+     * Use this during initial data fetch or refresh operations.
+     *
+     * For row/cell loading states, access the grid element directly:
+     * - `grid.setRowLoading(rowId, true/false)`
+     * - `grid.setCellLoading(rowId, field, true/false)`
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Show loading during data fetch -->
+     * <tbw-grid [loading]="isLoading" [rows]="rows" />
+     * ```
+     *
+     * ```typescript
+     * isLoading = true;
+     *
+     * ngOnInit() {
+     *   this.dataService.fetchData().subscribe(data => {
+     *     this.rows = data;
+     *     this.isLoading = false;
+     *   });
+     * }
+     * ```
+     */
+    loading: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Angular-specific grid configuration that supports component classes for renderers/editors.
+     *
+     * Use this input when you want to specify Angular component classes directly in column configs.
+     * Components must implement the appropriate interfaces:
+     * - Renderers: `AngularCellRenderer<TRow, TValue>` - requires `value()` and `row()` signal inputs
+     * - Editors: `AngularCellEditor<TRow, TValue>` - adds `commit` and `cancel` outputs
+     *
+     * The directive automatically processes component classes and converts them to grid-compatible
+     * renderer/editor functions before applying to the grid.
+     *
+     * @example
+     * ```typescript
+     * // Component that implements AngularCellEditor
+     * @Component({...})
+     * export class BonusEditorComponent implements AngularCellEditor<Employee, number> {
+     *   value = input.required<number>();
+     *   row = input.required<Employee>();
+     *   commit = output<number>();
+     *   cancel = output<void>();
+     * }
+     *
+     * // In your grid config
+     * config: AngularGridConfig<Employee> = {
+     *   columns: [
+     *     { field: 'name', header: 'Name' },
+     *     { field: 'bonus', header: 'Bonus', editable: true, editor: BonusEditorComponent }
+     *   ]
+     * };
+     * ```
+     *
+     * ```html
+     * <tbw-grid [angularConfig]="config" [rows]="employees"></tbw-grid>
+     * ```
+     */
+    angularConfig: _angular_core.InputSignal<AngularGridConfig<any> | undefined>;
+    /**
+     * Enable cell/row/range selection.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/selection';
+     * ```
+     *
+     * @example
+     * ```html
+     * <!-- Shorthand - just the mode -->
+     * <tbw-grid [selection]="'range'" />
+     *
+     * <!-- Full config object -->
+     * <tbw-grid [selection]="{ mode: 'range', checkbox: true }" />
+     * ```
+     */
+    selection: _angular_core.InputSignal<"row" | "range" | "cell" | SelectionConfig<any> | undefined>;
+    /**
+     * Enable inline cell editing.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/editing';
+     * ```
+     *
+     * @example
+     * ```html
+     * <!-- Enable with default trigger (dblclick) -->
+     * <tbw-grid [editing]="true" />
+     *
+     * <!-- Specify trigger -->
+     * <tbw-grid [editing]="'click'" />
+     * <tbw-grid [editing]="'dblclick'" />
+     * <tbw-grid [editing]="'manual'" />
+     * ```
+     */
+    editing: _angular_core.InputSignal<boolean | "click" | "dblclick" | "manual" | undefined>;
+    /**
+     * Enable clipboard copy/paste. Requires selection to be enabled.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/clipboard';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [selection]="'range'" [clipboard]="true" />
+     * ```
+     */
+    clipboard: _angular_core.InputSignal<boolean | ClipboardConfig | undefined>;
+    /**
+     * Enable right-click context menu.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/context-menu';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [contextMenu]="true" />
+     * ```
+     */
+    contextMenu: _angular_core.InputSignal<boolean | ContextMenuConfig | undefined>;
+    /**
+     * Enable multi-column sorting.
+     *
+     * Multi-sort allows users to sort by multiple columns simultaneously.
+     * For basic single-column sorting, columns with `sortable: true` work without this plugin.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/multi-sort';
+     * ```
+     *
+     * @example
+     * ```html
+     * <!-- Enable multi-column sorting -->
+     * <tbw-grid [multiSort]="true" />
+     *
+     * <!-- Limit to single column (uses plugin but restricts to 1 column) -->
+     * <tbw-grid [multiSort]="'single'" />
+     *
+     * <!-- Full config -->
+     * <tbw-grid [multiSort]="{ maxSortColumns: 3 }" />
+     * ```
+     */
+    multiSort: _angular_core.InputSignal<boolean | "multi" | MultiSortConfig | "single" | undefined>;
+    /**
+     * @deprecated Use `[multiSort]` instead. Will be removed in a future version.
+     *
+     * Enable column sorting. This is an alias for `[multiSort]`.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/multi-sort';
+     * ```
+     */
+    sorting: _angular_core.InputSignal<boolean | "multi" | MultiSortConfig | "single" | undefined>;
+    /**
+     * Enable column filtering.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/filtering';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [filtering]="true" />
+     * <tbw-grid [filtering]="{ debounceMs: 200 }" />
+     * ```
+     */
+    filtering: _angular_core.InputSignal<boolean | FilterConfig<any> | undefined>;
+    /**
+     * Enable column drag-to-reorder.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/reorder';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [reorder]="true" />
+     * ```
+     */
+    reorder: _angular_core.InputSignal<boolean | ReorderConfig | undefined>;
+    /**
+     * Enable column visibility toggle panel.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/visibility';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [visibility]="true" />
+     * ```
+     */
+    visibility: _angular_core.InputSignal<boolean | VisibilityConfig | undefined>;
+    /**
+     * Enable pinned/sticky columns.
+     * Columns are pinned via the `sticky` column property.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/pinned-columns';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [pinnedColumns]="true" [columns]="[
+     *   { field: 'id', sticky: 'left' },
+     *   { field: 'name' },
+     *   { field: 'actions', sticky: 'right' }
+     * ]" />
+     * ```
+     */
+    pinnedColumns: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Enable multi-level column headers (column groups).
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/grouping-columns';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [groupingColumns]="{ columnGroups: [...] }" />
+     * ```
+     */
+    groupingColumns: _angular_core.InputSignal<boolean | GroupingColumnsConfig | undefined>;
+    /**
+     * Enable horizontal column virtualization for wide grids.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/column-virtualization';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [columnVirtualization]="true" />
+     * ```
+     */
+    columnVirtualization: _angular_core.InputSignal<boolean | ColumnVirtualizationConfig | undefined>;
+    /**
+     * Enable row drag-to-reorder.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/row-reorder';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [rowReorder]="true" />
+     * ```
+     */
+    rowReorder: _angular_core.InputSignal<boolean | RowReorderConfig | undefined>;
+    /**
+     * Enable row grouping by field values.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/grouping-rows';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [groupingRows]="{ groupBy: ['department'] }" />
+     * ```
+     */
+    groupingRows: _angular_core.InputSignal<GroupingRowsConfig | undefined>;
+    /**
+     * Enable pinned rows (aggregation/status bar).
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/pinned-rows';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [pinnedRows]="{ bottom: [{ type: 'aggregation' }] }" />
+     * ```
+     */
+    pinnedRows: _angular_core.InputSignal<boolean | PinnedRowsConfig | undefined>;
+    /**
+     * Enable hierarchical tree view.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/tree';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [tree]="{ childrenField: 'children' }" />
+     * ```
+     */
+    tree: _angular_core.InputSignal<boolean | TreeConfig | undefined>;
+    /**
+     * Enable master-detail expandable rows.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/master-detail';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [masterDetail]="{ detailRenderer: detailFn }" />
+     * ```
+     */
+    masterDetail: _angular_core.InputSignal<MasterDetailConfig | undefined>;
+    /**
+     * Enable responsive card layout for narrow viewports.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/responsive';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [responsive]="{ breakpoint: 768 }" />
+     * ```
+     */
+    responsive: _angular_core.InputSignal<boolean | ResponsivePluginConfig<unknown> | undefined>;
+    /**
+     * Enable undo/redo for cell edits. Requires editing to be enabled.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/undo-redo';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />
+     * ```
+     */
+    undoRedo: _angular_core.InputSignal<boolean | UndoRedoConfig | undefined>;
+    /**
+     * Enable CSV/JSON export functionality.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/export';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [export]="true" />
+     * <tbw-grid [export]="{ filename: 'data.csv' }" />
+     * ```
+     */
+    exportFeature: _angular_core.InputSignal<boolean | ExportConfig | undefined>;
+    /**
+     * Enable print functionality.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/print';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [print]="true" />
+     * ```
+     */
+    print: _angular_core.InputSignal<boolean | PrintConfig | undefined>;
+    /**
+     * Enable pivot table functionality.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/pivot';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [pivot]="{ rowFields: ['category'], valueField: 'sales' }" />
+     * ```
+     */
+    pivot: _angular_core.InputSignal<PivotConfig | undefined>;
+    /**
+     * Enable server-side data operations.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/server-side';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [serverSide]="{ dataSource: fetchDataFn }" />
+     * ```
+     */
+    serverSide: _angular_core.InputSignal<ServerSideConfig | undefined>;
+    /**
+     * Emitted when a cell is clicked.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellClick)="onCellClick($event)">...</tbw-grid>
+     * ```
+     */
+    cellClick: _angular_core.OutputEmitterRef<CellClickDetail<any>>;
+    /**
+     * Emitted when a row is clicked.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (rowClick)="onRowClick($event)">...</tbw-grid>
+     * ```
+     */
+    rowClick: _angular_core.OutputEmitterRef<RowClickDetail<any>>;
+    /**
+     * Emitted when a cell is activated (Enter key or double-click).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellActivate)="onCellActivate($event)">...</tbw-grid>
+     * ```
+     */
+    cellActivate: _angular_core.OutputEmitterRef<CellActivateDetail<any>>;
+    /**
+     * Emitted when a cell value changes (before commit).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellChange)="onCellChange($event)">...</tbw-grid>
+     * ```
+     */
+    cellChange: _angular_core.OutputEmitterRef<CellChangeDetail<any>>;
+    /**
+     * Emitted when a cell value is committed (inline editing).
+     * Provides the row, field, new value, and change tracking information.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellCommit)="onCellCommit($event)">...</tbw-grid>
+     * ```
+     *
+     * ```typescript
+     * onCellCommit(event: CellCommitEvent) {
+     *   console.log(`Changed ${event.field} to ${event.value} in row ${event.rowIndex}`);
+     * }
+     * ```
+     */
+    cellCommit: _angular_core.OutputEmitterRef<CellCommitEvent<unknown, unknown>>;
+    /**
+     * Emitted when a row's values are committed (bulk/row editing).
+     * Provides the row data and change tracking information.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
+     * ```
+     */
+    rowCommit: _angular_core.OutputEmitterRef<RowCommitEvent<unknown>>;
+    /**
+     * Emitted when the changed rows are reset.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (changedRowsReset)="onChangedRowsReset($event)">...</tbw-grid>
+     * ```
+     */
+    changedRowsReset: _angular_core.OutputEmitterRef<ChangedRowsResetDetail<unknown>>;
+    /**
+     * Emitted when sort state changes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (sortChange)="onSortChange($event)">...</tbw-grid>
+     * ```
+     */
+    sortChange: _angular_core.OutputEmitterRef<SortChangeDetail>;
+    /**
+     * Emitted when filter values change.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (filterChange)="onFilterChange($event)">...</tbw-grid>
+     * ```
+     */
+    filterChange: _angular_core.OutputEmitterRef<FilterChangeDetail>;
+    /**
+     * Emitted when a column is resized.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnResize)="onColumnResize($event)">...</tbw-grid>
+     * ```
+     */
+    columnResize: _angular_core.OutputEmitterRef<ColumnResizeDetail>;
+    /**
+     * Emitted when a column is moved via drag-and-drop.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnMove)="onColumnMove($event)">...</tbw-grid>
+     * ```
+     */
+    columnMove: _angular_core.OutputEmitterRef<ColumnMoveDetail>;
+    /**
+     * Emitted when column visibility changes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnVisibility)="onColumnVisibility($event)">...</tbw-grid>
+     * ```
+     */
+    columnVisibility: _angular_core.OutputEmitterRef<ColumnVisibilityDetail>;
+    /**
+     * Emitted when column state changes (resize, reorder, visibility).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnStateChange)="onColumnStateChange($event)">...</tbw-grid>
+     * ```
+     */
+    columnStateChange: _angular_core.OutputEmitterRef<GridColumnState>;
+    /**
+     * Emitted when selection changes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (selectionChange)="onSelectionChange($event)">...</tbw-grid>
+     * ```
+     */
+    selectionChange: _angular_core.OutputEmitterRef<SelectionChangeDetail>;
+    /**
+     * Emitted when a row is moved via drag-and-drop.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (rowMove)="onRowMove($event)">...</tbw-grid>
+     * ```
+     */
+    rowMove: _angular_core.OutputEmitterRef<RowMoveDetail<any>>;
+    /**
+     * Emitted when a group is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (groupToggle)="onGroupToggle($event)">...</tbw-grid>
+     * ```
+     */
+    groupToggle: _angular_core.OutputEmitterRef<GroupToggleDetail>;
+    /**
+     * Emitted when a tree node is expanded.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (treeExpand)="onTreeExpand($event)">...</tbw-grid>
+     * ```
+     */
+    treeExpand: _angular_core.OutputEmitterRef<TreeExpandDetail<any>>;
+    /**
+     * Emitted when a detail panel is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (detailExpand)="onDetailExpand($event)">...</tbw-grid>
+     * ```
+     */
+    detailExpand: _angular_core.OutputEmitterRef<DetailExpandDetail>;
+    /**
+     * Emitted when responsive mode changes (table ↔ card).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (responsiveChange)="onResponsiveChange($event)">...</tbw-grid>
+     * ```
+     */
+    responsiveChange: _angular_core.OutputEmitterRef<ResponsiveChangeDetail>;
+    /**
+     * Emitted when cells are copied to clipboard.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (copy)="onCopy($event)">...</tbw-grid>
+     * ```
+     */
+    copy: _angular_core.OutputEmitterRef<CopyDetail>;
+    /**
+     * Emitted when cells are pasted from clipboard.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (paste)="onPaste($event)">...</tbw-grid>
+     * ```
+     */
+    paste: _angular_core.OutputEmitterRef<PasteDetail>;
+    /**
+     * Emitted when undo/redo is performed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (undoRedoAction)="onUndoRedo($event)">...</tbw-grid>
+     * ```
+     */
+    undoRedoAction: _angular_core.OutputEmitterRef<UndoRedoDetail>;
+    /**
+     * Emitted when export completes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (exportComplete)="onExportComplete($event)">...</tbw-grid>
+     * ```
+     */
+    exportComplete: _angular_core.OutputEmitterRef<ExportCompleteDetail>;
+    /**
+     * Emitted when print starts.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (printStart)="onPrintStart($event)">...</tbw-grid>
+     * ```
+     */
+    printStart: _angular_core.OutputEmitterRef<PrintStartDetail>;
+    /**
+     * Emitted when print completes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (printComplete)="onPrintComplete($event)">...</tbw-grid>
+     * ```
+     */
+    printComplete: _angular_core.OutputEmitterRef<PrintCompleteDetail>;
+    private readonly eventOutputMap;
+    private eventListeners;
+    ngOnInit(): void;
+    /**
+     * Sets up event listeners for all outputs using the eventOutputMap.
+     */
+    private setupEventListeners;
+    /**
+     * Creates plugins from feature inputs.
+     * Uses the feature registry to allow tree-shaking - only imported features are bundled.
+     * Returns the array of created plugins (doesn't modify grid).
+     */
+    private createFeaturePlugins;
+    ngAfterContentInit(): void;
+    /**
+     * Registers custom styles into the grid.
+     * Uses the grid's registerStyles() API for clean encapsulation.
+     */
+    private registerCustomStyles;
+    /**
+     * Configures the MasterDetailPlugin after Angular templates are registered.
+     * - If plugin exists: refresh its detail renderer
+     * - If plugin doesn't exist but <tbw-grid-detail> is present: dynamically import and add the plugin
+     */
+    private configureMasterDetail;
+    /**
+     * Configures the ResponsivePlugin with Angular template-based card renderer.
+     * - If plugin exists: updates its cardRenderer configuration
+     * - If plugin doesn't exist but <tbw-grid-responsive-card> is present: logs a warning
+     */
+    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; }; "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": "exportFeature"; "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>;
+}
+
+/**
+ * Context type for structural directives with `any` defaults.
+ * This provides better ergonomics in templates without requiring explicit type annotations.
+ *
+ * @internal Use `GridCellContext` in application code for stricter typing.
+ */
+interface StructuralCellContext<TValue = any, TRow = any> {
+    /** The cell value for this column */
+    $implicit: TValue;
+    /** The cell value (explicit binding) */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: any;
+}
+/**
+ * Context type for structural editor directives with `any` defaults.
+ * This provides better ergonomics in templates without requiring explicit type annotations.
+ *
+ * @internal Use `GridEditorContext` in application code for stricter typing.
+ */
+interface StructuralEditorContext<TValue = any, TRow = any> {
+    /** The cell value for this column */
+    $implicit: TValue;
+    /** The cell value (explicit binding) */
+    value: TValue;
+    /** The full row data object */
+    row: TRow;
+    /** The column configuration */
+    column: any;
+    /**
+     * Callback function to commit the edited value.
+     */
+    onCommit: (value: TValue) => void;
+    /**
+     * Callback function to cancel editing.
+     */
+    onCancel: () => void;
+    /**
+     * The FormControl for this cell, if the grid is bound to a FormArray with FormGroups.
+     *
+     * Returns `undefined` if:
+     * - The grid is not bound to a FormArray
+     * - The FormArray doesn't contain FormGroups
+     * - The field doesn't exist in the FormGroup
+     */
+    control?: AbstractControl;
+}
+/**
+ * Structural directive for cell view rendering.
+ *
+ * This provides a cleaner syntax for defining custom cell renderers without
+ * the nested `<tbw-grid-column-view>` and `<ng-template>` boilerplate.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Instead of this verbose syntax: -->
+ * <tbw-grid-column field="status">
+ *   <tbw-grid-column-view>
+ *     <ng-template let-value let-row="row">
+ *       <app-status-badge [value]="value" />
+ *     </ng-template>
+ *   </tbw-grid-column-view>
+ * </tbw-grid-column>
+ *
+ * <!-- Use this cleaner syntax: -->
+ * <tbw-grid-column field="status">
+ *   <app-status-badge *tbwRenderer="let value; row as row" [value]="value" />
+ * </tbw-grid-column>
+ * ```
+ *
+ * ## Template Context
+ *
+ * The structural directive provides the same context as `GridColumnView`:
+ * - `$implicit` / `value`: The cell value (use `let value` or `let-value`)
+ * - `row`: The full row data object (use `row as row` or `let-row="row"`)
+ * - `column`: The column configuration
+ *
+ * ## Import
+ *
+ * ```typescript
+ * import { TbwRenderer } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [TbwRenderer],
+ *   // ...
+ * })
+ * ```
+ */
+declare class TbwRenderer implements OnDestroy {
+    private template;
+    private elementRef;
+    private columnElement;
+    constructor();
+    private registerTemplate;
+    ngOnDestroy(): void;
+    /**
+     * Static type guard for template context.
+     * Uses `any` defaults for ergonomic template usage.
+     */
+    static ngTemplateContextGuard(dir: TbwRenderer, ctx: unknown): ctx is StructuralCellContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwRenderer, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwRenderer, "[tbwRenderer]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Structural directive for cell editor rendering.
+ *
+ * This provides a cleaner syntax for defining custom cell editors without
+ * the nested `<tbw-grid-column-editor>` and `<ng-template>` boilerplate.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Instead of this verbose syntax: -->
+ * <tbw-grid-column field="status">
+ *   <tbw-grid-column-editor>
+ *     <ng-template let-value let-onCommit="onCommit" let-onCancel="onCancel">
+ *       <app-status-editor [value]="value" (commit)="onCommit($event)" (cancel)="onCancel()" />
+ *     </ng-template>
+ *   </tbw-grid-column-editor>
+ * </tbw-grid-column>
+ *
+ * <!-- Use this cleaner syntax (with auto-wiring - no explicit bindings needed!): -->
+ * <tbw-grid-column field="status">
+ *   <app-status-editor *tbwEditor="let value" [value]="value" />
+ * </tbw-grid-column>
+ * ```
+ *
+ * ## Template Context
+ *
+ * The structural directive provides the same context as `GridColumnEditor`:
+ * - `$implicit` / `value`: The cell value
+ * - `row`: The full row data object
+ * - `column`: The column configuration
+ * - `onCommit`: Callback function to commit the new value (optional - auto-wired if component emits `commit` event)
+ * - `onCancel`: Callback function to cancel editing (optional - auto-wired if component emits `cancel` event)
+ *
+ * ## Import
+ *
+ * ```typescript
+ * import { TbwEditor } from '@toolbox-web/grid-angular';
+ *
+ * @Component({
+ *   imports: [TbwEditor],
+ *   // ...
+ * })
+ * ```
+ */
+declare class TbwEditor implements OnDestroy {
+    private template;
+    private elementRef;
+    private columnElement;
+    constructor();
+    private registerTemplate;
+    ngOnDestroy(): void;
+    /**
+     * Static type guard for template context.
+     * Uses `any` defaults for ergonomic template usage.
+     */
+    static ngTemplateContextGuard(dir: TbwEditor, ctx: unknown): ctx is StructuralEditorContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TbwEditor, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TbwEditor, "[tbwEditor]", never, {}, {}, never, never, true, never>;
+}
+
+export { AngularGridAdapter, BaseGridEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridIcons, provideGridTypeDefaults, registerFeature };
+export type { AngularCellEditor, AngularCellRenderer, AngularColumnConfig, AngularGridConfig, AngularTypeDefault, CellCommitEvent, ExportMethods, FeatureName, FormArrayContext, GridCellContext, GridDetailContext, GridEditorContext, GridResponsiveCardContext, GridToolPanelContext, InjectGridReturn, PluginFactory, RowCommitEvent, SelectionMethods, StructuralCellContext, StructuralEditorContext };
+//# sourceMappingURL=toolbox-web-grid-angular.d.ts.map