@toolbox-web/grid-angular 0.7.2 → 0.9.0

package/README.md

@@ -14,6 +14,7 @@ Angular adapter for `@toolbox-web/grid` data grid component. Provides directives
 - ✅ **Template-driven editors** - Use `<ng-template>` for custom cell editors
 - ✅ **Component-class column config** - Specify component classes directly in `gridConfig.columns`
 - ✅ **Type-level defaults** - App-wide renderers/editors via `provideGridTypeDefaults()`
+- ✅ **Icon configuration** - App-wide icon overrides via `provideGridIcons()`
 - ✅ **Reactive Forms integration** - Use `formControlName` and `formControl` bindings
 - ✅ **Auto-wiring** - Editor components just emit events, no manual binding needed
 - ✅ **Full type safety** - Typed template contexts (`GridCellContext`, `GridEditorContext`)
@@ -359,6 +360,68 @@ export class MyGridComponent {
 | `GridTypeRegistry`   | Injectable service for dynamic registration |
 | `GRID_TYPE_DEFAULTS` | Injection token for type defaults           |
 
+## App-Wide Icon Configuration
+
+Customize grid icons at the application level using `provideGridIcons()`:
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideGridIcons } from '@toolbox-web/grid-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideGridIcons({
+      expand: '➕',
+      collapse: '➖',
+      sortAsc: '↑',
+      sortDesc: '↓',
+      filter: '<svg viewBox="0 0 16 16">...</svg>',
+    }),
+  ],
+};
+```
+
+**Dynamic Icon Registration:**
+
+```typescript
+import { Component, inject, OnInit } from '@angular/core';
+import { GridIconRegistry } from '@toolbox-web/grid-angular';
+
+@Component({ ... })
+export class AppComponent implements OnInit {
+  private iconRegistry = inject(GridIconRegistry);
+
+  ngOnInit() {
+    // Dynamically set icons
+    this.iconRegistry.set('expand', '▶');
+    this.iconRegistry.set('collapse', '▼');
+  }
+}
+```
+
+**Available Icons:**
+
+| Icon           | Default | Description                          |
+| -------------- | ------- | ------------------------------------ |
+| `expand`       | `▶`     | Expand icon for trees/groups/details |
+| `collapse`     | `▼`     | Collapse icon                        |
+| `sortAsc`      | `▲`     | Sort ascending indicator             |
+| `sortDesc`     | `▼`     | Sort descending indicator            |
+| `sortNone`     | `⇅`     | Unsorted indicator                   |
+| `filter`       | SVG     | Filter icon in headers               |
+| `filterActive` | SVG     | Filter icon when active              |
+| `submenuArrow` | `▶`     | Context menu submenu arrow           |
+| `dragHandle`   | `⋮⋮`    | Drag handle for reordering           |
+| `toolPanel`    | `☰`    | Tool panel toggle icon               |
+| `print`        | `🖨️`    | Print button icon                    |
+
+**Precedence (highest wins):**
+
+1. `gridConfig.icons` - Per-grid overrides
+2. `provideGridIcons()` - App-level defaults
+3. Built-in defaults
+
 ## Component-Class Column Config
 
 For maximum flexibility and type safety, you can specify Angular component classes directly in your `gridConfig.columns`. This approach gives you full control over the component lifecycle while keeping your grid configuration clean and concise.
@@ -782,6 +845,14 @@ if (context?.hasFormGroups) {
 | `GridTypeRegistry`          | Injectable service for dynamic registration  |
 | `GRID_TYPE_DEFAULTS`        | Injection token for type defaults            |
 
+### Icon Registry
+
+| Export               | Description                                      |
+| -------------------- | ------------------------------------------------ |
+| `provideGridIcons()` | Provider factory for app-level icon overrides    |
+| `GridIconRegistry`   | Injectable service for dynamic icon registration |
+| `GRID_ICONS`         | Injection token for icon overrides               |
+
 ### Grid Directive Inputs
 
 | Input           | Type                      | Description                                            |

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

@@ -341,11 +341,23 @@ function getFormArrayContext(gridElement) {
 class GridFormArray {
     elementRef = inject((ElementRef));
     cellCommitListener = null;
+    rowCommitListener = null;
     touchListener = null;
     /**
      * The FormArray to bind to the grid.
      */
     formArray = input.required(...(ngDevMode ? [{ debugName: "formArray" }] : []));
+    /**
+     * Whether to automatically sync Angular validation state to grid's visual invalid styling.
+     *
+     * When enabled:
+     * - After a cell commit, if the FormControl is invalid, the cell is marked with `setInvalid()`
+     * - When a FormControl becomes valid, `clearInvalid()` is called
+     * - On `row-commit`, if the row's FormGroup has invalid controls, the commit is prevented
+     *
+     * @default true
+     */
+    syncValidation = input(true, ...(ngDevMode ? [{ debugName: "syncValidation" }] : []));
     /**
      * Effect that syncs the FormArray value to the grid rows.
      */
@@ -369,6 +381,14 @@ class GridFormArray {
             this.#handleCellCommit(detail);
         };
         grid.addEventListener('cell-commit', this.cellCommitListener);
+        // Intercept row-commit events to prevent if FormGroup is invalid
+        this.rowCommitListener = (e) => {
+            if (!this.syncValidation())
+                return;
+            const detail = e.detail;
+            this.#handleRowCommit(e, detail);
+        };
+        grid.addEventListener('row-commit', this.rowCommitListener);
         // Mark FormArray as touched on first interaction
         this.touchListener = () => {
             this.formArray().markAsTouched();
@@ -387,6 +407,9 @@ class GridFormArray {
         if (this.cellCommitListener) {
             grid.removeEventListener('cell-commit', this.cellCommitListener);
         }
+        if (this.rowCommitListener) {
+            grid.removeEventListener('row-commit', this.rowCommitListener);
+        }
         if (this.touchListener) {
             grid.removeEventListener('click', this.touchListener);
         }
@@ -491,7 +514,7 @@ class GridFormArray {
      * Handles cell-commit events by updating the FormControl in the FormGroup.
      */
     #handleCellCommit(detail) {
-        const { rowIndex, field, value } = detail;
+        const { rowIndex, field, value, rowId } = detail;
         const rowFormGroup = this.#getRowFormGroup(rowIndex);
         if (rowFormGroup) {
             const control = rowFormGroup.get(field);
@@ -499,18 +522,83 @@ class GridFormArray {
                 control.setValue(value);
                 control.markAsDirty();
                 control.markAsTouched();
+                // Sync Angular validation state to grid's visual invalid styling
+                if (this.syncValidation() && rowId) {
+                    this.#syncControlValidationToGrid(rowId, field, control);
+                }
             }
         }
     }
+    /**
+     * Handles row-commit events - prevents commit if FormGroup has invalid controls.
+     */
+    #handleRowCommit(event, detail) {
+        const { rowIndex } = detail;
+        const rowFormGroup = this.#getRowFormGroup(rowIndex);
+        if (rowFormGroup && rowFormGroup.invalid) {
+            // Prevent row commit if the FormGroup is invalid
+            event.preventDefault();
+        }
+    }
+    /**
+     * Syncs a FormControl's validation state to the grid's visual invalid styling.
+     */
+    #syncControlValidationToGrid(rowId, field, control) {
+        const grid = this.elementRef.nativeElement;
+        if (!grid)
+            return;
+        // Get EditingPlugin via getPluginByName
+        const editingPlugin = grid.getPluginByName?.('editing');
+        if (!editingPlugin)
+            return;
+        if (control.invalid) {
+            // Get first error message to display
+            const errorMessage = this.#getFirstErrorMessage(control);
+            editingPlugin.setInvalid(rowId, field, errorMessage);
+        }
+        else {
+            editingPlugin.clearInvalid(rowId, field);
+        }
+    }
+    /**
+     * Gets a human-readable error message from the first validation error.
+     */
+    #getFirstErrorMessage(control) {
+        const errors = control.errors;
+        if (!errors)
+            return '';
+        const firstKey = Object.keys(errors)[0];
+        const error = errors[firstKey];
+        // Common Angular validators
+        switch (firstKey) {
+            case 'required':
+                return 'This field is required';
+            case 'minlength':
+                return `Minimum length is ${error.requiredLength}`;
+            case 'maxlength':
+                return `Maximum length is ${error.requiredLength}`;
+            case 'min':
+                return `Minimum value is ${error.min}`;
+            case 'max':
+                return `Maximum value is ${error.max}`;
+            case 'email':
+                return 'Invalid email address';
+            case 'pattern':
+                return 'Invalid format';
+            default:
+                // Custom validators may provide a message property
+                return typeof error === 'string' ? error : (error?.message ?? `Validation error: ${firstKey}`);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridFormArray, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: GridFormArray, isStandalone: true, selector: "tbw-grid[formArray]", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: GridFormArray, isStandalone: true, selector: "tbw-grid[formArray]", inputs: { formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, syncValidation: { classPropertyName: "syncValidation", publicName: "syncValidation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridFormArray, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tbw-grid[formArray]',
                 }]
-        }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }] } });
+        }], propDecorators: { formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], syncValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncValidation", required: false }] }] } });
 
 /**
  * Registry to store responsive card templates by grid element.
@@ -1612,6 +1700,149 @@ class AngularGridAdapter {
     }
 }
 
+/**
+ * Icon configuration registry for Angular applications.
+ *
+ * Provides application-wide icon overrides for all grids via
+ * Angular's dependency injection.
+ */
+/**
+ * Injection token for providing icon overrides at app level.
+ */
+const GRID_ICONS = new InjectionToken('GRID_ICONS');
+/**
+ * Injectable service for managing grid icons.
+ *
+ * Use `provideGridIcons()` in your app config to set up icons,
+ * or inject this service for dynamic registration.
+ *
+ * @example
+ * ```typescript
+ * // App-level setup (app.config.ts)
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideGridIcons({
+ *       expand: '➕',
+ *       collapse: '➖',
+ *       sortAsc: '↑',
+ *       sortDesc: '↓',
+ *     })
+ *   ]
+ * };
+ *
+ * // Dynamic registration
+ * @Component({ ... })
+ * export class AppComponent {
+ *   private registry = inject(GridIconRegistry);
+ *
+ *   ngOnInit() {
+ *     this.registry.set('filter', '<svg>...</svg>');
+ *   }
+ * }
+ * ```
+ */
+class GridIconRegistry {
+    icons = new Map();
+    constructor() {
+        // Merge any initial icons from provider
+        const initial = inject(GRID_ICONS, { optional: true });
+        if (initial) {
+            for (const [key, value] of Object.entries(initial)) {
+                this.icons.set(key, value);
+            }
+        }
+    }
+    /**
+     * Set an icon override.
+     *
+     * @param name - The icon name (e.g., 'expand', 'collapse', 'filter')
+     * @param value - The icon value (string text or SVG markup)
+     */
+    set(name, value) {
+        this.icons.set(name, value);
+    }
+    /**
+     * Get an icon value.
+     */
+    get(name) {
+        return this.icons.get(name);
+    }
+    /**
+     * Remove an icon override.
+     */
+    remove(name) {
+        this.icons.delete(name);
+    }
+    /**
+     * Check if an icon has an override.
+     */
+    has(name) {
+        return this.icons.has(name);
+    }
+    /**
+     * Get all icon overrides as a GridIcons partial.
+     * Used internally by the adapter.
+     *
+     * @internal
+     */
+    getAll() {
+        const result = {};
+        for (const [key, value] of this.icons) {
+            result[key] = value;
+        }
+        return result;
+    }
+    /**
+     * Get all registered icon names.
+     */
+    getRegisteredIcons() {
+        return Array.from(this.icons.keys());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridIconRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: GridIconRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Provides application-level icon overrides for all grids.
+ *
+ * Available icons to override:
+ * - `expand` - Expand icon for collapsed items (trees, groups, details)
+ * - `collapse` - Collapse icon for expanded items
+ * - `sortAsc` - Sort ascending indicator
+ * - `sortDesc` - Sort descending indicator
+ * - `sortNone` - Sort neutral/unsorted indicator
+ * - `submenuArrow` - Submenu arrow for context menus
+ * - `dragHandle` - Drag handle icon for reordering
+ * - `toolPanel` - Tool panel toggle icon in toolbar
+ * - `filter` - Filter icon in column headers
+ * - `filterActive` - Filter icon when filter is active
+ * - `print` - Print icon for print button
+ *
+ * @example
+ * ```typescript
+ * // app.config.ts
+ * import { provideGridIcons } from '@toolbox-web/grid-angular';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideGridIcons({
+ *       expand: '➕',
+ *       collapse: '➖',
+ *       sortAsc: '↑',
+ *       sortDesc: '↓',
+ *       filter: '<svg viewBox="0 0 16 16">...</svg>',
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+function provideGridIcons(icons) {
+    return makeEnvironmentProviders([{ provide: GRID_ICONS, useValue: icons }]);
+}
+
 /**
  * Angular inject function for programmatic access to a grid instance.
  *
@@ -2186,6 +2417,7 @@ class Grid {
     injector = inject(EnvironmentInjector);
     appRef = inject(ApplicationRef);
     viewContainerRef = inject(ViewContainerRef);
+    iconRegistry = inject(GridIconRegistry, { optional: true });
     adapter = null;
     constructor() {
         // Effect to process angularConfig and apply to grid
@@ -2215,6 +2447,13 @@ class Grid {
             if (selectableValue !== undefined) {
                 coreConfigOverrides['selectable'] = selectableValue;
             }
+            // Merge icon overrides from registry with any existing icons in config
+            // Registry icons are base, config.icons override them
+            const registryIcons = this.iconRegistry?.getAll();
+            if (registryIcons && Object.keys(registryIcons).length > 0) {
+                const existingIcons = processedConfig?.icons || config?.icons || {};
+                coreConfigOverrides['icons'] = { ...registryIcons, ...existingIcons };
+            }
             // Apply to the grid element
             const grid = this.elementRef.nativeElement;
             grid.gridConfig = {
@@ -2223,6 +2462,14 @@ class Grid {
                 plugins: mergedPlugins.length > 0 ? mergedPlugins : undefined,
             };
         });
+        // Effect to sync loading state to the grid element
+        effect(() => {
+            const loadingValue = this.loading();
+            if (loadingValue === undefined)
+                return;
+            const grid = this.elementRef.nativeElement;
+            grid.loading = loadingValue;
+        });
     }
     /**
      * Custom CSS styles to inject into the grid.
@@ -2303,6 +2550,34 @@ class Grid {
      * ```
      */
     selectable = input(...(ngDevMode ? [undefined, { debugName: "selectable" }] : []));
+    /**
+     * Show a loading overlay on the grid.
+     * Use this during initial data fetch or refresh operations.
+     *
+     * For row/cell loading states, access the grid element directly:
+     * - `grid.setRowLoading(rowId, true/false)`
+     * - `grid.setCellLoading(rowId, field, true/false)`
+     *
+     * @default false
+     *
+     * @example
+     * ```html
+     * <!-- Show loading during data fetch -->
+     * <tbw-grid [loading]="isLoading" [rows]="rows" />
+     * ```
+     *
+     * ```typescript
+     * isLoading = true;
+     *
+     * ngOnInit() {
+     *   this.dataService.fetchData().subscribe(data => {
+     *     this.rows = data;
+     *     this.isLoading = false;
+     *   });
+     * }
+     * ```
+     */
+    loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : []));
     /**
      * Angular-specific grid configuration that supports component classes for renderers/editors.
      *
@@ -3167,12 +3442,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 }, 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 }, 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 }] }], 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 }] }], 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
@@ -3185,5 +3460,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularGridAdapter, BaseGridEditor, GRID_TYPE_DEFAULTS, Grid, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridTypeDefaults, registerFeature };
+export { AngularGridAdapter, BaseGridEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor as TbwCellEditor, TbwRenderer as TbwCellView, TbwEditor, TbwRenderer, clearFeatureRegistry, createPluginFromFeature, getFeatureFactory, getFormArrayContext, getRegisteredFeatures, injectGrid, isComponentClass, isFeatureRegistered, provideGridIcons, provideGridTypeDefaults, registerFeature };
 //# sourceMappingURL=toolbox-web-grid-angular.mjs.map