@toolbox-web/grid-angular 0.16.2 → 0.18.0

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

@@ -3,6 +3,8 @@ import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
 import { startWith, debounceTime } from 'rxjs/operators';
+import { createPluginFromFeature } from '@toolbox-web/grid/features/registry';
+export { clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getRegisteredFeatures, isFeatureRegistered, registerFeature } from '@toolbox-web/grid/features/registry';
 import { DataGridElement } from '@toolbox-web/grid';
 
 // #endregion
@@ -1573,6 +1575,10 @@ class GridAdapter {
         if (config.typeDefaults) {
             result.typeDefaults = this.processTypeDefaults(config.typeDefaults);
         }
+        // Process loadingRenderer - convert Angular component class to function
+        if (config.loadingRenderer && isComponentClass(config.loadingRenderer)) {
+            result.loadingRenderer = this.createComponentLoadingRenderer(config.loadingRenderer);
+        }
         return result;
     }
     /**
@@ -1619,6 +1625,14 @@ class GridAdapter {
         if (column.editor && isComponentClass(column.editor)) {
             processed.editor = this.createComponentEditor(column.editor);
         }
+        // Convert headerRenderer component class to function
+        if (column.headerRenderer && isComponentClass(column.headerRenderer)) {
+            processed.headerRenderer = this.createComponentHeaderRenderer(column.headerRenderer);
+        }
+        // Convert headerLabelRenderer component class to function
+        if (column.headerLabelRenderer && isComponentClass(column.headerLabelRenderer)) {
+            processed.headerLabelRenderer = this.createComponentHeaderLabelRenderer(column.headerLabelRenderer);
+        }
         return processed;
     }
     /**
@@ -2092,6 +2106,222 @@ class GridAdapter {
             return hostElement;
         };
     }
+    /**
+     * Creates a header renderer function from an Angular component class.
+     * Mounts the component with full header context (column, value, sortState, etc.).
+     * @internal
+     */
+    createComponentHeaderRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                column: ctx.column,
+                value: ctx.value,
+                sortState: ctx.sortState,
+                filterActive: ctx.filterActive,
+                renderSortIcon: ctx.renderSortIcon,
+                renderFilterButton: ctx.renderFilterButton,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a header label renderer function from an Angular component class.
+     * Mounts the component with label context (column, value).
+     * @internal
+     */
+    createComponentHeaderLabelRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                column: ctx.column,
+                value: ctx.value,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a group header renderer function from an Angular component class.
+     *
+     * The component should accept group header inputs (id, label, columns, firstIndex, isImplicit).
+     * Returns the host element directly (groupHeaderRenderer returns an element, not void).
+     * @internal
+     */
+    createComponentGroupHeaderRenderer(componentClass) {
+        return (params) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                id: params.id,
+                label: params.label,
+                columns: params.columns,
+                firstIndex: params.firstIndex,
+                isImplicit: params.isImplicit,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Processes a GroupingColumnsConfig, converting component class references
+     * to actual renderer functions.
+     *
+     * @param config - Angular grouping columns configuration with possible component class references
+     * @returns Processed GroupingColumnsConfig with actual renderer functions
+     */
+    processGroupingColumnsConfig(config) {
+        if (config.groupHeaderRenderer && isComponentClass(config.groupHeaderRenderer)) {
+            return {
+                ...config,
+                groupHeaderRenderer: this.createComponentGroupHeaderRenderer(config.groupHeaderRenderer),
+            };
+        }
+        return config;
+    }
+    /**
+     * Processes a GroupingRowsConfig, converting component class references
+     * to actual renderer functions.
+     *
+     * @param config - Angular grouping rows configuration with possible component class references
+     * @returns Processed GroupingRowsConfig with actual renderer functions
+     */
+    processGroupingRowsConfig(config) {
+        if (config.groupRowRenderer && isComponentClass(config.groupRowRenderer)) {
+            return {
+                ...config,
+                groupRowRenderer: this.createComponentGroupRowRenderer(config.groupRowRenderer),
+            };
+        }
+        return config;
+    }
+    /**
+     * Processes a PinnedRowsConfig, converting component class references
+     * in `customPanels[].render` to actual renderer functions.
+     *
+     * @param config - Angular pinned rows configuration with possible component class references
+     * @returns Processed PinnedRowsConfig with actual renderer functions
+     */
+    processPinnedRowsConfig(config) {
+        if (!Array.isArray(config.customPanels))
+            return config;
+        const hasComponentRender = config.customPanels.some((panel) => isComponentClass(panel.render));
+        if (!hasComponentRender)
+            return config;
+        return {
+            ...config,
+            customPanels: config.customPanels.map((panel) => {
+                if (!isComponentClass(panel.render))
+                    return panel;
+                return {
+                    ...panel,
+                    render: this.createComponentPinnedRowsPanelRenderer(panel.render),
+                };
+            }),
+        };
+    }
+    /**
+     * Creates a pinned rows panel renderer function from an Angular component class.
+     *
+     * The component should accept inputs from PinnedRowsContext (totalRows, filteredRows,
+     * selectedRows, columns, rows, grid).
+     * @internal
+     */
+    createComponentPinnedRowsPanelRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                totalRows: ctx.totalRows,
+                filteredRows: ctx.filteredRows,
+                selectedRows: ctx.selectedRows,
+                columns: ctx.columns,
+                rows: ctx.rows,
+                grid: ctx.grid,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a loading renderer function from an Angular component class.
+     *
+     * The component should accept a `size` input ('large' | 'small').
+     * @internal
+     */
+    createComponentLoadingRenderer(componentClass) {
+        return (ctx) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                size: ctx.size,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
+    /**
+     * Creates a group row renderer function from an Angular component class.
+     *
+     * The component should accept group row inputs (key, value, depth, rows, expanded, toggleExpand).
+     * Returns the host element directly (groupRowRenderer returns an element, not void).
+     * @internal
+     */
+    createComponentGroupRowRenderer(componentClass) {
+        return (params) => {
+            const hostElement = document.createElement('span');
+            hostElement.style.display = 'contents';
+            const componentRef = createComponent(componentClass, {
+                environmentInjector: this.injector,
+                hostElement,
+            });
+            this.setComponentInputs(componentRef, {
+                key: params.key,
+                value: params.value,
+                depth: params.depth,
+                rows: params.rows,
+                expanded: params.expanded,
+                toggleExpand: params.toggleExpand,
+            });
+            this.appRef.attachView(componentRef.hostView);
+            this.componentRefs.push(componentRef);
+            componentRef.changeDetectorRef.detectChanges();
+            return hostElement;
+        };
+    }
     /**
      * Creates a filter panel renderer function from an Angular component class.
      *
@@ -2552,9 +2782,9 @@ function injectGrid() {
 /**
  * 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.
+ * Delegates to the core registry at `@toolbox-web/grid/features/registry`.
+ * This module re-exports core functions so existing feature modules continue
+ * to work without changing their import paths.
  *
  * @example
  * ```typescript
@@ -2566,96 +2796,7 @@ function injectGrid() {
  * <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();
-}
+// Re-export core registry — all adapters share the same registry Map
 
 /**
  * Base class for Angular filter panel components.
@@ -2667,7 +2808,7 @@ function clearFeatureRegistry() {
  * ## Usage
  *
  * ```typescript
- * import { Component } from '@angular/core';
+ * import { Component, viewChild, ElementRef } from '@angular/core';
  * import { BaseFilterPanel } from '@toolbox-web/grid-angular';
  *
  * @Component({
@@ -2679,10 +2820,10 @@ function clearFeatureRegistry() {
  *   `
  * })
  * export class TextFilterComponent extends BaseFilterPanel {
- *   @ViewChild('input') input!: ElementRef<HTMLInputElement>;
+ *   input = viewChild.required<ElementRef<HTMLInputElement>>('input');
  *
  *   applyFilter(): void {
- *     this.params().applyTextFilter('contains', this.input.nativeElement.value);
+ *     this.params().applyTextFilter('contains', this.input().nativeElement.value);
  *   }
  * }
  * ```
@@ -3275,7 +3416,7 @@ let anchorCounter = 0;
  * ## Usage
  *
  * ```typescript
- * import { Component, ViewChild, ElementRef } from '@angular/core';
+ * import { Component, viewChild, ElementRef, effect } from '@angular/core';
  * import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
  *
  * @Component({
@@ -3298,18 +3439,22 @@ let anchorCounter = 0;
  *   `
  * })
  * export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> {
- *   @ViewChild('panel') panelRef!: ElementRef<HTMLElement>;
- *   @ViewChild('inlineInput') inputRef!: ElementRef<HTMLInputElement>;
+ *   panelRef = viewChild.required<ElementRef<HTMLElement>>('panel');
+ *   inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inlineInput');
  *
  *   protected override overlayPosition = 'below' as const;
  *
- *   ngAfterViewInit(): void {
- *     this.initOverlay(this.panelRef.nativeElement);
- *     if (this.isCellFocused()) this.showOverlay();
+ *   constructor() {
+ *     super();
+ *     effect(() => {
+ *       const panel = this.panelRef().nativeElement;
+ *       this.initOverlay(panel);
+ *       if (this.isCellFocused()) this.showOverlay();
+ *     });
  *   }
  *
  *   protected getInlineInput(): HTMLInputElement | null {
- *     return this.inputRef?.nativeElement ?? null;
+ *     return this.inputRef()?.nativeElement ?? null;
  *   }
  *
  *   protected onOverlayOutsideClick(): void {
@@ -3370,7 +3515,7 @@ class BaseOverlayEditor extends BaseGridEditor {
     /**
      * Initialise the overlay with the panel element.
      *
-     * Call this in `ngAfterViewInit` with your `@ViewChild` panel reference.
+     * Call this in an `effect()` or `afterNextRender()` with your `viewChild` panel reference.
      * The panel is moved to `<body>` and hidden until {@link showOverlay} is called.
      *
      * @param panel - The overlay panel DOM element
@@ -4796,14 +4941,18 @@ class Grid {
      *
      * **Requires feature import:**
      * ```typescript
-     * import '@toolbox-web/grid-angular/features/reorder';
+     * import '@toolbox-web/grid-angular/features/reorder-columns';
      * ```
      *
      * @example
      * ```html
-     * <tbw-grid [reorder]="true" />
+     * <tbw-grid [reorderColumns]="true" />
      * ```
      */
+    reorderColumns = input(...(ngDevMode ? [undefined, { debugName: "reorderColumns" }] : []));
+    /**
+     * @deprecated Use `reorderColumns` instead. Will be removed in v2.0.
+     */
     reorder = input(...(ngDevMode ? [undefined, { debugName: "reorder" }] : []));
     /**
      * Enable column visibility toggle panel.
@@ -4848,7 +4997,7 @@ class Grid {
      *
      * @example
      * ```html
-     * <tbw-grid [groupingColumns]="{ columnGroups: [...] }" />
+     * <tbw-grid [groupingColumns]="true" />
      * ```
      */
     groupingColumns = input(...(ngDevMode ? [undefined, { debugName: "groupingColumns" }] : []));
@@ -4871,14 +5020,18 @@ class Grid {
      *
      * **Requires feature import:**
      * ```typescript
-     * import '@toolbox-web/grid-angular/features/row-reorder';
+     * import '@toolbox-web/grid-angular/features/reorder-rows';
      * ```
      *
      * @example
      * ```html
-     * <tbw-grid [rowReorder]="true" />
+     * <tbw-grid [reorderRows]="true" />
      * ```
      */
+    reorderRows = input(...(ngDevMode ? [undefined, { debugName: "reorderRows" }] : []));
+    /**
+     * @deprecated Use `reorderRows` instead. Will be removed in v2.0.
+     */
     rowReorder = input(...(ngDevMode ? [undefined, { debugName: "rowReorder" }] : []));
     /**
      * Enable row grouping by field values.
@@ -5387,14 +5540,35 @@ class Grid {
         // 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('reorderColumns', this.reorderColumns() ?? this.reorder());
         addPlugin('visibility', this.visibility());
         addPlugin('pinnedColumns', this.pinnedColumns());
-        addPlugin('groupingColumns', this.groupingColumns());
+        // Pre-process groupingColumns config to bridge Angular component classes
+        const gcConfig = this.groupingColumns();
+        if (gcConfig && typeof gcConfig === 'object' && this.adapter) {
+            addPlugin('groupingColumns', this.adapter.processGroupingColumnsConfig(gcConfig));
+        }
+        else {
+            addPlugin('groupingColumns', gcConfig);
+        }
         addPlugin('columnVirtualization', this.columnVirtualization());
-        addPlugin('rowReorder', this.rowReorder());
-        addPlugin('groupingRows', this.groupingRows());
-        addPlugin('pinnedRows', this.pinnedRows());
+        addPlugin('reorderRows', this.reorderRows() ?? this.rowReorder());
+        // Pre-process groupingRows config to bridge Angular component classes
+        const grConfig = this.groupingRows();
+        if (grConfig && typeof grConfig === 'object' && this.adapter) {
+            addPlugin('groupingRows', this.adapter.processGroupingRowsConfig(grConfig));
+        }
+        else {
+            addPlugin('groupingRows', grConfig);
+        }
+        // Pre-process pinnedRows config to bridge Angular component classes in customPanels
+        const prConfig = this.pinnedRows();
+        if (prConfig && typeof prConfig === 'object' && this.adapter) {
+            addPlugin('pinnedRows', this.adapter.processPinnedRowsConfig(prConfig));
+        }
+        else {
+            addPlugin('pinnedRows', prConfig);
+        }
         addPlugin('tree', this.tree());
         addPlugin('masterDetail', this.masterDetail());
         addPlugin('responsive', this.responsive());
@@ -5543,12 +5717,12 @@ class Grid {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorder: { classPropertyName: "reorder", publicName: "reorder", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, rowReorder: { classPropertyName: "rowReorder", publicName: "rowReorder", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", groupToggle: "groupToggle", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", copy: "copy", paste: "paste", undoRedoAction: "undoRedoAction", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, angularConfig: { classPropertyName: "angularConfig", publicName: "angularConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], angularConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "angularConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorder", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], rowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorder", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], rowCommit: [{ type: i0.Output, args: ["rowCommit"] }], changedRowsReset: [{ type: i0.Output, args: ["changedRowsReset"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnVisibility: [{ type: i0.Output, args: ["columnVisibility"] }], columnStateChange: [{ type: i0.Output, args: ["columnStateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undoRedoAction: [{ type: i0.Output, args: ["undoRedoAction"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }] } });
+        }], 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 }] }], 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
@@ -5562,5 +5736,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * 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, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getLazyFormContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridIcons, provideGridTypeDefaults, registerFeature };
+export { AngularGridAdapter, BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, getFormArrayContext, getLazyFormContext, injectGrid, isComponentClass, provideGridIcons, provideGridTypeDefaults };
 //# sourceMappingURL=toolbox-web-grid-angular.mjs.map