@toolbox-web/grid-angular 0.19.2 → 1.0.0-alpha

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, DestroyRef, InjectionToken, Injectable, makeEnvironmentProviders, EventEmitter, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, DestroyRef, InjectionToken, Injectable, makeEnvironmentProviders, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
 import { startWith, debounceTime } from 'rxjs/operators';
@@ -256,6 +256,17 @@ function getDetailConfig(gridElement) {
  * })
  * ```
  *
+ * @example
+ * ```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>
+ * ```
+ *
  * @category Directive
  */
 class GridDetailView {
@@ -351,6 +362,13 @@ function getFormArrayContext(gridElement) {
  * - Supports row-level validation state aggregation
  * - Automatically syncs FormArray changes to the grid
  *
+ * @example
+ * ```html
+ * <form [formGroup]="form">
+ *   <tbw-grid [formArray]="form.controls.rows" [columns]="columns" />
+ * </form>
+ * ```
+ *
  * @category Directive
  */
 class GridFormArray {
@@ -911,6 +929,17 @@ function getToolPanelElements(gridElement) {
  * })
  * ```
  *
+ * @example
+ * ```html
+ * <tbw-grid [rows]="rows">
+ *   <tbw-grid-tool-panel id="quick-filters" title="Quick Filters" icon="\uD83D\uDD0D">
+ *     <ng-template let-grid>
+ *       <app-quick-filters [grid]="grid" />
+ *     </ng-template>
+ *   </tbw-grid-tool-panel>
+ * </tbw-grid>
+ * ```
+ *
  * @category Directive
  */
 class GridToolPanel {
@@ -1040,6 +1069,13 @@ function getStructuralEditorTemplate(columnElement) {
  * })
  * ```
  *
+ * @example
+ * ```html
+ * <tbw-grid-column field="status">
+ *   <app-status-badge *tbwRenderer="let value; row as row" [value]="value" />
+ * </tbw-grid-column>
+ * ```
+ *
  * @category Directive
  */
 class TbwRenderer {
@@ -1129,6 +1165,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * })
  * ```
  *
