@toolbox-web/grid-angular 0.9.0 → 0.10.0

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

@@ -1,6 +1,8 @@
 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 { inject, ElementRef, contentChild, TemplateRef, effect, Directive, input, DestroyRef, InjectionToken, Injectable, makeEnvironmentProviders, EventEmitter, 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 } from 'rxjs/operators';
 import { DataGridElement } from '@toolbox-web/grid';
 
 /**
@@ -339,10 +341,12 @@ function getFormArrayContext(gridElement) {
  * - Automatically syncs FormArray changes to the grid
  */
 class GridFormArray {
+    destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
     cellCommitListener = null;
     rowCommitListener = null;
     touchListener = null;
+    valueChangesSubscription = null;
     /**
      * The FormArray to bind to the grid.
      */
@@ -359,15 +363,24 @@ class GridFormArray {
      */
     syncValidation = input(true, ...(ngDevMode ? [{ debugName: "syncValidation" }] : []));
     /**
-     * Effect that syncs the FormArray value to the grid rows.
+     * Effect that sets up valueChanges subscription when FormArray changes.
+     * This handles both initial binding and when the FormArray reference changes.
      */
     syncFormArrayToGrid = effect(() => {
         const formArray = this.formArray();
         const grid = this.elementRef.nativeElement;
-        if (grid && formArray) {
-            // Get the raw value (including disabled controls)
+        if (!grid || !formArray)
+            return;
+        // Unsubscribe from previous FormArray if any
+        this.valueChangesSubscription?.unsubscribe();
+        // Subscribe to valueChanges to sync grid rows when FormArray content changes.
+        // Use startWith to immediately sync the current value.
+        // Note: We use getRawValue() to include disabled controls.
+        this.valueChangesSubscription = formArray.valueChanges
+            .pipe(startWith(formArray.getRawValue()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             grid.rows = formArray.getRawValue();
-        }
+        });
     }, ...(ngDevMode ? [{ debugName: "syncFormArrayToGrid" }] : []));
     ngOnInit() {
         const grid = this.elementRef.nativeElement;
@@ -413,6 +426,9 @@ class GridFormArray {
         if (this.touchListener) {
             grid.removeEventListener('click', this.touchListener);
         }
+        if (this.valueChangesSubscription) {
+            this.valueChangesSubscription.unsubscribe();
+        }
         this.#clearFormContext(grid);
     }
     /**
@@ -1268,14 +1284,39 @@ class AngularGridAdapter {
      * @returns Processed GridConfig with actual renderer/editor functions
      */
     processGridConfig(config) {
-        if (!config.columns) {
-            return config;
+        const result = { ...config };
+        // Process columns
+        if (config.columns) {
+            result.columns = config.columns.map((col) => this.processColumn(col));
         }
-        const processedColumns = config.columns.map((col) => this.processColumn(col));
-        return {
-            ...config,
-            columns: processedColumns,
-        };
+        // Process typeDefaults - convert Angular component classes to renderer/editor functions
+        if (config.typeDefaults) {
+            result.typeDefaults = this.processTypeDefaults(config.typeDefaults);
+        }
+        return result;
+    }
+    /**
+     * Processes typeDefaults configuration, converting component class references
+     * to actual renderer/editor functions.
+     *
+     * @param typeDefaults - Angular type defaults with possible component class references
+     * @returns Processed TypeDefault record
+     */
+    processTypeDefaults(typeDefaults) {
+        const processed = {};
+        for (const [type, config] of Object.entries(typeDefaults)) {
+            const processedConfig = { ...config };
+            // Convert renderer component class to function
+            if (config.renderer && isComponentClass(config.renderer)) {
+                processedConfig.renderer = this.createComponentRenderer(config.renderer);
+            }
+            // Convert editor component class to function
+            if (config.editor && isComponentClass(config.editor)) {
+                processedConfig.editor = this.createComponentEditor(config.editor);
+            }
+            processed[type] = processedConfig;
+        }
+        return processed;
     }
     /**
      * Processes a single column configuration, converting component class references
@@ -1318,6 +1359,11 @@ class AngularGridAdapter {
             return undefined;
         }
         return (ctx) => {
+            // Skip rendering if the cell is in editing mode
+            // This prevents the renderer from overwriting the editor when the grid re-renders
+            if (ctx.cellEl?.classList.contains('editing')) {
+                return null;
+            }
             // Create the context for the template
             const context = {
                 $implicit: ctx.value,
@@ -1358,10 +1404,10 @@ class AngularGridAdapter {
         // 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');
+            // No template registered - return undefined to let the grid use its default editor.
+            // This allows columns with only *tbwRenderer (no *tbwEditor) to still be editable
+            // using the built-in text/number/boolean editors.
+            return undefined;
         }
         return (ctx) => {
             // Create simple callback functions (preferred)
@@ -1591,31 +1637,58 @@ class AngularGridAdapter {
         }
         return typeDefault;
     }
+    /**
+     * Creates and mounts an Angular component dynamically.
+     * Shared logic between renderer and editor component creation.
+     * @internal
+     */
+    mountComponent(componentClass, inputs) {
+        // 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, inputs);
+        // Attach to app for change detection
+        this.appRef.attachView(componentRef.hostView);
+        this.componentRefs.push(componentRef);
+        // Trigger change detection
+        componentRef.changeDetectorRef.detectChanges();
+        return { hostElement, componentRef };
+    }
+    /**
+     * Wires up commit/cancel handlers for an editor component.
+     * Supports both Angular outputs and DOM CustomEvents.
+     * @internal
+     */
+    wireEditorCallbacks(hostElement, componentRef, commit, cancel) {
+        // 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', commit);
+        this.subscribeToOutput(instance, 'cancel', cancel);
+        // Also listen for DOM events as fallback (for components that dispatch CustomEvents)
+        hostElement.addEventListener('commit', (e) => {
+            const customEvent = e;
+            commit(customEvent.detail);
+        });
+        hostElement.addEventListener('cancel', () => cancel());
+    }
     /**
      * 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, {
+            const { hostElement } = this.mountComponent(componentClass, {
                 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;
         };
     }
@@ -1625,38 +1698,12 @@ class AngularGridAdapter {
      */
     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, {
+            const { hostElement, componentRef } = this.mountComponent(componentClass, {
                 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();
-            });
+            this.wireEditorCallbacks(hostElement, componentRef, (value) => ctx.commit(value), () => ctx.cancel());
             return hostElement;
         };
     }
@@ -2423,16 +2470,12 @@ class Grid {
         // Effect to process angularConfig and apply to grid
         // This merges feature input plugins with the user's config plugins
         effect(() => {
-            const config = this.angularConfig();
+            const angularCfg = this.angularConfig();
+            const userGridConfig = this.gridConfig();
             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
+            // Create plugins from feature inputs
             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();
@@ -2447,19 +2490,39 @@ class Grid {
             if (selectableValue !== undefined) {
                 coreConfigOverrides['selectable'] = selectableValue;
             }
-            // Merge icon overrides from registry with any existing icons in config
+            const grid = this.elementRef.nativeElement;
+            // Merge icon overrides from registry with any existing icons
             // 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 || {};
+                const existingIcons = angularCfg?.icons || userGridConfig?.icons || {};
                 coreConfigOverrides['icons'] = { ...registryIcons, ...existingIcons };
             }
-            // Apply to the grid element
-            const grid = this.elementRef.nativeElement;
+            // If angularConfig is provided, process it (converts component classes to renderer functions)
+            const processedConfig = angularCfg ? this.adapter.processGridConfig(angularCfg) : null;
+            // IMPORTANT: If user is NOT using angularConfig input, and there are no feature plugins
+            // or config overrides to merge, do NOT overwrite grid.gridConfig.
+            // This allows [gridConfig]="myConfig" binding to work correctly without the directive
+            // creating a new object that strips properties like typeDefaults.
+            const hasFeaturePlugins = featurePlugins.length > 0;
+            const hasConfigOverrides = Object.keys(coreConfigOverrides).length > 0;
+            // Use the gridConfig input signal (preferred) or fallback to what's on the grid element
+            // The input signal gives us reactive tracking of the user's config
+            const existingConfig = userGridConfig || {};
+            if (!processedConfig && !hasFeaturePlugins && !hasConfigOverrides && !userGridConfig) {
+                // Nothing to merge and no config input - let the user's DOM binding work directly
+                return;
+            }
+            // Merge: existing config (from [gridConfig] input) < processed angularConfig < feature plugins
+            const configPlugins = processedConfig?.plugins || existingConfig.plugins || [];
+            const mergedPlugins = [...featurePlugins, ...configPlugins];
+            // Build the final config, preserving ALL existing properties (including typeDefaults)
+            const baseConfig = processedConfig || existingConfig;
             grid.gridConfig = {
-                ...processedConfig,
+                ...existingConfig, // Start with existing config to preserve all properties (including typeDefaults)
+                ...baseConfig, // Then apply processed/angular config
                 ...coreConfigOverrides,
-                plugins: mergedPlugins.length > 0 ? mergedPlugins : undefined,
+                plugins: mergedPlugins.length > 0 ? mergedPlugins : baseConfig.plugins,
             };
         });
         // Effect to sync loading state to the grid element
@@ -2578,6 +2641,33 @@ class Grid {
      * ```
      */
     loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : []));
+    /**
+     * Core grid configuration object.
+     *
+     * Use this input for the base GridConfig (typeDefaults, getRowId, etc.).
+     * This is the same as binding directly to the web component's gridConfig property,
+     * but allows the directive to properly merge feature plugins and config overrides.
+     *
+     * For Angular-specific features (component class renderers/editors), use `angularConfig` instead.
+     *
+     * @example
+     * ```typescript
+     * config: GridConfig = {
+     *   typeDefaults: {
+     *     boolean: { renderer: (ctx) => ctx.value ? '✓' : '✗' }
+     *   }
+     * };
+     * columns = [
+     *   { field: 'active', type: 'boolean' }
+     * ];
+     * ```
+     *
+     * ```html
+     * <tbw-grid [gridConfig]="config" [columns]="columns" />
+     * ```
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gridConfig = input(...(ngDevMode ? [undefined, { debugName: "gridConfig" }] : []));
     /**
      * Angular-specific grid configuration that supports component classes for renderers/editors.
      *
@@ -2654,6 +2744,9 @@ class Grid {
      * <tbw-grid [editing]="'click'" />
      * <tbw-grid [editing]="'dblclick'" />
      * <tbw-grid [editing]="'manual'" />
+     *
+     * <!-- Full config with callbacks -->
+     * <tbw-grid [editing]="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />
      * ```
      */
     editing = input(...(ngDevMode ? [undefined, { debugName: "editing" }] : []));
@@ -3442,12 +3535,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 }, 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 });
+    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 }, 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: "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"] }] } });
+        }], 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 }] }], 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: "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