@toolbox-web/grid-angular 1.5.1 → 1.7.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, DestroyRef, input, InjectionToken, Injectable, makeEnvironmentProviders, createComponent, signal, afterNextRender, computed, output, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
+import { inject, ElementRef, contentChild, TemplateRef, effect, Directive, DestroyRef, input, InjectionToken, Injectable, makeEnvironmentProviders, createComponent, signal, afterNextRender, computed, output, ViewContainerRef, EnvironmentInjector, ApplicationRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
 import { startWith, debounceTime } from 'rxjs/operators';
@@ -1849,7 +1849,7 @@ class GridAdapter {
     createEditor(element) {
         const template = getAnyEditorTemplate(element);
         // Find the parent grid element for FormArray context access
-        const gridElement = element.closest('tbw-grid');
+        const gridElement = element.closest('tbw-grid, [data-tbw-grid]');
         if (!template) {
             // 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
@@ -1940,7 +1940,7 @@ class GridAdapter {
      * to {@link createDetailRenderer} (bridge installed by master-detail feature).
      */
     parseDetailElement(detailElement) {
-        const gridElement = detailElement.closest('tbw-grid');
+        const gridElement = detailElement.closest('tbw-grid, [data-tbw-grid]');
         if (!gridElement)
             return undefined;
         return getDetailRendererBridge()?.(gridElement, this);
@@ -1957,7 +1957,7 @@ class GridAdapter {
      * to {@link createResponsiveCardRenderer} (bridge installed by responsive feature).
      */
     parseResponsiveCardElement(cardElement) {
-        const gridElement = cardElement.closest('tbw-grid');
+        const gridElement = cardElement.closest('tbw-grid, [data-tbw-grid]');
         if (!gridElement)
             return undefined;
         return getResponsiveCardRendererBridge()?.(gridElement, this);
@@ -1972,7 +1972,7 @@ class GridAdapter {
             return undefined;
         }
         // Find the parent grid element for context
-        const gridElement = element.closest('tbw-grid');
+        const gridElement = element.closest('tbw-grid, [data-tbw-grid]');
         return (container) => {
             // Create the context for the template
             const context = {
@@ -2376,7 +2376,7 @@ class GridAdapter {
      */
     runEditorMountHooks(host) {
         queueMicrotask(() => {
-            const gridEl = host.closest('tbw-grid');
+            const gridEl = host.closest('tbw-grid, [data-tbw-grid]');
             if (!gridEl)
                 return;
             this.editorMountTeardowns.set(host, notifyEditorMounted(host, gridEl));
@@ -2666,6 +2666,20 @@ function injectGrid(selector = 'tbw-grid') {
     };
 }
 
+// @internal Types-only barrel: pulls core feature modules onto ng-packagr's type
+// graph so FeatureConfig augmentations merge before emit. See
+// .github/knowledge/adapters-angular.md ("FeatureName derivation"). Use `//` not
+// `/** */` — terser preserves JSDoc in the fesm bundle (~1.5 KiB cost).
+//
+// Each line re-exports the core feature's `_Augmentation` anchor type under a
+// unique local name. This is functionally equivalent to
+// `import type {} from '@toolbox-web/grid/features/<name>'` but survives
+// Prettier / organize-imports, which strip empty-brace imports as unused.
+// The re-exports are type-only (zero runtime cost) and stay internal because
+// `feature-registry.ts` consumes this file with a bare side-effect import
+// (`import './internal/feature-augmentations'`), not a re-export.
+// Append a new line whenever a core feature is added.
+
 /**
  * Feature Registry for @toolbox-web/grid-angular
  *
@@ -2956,7 +2970,7 @@ class BaseGridEditor {
         });
     }
     _initEditCloseListener() {
-        const grid = this.elementRef.nativeElement.closest('tbw-grid');
+        const grid = this.elementRef.nativeElement.closest('tbw-grid, [data-tbw-grid]');
         if (!grid)
             return;
         let unsubBefore;
@@ -3687,7 +3701,7 @@ class BaseOverlayEditor extends BaseGridEditor {
     }
     /** Find the parent `<tbw-grid>` element for this editor. */
     _getGridElement() {
-        return this._elementRef.nativeElement.closest('tbw-grid') ?? null;
+        return this._elementRef.nativeElement.closest('tbw-grid, [data-tbw-grid]') ?? null;
     }
     /**
      * JS fallback positioning for browsers without CSS Anchor Positioning.
@@ -3999,6 +4013,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ selector: 'tbw-grid-detail' }]
         }], propDecorators: { showExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandColumn", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
+let autoIdCounter$1 = 0;
+/**
+ * Declarative wrapper around the grid's imperative
+ * {@link DataGridElement.registerHeaderContent} API.
+ *
+ * Captures an `<ng-template>` and mounts it as an Angular embedded view into
+ * the slot the grid provides for header content. Must be a child of
+ * `<tbw-grid>`.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-header-content id="calendar-nav" [order]="0">
+ *     <ng-template let-grid>
+ *       <app-header-nav [year]="year()" (yearChange)="setYear($event)" />
+ *     </ng-template>
+ *   </tbw-grid-header-content>
+ * </tbw-grid>
+ * ```
+ *
+ * @category Directive
+ * @since 1.7.0
+ */
+class GridHeaderContent {
+    elementRef = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    /** Unique identifier for this header content entry. Optional — defaults to a stable generated id. */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Render order priority. Lower values appear first. @default 100 */
+    order = input(100, ...(ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []));
+    /** The template to mount into the grid's header content slot. */
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    viewRef = null;
+    registeredId = null;
+    resolvedId = `tbw-header-content-${++autoIdCounter$1}`;
+    destroyed = false;
+    constructor() {
+        afterNextRender(() => {
+            void this.register();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.unregister();
+        });
+        // Re-register when id or order changes after mount.
+        effect(() => {
+            const nextId = this.id() ?? this.resolvedId;
+            const nextOrder = this.order();
+            if (this.registeredId && this.registeredId !== nextId) {
+                this.unregister();
+                void this.register();
+                return;
+            }
+            if (this.registeredId && nextOrder !== this.lastOrder) {
+                this.unregister();
+                void this.register();
+            }
+            this.lastOrder = nextOrder;
+        });
+    }
+    lastOrder;
+    async register() {
+        const grid = this.findGrid();
+        if (!grid)
+            return;
+        try {
+            await grid.ready?.();
+        }
+        catch {
+            return;
+        }
+        if (this.destroyed)
+            return;
+        const template = this.template();
+        const id = this.id() ?? this.resolvedId;
+        const order = this.order();
+        const def = {
+            id,
+            order,
+            render: (container) => {
+                if (!template)
+                    return undefined;
+                // Sticky container: the shell may re-invoke `render` with the SAME
+                // container across refreshes. If our embedded view is still attached
+                // inside it, the previous render is live and this is a refresh — do
+                // nothing (no-op cleanup preserves child state).
+                const firstNode = this.viewRef?.rootNodes[0];
+                if (this.viewRef && firstNode && container.contains(firstNode)) {
+                    return () => {
+                        /* intentionally empty */
+                    };
+                }
+                // Fresh container (first render or container was replaced) — destroy
+                // any stale view, then build a new one.
+                if (this.viewRef) {
+                    this.viewRef.destroy();
+                    this.viewRef = null;
+                }
+                this.viewRef = this.viewContainerRef.createEmbeddedView(template, {
+                    $implicit: grid,
+                    grid,
+                });
+                this.viewRef.detectChanges();
+                for (const node of this.viewRef.rootNodes) {
+                    container.appendChild(node);
+                }
+                // No-op cleanup: the grid may call this between re-renders before
+                // invoking `render` again with the SAME container. Tearing the view
+                // down here would destroy any internal state in the projected
+                // template on every shell refresh. Teardown happens in `unregister`
+                // (component destroy / id / order change).
+                return () => {
+                    /* intentionally empty */
+                };
+            },
+        };
+        grid.registerHeaderContent?.(def);
+        this.registeredId = id;
+    }
+    unregister() {
+        const grid = this.findGrid();
+        if (grid && this.registeredId) {
+            grid.unregisterHeaderContent?.(this.registeredId);
+        }
+        this.registeredId = null;
+        if (this.viewRef) {
+            this.viewRef.destroy();
+            this.viewRef = null;
+        }
+    }
+    findGrid() {
+        const host = this.elementRef.nativeElement;
+        const grid = host.closest('tbw-grid');
+        return grid;
+    }
+    /** Type guard for template context inference. */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridHeaderContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: GridHeaderContent, isStandalone: true, selector: "tbw-grid-header-content", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridHeaderContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid-header-content', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
 /**
  * Directive that registers `<tbw-grid-header>` as a known Angular element.
  *
@@ -4672,6 +4835,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }] });
 
+let autoIdCounter = 0;
+/**
+ * Declarative wrapper around the grid's imperative
+ * {@link DataGridElement.registerToolbarContent} API.
+ *
+ * Captures an `<ng-template>` and mounts it as an Angular embedded view into
+ * the slot the grid provides for toolbar content. Must be a child of
+ * `<tbw-grid>`.
+ *
+ * Prefer this over `<tbw-grid-tool-buttons>` (light DOM) when you need
+ * Angular template bindings to component state. Use the light-DOM form for
+ * static markup that should be moved verbatim into the toolbar.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="rows" [gridConfig]="config">
+ *   <tbw-grid-toolbar-content id="calendar-nav" [order]="0">
+ *     <ng-template let-grid>
+ *       <app-toolbar-nav (prev)="prev()" (today)="today()" (next)="next()" />
+ *     </ng-template>
+ *   </tbw-grid-toolbar-content>
+ * </tbw-grid>
+ * ```
+ *
+ * @category Directive
+ * @since 1.7.0
+ */
+class GridToolbarContent {
+    elementRef = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    order = input(100, ...(ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []));
+    template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    viewRef = null;
+    registeredId = null;
+    resolvedId = `tbw-toolbar-content-${++autoIdCounter}`;
+    lastOrder;
+    destroyed = false;
+    constructor() {
+        afterNextRender(() => {
+            void this.register();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.unregister();
+        });
+        effect(() => {
+            const nextId = this.id() ?? this.resolvedId;
+            const nextOrder = this.order();
+            if (this.registeredId && this.registeredId !== nextId) {
+                this.unregister();
+                void this.register();
+                return;
+            }
+            if (this.registeredId && nextOrder !== this.lastOrder) {
+                this.unregister();
+                void this.register();
+            }
+            this.lastOrder = nextOrder;
+        });
+    }
+    async register() {
+        const grid = this.findGrid();
+        if (!grid)
+            return;
+        try {
+            await grid.ready?.();
+        }
+        catch {
+            return;
+        }
+        if (this.destroyed)
+            return;
+        const template = this.template();
+        const id = this.id() ?? this.resolvedId;
+        const order = this.order();
+        const def = {
+            id,
+            order,
+            render: (container) => {
+                if (!template)
+                    return undefined;
+                // Sticky container: see grid-header-content.directive.ts for rationale.
+                const firstNode = this.viewRef?.rootNodes[0];
+                if (this.viewRef && firstNode && container.contains(firstNode)) {
+                    return () => {
+                        /* intentionally empty */
+                    };
+                }
+                if (this.viewRef) {
+                    this.viewRef.destroy();
+                    this.viewRef = null;
+                }
+                this.viewRef = this.viewContainerRef.createEmbeddedView(template, {
+                    $implicit: grid,
+                    grid,
+                });
+                this.viewRef.detectChanges();
+                for (const node of this.viewRef.rootNodes) {
+                    container.appendChild(node);
+                }
+                // No-op cleanup — see comment in grid-header-content.directive.ts.
+                return () => {
+                    /* intentionally empty */
+                };
+            },
+        };
+        grid.registerToolbarContent?.(def);
+        this.registeredId = id;
+    }
+    unregister() {
+        const grid = this.findGrid();
+        if (grid && this.registeredId) {
+            grid.unregisterToolbarContent?.(this.registeredId);
+        }
+        this.registeredId = null;
+        if (this.viewRef) {
+            this.viewRef.destroy();
+            this.viewRef = null;
+        }
+    }
+    findGrid() {
+        const host = this.elementRef.nativeElement;
+        return host.closest('tbw-grid');
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridToolbarContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: GridToolbarContent, isStandalone: true, selector: "tbw-grid-toolbar-content", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridToolbarContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tbw-grid-toolbar-content', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
 /** Capitalize the first letter of a string for header generation. */
 function capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
@@ -6103,6 +6404,24 @@ class Grid {
      * ```
      */
     tbwScroll = output();
+    /**
+     * Emitted once at the end of every render-scheduler flush, after all
+     * plugin `afterRender` hooks have run and `ready()` has resolved.
+     *
+     * Use this to act on the rendered DOM after a programmatic mutation
+     * (e.g. focus the first input of a freshly added row in full-grid edit
+     * mode) without `setTimeout` or double-`requestAnimationFrame` hacks.
+     * The `render` event fires on every flush — including scroll-driven
+     * virtual-window updates — so prefer subscribing once and unsubscribing
+     * (or gating on `detail.phase >= RenderPhase.ROWS`) when you only care
+     * about a specific mutation.
+     *
+     * @example
+     * ```html
+     * <tbw-grid (render)="onRender($event)">...</tbw-grid>
+     * ```
+     */
+    render = output();
     // Map of output names to event names for automatic wiring.
     //
     // The `satisfies` clause enforces compile-time sync against
@@ -6152,6 +6471,7 @@ class Grid {
         printStart: 'print-start',
         printComplete: 'print-complete',
         tbwScroll: 'tbw-scroll',
+        render: 'render',
     };
     // ─────────────────────────────────────────────────────────────────────────
     // Forward-only event coverage guard.
@@ -6275,6 +6595,11 @@ class Grid {
         addPlugin('print', this.print());
         addPlugin('pivot', this.pivot());
         addPlugin('serverSide', this.serverSide());
+        // `stickyRows` has no deprecated `Grid` input — `GridStickyRowsDirective`
+        // is the only owner. Iterate it here so the directive's feature claim is
+        // consulted; without this call the directive would set a claim that
+        // nobody reads and `[stickyRows]` would silently do nothing.
+        addPlugin('stickyRows', undefined);
         addPlugin('tooltip', this.tooltip());
         return plugins;
     }
@@ -6336,12 +6661,12 @@ class Grid {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnDefaults: { classPropertyName: "columnDefaults", publicName: "columnDefaults", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, reorderRows: { classPropertyName: "reorderRows", publicName: "reorderRows", isSignal: true, isRequired: false, transformFunction: null }, rowDragDrop: { classPropertyName: "rowDragDrop", publicName: "rowDragDrop", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", cellCancel: "cellCancel", editOpen: "editOpen", beforeEditClose: "beforeEditClose", editClose: "editClose", dirtyChange: "dirtyChange", dataChange: "dataChange", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnResizeReset: "columnResizeReset", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", rowDrop: "rowDrop", rowTransfer: "rowTransfer", groupToggle: "groupToggle", groupExpand: "groupExpand", groupCollapse: "groupCollapse", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", contextMenuOpen: "contextMenuOpen", copy: "copy", paste: "paste", undo: "undo", redo: "redo", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete", tbwScroll: "tbwScroll" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: Grid, isStandalone: true, selector: "tbw-grid", inputs: { customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnDefaults: { classPropertyName: "columnDefaults", publicName: "columnDefaults", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, gridConfig: { classPropertyName: "gridConfig", publicName: "gridConfig", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, filtering: { classPropertyName: "filtering", publicName: "filtering", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", isSignal: true, isRequired: false, transformFunction: null }, visibility: { classPropertyName: "visibility", publicName: "visibility", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null }, groupingColumns: { classPropertyName: "groupingColumns", publicName: "groupingColumns", isSignal: true, isRequired: false, transformFunction: null }, columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null }, reorderRows: { classPropertyName: "reorderRows", publicName: "reorderRows", isSignal: true, isRequired: false, transformFunction: null }, rowDragDrop: { classPropertyName: "rowDragDrop", publicName: "rowDragDrop", isSignal: true, isRequired: false, transformFunction: null }, groupingRows: { classPropertyName: "groupingRows", publicName: "groupingRows", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, undoRedo: { classPropertyName: "undoRedo", publicName: "undoRedo", isSignal: true, isRequired: false, transformFunction: null }, exportFeature: { classPropertyName: "exportFeature", publicName: "export", isSignal: true, isRequired: false, transformFunction: null }, print: { classPropertyName: "print", publicName: "print", isSignal: true, isRequired: false, transformFunction: null }, pivot: { classPropertyName: "pivot", publicName: "pivot", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick", rowClick: "rowClick", cellActivate: "cellActivate", cellChange: "cellChange", cellCommit: "cellCommit", cellCancel: "cellCancel", editOpen: "editOpen", beforeEditClose: "beforeEditClose", editClose: "editClose", dirtyChange: "dirtyChange", dataChange: "dataChange", rowCommit: "rowCommit", changedRowsReset: "changedRowsReset", sortChange: "sortChange", filterChange: "filterChange", columnResize: "columnResize", columnResizeReset: "columnResizeReset", columnMove: "columnMove", columnVisibility: "columnVisibility", columnStateChange: "columnStateChange", selectionChange: "selectionChange", rowMove: "rowMove", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", rowDrop: "rowDrop", rowTransfer: "rowTransfer", groupToggle: "groupToggle", groupExpand: "groupExpand", groupCollapse: "groupCollapse", treeExpand: "treeExpand", detailExpand: "detailExpand", responsiveChange: "responsiveChange", contextMenuOpen: "contextMenuOpen", copy: "copy", paste: "paste", undo: "undo", redo: "redo", exportComplete: "exportComplete", printStart: "printStart", printComplete: "printComplete", tbwScroll: "tbwScroll", render: "render" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: Grid, decorators: [{
             type: Directive,
             args: [{ selector: 'tbw-grid' }]
-        }], ctorParameters: () => [], propDecorators: { customStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyles", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefaults", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderColumns", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], reorderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderRows", required: false }] }], rowDragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDragDrop", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], editOpen: [{ type: i0.Output, args: ["editOpen"] }], beforeEditClose: [{ type: i0.Output, args: ["beforeEditClose"] }], editClose: [{ type: i0.Output, args: ["editClose"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], 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"] }], columnResizeReset: [{ type: i0.Output, args: ["columnResizeReset"] }], 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"] }], rowDragStart: [{ type: i0.Output, args: ["rowDragStart"] }], rowDragEnd: [{ type: i0.Output, args: ["rowDragEnd"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], rowTransfer: [{ type: i0.Output, args: ["rowTransfer"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], groupExpand: [{ type: i0.Output, args: ["groupExpand"] }], groupCollapse: [{ type: i0.Output, args: ["groupCollapse"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], contextMenuOpen: [{ type: i0.Output, args: ["contextMenuOpen"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undo: [{ type: i0.Output, args: ["undo"] }], redo: [{ type: i0.Output, args: ["redo"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }], tbwScroll: [{ type: i0.Output, args: ["tbwScroll"] }] } });
+        }], 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 }] }], columnDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefaults", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], gridConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridConfig", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], filtering: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtering", required: false }] }], reorderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderColumns", required: false }] }], visibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibility", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }], groupingColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingColumns", required: false }] }], columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }], reorderRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderRows", required: false }] }], rowDragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDragDrop", required: false }] }], groupingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupingRows", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], undoRedo: [{ type: i0.Input, args: [{ isSignal: true, alias: "undoRedo", required: false }] }], exportFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "export", required: false }] }], print: [{ type: i0.Input, args: [{ isSignal: true, alias: "print", required: false }] }], pivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivot", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellActivate: [{ type: i0.Output, args: ["cellActivate"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellCancel: [{ type: i0.Output, args: ["cellCancel"] }], editOpen: [{ type: i0.Output, args: ["editOpen"] }], beforeEditClose: [{ type: i0.Output, args: ["beforeEditClose"] }], editClose: [{ type: i0.Output, args: ["editClose"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], 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"] }], columnResizeReset: [{ type: i0.Output, args: ["columnResizeReset"] }], 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"] }], rowDragStart: [{ type: i0.Output, args: ["rowDragStart"] }], rowDragEnd: [{ type: i0.Output, args: ["rowDragEnd"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], rowTransfer: [{ type: i0.Output, args: ["rowTransfer"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], groupExpand: [{ type: i0.Output, args: ["groupExpand"] }], groupCollapse: [{ type: i0.Output, args: ["groupCollapse"] }], treeExpand: [{ type: i0.Output, args: ["treeExpand"] }], detailExpand: [{ type: i0.Output, args: ["detailExpand"] }], responsiveChange: [{ type: i0.Output, args: ["responsiveChange"] }], contextMenuOpen: [{ type: i0.Output, args: ["contextMenuOpen"] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }], undo: [{ type: i0.Output, args: ["undo"] }], redo: [{ type: i0.Output, args: ["redo"] }], exportComplete: [{ type: i0.Output, args: ["exportComplete"] }], printStart: [{ type: i0.Output, args: ["printStart"] }], printComplete: [{ type: i0.Output, args: ["printComplete"] }], tbwScroll: [{ type: i0.Output, args: ["tbwScroll"] }], render: [{ type: i0.Output, args: ["render"] }] } });
 
 /**
  * Combined provider helper for grid type defaults and icons.
@@ -6404,5 +6729,5 @@ function provideGrid(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridTypeRegistry, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, applyColumnDefaults, claimEvent, getDetailTemplate, getFeatureClaim, getFeatureConfigPreprocessor, getFormArrayContext, getLazyFormContext, getResponsiveCardTemplate, hasColumnShorthands, injectGrid, isComponentClass, isEventClaimed, makeFlushFocusedInput, normalizeColumns, parseColumnShorthand, provideGrid, provideGridIcons, provideGridTypeDefaults, registerDetailRendererBridge, registerEditorMountHook, registerFeatureClaim, registerFeatureConfigPreprocessor, registerFilterPanelTypeDefaultBridge, registerResponsiveCardRendererBridge, registerTemplateBridge, runTemplateBridges, unclaimEvent, unregisterFeatureClaim };
+export { BaseFilterPanel, BaseGridEditor, BaseGridEditorCVA, BaseOverlayEditor, GRID_ICONS, GRID_TYPE_DEFAULTS, Grid, GridAdapter, GridColumnEditor, GridColumnView, GridDetailView, GridFormArray, GridHeaderContent, GridIconRegistry, GridLazyForm, GridResponsiveCard, GridToolPanel, GridToolbarContent, GridTypeRegistry, TbwEditor, TbwGridColumn, TbwGridHeader, TbwGridToolButtons, TbwRenderer, applyColumnDefaults, claimEvent, getDetailTemplate, getFeatureClaim, getFeatureConfigPreprocessor, getFormArrayContext, getLazyFormContext, getResponsiveCardTemplate, hasColumnShorthands, injectGrid, isComponentClass, isEventClaimed, makeFlushFocusedInput, normalizeColumns, parseColumnShorthand, provideGrid, provideGridIcons, provideGridTypeDefaults, registerDetailRendererBridge, registerEditorMountHook, registerFeatureClaim, registerFeatureConfigPreprocessor, registerFilterPanelTypeDefaultBridge, registerResponsiveCardRendererBridge, registerTemplateBridge, runTemplateBridges, unclaimEvent, unregisterFeatureClaim };
 //# sourceMappingURL=toolbox-web-grid-angular.mjs.map