+ * @example
+ * ```html
+ * <tbw-grid-column field="status" editable>
+ *   <app-status-editor *tbwEditor="let value" [value]="value" />
+ * </tbw-grid-column>
+ * ```
+ *
  * @category Directive
  */
 class TbwEditor {
@@ -1741,14 +1784,9 @@ class GridAdapter {
             return undefined;
         }
         return (ctx) => {
-            // Create simple callback functions (preferred)
+            // Create simple callback functions
             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) {
@@ -1772,16 +1810,12 @@ class GridAdapter {
                 field: ctx.field,
                 column: ctx.column,
                 rowId: ctx.rowId ?? '',
-                // Preferred: simple callback functions
                 onCommit,
                 onCancel,
                 updateRow: ctx.updateRow,
                 onValueChange: ctx.onValueChange,
                 // FormControl from FormArray (if available)
                 control,
-                // Deprecated: EventEmitters (for backwards compatibility)
-                commit: commitEmitter,
-                cancel: cancelEmitter,
             };
             // Create embedded view from template
             const viewRef = this.viewContainerRef.createEmbeddedView(template, context);
@@ -2424,11 +2458,6 @@ class GridAdapter {
         this.editorComponentRefs = [];
     }
 }
-/**
- * @deprecated Use `GridAdapter` instead. This alias will be removed in v2.
- * @see {@link GridAdapter}
- */
-const AngularGridAdapter = GridAdapter;
 
 /**
  * Icon configuration registry for Angular applications.
@@ -2608,9 +2637,12 @@ function provideGridIcons(icons) {
  * }
  * ```
  *
+ * @param selector - Optional CSS selector to target a specific grid element.
+ *   Defaults to `'tbw-grid'` (first grid in the component). Use when the
+ *   component contains multiple grids, e.g. `'tbw-grid.primary'` or `'#my-grid'`.
  * @returns Object with grid access methods and state signals
  */
-function injectGrid() {
+function injectGrid(selector = 'tbw-grid') {
     const elementRef = inject(ElementRef);
     // Reactive signals
     const isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : /* istanbul ignore next */ []));
@@ -2618,7 +2650,7 @@ function injectGrid() {
     const element = signal(null, ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
     // Initialize after render
     afterNextRender(() => {
-        const gridElement = elementRef.nativeElement.querySelector('tbw-grid');
+        const gridElement = elementRef.nativeElement.querySelector(selector);
         if (!gridElement) {
             console.warn('[injectGrid] No tbw-grid element found in component');
             return;
@@ -2669,92 +2701,6 @@ function injectGrid() {
     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,
@@ -2765,12 +2711,6 @@ function injectGrid() {
         toggleGroup,
         registerStyles,
         unregisterStyles,
-        selectAll,
-        clearSelection,
-        getSelectedIndices,
-        getSelectedRows,
-        exportToCsv,
-        exportToJson,
     };
 }
 
@@ -3471,6 +3411,31 @@ let anchorCounter = 0;
  * }
  * ```
  *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <input #inlineInput readonly [value]="currentValue()"
+ *       (click)="onInlineClick()" (keydown)="onInlineKeydown($event)" />
+ *     <div #panel style="width: 280px">
+ *       <!-- overlay content -->
+ *     </div>
+ *   `
+ * })
+ * export class MyEditor extends BaseOverlayEditor<MyRow, string> {
+ *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
+ *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
+ *
+ *   constructor() {
+ *     super();
+ *     effect(() => this.initOverlay(this.panelRef().nativeElement));
+ *   }
+ *
+ *   protected getInlineInput() { return this.inputRef()?.nativeElement ?? null; }
+ *   protected onOverlayOutsideClick() { this.hideOverlay(); }
+ * }
+ * ```
+ *
  * @typeParam TRow - The row data type
  * @typeParam TValue - The cell value type
  */
@@ -4035,6 +4000,11 @@ function getLazyFormContext(gridElement) {
  * | 500  | 10,000 controls          | ~20 controls |
  * | 1000 | 20,000 controls          | ~20 controls |
  *
+ * @example
+ * ```html
+ * <tbw-grid [rows]="employees()" [lazyForm]="createRowForm" [gridConfig]="gridConfig" />
+ * ```
+ *
  * @see GridFormArray For small datasets with full upfront validation
  * @category Directive
  */
@@ -4518,15 +4488,8 @@ class Grid {
         // Effect to process gridConfig and apply to grid
         // This merges feature input plugins with the user's config plugins
         effect(() => {
-            const deprecatedAngularConfig = this.angularConfig();
             const userGridConfig = this.gridConfig();
-            // Emit deprecation warning if angularConfig is used
-            if (deprecatedAngularConfig && !userGridConfig) {
-                console.warn('[tbw-grid] The [angularConfig] input is deprecated. Use [gridConfig] instead. ' +
-                    'The gridConfig input now accepts GridConfig directly.');
-            }
-            // Use gridConfig preferentially, fall back to deprecated angularConfig
-            const angularCfg = userGridConfig ?? deprecatedAngularConfig;
+            const angularCfg = userGridConfig;
             if (!this.adapter)
                 return;
             // Create plugins from feature inputs
@@ -4805,22 +4768,6 @@ class Grid {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : /* istanbul ignore next */ []));
-    /**
-     * @deprecated Use `gridConfig` instead. This input will be removed in v2.
-     *
-     * The `angularConfig` name was inconsistent with React and Vue adapters, which both use `gridConfig`.
-     * The `gridConfig` input now accepts `GridConfig` directly.
-     *
-     * ```html
-     * <!-- Before -->
-     * <tbw-grid [angularConfig]="config" />
-     *
-     * <!-- After -->
-     * <tbw-grid [gridConfig]="config" />
-     * ```
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    angularConfig = input(...(ngDevMode ? [undefined, { debugName: "angularConfig" }] : /* istanbul ignore next */ []));
     // ═══════════════════════════════════════════════════════════════════════════
     // FEATURE INPUTS - Declarative plugin configuration
     // ═══════════════════════════════════════════════════════════════════════════
@@ -4918,17 +4865,6 @@ class Grid {
      * ```
      */
     multiSort = input(...(ngDevMode ? [undefined, { debugName: "multiSort" }] : /* istanbul ignore next */ []));
-    /**
-     * @deprecated Use `[multiSort]` instead. Will be removed in v2.
-     *
-     * 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" }] : /* istanbul ignore next */ []));
     /**
      * Enable column filtering.
      *
@@ -4959,10 +4895,6 @@ class Grid {
      * ```
      */
     reorderColumns = input(...(ngDevMode ? [undefined, { debugName: "reorderColumns" }] : /* istanbul ignore next */ []));
-    /**
-     * @deprecated Use `reorderColumns` instead. Will be removed in v2.
-     */
-    reorder = input(...(ngDevMode ? [undefined, { debugName: "reorder" }] : /* istanbul ignore next */ []));
     /**
      * Enable column visibility toggle panel.
      *
@@ -5038,10 +4970,6 @@ class Grid {
      * ```
      */
     reorderRows = input(...(ngDevMode ? [undefined, { debugName: "reorderRows" }] : /* istanbul ignore next */ []));
-    /**
-     * @deprecated Use `reorderRows` instead. Will be removed in v2.0.
-     */
-    rowReorder = input(...(ngDevMode ? [undefined, { debugName: "rowReorder" }] : /* istanbul ignore next */ []));
     /**
      * Enable row grouping by field values.
      *
@@ -5515,10 +5443,10 @@ class Grid {
         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());
+        // multiSort is the primary input
+        addPlugin('multiSort', this.multiSort());
         addPlugin('filtering', this.filtering());
-        addPlugin('reorderColumns', this.reorderColumns() ?? this.reorder());
+        addPlugin('reorderColumns', this.reorderColumns());
         addPlugin('visibility', this.visibility());
         addPlugin('pinnedColumns', this.pinnedColumns());
         // Pre-process groupingColumns config to bridge Angular component classes
@@ -5530,7 +5458,7 @@ class Grid {
             addPlugin('groupingColumns', gcConfig);
         }
         addPlugin('columnVirtualization', this.columnVirtualization());
-        addPlugin('reorderRows', this.reorderRows() ?? this.rowReorder());
+        addPlugin('reorderRows', this.reorderRows());
         // Pre-process groupingRows config to bridge Angular component classes
         const grConfig = this.groupingRows();
         if (grConfig && typeof grConfig === 'object' && this.adapter) {
@@ -5692,12 +5620,12 @@ class Grid {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", 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 }, reorderRows: { classPropertyName: "reorderRows", publicName: "reorderRows", isSignal: true, isRequired: false, transformFunction: null }, rowReorder: { classPropertyName: "rowReorder", publicName: "rowReorder", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", groupToggle: "groupToggle", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", copy: "copy", paste: "paste", undoRedoAction: "undoRedoAction", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, 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 }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", 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 }, reorderRows: { classPropertyName: "reorderRows", publicName: "reorderRows", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", 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.2.5", 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], angularConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "angularConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderColumns", 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 }] }], reorderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderRows", required: false }] }], rowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorder", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], 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 }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderColumns", 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 }] }], reorderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderRows", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", 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
@@ -5705,11 +5633,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *
  * Provides directives for seamless Angular integration with the grid component.
  */
-// Primary export - use this
+// Primary export
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularGridAdapter, BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, getFormArrayContext, getLazyFormContext, injectGrid, isComponentClass, provideGridIcons, provideGridTypeDefaults };
+export { BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, getFormArrayContext, getLazyFormContext, injectGrid, isComponentClass, provideGridIcons, provideGridTypeDefaults };
 //# sourceMappingURL=toolbox-web-grid-angular.mjs.map