@toolbox-web/grid-angular 0.7.1 → 0.8.0

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

@@ -0,0 +1,3376 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, InjectionToken, Injectable, makeEnvironmentProviders, EventEmitter, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DataGridElement } from '@toolbox-web/grid';
+
+/**
+ * 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.
+ */
+function isComponentClass(value) {
+    if (typeof value !== 'function' || value.prototype === undefined) {
+        return false;
+    }
+    // Check for Angular component markers (AOT compiled)
+    if (Object.prototype.hasOwnProperty.call(value, 'ɵcmp') || Object.prototype.hasOwnProperty.call(value, 'ɵfac')) {
+        return true;
+    }
+    // Check if it's an ES6 class (vs regular function)
+    // Class definitions start with "class" in their toString()
+    const fnString = Function.prototype.toString.call(value);
+    return fnString.startsWith('class ') || fnString.startsWith('class{');
+}
+
+// Global registry mapping DOM elements to their templates
+const editorTemplateRegistry = new Map();
+/**
+ * Gets the editor template registered for a given element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+function getEditorTemplate(element) {
+    return editorTemplateRegistry.get(element);
+}
+/**
+ * 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],
+ *   // ...
+ * })
+ * ```
+ */
+class GridColumnEditor {
+    elementRef = inject((ElementRef));
+    /**
+     * Query for the ng-template content child.
+     */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : []));
+    /** Effect that triggers when the template is available */
+    onTemplateReceived = effect(() => {
+        const template = this.template();
+        if (template) {
+            // Register the template for this element
+            editorTemplateRegistry.set(this.elementRef.nativeElement, template);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : []));
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridColumnEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: GridColumnEditor, isStandalone: true, selector: "tbw-grid-column-editor", queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridColumnEditor, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid-column-editor' }]
+        }], propDecorators: { template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+// Global registry mapping DOM elements to their templates
+const templateRegistry = new Map();
+/**
+ * Gets the template registered for a given element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+function getViewTemplate(element) {
+    return templateRegistry.get(element);
+}
+/**
+ * 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],
+ *   // ...
+ * })
+ * ```
+ */
+class GridColumnView {
+    elementRef = inject((ElementRef));
+    /**
+     * Query for the ng-template content child.
+     */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : []));
+    /** Effect that triggers when the template is available */
+    onTemplateReceived = effect(() => {
+        const template = this.template();
+        if (template) {
+            // Register the template for this element
+            templateRegistry.set(this.elementRef.nativeElement, template);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : []));
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridColumnView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: GridColumnView, isStandalone: true, selector: "tbw-grid-column-view", queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridColumnView, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid-column-view' }]
+        }], propDecorators: { template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+// Global registry mapping DOM elements to their templates
+const detailTemplateRegistry = new Map();
+/**
+ * Gets the detail template registered for a given grid element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+function getDetailTemplate(gridElement) {
+    // Look for tbw-grid-detail child and get its template
+    const detailElement = gridElement.querySelector('tbw-grid-detail');
+    if (detailElement) {
+        return detailTemplateRegistry.get(detailElement);
+    }
+    return undefined;
+}
+/**
+ * Gets the configuration for the detail view.
+ */
+function getDetailConfig(gridElement) {
+    const detailElement = gridElement.querySelector('tbw-grid-detail');
+    if (detailElement) {
+        const animationAttr = detailElement.getAttribute('animation');
+        let animation = 'slide';
+        if (animationAttr === 'false') {
+            animation = false;
+        }
+        else if (animationAttr === 'fade') {
+            animation = 'fade';
+        }
+        return {
+            showExpandColumn: detailElement.getAttribute('showExpandColumn') !== 'false',
+            animation,
+        };
+    }
+    return undefined;
+}
+/**
+ * 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],
+ *   // ...
+ * })
+ * ```
+ */
+class GridDetailView {
+    elementRef = inject((ElementRef));
+    /** Whether to show the expand/collapse column. Default: true */
+    showExpandColumn = input(true, ...(ngDevMode ? [{ debugName: "showExpandColumn" }] : []));
+    /** Animation style for expand/collapse. Default: 'slide' */
+    animation = input('slide', ...(ngDevMode ? [{ debugName: "animation" }] : []));
+    /**
+     * Query for the ng-template content child.
+     */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : []));
+    /** Effect that triggers when the template is available */
+    onTemplateReceived = effect(() => {
+        const template = this.template();
+        if (template) {
+            // Register the template for this element
+            detailTemplateRegistry.set(this.elementRef.nativeElement, template);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : []));
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridDetailView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: GridDetailView, isStandalone: true, selector: "tbw-grid-detail", inputs: { showExpandColumn: { classPropertyName: "showExpandColumn", publicName: "showExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridDetailView, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid-detail' }]
+        }], propDecorators: { showExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandColumn", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+// Symbol for storing form context on the grid element
+const FORM_ARRAY_CONTEXT = Symbol('formArrayContext');
+/**
+ * Gets the FormArrayContext from a grid element, if present.
+ * @internal
+ */
+function getFormArrayContext(gridElement) {
+    return gridElement[FORM_ARRAY_CONTEXT];
+}
+/**
+ * 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
+ */
+class GridFormArray {
+    elementRef = inject((ElementRef));
+    cellCommitListener = null;
+    touchListener = null;
+    /**
+     * The FormArray to bind to the grid.
+     */
+    formArray = input.required(...(ngDevMode ? [{ debugName: "formArray" }] : []));
+    /**
+     * Effect that syncs the FormArray value to the grid rows.
+     */
+    syncFormArrayToGrid = effect(() => {
+        const formArray = this.formArray();
+        const grid = this.elementRef.nativeElement;
+        if (grid && formArray) {
+            // Get the raw value (including disabled controls)
+            grid.rows = formArray.getRawValue();
+        }
+    }, ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : []));
+    ngOnInit() {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        // Store the form context on the grid element for other directives to access
+        this.#storeFormContext(grid);
+        // Intercept cell-commit events to update the FormArray
+        this.cellCommitListener = (e) => {
+            const detail = e.detail;
+            this.#handleCellCommit(detail);
+        };
+        grid.addEventListener('cell-commit', this.cellCommitListener);
+        // Mark FormArray as touched on first interaction
+        this.touchListener = () => {
+            this.formArray().markAsTouched();
+            // Remove after first touch
+            if (this.touchListener) {
+                grid.removeEventListener('click', this.touchListener);
+                this.touchListener = null;
+            }
+        };
+        grid.addEventListener('click', this.touchListener);
+    }
+    ngOnDestroy() {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        if (this.cellCommitListener) {
+            grid.removeEventListener('cell-commit', this.cellCommitListener);
+        }
+        if (this.touchListener) {
+            grid.removeEventListener('click', this.touchListener);
+        }
+        this.#clearFormContext(grid);
+    }
+    /**
+     * Checks if the FormArray contains FormGroups.
+     */
+    #isFormArrayOfFormGroups() {
+        const formArray = this.formArray();
+        if (formArray.length === 0)
+            return false;
+        return formArray.at(0) instanceof FormGroup;
+    }
+    /**
+     * Gets the FormGroup at a specific row index.
+     */
+    #getRowFormGroup(rowIndex) {
+        const formArray = this.formArray();
+        const rowControl = formArray.at(rowIndex);
+        return rowControl instanceof FormGroup ? rowControl : undefined;
+    }
+    /**
+     * Stores the FormArrayContext on the grid element.
+     */
+    #storeFormContext(grid) {
+        const getRowFormGroup = (rowIndex) => this.#getRowFormGroup(rowIndex);
+        const context = {
+            getRow: (rowIndex) => {
+                const formArray = this.formArray();
+                const rowControl = formArray.at(rowIndex);
+                return rowControl ? rowControl.value : null;
+            },
+            updateField: (rowIndex, field, value) => {
+                const rowFormGroup = getRowFormGroup(rowIndex);
+                if (rowFormGroup) {
+                    const control = rowFormGroup.get(field);
+                    if (control) {
+                        control.setValue(value);
+                        control.markAsDirty();
+                    }
+                }
+            },
+            getValue: () => {
+                return this.formArray().getRawValue();
+            },
+            hasFormGroups: this.#isFormArrayOfFormGroups(),
+            getControl: (rowIndex, field) => {
+                const rowFormGroup = getRowFormGroup(rowIndex);
+                if (!rowFormGroup)
+                    return undefined;
+                return rowFormGroup.get(field) ?? undefined;
+            },
+            getRowFormGroup,
+            isRowValid: (rowIndex) => {
+                const rowFormGroup = getRowFormGroup(rowIndex);
+                if (!rowFormGroup)
+                    return true;
+                return rowFormGroup.valid;
+            },
+            isRowTouched: (rowIndex) => {
+                const rowFormGroup = getRowFormGroup(rowIndex);
+                if (!rowFormGroup)
+                    return false;
+                return rowFormGroup.touched;
+            },
+            isRowDirty: (rowIndex) => {
+                const rowFormGroup = getRowFormGroup(rowIndex);
+                if (!rowFormGroup)
+                    return false;
+                return rowFormGroup.dirty;
+            },
+            getRowErrors: (rowIndex) => {
+                const rowFormGroup = getRowFormGroup(rowIndex);
+                if (!rowFormGroup)
+                    return null;
+                const errors = {};
+                let hasErrors = false;
+                Object.keys(rowFormGroup.controls).forEach((field) => {
+                    const control = rowFormGroup.get(field);
+                    if (control?.errors) {
+                        errors[field] = control.errors;
+                        hasErrors = true;
+                    }
+                });
+                if (rowFormGroup.errors) {
+                    errors['_group'] = rowFormGroup.errors;
+                    hasErrors = true;
+                }
+                return hasErrors ? errors : null;
+            },
+        };
+        grid[FORM_ARRAY_CONTEXT] = context;
+    }
+    /**
+     * Clears the FormArrayContext from the grid element.
+     */
+    #clearFormContext(grid) {
+        delete grid[FORM_ARRAY_CONTEXT];
+    }
+    /**
+     * Handles cell-commit events by updating the FormControl in the FormGroup.
+     */
+    #handleCellCommit(detail) {
+        const { rowIndex, field, value } = detail;
+        const rowFormGroup = this.#getRowFormGroup(rowIndex);
+        if (rowFormGroup) {
+            const control = rowFormGroup.get(field);
+            if (control) {
+                control.setValue(value);
+                control.markAsDirty();
+                control.markAsTouched();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridFormArray, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: GridFormArray, isStandalone: true, selector: "tbw-grid[formArray]", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridFormArray, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid[formArray]',
+                }]
+        }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }] } });
+
+/**
+ * Registry to store responsive card templates by grid element.
+ * Used by AngularGridAdapter to create card renderers.
+ */
+const responsiveCardTemplateRegistry = new Map();
+/**
+ * Retrieves the responsive card template for a grid element.
+ *
+ * @param gridElement - The grid element to look up
+ * @returns The template reference or undefined if not found
+ */
+function getResponsiveCardTemplate(gridElement) {
+    // Find the tbw-grid-responsive-card element inside the grid
+    const cardElement = gridElement.querySelector('tbw-grid-responsive-card');
+    if (!cardElement)
+        return undefined;
+    return responsiveCardTemplateRegistry.get(cardElement);
+}
+/**
+ * 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
+ */
+class GridResponsiveCard {
+    elementRef = inject((ElementRef));
+    /**
+     * The ng-template containing the card content.
+     */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : []));
+    /**
+     * Effect that registers the template when it becomes available.
+     */
+    onTemplateReceived = effect(() => {
+        const template = this.template();
+        if (template) {
+            responsiveCardTemplateRegistry.set(this.elementRef.nativeElement, template);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : []));
+    /**
+     * Type guard for template context inference.
+     */
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridResponsiveCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: GridResponsiveCard, isStandalone: true, selector: "tbw-grid-responsive-card", queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridResponsiveCard, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbw-grid-responsive-card',
+                }]
+        }], propDecorators: { template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+// Global registry mapping DOM elements to their templates
+const toolPanelTemplateRegistry = new Map();
+/**
+ * Gets the tool panel template registered for a given tool panel element.
+ * Used by AngularGridAdapter to retrieve templates at render time.
+ */
+function getToolPanelTemplate(panelElement) {
+    return toolPanelTemplateRegistry.get(panelElement);
+}
+/**
+ * Gets all tool panel elements with registered templates within a grid element.
+ */
+function getToolPanelElements(gridElement) {
+    const panelElements = gridElement.querySelectorAll('tbw-grid-tool-panel');
+    return Array.from(panelElements).filter((el) => toolPanelTemplateRegistry.has(el));
+}
+/**
+ * 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],
+ *   // ...
+ * })
+ * ```
+ */
+class GridToolPanel {
+    elementRef = inject((ElementRef));
+    /** Unique panel identifier (required) */
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), alias: 'id' });
+    /** Panel title shown in accordion header (required) */
+    title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}), alias: 'title' });
+    /** Icon for accordion section header (emoji or text) */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    /** Tooltip for accordion section header */
+    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
+    /** Panel order priority (lower = first, default: 100) */
+    order = input(100, ...(ngDevMode ? [{ debugName: "order" }] : []));
+    /**
+     * Query for the ng-template content child.
+     */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : []));
+    /** Effect that triggers when the template is available */
+    onTemplateReceived = effect(() => {
+        const template = this.template();
+        const element = this.elementRef.nativeElement;
+        if (template) {
+            // Set attributes from inputs (for light DOM parsing to read)
+            element.setAttribute('id', this.id());
+            element.setAttribute('title', this.title());
+            const icon = this.icon();
+            if (icon)
+                element.setAttribute('icon', icon);
+            const tooltip = this.tooltip();
+            if (tooltip)
+                element.setAttribute('tooltip', tooltip);
+            element.setAttribute('order', String(this.order()));
+            // Register the template for this element
+            toolPanelTemplateRegistry.set(element, template);
+        }
+    }, ...(ngDevMode ? [{ debugName: "onTemplateReceived" }] : []));
+    /**
+     * Static type guard for template context.
+     * Enables type inference in templates.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridToolPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.1", type: GridToolPanel, isStandalone: true, selector: "tbw-grid-tool-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridToolPanel, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid-tool-panel' }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+// Registries for structural directive templates
+const structuralViewRegistry = new Map();
+const structuralEditorRegistry = new Map();
+/**
+ * Gets the view template registered by the structural directive for a given column element.
+ * Falls back to the non-structural directive registry.
+ */
+function getStructuralViewTemplate(columnElement) {
+    // First check structural directive registry
+    const template = structuralViewRegistry.get(columnElement);
+    if (template)
+        return template;
+    // Fall back to the nested element registry
+    const viewEl = columnElement.querySelector('tbw-grid-column-view');
+    if (viewEl) {
+        return getViewTemplate(viewEl);
+    }
+    return undefined;
+}
+/**
+ * Gets the editor template registered by the structural directive for a given column element.
+ * Falls back to the non-structural directive registry.
+ */
+function getStructuralEditorTemplate(columnElement) {
+    // First check structural directive registry
+    const template = structuralEditorRegistry.get(columnElement);
+    if (template)
+        return template;
+    // Fall back to the nested element registry
+    const editorEl = columnElement.querySelector('tbw-grid-column-editor');
+    if (editorEl) {
+        return getEditorTemplate(editorEl);
+    }
+    return undefined;
+}
+/**
+ * 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],
+ *   // ...
+ * })
+ * ```
+ */
+class TbwRenderer {
+    template = inject((TemplateRef));
+    elementRef = inject((ElementRef));
+    columnElement = null;
+    constructor() {
+        // Angular structural directives wrap the host element in a comment node.
+        // We need to find the parent tbw-grid-column element.
+        // Since we're injected into the template, we use an effect to register once the DOM is stable.
+        effect(() => {
+            this.registerTemplate();
+        });
+    }
+    registerTemplate() {
+        // Find the parent tbw-grid-column element
+        // The template's host element may not be in the DOM yet, so we traverse from the comment node
+        let parent = this.elementRef.nativeElement?.parentElement;
+        while (parent && parent.tagName !== 'TBW-GRID-COLUMN') {
+            parent = parent.parentElement;
+        }
+        if (parent) {
+            this.columnElement = parent;
+            structuralViewRegistry.set(parent, this.template);
+        }
+    }
+    ngOnDestroy() {
+        if (this.columnElement) {
+            structuralViewRegistry.delete(this.columnElement);
+        }
+    }
+    /**
+     * Static type guard for template context.
+     * Uses `any` defaults for ergonomic template usage.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TbwRenderer, isStandalone: true, selector: "[tbwRenderer]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwRenderer, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tbwRenderer]' }]
+        }], ctorParameters: () => [] });
+/**
+ * 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],
+ *   // ...
+ * })
+ * ```
+ */
+class TbwEditor {
+    template = inject((TemplateRef));
+    elementRef = inject((ElementRef));
+    columnElement = null;
+    constructor() {
+        effect(() => {
+            this.registerTemplate();
+        });
+    }
+    registerTemplate() {
+        // Find the parent tbw-grid-column element
+        let parent = this.elementRef.nativeElement?.parentElement;
+        while (parent && parent.tagName !== 'TBW-GRID-COLUMN') {
+            parent = parent.parentElement;
+        }
+        if (parent) {
+            this.columnElement = parent;
+            structuralEditorRegistry.set(parent, this.template);
+        }
+    }
+    ngOnDestroy() {
+        if (this.columnElement) {
+            structuralEditorRegistry.delete(this.columnElement);
+        }
+    }
+    /**
+     * Static type guard for template context.
+     * Uses `any` defaults for ergonomic template usage.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TbwEditor, isStandalone: true, selector: "[tbwEditor]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TbwEditor, decorators: [{
+            type: Directive,
+            args: [{ selector: '[tbwEditor]' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Type-level default registry for Angular applications.
+ *
+ * Provides application-wide type defaults for renderers and editors
+ * that all grids inherit automatically.
+ */
+/**
+ * Injection token for providing type defaults at app level.
+ */
+const GRID_TYPE_DEFAULTS = new InjectionToken('GRID_TYPE_DEFAULTS');
+/**
+ * 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
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class GridTypeRegistry {
+    defaults = new Map();
+    constructor() {
+        // Merge any initial defaults from provider
+        const initial = inject(GRID_TYPE_DEFAULTS, { optional: true });
+        if (initial) {
+            for (const [type, config] of Object.entries(initial)) {
+                this.defaults.set(type, config);
+            }
+        }
+    }
+    /**
+     * Register type-level defaults for a custom type.
+     *
+     * @param type - The type name (e.g., 'country', 'currency')
+     * @param defaults - Renderer/editor configuration
+     */
+    register(type, defaults) {
+        this.defaults.set(type, defaults);
+    }
+    /**
+     * Get type defaults for a given type.
+     */
+    get(type) {
+        return this.defaults.get(type);
+    }
+    /**
+     * Remove type defaults for a type.
+     */
+    unregister(type) {
+        this.defaults.delete(type);
+    }
+    /**
+     * Check if a type has registered defaults.
+     */
+    has(type) {
+        return this.defaults.has(type);
+    }
+    /**
+     * Get all registered type names.
+     */
+    getRegisteredTypes() {
+        return Array.from(this.defaults.keys());
+    }
+    /**
+     * Convert to TypeDefault for use with grid's typeDefaults.
+     * This is used internally by the adapter.
+     *
+     * @internal
+     */
+    getAsTypeDefault(type) {
+        const config = this.defaults.get(type);
+        if (!config)
+            return undefined;
+        // Note: The actual renderer/editor functions are created by the adapter
+        // when it calls getTypeDefault() - we just return the config here
+        return {
+            editorParams: config.editorParams,
+            // renderer and editor are handled by the adapter which creates
+            // the actual functions that instantiate Angular components
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridTypeRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridTypeRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridTypeRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * 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 }
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+function provideGridTypeDefaults(defaults) {
+    return makeEnvironmentProviders([{ provide: GRID_TYPE_DEFAULTS, useValue: defaults }]);
+}
+
+/**
+ * Helper to get view template from either structural directive or nested directive.
+ */
+function getAnyViewTemplate(element) {
+    // First check structural directive registry (for *tbwRenderer syntax)
+    const structuralTemplate = getStructuralViewTemplate(element);
+    if (structuralTemplate)
+        return structuralTemplate;
+    // Fall back to nested directive (for <tbw-grid-column-view> syntax)
+    return getViewTemplate(element);
+}
+/**
+ * Helper to get editor template from either structural directive or nested directive.
+ */
+function getAnyEditorTemplate(element) {
+    // First check structural directive registry (for *tbwEditor syntax)
+    // The structural context uses `any` types for better ergonomics, but is compatible with GridEditorContext
+    const structuralTemplate = getStructuralEditorTemplate(element);
+    if (structuralTemplate)
+        return structuralTemplate;
+    // Fall back to nested directive (for <tbw-grid-column-editor> syntax)
+    return getEditorTemplate(element);
+}
+/**
+ * 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
+ */
+class AngularGridAdapter {
+    injector;
+    appRef;
+    viewContainerRef;
+    viewRefs = [];
+    componentRefs = [];
+    typeRegistry = null;
+    constructor(injector, appRef, viewContainerRef) {
+        this.injector = injector;
+        this.appRef = appRef;
+        this.viewContainerRef = viewContainerRef;
+        // Register globally for directive access
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        window.__ANGULAR_GRID_ADAPTER__ = this;
+        // Try to get the type registry from the injector
+        try {
+            this.typeRegistry = this.injector.get(GridTypeRegistry, null);
+        }
+        catch {
+            // GridTypeRegistry not available - type defaults won't be resolved
+        }
+    }
+    /**
+     * 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(config) {
+        if (!config.columns) {
+            return config;
+        }
+        const processedColumns = config.columns.map((col) => this.processColumn(col));
+        return {
+            ...config,
+            columns: processedColumns,
+        };
+    }
+    /**
+     * Processes a single column configuration, converting component class references
+     * to actual renderer/editor functions.
+     *
+     * @param column - Angular column configuration
+     * @returns Processed ColumnConfig
+     */
+    processColumn(column) {
+        const processed = { ...column };
+        // Convert renderer component class to function
+        if (column.renderer && isComponentClass(column.renderer)) {
+            processed.renderer = this.createComponentRenderer(column.renderer);
+        }
+        // Convert editor component class to function
+        if (column.editor && isComponentClass(column.editor)) {
+            processed.editor = this.createComponentEditor(column.editor);
+        }
+        return processed;
+    }
+    /**
+     * Determines if this adapter can handle the given element.
+     * Checks if a template is registered for this element (structural or nested).
+     */
+    canHandle(element) {
+        return getAnyViewTemplate(element) !== undefined || getAnyEditorTemplate(element) !== undefined;
+    }
+    /**
+     * 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(element) {
+        const template = getAnyViewTemplate(element);
+        if (!template) {
+            // Return undefined so the grid uses default rendering
+            // This is important when only an editor template is provided (no view template)
+            return undefined;
+        }
+        return (ctx) => {
+            // Create the context for the template
+            const context = {
+                $implicit: ctx.value,
+                value: ctx.value,
+                row: ctx.row,
+                column: ctx.column,
+            };
+            // Create embedded view from template
+            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
+            this.viewRefs.push(viewRef);
+            // Trigger change detection
+            viewRef.detectChanges();
+            // Get the first root node (the component's host element)
+            const rootNode = viewRef.rootNodes[0];
+            return rootNode;
+        };
+    }
+    /**
+     * 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(element) {
+        const template = getAnyEditorTemplate(element);
+        // Find the parent grid element for FormArray context access
+        const gridElement = element.closest('tbw-grid');
+        if (!template) {
+            // No warning - this can happen during early initialization before Angular
+            // registers structural directive templates. The grid will re-parse columns
+            // after templates are registered.
+            return () => document.createElement('div');
+        }
+        return (ctx) => {
+            // Create simple callback functions (preferred)
+            const onCommit = (value) => ctx.commit(value);
+            const onCancel = () => ctx.cancel();
+            // Create EventEmitters for backwards compatibility (deprecated)
+            const commitEmitter = new EventEmitter();
+            const cancelEmitter = new EventEmitter();
+            commitEmitter.subscribe((value) => ctx.commit(value));
+            cancelEmitter.subscribe(() => ctx.cancel());
+            // Try to get the FormControl from the FormArrayContext
+            let control;
+            if (gridElement) {
+                const formContext = getFormArrayContext(gridElement);
+                if (formContext?.hasFormGroups) {
+                    // Find the row index by looking up ctx.row in the grid's rows
+                    const gridRows = gridElement.rows;
+                    if (gridRows) {
+                        const rowIndex = gridRows.indexOf(ctx.row);
+                        if (rowIndex >= 0) {
+                            control = formContext.getControl(rowIndex, ctx.field);
+                        }
+                    }
+                }
+            }
+            // Create the context for the template
+            const context = {
+                $implicit: ctx.value,
+                value: ctx.value,
+                row: ctx.row,
+                column: ctx.column,
+                // Preferred: simple callback functions
+                onCommit,
+                onCancel,
+                // FormControl from FormArray (if available)
+                control,
+                // Deprecated: EventEmitters (for backwards compatibility)
+                commit: commitEmitter,
+                cancel: cancelEmitter,
+            };
+            // Create embedded view from template
+            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
+            this.viewRefs.push(viewRef);
+            // Trigger change detection
+            viewRef.detectChanges();
+            // Get the first root node (the component's host element)
+            const rootNode = viewRef.rootNodes[0];
+            // Auto-wire: Listen for commit/cancel events on the rendered component.
+            // This allows components to just emit (commit) and (cancel) without
+            // requiring explicit template bindings like (commit)="onCommit($event)".
+            if (rootNode && rootNode.addEventListener) {
+                rootNode.addEventListener('commit', (e) => {
+                    const customEvent = e;
+                    ctx.commit(customEvent.detail);
+                });
+                rootNode.addEventListener('cancel', () => {
+                    ctx.cancel();
+                });
+            }
+            return rootNode;
+        };
+    }
+    /**
+     * Creates a detail renderer function for MasterDetailPlugin.
+     * Renders Angular templates for expandable detail rows.
+     */
+    createDetailRenderer(gridElement) {
+        const template = getDetailTemplate(gridElement);
+        if (!template) {
+            return undefined;
+        }
+        return (row) => {
+            // Create the context for the template
+            const context = {
+                $implicit: row,
+                row: row,
+            };
+            // Create embedded view from template
+            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
+            this.viewRefs.push(viewRef);
+            // Trigger change detection
+            viewRef.detectChanges();
+            // Create a container for the root nodes
+            const container = document.createElement('div');
+            viewRef.rootNodes.forEach((node) => container.appendChild(node));
+            return container;
+        };
+    }
+    /**
+     * 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(detailElement) {
+        // Get the template from the registry for this detail element
+        const template = getDetailTemplate(detailElement.closest('tbw-grid'));
+        if (!template) {
+            return undefined;
+        }
+        // Return a renderer function that creates embedded views
+        // Note: rowIndex is part of the MasterDetailPlugin detailRenderer signature but not needed here
+        return (row) => {
+            const context = {
+                $implicit: row,
+                row: row,
+            };
+            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
+            this.viewRefs.push(viewRef);
+            viewRef.detectChanges();
+            const container = document.createElement('div');
+            viewRef.rootNodes.forEach((node) => container.appendChild(node));
+            return container;
+        };
+    }
+    /**
+     * 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(gridElement) {
+        const template = getResponsiveCardTemplate(gridElement);
+        if (!template) {
+            return undefined;
+        }
+        return (row, rowIndex) => {
+            // Create the context for the template
+            const context = {
+                $implicit: row,
+                row: row,
+                index: rowIndex,
+            };
+            // Create embedded view from template
+            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
+            this.viewRefs.push(viewRef);
+            // Trigger change detection
+            viewRef.detectChanges();
+            // Create a container for the root nodes
+            const container = document.createElement('div');
+            viewRef.rootNodes.forEach((node) => container.appendChild(node));
+            return container;
+        };
+    }
+    /**
+     * Creates a tool panel renderer from a light DOM element.
+     * The renderer creates an Angular template-based panel content.
+     */
+    createToolPanelRenderer(element) {
+        const template = getToolPanelTemplate(element);
+        if (!template) {
+            return undefined;
+        }
+        // Find the parent grid element for context
+        const gridElement = element.closest('tbw-grid');
+        return (container) => {
+            // Create the context for the template
+            const context = {
+                $implicit: gridElement ?? container,
+                grid: gridElement ?? container,
+            };
+            // Create embedded view from template
+            const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
+            this.viewRefs.push(viewRef);
+            // Trigger change detection
+            viewRef.detectChanges();
+            // Append all root nodes to the container
+            viewRef.rootNodes.forEach((node) => container.appendChild(node));
+            // Return cleanup function
+            return () => {
+                const index = this.viewRefs.indexOf(viewRef);
+                if (index > -1) {
+                    this.viewRefs.splice(index, 1);
+                }
+                viewRef.destroy();
+            };
+        };
+    }
+    /**
+     * 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(type) {
+        if (!this.typeRegistry) {
+            return undefined;
+        }
+        const config = this.typeRegistry.get(type);
+        if (!config) {
+            return undefined;
+        }
+        const typeDefault = {
+            editorParams: config.editorParams,
+        };
+        // Create renderer function that instantiates the Angular component
+        if (config.renderer) {
+            typeDefault.renderer = this.createComponentRenderer(config.renderer);
+        }
+        // Create editor function that instantiates the Angular component
+        if (config.editor) {
+            // Type assertion needed: adapter bridges TRow to core's unknown
+            typeDefault.editor = this.createComponentEditor(config.editor);
+        }
+        return typeDefault;
+    }
+    /**
+     * Creates a renderer function from an Angular component class.
+     * @internal
+     */
+    createComponentRenderer(componentClass) {
+        return (ctx) => {
+            // Create a host element for the component
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            // Create the component dynamically
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            // Set inputs - components should have value, row, column inputs
+            this.setComponentInputs(componentRef, {
+                value: ctx.value,
+                row: ctx.row,
+                column: ctx.column,
+            });
+            // Attach to app for change detection
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            // Trigger change detection
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates an editor function from an Angular component class.
+     * @internal
+     */
+    createComponentEditor(componentClass) {
+        return (ctx) => {
+            // Create a host element for the component
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            // Create the component dynamically
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            // Set inputs - components should have value, row, column inputs
+            this.setComponentInputs(componentRef, {
+                value: ctx.value,
+                row: ctx.row,
+                column: ctx.column,
+            });
+            // Attach to app for change detection
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            // Trigger change detection
+            componentRef.changeDetectorRef.detectChanges();
+            // Subscribe to Angular outputs (commit/cancel) on the component instance.
+            // This works with Angular's output() signal API.
+            const instance = componentRef.instance;
+            this.subscribeToOutput(instance, 'commit', (value) => ctx.commit(value));
+            this.subscribeToOutput(instance, 'cancel', () => ctx.cancel());
+            // Also listen for DOM events as fallback (for components that dispatch CustomEvents)
+            hostElement.addEventListener('commit', (e) => {
+                const customEvent = e;
+                ctx.commit(customEvent.detail);
+            });
+            hostElement.addEventListener('cancel', () => {
+                ctx.cancel();
+            });
+            return hostElement;
+        };
+    }
+    /**
+     * Subscribes to an Angular output on a component instance.
+     * Works with both EventEmitter and OutputEmitterRef (signal outputs).
+     * @internal
+     */
+    subscribeToOutput(instance, outputName, callback) {
+        const output = instance[outputName];
+        if (!output)
+            return;
+        // Check if it's an Observable-like (EventEmitter or OutputEmitterRef)
+        if (typeof output.subscribe === 'function') {
+            output.subscribe(callback);
+        }
+    }
+    /**
+     * Sets component inputs using Angular's setInput API.
+     * @internal
+     */
+    setComponentInputs(componentRef, inputs) {
+        for (const [key, value] of Object.entries(inputs)) {
+            try {
+                componentRef.setInput(key, value);
+            }
+            catch {
+                // Input doesn't exist on component - that's okay, some inputs are optional
+            }
+        }
+    }
+    /**
+     * Clean up all view references and component references.
+     * Call this when your app/component is destroyed.
+     */
+    destroy() {
+        this.viewRefs.forEach((ref) => ref.destroy());
+        this.viewRefs = [];
+        this.componentRefs.forEach((ref) => ref.destroy());
+        this.componentRefs = [];
+    }
+}
+
+/**
+ * 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.
+ */
+const GRID_ICONS = new InjectionToken('GRID_ICONS');
+/**
+ * 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>');
+ *   }
+ * }
+ * ```
+ */
+class GridIconRegistry {
+    icons = new Map();
+    constructor() {
+        // Merge any initial icons from provider
+        const initial = inject(GRID_ICONS, { optional: true });
+        if (initial) {
+            for (const [key, value] of Object.entries(initial)) {
+                this.icons.set(key, value);
+            }
+        }
+    }
+    /**
+     * 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(name, value) {
+        this.icons.set(name, value);
+    }
+    /**
+     * Get an icon value.
+     */
+    get(name) {
+        return this.icons.get(name);
+    }
+    /**
+     * Remove an icon override.
+     */
+    remove(name) {
+        this.icons.delete(name);
+    }
+    /**
+     * Check if an icon has an override.
+     */
+    has(name) {
+        return this.icons.has(name);
+    }
+    /**
+     * Get all icon overrides as a GridIcons partial.
+     * Used internally by the adapter.
+     *
+     * @internal
+     */
+    getAll() {
+        const result = {};
+        for (const [key, value] of this.icons) {
+            result[key] = value;
+        }
+        return result;
+    }
+    /**
+     * Get all registered icon names.
+     */
+    getRegisteredIcons() {
+        return Array.from(this.icons.keys());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridIconRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridIconRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * 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>',
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+function provideGridIcons(icons) {
+    return makeEnvironmentProviders([{ provide: GRID_ICONS, useValue: icons }]);
+}
+
+/**
+ * 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
+ */
+function injectGrid() {
+    const elementRef = inject(ElementRef);
+    // Reactive signals
+    const isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
+    const config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    const element = signal(null, ...(ngDevMode ? [{ debugName: "element" }] : []));
+    // Initialize after render
+    afterNextRender(() => {
+        const gridElement = elementRef.nativeElement.querySelector('tbw-grid');
+        if (!gridElement) {
+            console.warn('[injectGrid] No tbw-grid element found in component');
+            return;
+        }
+        element.set(gridElement);
+        // Wait for grid to be ready
+        gridElement.ready?.().then(async () => {
+            isReady.set(true);
+            const effectiveConfig = gridElement.getConfig?.();
+            if (effectiveConfig) {
+                config.set(effectiveConfig);
+            }
+        });
+    });
+    // Computed visible columns
+    const visibleColumns = computed(() => {
+        const currentConfig = config();
+        if (!currentConfig?.columns)
+            return [];
+        return currentConfig.columns.filter((col) => !col.hidden);
+    }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
+    // ═══════════════════════════════════════════════════════════════════
+    // CORE METHODS
+    // ═══════════════════════════════════════════════════════════════════
+    const getConfig = async () => {
+        const gridElement = element();
+        if (!gridElement)
+            return null;
+        const effectiveConfig = gridElement.getConfig?.();
+        return effectiveConfig ?? null;
+    };
+    const forceLayout = async () => {
+        const gridElement = element();
+        if (!gridElement)
+            return;
+        await gridElement.forceLayout?.();
+    };
+    const toggleGroup = async (key) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const gridElement = element();
+        if (!gridElement)
+            return;
+        await gridElement.toggleGroup?.(key);
+    };
+    const registerStyles = (id, css) => {
+        element()?.registerStyles?.(id, css);
+    };
+    const unregisterStyles = (id) => {
+        element()?.unregisterStyles?.(id);
+    };
+    // ═══════════════════════════════════════════════════════════════════
+    // SELECTION CONVENIENCE METHODS
+    // ═══════════════════════════════════════════════════════════════════
+    const selectAll = () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const gridElement = element();
+        const plugin = gridElement?.getPluginByName?.('selection');
+        if (!plugin) {
+            console.warn('[injectGrid] selectAll requires SelectionPlugin');
+            return;
+        }
+        // Row mode: select all row indices
+        if (plugin.config?.mode === 'row') {
+            const rows = gridElement?.rows ?? [];
+            const allIndices = new Set(rows.map((_, i) => i));
+            plugin.selected = allIndices;
+            plugin.requestAfterRender?.();
+        }
+    };
+    const clearSelection = () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const gridElement = element();
+        const plugin = gridElement?.getPluginByName?.('selection');
+        if (!plugin)
+            return;
+        const mode = plugin.config?.mode;
+        if (mode === 'row') {
+            plugin.selected = new Set();
+        }
+        else if (mode === 'range' || mode === 'cell') {
+            plugin.ranges = [];
+        }
+        plugin.requestAfterRender?.();
+    };
+    const getSelectedIndices = () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const gridElement = element();
+        const plugin = gridElement?.getPluginByName?.('selection');
+        if (!plugin)
+            return new Set();
+        if (plugin.config?.mode === 'row') {
+            return new Set(plugin.selected ?? []);
+        }
+        // Range/cell mode: extract unique row indices from ranges
+        const ranges = plugin.ranges ?? [];
+        const indices = new Set();
+        for (const range of ranges) {
+            for (let r = range.startRow; r <= range.endRow; r++) {
+                indices.add(r);
+            }
+        }
+        return indices;
+    };
+    const getSelectedRows = () => {
+        const gridElement = element();
+        if (!gridElement)
+            return [];
+        const rows = gridElement.rows ?? [];
+        const indices = getSelectedIndices();
+        return Array.from(indices)
+            .filter((i) => i >= 0 && i < rows.length)
+            .map((i) => rows[i]);
+    };
+    // ═══════════════════════════════════════════════════════════════════
+    // EXPORT CONVENIENCE METHODS
+    // ═══════════════════════════════════════════════════════════════════
+    const exportToCsv = (filename) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const gridElement = element();
+        const plugin = gridElement?.getPluginByName?.('export');
+        if (!plugin) {
+            console.warn('[injectGrid] exportToCsv requires ExportPlugin');
+            return;
+        }
+        plugin.exportToCsv?.(filename);
+    };
+    const exportToJson = (filename) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const gridElement = element();
+        const plugin = gridElement?.getPluginByName?.('export');
+        if (!plugin) {
+            console.warn('[injectGrid] exportToJson requires ExportPlugin');
+            return;
+        }
+        plugin.exportToJson?.(filename);
+    };
+    return {
+        element,
+        isReady,
+        config,
+        visibleColumns,
+        getConfig,
+        forceLayout,
+        toggleGroup,
+        registerStyles,
+        unregisterStyles,
+        selectAll,
+        clearSelection,
+        getSelectedIndices,
+        getSelectedRows,
+        exportToCsv,
+        exportToJson,
+    };
+}
+
+/**
+ * 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 }" />
+ * ```
+ */
+/**
+ * Central registry mapping feature names to their plugin factories.
+ * Populated by side-effect feature imports.
+ */
+const featureRegistry = new Map();
+/**
+ * Set of features that have been used without being registered.
+ * Used to show helpful warnings only once per feature.
+ */
+const warnedFeatures = new Set();
+/**
+ * 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));
+ * ```
+ */
+function registerFeature(name, factory) {
+    featureRegistry.set(name, {
+        factory: factory,
+        name,
+    });
+}
+/**
+ * Check if a feature is registered.
+ */
+function isFeatureRegistered(name) {
+    return featureRegistry.has(name);
+}
+/**
+ * Get a registered feature's factory.
+ * Returns undefined if not registered.
+ */
+function getFeatureFactory(name) {
+    return featureRegistry.get(name)?.factory;
+}
+/**
+ * Get all registered feature names.
+ * Useful for debugging.
+ */
+function getRegisteredFeatures() {
+    return Array.from(featureRegistry.keys());
+}
+/**
+ * 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
+ */
+function createPluginFromFeature(name, config) {
+    const entry = featureRegistry.get(name);
+    if (!entry) {
+        // Show warning only once per feature in development
+        const isDev = typeof window !== 'undefined' &&
+            (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+        if (!warnedFeatures.has(name) && isDev) {
+            warnedFeatures.add(name);
+            console.warn(`[tbw-grid] Feature "${name}" input is set but the feature is not registered.\n` +
+                `Add this import to enable it:\n\n` +
+                `  import '@toolbox-web/grid-angular/features/${toKebabCase(name)}';\n`);
+        }
+        return undefined;
+    }
+    return entry.factory(config);
+}
+/**
+ * Convert camelCase to kebab-case for import paths.
+ */
+function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Clear the registry. For testing only.
+ * @internal
+ */
+function clearFeatureRegistry() {
+    featureRegistry.clear();
+    warnedFeatures.clear();
+}
+
+/**
+ * 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
+ */
+class BaseGridEditor {
+    elementRef = inject(ElementRef);
+    // ============================================================================
+    // Inputs
+    // ============================================================================
+    /**
+     * The cell value. Used when FormControl is not available.
+     * When a FormControl is provided, value is derived from control.value instead.
+     */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    /**
+     * The full row data object.
+     */
+    row = input(...(ngDevMode ? [undefined, { debugName: "row" }] : []));
+    /**
+     * The column configuration.
+     */
+    column = input(...(ngDevMode ? [undefined, { debugName: "column" }] : []));
+    /**
+     * 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.
+     */
+    control = input(...(ngDevMode ? [undefined, { debugName: "control" }] : []));
+    // ============================================================================
+    // Outputs
+    // ============================================================================
+    /**
+     * Emits when the user commits a new value.
+     */
+    commit = output();
+    /**
+     * Emits when the user cancels editing.
+     */
+    cancel = output();
+    // ============================================================================
+    // Computed State
+    // ============================================================================
+    /**
+     * 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.
+     */
+    currentValue = computed(() => {
+        const ctrl = this.control();
+        if (ctrl) {
+            return ctrl.value;
+        }
+        return this.value();
+    }, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
+    /**
+     * Whether the control is invalid (has validation errors).
+     * Returns false if no FormControl is available.
+     */
+    isInvalid = computed(() => {
+        return this.control()?.invalid ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+    /**
+     * Whether the control is dirty (has been modified).
+     * Returns false if no FormControl is available.
+     */
+    isDirty = computed(() => {
+        return this.control()?.dirty ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
+    /**
+     * Whether the control has been touched.
+     * Returns false if no FormControl is available.
+     */
+    isTouched = computed(() => {
+        return this.control()?.touched ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    /**
+     * Whether the control has any validation errors.
+     */
+    hasErrors = computed(() => {
+        const ctrl = this.control();
+        return ctrl?.errors != null && Object.keys(ctrl.errors).length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasErrors" }] : []));
+    /**
+     * The first error message from the control's validation errors.
+     * Returns an empty string if no errors.
+     */
+    firstErrorMessage = computed(() => {
+        const ctrl = this.control();
+        if (!ctrl?.errors)
+            return '';
+        const firstKey = Object.keys(ctrl.errors)[0];
+        return this.getErrorMessage(firstKey, ctrl.errors[firstKey]);
+    }, ...(ngDevMode ? [{ debugName: "firstErrorMessage" }] : []));
+    /**
+     * All error messages from the control's validation errors.
+     */
+    allErrorMessages = computed(() => {
+        const ctrl = this.control();
+        if (!ctrl?.errors)
+            return [];
+        return Object.entries(ctrl.errors).map(([key, value]) => this.getErrorMessage(key, value));
+    }, ...(ngDevMode ? [{ debugName: "allErrorMessages" }] : []));
+    // ============================================================================
+    // Methods
+    // ============================================================================
+    /**
+     * 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) {
+        // Emit Angular output for template bindings
+        this.commit.emit(newValue);
+        // Dispatch DOM CustomEvent for grid's auto-wiring
+        // This allows the adapter to catch commits without explicit (commit)="..." bindings
+        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('commit', { detail: newValue, bubbles: true }));
+    }
+    /**
+     * Cancel editing. Emits the cancel output AND dispatches a DOM event.
+     * Call this when the user cancels (e.g., presses Escape).
+     */
+    cancelEdit() {
+        // Emit Angular output for template bindings
+        this.cancel.emit();
+        // Dispatch DOM CustomEvent for grid's auto-wiring
+        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('cancel', { bubbles: true }));
+    }
+    /**
+     * 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
+     */
+    getErrorMessage(errorKey, errorValue) {
+        switch (errorKey) {
+            case 'required':
+                return 'This field is required';
+            case 'minlength': {
+                const err = errorValue;
+                return `Minimum length is ${err?.requiredLength ?? 'unknown'}`;
+            }
+            case 'maxlength': {
+                const err = errorValue;
+                return `Maximum length is ${err?.requiredLength ?? 'unknown'}`;
+            }
+            case 'min': {
+                const err = errorValue;
+                return `Minimum value is ${err?.min ?? 'unknown'}`;
+            }
+            case 'max': {
+                const err = errorValue;
+                return `Maximum value is ${err?.max ?? 'unknown'}`;
+            }
+            case 'email':
+                return 'Invalid email address';
+            case 'pattern':
+                return 'Invalid format';
+            default:
+                return `Invalid value (${errorKey})`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseGridEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: BaseGridEditor, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", cancel: "cancel" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseGridEditor, decorators: [{
+            type: Directive
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+/**
+ * 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
+ */
+class Grid {
+    elementRef = inject((ElementRef));
+    injector = inject(EnvironmentInjector);
+    appRef = inject(ApplicationRef);
+    viewContainerRef = inject(ViewContainerRef);
+    iconRegistry = inject(GridIconRegistry, { optional: true });
+    adapter = null;
+    constructor() {
+        // Effect to process angularConfig and apply to grid
+        // This merges feature input plugins with the user's config plugins
+        effect(() => {
+            const config = this.angularConfig();
+            if (!this.adapter)
+                return;
+            // Process the config to convert component classes to actual renderer/editor functions
+            const processedConfig = config ? this.adapter.processGridConfig(config) : {};
+            // Create plugins from feature inputs and merge with config plugins
+            const featurePlugins = this.createFeaturePlugins();
+            const configPlugins = processedConfig.plugins || [];
+            // Merge: feature plugins first, then config plugins
+            const mergedPlugins = [...featurePlugins, ...configPlugins];
+            // Build core config overrides from individual inputs
+            const sortableValue = this.sortable();
+            const filterableValue = this.filterable();
+            const selectableValue = this.selectable();
+            const coreConfigOverrides = {};
+            if (sortableValue !== undefined) {
+                coreConfigOverrides['sortable'] = sortableValue;
+            }
+            if (filterableValue !== undefined) {
+                coreConfigOverrides['filterable'] = filterableValue;
+            }
+            if (selectableValue !== undefined) {
+                coreConfigOverrides['selectable'] = selectableValue;
+            }
+            // Merge icon overrides from registry with any existing icons in config
+            // Registry icons are base, config.icons override them
+            const registryIcons = this.iconRegistry?.getAll();
+            if (registryIcons && Object.keys(registryIcons).length > 0) {
+                const existingIcons = processedConfig?.icons || config?.icons || {};
+                coreConfigOverrides['icons'] = { ...registryIcons, ...existingIcons };
+            }
+            // Apply to the grid element
+            const grid = this.elementRef.nativeElement;
+            grid.gridConfig = {
+                ...processedConfig,
+                ...coreConfigOverrides,
+                plugins: mergedPlugins.length > 0 ? mergedPlugins : undefined,
+            };
+        });
+        // Effect to sync loading state to the grid element
+        effect(() => {
+            const loadingValue = this.loading();
+            if (loadingValue === undefined)
+                return;
+            const grid = this.elementRef.nativeElement;
+            grid.loading = loadingValue;
+        });
+    }
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "customStyles" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "sortable" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "filterable" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "selectable" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : []));
+    /**
+     * 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>
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    angularConfig = input(...(ngDevMode ? [undefined, { debugName: "angularConfig" }] : []));
+    // ═══════════════════════════════════════════════════════════════════════════
+    // FEATURE INPUTS - Declarative plugin configuration
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * 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 }" />
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    selection = input(...(ngDevMode ? [undefined, { debugName: "selection" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "editing" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "clipboard" }] : []));
+    /**
+     * Enable right-click context menu.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/context-menu';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [contextMenu]="true" />
+     * ```
+     */
+    contextMenu = input(...(ngDevMode ? [undefined, { debugName: "contextMenu" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "multiSort" }] : []));
+    /**
+     * @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 = input(...(ngDevMode ? [undefined, { debugName: "sorting" }] : []));
+    /**
+     * 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 }" />
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    filtering = input(...(ngDevMode ? [undefined, { debugName: "filtering" }] : []));
+    /**
+     * Enable column drag-to-reorder.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/reorder';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [reorder]="true" />
+     * ```
+     */
+    reorder = input(...(ngDevMode ? [undefined, { debugName: "reorder" }] : []));
+    /**
+     * Enable column visibility toggle panel.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/visibility';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [visibility]="true" />
+     * ```
+     */
+    visibility = input(...(ngDevMode ? [undefined, { debugName: "visibility" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "pinnedColumns" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "groupingColumns" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "columnVirtualization" }] : []));
+    /**
+     * Enable row drag-to-reorder.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/row-reorder';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [rowReorder]="true" />
+     * ```
+     */
+    rowReorder = input(...(ngDevMode ? [undefined, { debugName: "rowReorder" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "groupingRows" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "pinnedRows" }] : []));
+    /**
+     * Enable hierarchical tree view.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/tree';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [tree]="{ childrenField: 'children' }" />
+     * ```
+     */
+    tree = input(...(ngDevMode ? [undefined, { debugName: "tree" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "masterDetail" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "responsive" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "undoRedo" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "exportFeature" }] : []));
+    /**
+     * Enable print functionality.
+     *
+     * **Requires feature import:**
+     * ```typescript
+     * import '@toolbox-web/grid-angular/features/print';
+     * ```
+     *
+     * @example
+     * ```html
+     * <tbw-grid [print]="true" />
+     * ```
+     */
+    print = input(...(ngDevMode ? [undefined, { debugName: "print" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "pivot" }] : []));
+    /**
+     * 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 = input(...(ngDevMode ? [undefined, { debugName: "serverSide" }] : []));
+    // ═══════════════════════════════════════════════════════════════════════════
+    // EVENT OUTPUTS - All grid events
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Emitted when a cell is clicked.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellClick)="onCellClick($event)">...</tbw-grid>
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cellClick = output();
+    /**
+     * Emitted when a row is clicked.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (rowClick)="onRowClick($event)">...</tbw-grid>
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    rowClick = output();
+    /**
+     * Emitted when a cell is activated (Enter key or double-click).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellActivate)="onCellActivate($event)">...</tbw-grid>
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cellActivate = output();
+    /**
+     * Emitted when a cell value changes (before commit).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (cellChange)="onCellChange($event)">...</tbw-grid>
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cellChange = output();
+    /**
+     * 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 = output();
+    /**
+     * 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 = output();
+    /**
+     * Emitted when the changed rows are reset.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (changedRowsReset)="onChangedRowsReset($event)">...</tbw-grid>
+     * ```
+     */
+    changedRowsReset = output();
+    /**
+     * Emitted when sort state changes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (sortChange)="onSortChange($event)">...</tbw-grid>
+     * ```
+     */
+    sortChange = output();
+    /**
+     * Emitted when filter values change.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (filterChange)="onFilterChange($event)">...</tbw-grid>
+     * ```
+     */
+    filterChange = output();
+    /**
+     * Emitted when a column is resized.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnResize)="onColumnResize($event)">...</tbw-grid>
+     * ```
+     */
+    columnResize = output();
+    /**
+     * Emitted when a column is moved via drag-and-drop.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnMove)="onColumnMove($event)">...</tbw-grid>
+     * ```
+     */
+    columnMove = output();
+    /**
+     * Emitted when column visibility changes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnVisibility)="onColumnVisibility($event)">...</tbw-grid>
+     * ```
+     */
+    columnVisibility = output();
+    /**
+     * Emitted when column state changes (resize, reorder, visibility).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (columnStateChange)="onColumnStateChange($event)">...</tbw-grid>
+     * ```
+     */
+    columnStateChange = output();
+    /**
+     * Emitted when selection changes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (selectionChange)="onSelectionChange($event)">...</tbw-grid>
+     * ```
+     */
+    selectionChange = output();
+    /**
+     * Emitted when a row is moved via drag-and-drop.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (rowMove)="onRowMove($event)">...</tbw-grid>
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    rowMove = output();
+    /**
+     * Emitted when a group is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (groupToggle)="onGroupToggle($event)">...</tbw-grid>
+     * ```
+     */
+    groupToggle = output();
+    /**
+     * Emitted when a tree node is expanded.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (treeExpand)="onTreeExpand($event)">...</tbw-grid>
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    treeExpand = output();
+    /**
+     * Emitted when a detail panel is expanded or collapsed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (detailExpand)="onDetailExpand($event)">...</tbw-grid>
+     * ```
+     */
+    detailExpand = output();
+    /**
+     * Emitted when responsive mode changes (table ↔ card).
+     *
+     * @example
+     * ```html
+     * <tbw-grid (responsiveChange)="onResponsiveChange($event)">...</tbw-grid>
+     * ```
+     */
+    responsiveChange = output();
+    /**
+     * Emitted when cells are copied to clipboard.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (copy)="onCopy($event)">...</tbw-grid>
+     * ```
+     */
+    copy = output();
+    /**
+     * Emitted when cells are pasted from clipboard.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (paste)="onPaste($event)">...</tbw-grid>
+     * ```
+     */
+    paste = output();
+    /**
+     * Emitted when undo/redo is performed.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (undoRedoAction)="onUndoRedo($event)">...</tbw-grid>
+     * ```
+     */
+    undoRedoAction = output();
+    /**
+     * Emitted when export completes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (exportComplete)="onExportComplete($event)">...</tbw-grid>
+     * ```
+     */
+    exportComplete = output();
+    /**
+     * Emitted when print starts.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (printStart)="onPrintStart($event)">...</tbw-grid>
+     * ```
+     */
+    printStart = output();
+    /**
+     * Emitted when print completes.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (printComplete)="onPrintComplete($event)">...</tbw-grid>
+     * ```
+     */
+    printComplete = output();
+    // Map of output names to event names for automatic wiring
+    eventOutputMap = {
+        cellClick: 'cell-click',
+        rowClick: 'row-click',
+        cellActivate: 'cell-activate',
+        cellChange: 'cell-change',
+        cellCommit: 'cell-commit',
+        rowCommit: 'row-commit',
+        changedRowsReset: 'changed-rows-reset',
+        sortChange: 'sort-change',
+        filterChange: 'filter-change',
+        columnResize: 'column-resize',
+        columnMove: 'column-move',
+        columnVisibility: 'column-visibility',
+        columnStateChange: 'column-state-change',
+        selectionChange: 'selection-change',
+        rowMove: 'row-move',
+        groupToggle: 'group-toggle',
+        treeExpand: 'tree-expand',
+        detailExpand: 'detail-expand',
+        responsiveChange: 'responsive-change',
+        copy: 'copy',
+        paste: 'paste',
+        undoRedoAction: 'undo-redo',
+        exportComplete: 'export-complete',
+        printStart: 'print-start',
+        printComplete: 'print-complete',
+    };
+    // Store event listeners for cleanup
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    eventListeners = new Map();
+    ngOnInit() {
+        // Create and register the adapter
+        this.adapter = new AngularGridAdapter(this.injector, this.appRef, this.viewContainerRef);
+        DataGridElement.registerAdapter(this.adapter);
+        const grid = this.elementRef.nativeElement;
+        // Wire up all event listeners based on eventOutputMap
+        this.setupEventListeners(grid);
+        // Register adapter on the grid element so MasterDetailPlugin can use it
+        // via the __frameworkAdapter hook during attach()
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        grid.__frameworkAdapter = this.adapter;
+    }
+    /**
+     * Sets up event listeners for all outputs using the eventOutputMap.
+     */
+    setupEventListeners(grid) {
+        // Wire up all event listeners
+        for (const [outputName, eventName] of Object.entries(this.eventOutputMap)) {
+            const listener = (e) => {
+                const detail = e.detail;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this[outputName].emit(detail);
+            };
+            grid.addEventListener(eventName, listener);
+            this.eventListeners.set(eventName, listener);
+        }
+    }
+    /**
+     * 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).
+     */
+    createFeaturePlugins() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const plugins = [];
+        // Helper to add plugin if feature is registered
+        const addPlugin = (name, config) => {
+            if (config === undefined || config === null || config === false)
+                return;
+            const plugin = createPluginFromFeature(name, config);
+            if (plugin)
+                plugins.push(plugin);
+        };
+        // Add plugins for each feature input
+        addPlugin('selection', this.selection());
+        addPlugin('editing', this.editing());
+        addPlugin('clipboard', this.clipboard());
+        addPlugin('contextMenu', this.contextMenu());
+        // multiSort is the primary input; sorting is a deprecated alias
+        addPlugin('multiSort', this.multiSort() ?? this.sorting());
+        addPlugin('filtering', this.filtering());
+        addPlugin('reorder', this.reorder());
+        addPlugin('visibility', this.visibility());
+        addPlugin('pinnedColumns', this.pinnedColumns());
+        addPlugin('groupingColumns', this.groupingColumns());
+        addPlugin('columnVirtualization', this.columnVirtualization());
+        addPlugin('rowReorder', this.rowReorder());
+        addPlugin('groupingRows', this.groupingRows());
+        addPlugin('pinnedRows', this.pinnedRows());
+        addPlugin('tree', this.tree());
+        addPlugin('masterDetail', this.masterDetail());
+        addPlugin('responsive', this.responsive());
+        addPlugin('undoRedo', this.undoRedo());
+        addPlugin('export', this.exportFeature());
+        addPlugin('print', this.print());
+        addPlugin('pivot', this.pivot());
+        addPlugin('serverSide', this.serverSide());
+        return plugins;
+    }
+    ngAfterContentInit() {
+        // After Angular child directives have initialized (GridColumnView, GridColumnEditor, GridDetailView, GridToolPanel),
+        // force the grid to re-parse light DOM columns so adapters can create renderers/editors
+        const grid = this.elementRef.nativeElement;
+        if (grid && typeof grid.refreshColumns === 'function') {
+            // Use setTimeout to ensure Angular effects have run (template registration)
+            setTimeout(() => {
+                grid.refreshColumns();
+                // Configure MasterDetailPlugin after Angular templates are registered
+                this.configureMasterDetail(grid);
+                // Configure ResponsivePlugin card renderer if template is present
+                this.configureResponsiveCard(grid);
+                // Refresh shell header to pick up tool panel templates
+                // This allows Angular templates to be used in tool panels
+                if (typeof grid.refreshShellHeader === 'function') {
+                    grid.refreshShellHeader();
+                }
+                // Register custom styles if provided
+                this.registerCustomStyles(grid);
+            }, 0);
+        }
+    }
+    /**
+     * Registers custom styles into the grid.
+     * Uses the grid's registerStyles() API for clean encapsulation.
+     */
+    registerCustomStyles(grid) {
+        const styles = this.customStyles();
+        if (!styles)
+            return;
+        // Wait for grid to be ready before registering styles
+        grid.ready?.().then(() => {
+            grid.registerStyles?.('angular-custom-styles', styles);
+        });
+    }
+    /**
+     * 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
+     */
+    async configureMasterDetail(grid) {
+        if (!this.adapter)
+            return;
+        // Check for existing plugin by name to avoid importing the class
+        const existingPlugin = grid.gridConfig?.plugins?.find((p) => p.name === 'masterDetail');
+        if (existingPlugin && typeof existingPlugin.refreshDetailRenderer === 'function') {
+            // Plugin exists - just refresh the renderer to pick up Angular templates
+            existingPlugin.refreshDetailRenderer();
+            return;
+        }
+        // Check if <tbw-grid-detail> is present in light DOM
+        const detailElement = grid.querySelector('tbw-grid-detail');
+        if (!detailElement)
+            return;
+        // Create detail renderer from Angular template
+        const detailRenderer = this.adapter.createDetailRenderer(grid);
+        if (!detailRenderer)
+            return;
+        // Parse configuration from attributes
+        const animationAttr = detailElement.getAttribute('animation');
+        let animation = 'slide';
+        if (animationAttr === 'false') {
+            animation = false;
+        }
+        else if (animationAttr === 'fade') {
+            animation = 'fade';
+        }
+        const showExpandColumn = detailElement.getAttribute('showExpandColumn') !== 'false';
+        // Dynamically import the plugin to avoid bundling it when not used
+        const { MasterDetailPlugin } = await import('@toolbox-web/grid/plugins/master-detail');
+        // Create and add the plugin
+        const plugin = new MasterDetailPlugin({
+            detailRenderer: detailRenderer,
+            showExpandColumn,
+            animation,
+        });
+        const currentConfig = grid.gridConfig || {};
+        const existingPlugins = currentConfig.plugins || [];
+        grid.gridConfig = {
+            ...currentConfig,
+            plugins: [...existingPlugins, plugin],
+        };
+    }
+    /**
+     * 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
+     */
+    configureResponsiveCard(grid) {
+        if (!this.adapter)
+            return;
+        // Check if <tbw-grid-responsive-card> is present in light DOM
+        const cardElement = grid.querySelector('tbw-grid-responsive-card');
+        if (!cardElement)
+            return;
+        // Create card renderer from Angular template
+        const cardRenderer = this.adapter.createResponsiveCardRenderer(grid);
+        if (!cardRenderer)
+            return;
+        // Find existing plugin by name to avoid importing the class
+        const existingPlugin = grid.gridConfig?.plugins?.find((p) => p.name === 'responsive');
+        if (existingPlugin && typeof existingPlugin.setCardRenderer === 'function') {
+            // Plugin exists - update its cardRenderer
+            existingPlugin.setCardRenderer(cardRenderer);
+            return;
+        }
+        // Plugin doesn't exist - log a warning
+        console.warn('[tbw-grid-angular] <tbw-grid-responsive-card> found but ResponsivePlugin is not configured.\n' +
+            'Add ResponsivePlugin to your gridConfig.plugins array:\n\n' +
+            '  import { ResponsivePlugin } from "@toolbox-web/grid/plugins/responsive";\n' +
+            '  gridConfig = {\n' +
+            '    plugins: [new ResponsivePlugin({ breakpoint: 600 })]\n' +
+            '  };');
+    }
+    ngOnDestroy() {
+        const grid = this.elementRef.nativeElement;
+        // Cleanup all event listeners
+        if (grid) {
+            for (const [eventName, listener] of this.eventListeners) {
+                grid.removeEventListener(eventName, listener);
+            }
+            this.eventListeners.clear();
+        }
+        // Cleanup custom styles
+        if (grid && this.customStyles()) {
+            grid.unregisterStyles?.('angular-custom-styles');
+        }
+        // Cleanup adapter if needed
+        if (this.adapter) {
+            this.adapter.destroy?.();
+            this.adapter = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorder: { classPropertyName: "reorder", publicName: "reorder", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, rowReorder: { classPropertyName: "rowReorder", publicName: "rowReorder", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "exportFeature", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", groupToggle: "groupToggle", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", copy: "copy", paste: "paste", undoRedoAction: "undoRedoAction", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Grid, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid' }]
+        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], angularConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "angularConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorder", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], rowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorder", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFeature", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }] } });
+
+/**
+ * @packageDocumentation
+ * @toolbox-web/grid-angular - Angular adapter for @toolbox-web/grid.
+ *
+ * Provides directives for seamless Angular integration with the grid component.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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 };
+//# sourceMappingURL=toolbox-web-grid-angular.mjs.map