@one-grid-core/angular 0.1.0-beta.6 → 0.2.1

package/fesm2022/one-grid-core-angular.mjs

@@ -1,20 +1,35 @@
 import { v4 } from 'uuid';
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Input, Component, EventEmitter, Output, HostListener, Directive, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { BehaviorSubject, Subject, Subscription, fromEvent } from 'rxjs';
+import { Injectable, Pipe, inject, NgZone, Input, Component, ViewChild, EventEmitter, Output, HostListener, Directive, ViewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import _ from 'lodash';
 import { filter, map } from 'rxjs/operators';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'lucide-angular';
+import * as i2$1 from 'lucide-angular';
 import { LucideAngularModule, icons } from 'lucide-angular';
-import * as i5 from '@angular/cdk/scrolling';
+import * as i6 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import * as i3$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgbTypeahead, NgbHighlight } from '@ng-bootstrap/ng-bootstrap';
-import { CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 
+/** Width used when a column defines neither `width` nor `minWidth`. */
+const ONE_DEFAULT_COLUMN_WIDTH = 150;
+/**
+ * The rendered width of a column, clamped to its bounds.
+ *
+ * `width`, `minWidth` and `maxWidth` are all optional, and the previous inline
+ * expression — repeated in two places — fell back to `minWidth` when `width`
+ * was absent. With neither set that produced `undefined`, and summing it gave
+ * a `NaN` row width, so the row collapsed. This is total: every combination of
+ * present and absent bounds resolves to a usable number.
+ */
+function resolveColumnWidth(column) {
+    const min = column?.minWidth ?? 0;
+    const max = column?.maxWidth ?? Number.POSITIVE_INFINITY;
+    const width = column?.width ?? column?.minWidth ?? ONE_DEFAULT_COLUMN_WIDTH;
+    return Math.min(Math.max(width, min), max);
+}
 /**
  * Apply Default Column Definitions
  */
@@ -27,7 +42,15 @@ function applyDefaultColumnDef(columnDefs, defaultColumnDef) {
 /**
  * One Column Params Resolver (Cell Renderer)
  */
-function resolveOneCellRendererParams(prop, params) {
+function resolveOneCellRendererParams(prop, params, 
+/**
+ * What an unset property means: `false` for a capability you opt into,
+ * `true` for a restriction you opt out of. `!!prop` could not tell the two
+ * apart, which left `updatable` — a restriction — defaulting to "deny".
+ */
+whenUnset = false) {
+    if (prop === undefined || prop === null)
+        return whenUnset;
     return typeof prop === 'function' ? prop(params) : !!prop;
 }
 /**
@@ -117,7 +140,12 @@ function getCellError(column, node, value, row) {
     if (!column?.validationRules || column?.validationRules?.length === 0)
         return null;
     if (column?.autoGroupField) {
-        if (column.editableLevels.includes(node.level)) {
+        // `editableLevels` is optional, and this read was unguarded — a tree grid
+        // with validation rules on its group column threw on the first cell it
+        // rendered. Undeclared means no level is validated, matching the property's
+        // meaning elsewhere: it names the levels that are editable, and a level not
+        // named is not one of them.
+        if (column.editableLevels?.includes(node.level)) {
             for (const ruleFn of column?.validationRules) {
                 const error = ruleFn(value, row);
                 if (error)
@@ -138,35 +166,77 @@ function getCellError(column, node, value, row) {
     }
 }
 
+/**
+ * The grid's wrapper around one row of your data.
+ *
+ * A node owns three kinds of state: its identity and position, the structural
+ * facts the grid derived while building the tree, and the per-cell UI state.
+ * `data` is your object, held by reference and mutated in place when a cell is
+ * committed — the node never copies it.
+ *
+ * @typeParam T - the row type
+ * @typeParam D - the detail row type, for master/detail grids
+ */
 class OneRowNode {
     constructor(rowId, data, rowIndex) {
-        this.rowId = null;
-        this.rowIndex = null;
-        this.data = null;
-        this.level = null;
+        /** Depth in the tree. 0 at the root; always 0 outside tree data. */
+        this.level = 0;
+        // ---------------------------------------------------------------------------
+        // Structure, derived by the grid while building rows
+        // ---------------------------------------------------------------------------
+        /** Has no children of its own. */
         this.leaf = false;
+        /** Is a group, but an empty one. */
         this.leafGroup = false;
+        /** Has children. */
+        this.group = false;
+        /** Can be opened — a non-empty group, or any row in a master/detail grid. */
+        this.expandable = false;
+        /** Survives the active filters. Recomputed on every filter pass. */
         this.visible = false;
         this.selected = false;
-        this.expandable = false;
         this.expanded = false;
-        this.group = false;
-        this.submitted = false;
         this.parent = null;
         this.children = null;
+        // ---------------------------------------------------------------------------
+        // Per-cell UI state, keyed by column field
+        // ---------------------------------------------------------------------------
+        /** Which cells currently have an open editor. */
         this.editing = {};
+        /** Rendered value and kind for each cell, computed when the row is built. */
         this.cellStates = {};
         this.cellOptions = {};
+        // ---------------------------------------------------------------------------
+        // Master / detail
+        // ---------------------------------------------------------------------------
+        /** Detail rows for this master row. `null` until they have been supplied. */
         this.detailRowData = null;
+        /** Whether the custom detail renderer is showing. Toggled by the row action. */
         this.detailActive = false;
+        /** Height reserved for the detail area, computed from the detail row count. */
         this.detailRowHeight = null;
+        /**
+         * Listeners per event. Typed as a payload-agnostic callback because the map
+         * is heterogeneous; `on` and `emit` restore the per-event type at the edges.
+         */
         this.listeners = new Map();
         this.rowId = rowId;
         this.data = data;
         this.rowIndex = rowIndex;
     }
+    // ---------------------------------------------------------------------------
+    // Mutators
+    // ---------------------------------------------------------------------------
+    /**
+     * Write one field of the row and announce it.
+     *
+     * `null` is allowed because that is what the grid itself stores for a cleared
+     * cell; anything else must match the field's declared type.
+     */
     setDataValue(field, value) {
+        const previousData = { ...this.data };
         this.data[field] = value;
+        this.emit('rowDataChanged', { node: this, data: this.data, previousData });
     }
     setSelected(selected) {
         this.selected = selected;
@@ -177,54 +247,78 @@ class OneRowNode {
     setCellStates(cellStates) {
         this.cellStates = cellStates;
     }
+    /** @deprecated Read `node.selected`. */
     isSelected() {
         return this.selected;
     }
+    /** @deprecated Read `node.expanded`. */
     isExpanded() {
         return this.expanded;
     }
+    /** Supply or replace this master row's detail rows. */
+    setDetailRowData(detailRowData) {
+        const previousDetailRowData = this.detailRowData;
+        this.detailRowData = detailRowData;
+        this.emit('detailRowDataChanged', { node: this, detailRowData, previousDetailRowData });
+    }
+    setExpanded(expanded) {
+        if (this.expanded === expanded)
+            return; // no event for a no-op
+        this.expanded = expanded;
+        this.emit('expandedChanged', { node: this, expanded });
+    }
+    // ---------------------------------------------------------------------------
+    // Events
+    // ---------------------------------------------------------------------------
     /**
-     * Event System
+     * Subscribe to one of this node's events.
+     *
+     * @returns an unsubscribe function. Call it, or `destroy()`, to release the
+     *          listener — a node outlives any single render.
      */
     on(event, listener) {
-        if (!this.listeners.has(event)) {
-            this.listeners.set(event, new Set());
+        let listeners = this.listeners.get(event);
+        if (!listeners) {
+            listeners = new Set();
+            this.listeners.set(event, listeners);
         }
-        this.listeners.get(event).add(listener);
-        // Return unsubscribe fn
+        listeners.add(listener);
         return () => this.off(event, listener);
     }
     off(event, listener) {
         this.listeners.get(event)?.delete(listener);
     }
+    /**
+     * Notify listeners. Private on purpose: every event this class publishes is
+     * raised by the mutator that caused it, and a forged `expandedChanged` would
+     * leave the node's flag and the grid's view of it disagreeing.
+     */
     emit(event, payload) {
-        this.listeners.get(event)?.forEach(cb => cb(payload));
+        const listeners = this.listeners.get(event);
+        if (!listeners?.size)
+            return;
+        // Snapshot: a listener is allowed to unsubscribe itself, or another, while
+        // the event is being delivered.
+        for (const listener of Array.from(listeners)) {
+            listener(payload);
+        }
     }
     /**
-      * Mutators that fire events
-      */
-    setDetailRowData(detailRowData) {
-        const previousDetailRowData = this.detailRowData;
-        this.detailRowData = detailRowData;
-        this.emit('detailRowDataChanged', {
-            node: this,
-            detailRowData,
-            previousDetailRowData,
-        });
-        this.emit('childrenChanged', {
-            node: this,
-            children: this.children,
-            source: 'masterDetail',
-        });
-    }
-    setExpanded(expanded) {
-        if (this.expanded === expanded)
-            return; // skip if no change
-        this.expanded = expanded;
-        this.emit('expandedChanged', { node: this, expanded });
-    }
+     * Release everything this node holds. Called by the grid when the row leaves
+     * the data or the grid is torn down.
+     *
+     * The tree links matter as much as the listeners: a parent holding children
+     * that hold the parent keeps the whole subtree — and its data — reachable.
+     */
     destroy() {
-        this.listeners.clear(); // prevent memory leaks
+        this.listeners.clear();
+        this.parent = null;
+        this.children = null;
+        this.detailRowData = null;
+        this.detailRendererComponent = undefined;
+        this.editing = {};
+        this.cellStates = {};
+        this.cellOptions = {};
     }
 }
 
@@ -233,21 +327,40 @@ class OneRowNode {
  *
  * Rules:
  * - A node is visible if it matches the filters or has a matching descendant.
- * - A node is expanded if it has a matching descendant.
+ * - While a filter is active, a node is expanded iff it has a matching
+ *   descendant, so the hit is revealed.
+ *
+ * Overwriting `expanded` is only correct *while filtering*. This runs from
+ * `applyFilters`, which every `setRowData` / `updateRowData` calls, so doing it
+ * unconditionally force-expanded every parent on each data update: it made
+ * `groupDefaultExpanded` inert for tree data and collapsed expanded
+ * master-detail rows (they have no children, so `childMatch` is false).
  *
  * @returns True if the current node or any descendant matches.
  */
-function filterTreeNode(node, filters, quick) {
+function filterTreeNode(node, filters, quick, fields) {
+    const filtering = isFilterActive(filters, quick);
     // Check whether the current node matches all active filters.
-    const selfMatch = matchesAdvancedFilters(node, filters) && matchesQuickFilter(node, quick);
+    const selfMatch = matchesAdvancedFilters(node, filters) && matchesQuickFilter(node, quick, fields);
     // Recursively determine whether any child matches.
-    const childMatch = node.children?.some(child => filterTreeNode(child, filters, quick)) ?? false;
+    const childMatch = node.children?.some(child => filterTreeNode(child, filters, quick, fields)) ?? false;
     // Keep the node visible when it or any descendant matches.
     node.visible = selfMatch || childMatch;
-    // Expand parents to reveal matching descendants.
-    node.expanded = childMatch;
+    if (filtering) {
+        // Expand parents to reveal matching descendants.
+        node.expanded = childMatch;
+    }
     return node.visible;
 }
+/**
+ * Whether anything is actually filtering right now. A model entry with no
+ * conditions matches everything, so it does not count as active.
+ */
+function isFilterActive(filters, quick) {
+    if (quick)
+        return true;
+    return !!filters?.some(filter => filter?.conditions?.length > 0);
+}
 /**
  * Apply advanced per-column filters
  */
@@ -263,8 +376,8 @@ function matchesAdvancedFilters(node, filters) {
                 case 'contains': return val.includes(cmp);
                 case 'startsWith': return val.startsWith(cmp);
                 case 'endsWith': return val.endsWith(cmp);
-                case 'greaterThan': return +val > +cmp;
-                case 'lessThan': return +val < +cmp;
+                case 'greaterThan': return compare(val, cmp) > 0;
+                case 'lessThan': return compare(val, cmp) < 0;
                 default: return true; // Unknown operator = ignore
             }
         });
@@ -272,12 +385,52 @@ function matchesAdvancedFilters(node, filters) {
     });
 }
 /**
- * Apply quick filter across all fields
+ * Order two already-lowercased cell values.
+ *
+ * Numeric when both sides parse as numbers, lexicographic otherwise. This used
+ * to be `+val > +cmp` unconditionally, so anything non-numeric compared NaN
+ * against NaN — always false. A date column filtered with `greaterThan` matched
+ * nothing at all rather than reporting a problem, and ISO dates happen to sort
+ * correctly as strings, which is what the fallback gives them.
+ */
+function compare(val, cmp) {
+    const left = Number(val);
+    const right = Number(cmp);
+    const numeric = val !== '' && cmp !== '' && !Number.isNaN(left) && !Number.isNaN(right);
+    if (numeric)
+        return left === right ? 0 : left < right ? -1 : 1;
+    return val === cmp ? 0 : val < cmp ? -1 : 1;
+}
+/**
+ * Apply the quick filter to one row.
+ *
+ * Searches the fields the grid actually shows, when it is told what they are.
+ * It used to walk `Object.values(node.data)`, which had three consequences, all
+ * of them wrong:
+ *
+ * - a property with no column was searchable, so a user could match rows on
+ *   data the grid never displayed;
+ * - a nested object stringified to `[object Object]`, so typing `object`
+ *   matched every row holding one;
+ * - in a tree, `children` did the same, so most parents matched most queries.
+ *
+ * Non-primitive values are skipped regardless, so the `[object Object]` haystack
+ * cannot come back through a declared column either.
  */
-function matchesQuickFilter(node, quick) {
+function matchesQuickFilter(node, quick, fields) {
     if (!quick)
         return true;
-    return Object.values(node.data).some(value => (value ?? '').toString().toLowerCase().includes(quick));
+    const data = node.data;
+    const values = fields?.length ? fields.map(field => data?.[field]) : Object.values(data ?? {});
+    return values.some(value => {
+        if (value === null || value === undefined)
+            return false;
+        // Objects, arrays and functions have no useful text form. Skipping them is
+        // what keeps `[object Object]` out of the search.
+        if (typeof value === 'object' || typeof value === 'function')
+            return false;
+        return value.toString().toLowerCase().includes(quick);
+    });
 }
 
 /**
@@ -325,11 +478,17 @@ function resolveCellClass(column, row) {
 class OgColumnService {
     constructor() {
         this.defaultColumnDef = null;
+        /**
+         * The grid's `context`, so header callbacks receive the same one cell
+         * callbacks do. Set during init; null in a bare service.
+         */
+        this.context = null;
         this.columnDefs$ = new BehaviorSubject([]);
         this.groupColumnDefs$ = new BehaviorSubject([]);
     }
-    initColumnDefs(defaultColumnDef, columnDefs, groupColumnDefs) {
+    initColumnDefs(defaultColumnDef, columnDefs, groupColumnDefs, context = null) {
         this.defaultColumnDef = defaultColumnDef;
+        this.context = context;
         this.setGroupColumnDefs(groupColumnDefs);
         this.setColumnDefs(columnDefs);
     }
@@ -339,7 +498,7 @@ class OgColumnService {
         return { columns, groups };
     }
     setGroupColumnDefs(groupColumnDefs) {
-        const groups = groupColumnDefs.map((group) => this.resolveGroupPresentation(group));
+        const groups = groupColumnDefs.map((group) => this.resolveGroupPresentation(group, { context: this.context }));
         this.groupColumnDefs$.next(groups);
     }
     setColumnDefs(columnDefs) {
@@ -349,24 +508,86 @@ class OgColumnService {
                 ...col,
                 id: col?.field ? col.field : _.uniqueId('col_'),
             };
-            return this.resolveCellPresentation(column);
+            return this.resolveHeaderPresentation(column);
         });
-        this.recalculateGroups(columns);
-        this.columnDefs$.next(columns);
+        const ordered = this.applyPinning(columns);
+        this.recalculateGroups(ordered);
+        this.columnDefs$.next(ordered);
+    }
+    /**
+     * Move pinned columns to their edge and measure how far in each one sits.
+     *
+     * Display order becomes left-pinned, unpinned, right-pinned, with declared
+     * order preserved inside each band. `_pinnedOffset` is the distance from that
+     * column's own edge — the sum of the widths of the pinned columns outside it
+     * — which is what the sticky `left` / `right` binding needs.
+     *
+     * With nothing pinned this returns the same array, in the same order, so a
+     * grid that does not use the feature is unaffected.
+     */
+    applyPinning(columns) {
+        const left = columns.filter(column => column.pinned === 'left');
+        const right = columns.filter(column => column.pinned === 'right');
+        if (!left.length && !right.length) {
+            for (const column of columns) {
+                column._pinnedOffset = null;
+                column._pinnedEdge = false;
+            }
+            return columns;
+        }
+        const center = columns.filter(column => column.pinned !== 'left' && column.pinned !== 'right');
+        let offset = 0;
+        for (const column of left) {
+            column._pinnedOffset = offset;
+            column._pinnedEdge = false;
+            offset += resolveColumnWidth(column);
+        }
+        // Right-pinned columns are measured from the right edge inwards, so the
+        // last declared one sits flush and the earlier ones stack outside it.
+        offset = 0;
+        for (let index = right.length - 1; index >= 0; index--) {
+            right[index]._pinnedOffset = offset;
+            right[index]._pinnedEdge = false;
+            offset += resolveColumnWidth(right[index]);
+        }
+        for (const column of center) {
+            column._pinnedOffset = null;
+            column._pinnedEdge = false;
+        }
+        // Only the innermost column of each band carries the divider, so stacked
+        // pinned columns do not each cast a shadow onto the next.
+        if (left.length)
+            left[left.length - 1]._pinnedEdge = true;
+        if (right.length)
+            right[0]._pinnedEdge = true;
+        return [...left, ...center, ...right];
+    }
+    /** Total width of the columns frozen against the given edge. */
+    getPinnedWidth(side) {
+        return this.columnDefs$.getValue()
+            .filter(column => column.pinned === side)
+            .reduce((total, column) => total + resolveColumnWidth(column), 0);
     }
     // Update single column
     updateColumnDef(id, changes) {
         const columns = this.getColumnState().columns;
         const updatedColumns = columns.map(col => col.id === id ? { ...col, ...changes } : col);
-        this.recalculateGroups(updatedColumns);
-        this.columnDefs$.next(updatedColumns);
+        // Re-pinned, not just re-grouped: resizing a pinned column changes where
+        // the ones inside it have to sit, and this is the path a column resize
+        // takes.
+        const ordered = this.applyPinning(updatedColumns);
+        this.recalculateGroups(ordered);
+        this.columnDefs$.next(ordered);
     }
     // Reorder columns
     reorderColumnDefs(fromIndex, toIndex) {
         const columns = _.clone(this.getColumnState().columns);
         const [moved] = columns.splice(fromIndex, 1);
         columns.splice(toIndex, 0, moved);
-        this.columnDefs$.next(columns);
+        // Dragging can drop a column between two pinned ones; re-pinning puts the
+        // bands back in order rather than leaving them interleaved, which would
+        // make the computed offsets meaningless.
+        this.columnDefs$.next(this.applyPinning(columns));
     }
     /**
      * Group Header Columns
@@ -375,7 +596,7 @@ class OgColumnService {
         if (this.groupColumnDefs$.getValue().length > 0) {
             const groups = this.groupColumnDefs$.value.map(group => ({
                 ...group,
-                width: columnDefs.filter(c => c.groupId === group.id).reduce((sum, col) => sum + (col.width ? col.width > col.maxWidth ? col.maxWidth : col.width < col.minWidth ? col.minWidth : col.width : col.minWidth), 0)
+                width: columnDefs.filter(c => c.groupId === group.id).reduce((sum, col) => sum + resolveColumnWidth(col), 0)
             }));
             this.groupColumnDefs$.next(groups);
         }
@@ -385,13 +606,51 @@ class OgColumnService {
         col._resolvedGroupStyle = typeof col.groupStyle === 'function' ? col.groupStyle(params) : col.groupStyle;
         return col;
     }
-    resolveCellPresentation(col, params) {
+    /**
+     * Resolve a column's header presentation. Once per column, when the columns
+     * are set — a header is one cell for the whole column, so there is no row to
+     * resolve it against and nothing to redo per render.
+     *
+     * This used to resolve the cell hooks too, from the same call, with no params
+     * at all. Two bugs came out of that: any callback touching `params` threw a
+     * TypeError at init, and the header's resolved value was then overwritten by
+     * every cell that rendered, since the body re-ran the same method per cell
+     * with row params. In dev mode the disagreement surfaced as NG0100.
+     */
+    resolveHeaderPresentation(col) {
+        const params = {
+            columnDef: col,
+            field: col.field,
+            context: this.context,
+        };
         col._resolvedHeaderClass = typeof col.headerClass === 'function' ? col.headerClass(params) : col.headerClass;
         col._resolvedHeaderStyle = typeof col.headerStyle === 'function' ? col.headerStyle(params) : col.headerStyle;
-        col._resolvedCellClass = typeof col.cellClass === 'function' ? col.cellClass(params) : col.cellClass;
-        col._resolvedCellStyle = typeof col.cellStyle === 'function' ? col.cellStyle(params) : col.cellStyle;
+        // The header's own predicates. Declared as `boolean | ((params) => boolean)`
+        // and read straight off the column in the template, where a function is
+        // simply truthy — so `sortable: () => false` rendered a sort button that a
+        // consumer had explicitly asked not to have. Resolved here to a real
+        // boolean, once, because none of them depends on a row.
+        col._resolvedSortable = resolveOneCellRendererParams(col.sortable, params);
+        col._resolvedResizable = resolveOneCellRendererParams(col.resizable, params);
+        col._resolvedDragable = resolveOneCellRendererParams(col.dragable, params);
+        col._resolvedSuppressHeaderMenuButton = resolveOneCellRendererParams(col.suppressHeaderMenuButton, params);
         return col;
     }
+    /**
+     * Resolve one cell's class, for one row.
+     *
+     * Pure: the result is returned rather than written back onto the column def,
+     * which every row of that column shares. Writing to it worked only because
+     * the template resolved and read in the same expression — one render order
+     * away from every row showing the last row's class.
+     */
+    resolveCellClass(col, params) {
+        return typeof col?.cellClass === 'function' ? col.cellClass(params) : col?.cellClass;
+    }
+    /** Resolve one cell's inline style, for one row. Pure, as above. */
+    resolveCellStyle(col, params) {
+        return typeof col?.cellStyle === 'function' ? col.cellStyle(params) : col?.cellStyle;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OgColumnService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OgColumnService }); }
 }
@@ -427,10 +686,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class CellFieldValueEmptyPipe {
     transform(data, field) {
-        if (!data) {
+        // `field` is optional on OneColumnDef — an action-only column legitimately
+        // has none. This used to call `field.split('.')` unguarded and throw a
+        // TypeError while the grid was building cell state, taking the whole grid
+        // down. No field means nothing to read, which is empty by definition.
+        if (!data || !field) {
             return true;
         }
-        const value = field.split('.').reduce((obj, key) => obj?.[key], data);
+        const value = getFieldValue(data, field);
         return value === null || value === undefined || value === '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellFieldValueEmptyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
@@ -492,19 +755,69 @@ class OneGridCellService {
         this._cellValueGetter = new CellValueGetterPipe();
         this._cellFieldValue = new CellFieldValuePipe();
         this._columnDefs = [];
+        this._api = null;
+        // ---------------------------------------------------------------------------
+        // Row-scoped column predicates
+        //
+        // Every one of these resolves the same way and receives the same params, via
+        // `cellParams`. They used to each build their own subset inline, which is how
+        // `value`, `field` and `api` came to be missing from all of them.
+        // ---------------------------------------------------------------------------
+        /** Whether this cell may be edited at all. A capability: unset means no. */
+        this.editableFn = (column, node) => resolveOneCellRendererParams(column?.editable, this.cellParams(column, node));
         /**
-         * One Column Def Params Resolver
+         * The second edit gate, ANDed with `editable`.
+         *
+         * A restriction, so unset means "no restriction". It used to resolve through
+         * `!!undefined` to `false`, closing the gate on every column that did not name
+         * it — so `editable: true` on its own made nothing editable.
          */
-        this.editableFn = (column, node) => resolveOneCellRendererParams(column.editable, { node, data: node.data, columnDef: column, rowIndex: node.rowIndex, context: this._context });
-        this.updatableFn = (column, node) => resolveOneCellRendererParams(column.updatable, { node, data: node.data, columnDef: column, rowIndex: node.rowIndex, context: this._context });
-        this.disableFn = (column, node) => resolveOneCellRendererParams(column.disable, { node, data: node.data, columnDef: column, rowIndex: node.rowIndex, context: this._context });
-        this.dragableFn = (column, node) => resolveOneCellRendererParams(column.dragable, { node, data: node.data, columnDef: column, rowIndex: node.rowIndex, context: this._context });
-        this.valueGetterFn = (column, node) => resolveOneValueGetterParams(column.valueGetter, { data: node.data, rowIndex: node.rowIndex, node: node, context: this._context });
+        this.updatableFn = (column, node) => resolveOneCellRendererParams(column?.updatable, this.cellParams(column, node), true);
+        /** Disables this column's row action buttons. Not an edit gate. */
+        this.disableFn = (column, node) => resolveOneCellRendererParams(column?.disable, this.cellParams(column, node));
+        /** Hides this column's row action buttons entirely. */
+        this.hideActionButtonFn = (column, node) => resolveOneCellRendererParams(column?.hideActionButton, this.cellParams(column, node));
+        /** Whether this cell carries a row drag handle. */
+        this.rowDragFn = (column, node) => resolveOneCellRendererParams(column?.rowDrag, this.cellParams(column, node));
+        this.valueGetterFn = (column, node) => resolveOneValueGetterParams(column?.valueGetter, { data: node.data, rowIndex: node.rowIndex, node, context: this._context });
     }
     applyColumnDefs(columnDefs, context) {
         this._columnDefs = columnDefs;
         this._context = context;
     }
+    /**
+     * Back-reference to the grid api, so predicate params can carry it.
+     *
+     * Pushed in rather than injected: `OneGridApi` already depends on this
+     * service, and injecting it back would close a DI cycle.
+     */
+    setGridApi(api) {
+        this._api = api;
+    }
+    /**
+     * The params every row-scoped column callback receives.
+     *
+     * One builder, deliberately: `editable`, `updatable`, `disable`, `rowDrag`,
+     * `hideActionButton`, `cellClass`, `cellStyle`, `cellRenderer` and
+     * `valueFormatter` are all "decide something about this cell", and a consumer
+     * should not have to remember which of them happens to be handed `value` or
+     * `field`. Each used to be called with a slightly different subset.
+     */
+    cellParams(column, node) {
+        return {
+            // Column config first, so the grid's own fields win a name collision: a
+            // stale `value` left in `cellRendererParams` must not shadow this cell's.
+            ...(column?.cellRendererParams ?? {}),
+            value: this.resolveValue(node, column),
+            data: node.data,
+            node,
+            rowIndex: node.rowIndex,
+            field: column?.field,
+            columnDef: column,
+            api: this._api ?? undefined,
+            context: this._context,
+        };
+    }
     /**
      * Generate New Node States
      */
@@ -514,48 +827,123 @@ class OneGridCellService {
         const newStates = {};
         for (const column of this._columnDefs) {
             const field = column.field;
+            // Cell state is keyed by field, so a column without one contributes
+            // nothing. Skipping it keeps `undefined` out of the state object; such a
+            // column still renders its action buttons, which do not read cell state.
+            if (!field)
+                continue;
             if (field !== '_oneRowNumber') {
                 newStates[field] = this.generateCellState(node, column) ?? node.cellStates[field] ?? { type: 'none', value: '' };
             }
             else {
-                newStates[field] = node.cellStates[column.field];
+                newStates[field] = node.cellStates[field];
             }
         }
         return newStates;
     }
+    /**
+     * The cell's value: the `valueGetter`'s output where the column declares one,
+     * the raw field otherwise. This is the value, not the display text — see
+     * {@link formatValue}.
+     */
+    resolveValue(node, column) {
+        return column?.valueGetter
+            ? this._cellValueGetter.transform(node.data, node, column, this._context)
+            : this._cellFieldValue.transform(node.data, column.field);
+    }
+    /**
+     * Apply the column's `valueFormatter`.
+     *
+     * `valueFormatter` was declared on the column definition and called from
+     * nowhere — a consumer could write one, get no error, and see nothing happen.
+     * It runs on displayed text only, after the `valueGetter`, and is deliberately
+     * skipped for placeholders: an empty cell already has its own mechanism in
+     * `cellRendererParams.placeholder`, and two features competing to fill the
+     * same gap is worse than one.
+     *
+     * Note that sorting and filtering read the underlying row data, not this —
+     * which is exactly why formatting belongs here rather than in the getter.
+     */
+    formatValue(node, column, value) {
+        if (typeof column?.valueFormatter !== 'function')
+            return value;
+        // `value` is passed explicitly rather than left to `cellParams`: the empty
+        // -cell branch resolves it through the getter before deciding whether there
+        // is anything to format, and the formatter must see that same value.
+        return column.valueFormatter({ ...this.cellParams(column, node), value });
+    }
+    /**
+     * The placeholder for an empty cell, or `undefined` when this row's tree
+     * depth may not be edited.
+     *
+     * `cellRendererParams.placeholder` is a prompt, not data: it renders at half
+     * opacity where the value would go, which reads as "click here and fill this
+     * in". On the auto group column `editableLevels` decides which depths accept
+     * an edit at all, so a depth outside that list was advertising an edit the
+     * grid then refuses — the cell offers no input and the prompt never clears.
+     *
+     * The suppression is scoped to columns that actually declare `editableLevels`.
+     * The list is opt-in, and a column without one has no per-level rules rather
+     * than no editable levels, so plain grids and untouched tree columns keep
+     * showing their placeholder exactly as before.
+     */
+    resolvePlaceholder(node, column) {
+        const placeholder = column?.cellRendererParams?.placeholder;
+        const editableLevels = column?.editableLevels;
+        if (!column?.autoGroupField || !Array.isArray(editableLevels))
+            return placeholder;
+        return editableLevels.includes(node?.level) ? placeholder : undefined;
+    }
     /**
      * Generate New Node State Based on Column Field
      */
     generateCellState(node, column) {
-        const isField = column.field !== undefined || column.field !== '' || column.field !== null;
-        const isEmpty = this._cellFieldValueEmpty.transform(node.data, column.field);
+        // This was `field !== undefined || field !== '' || field !== null`, which is
+        // true for every possible value including all three it meant to exclude —
+        // `||` where `&&` was intended. It gated the four branches below, so none
+        // of them could ever fall through to the default. Reduced to the check it
+        // was reaching for: a column with no field has no value to render.
+        const field = column?.field;
+        if (!field) {
+            return { type: 'none', value: '' };
+        }
+        const isEmpty = this._cellFieldValueEmpty.transform(node.data, field);
         const isGroup = node.group || node.leafGroup;
         const isAutoGroup = column?.autoGroupField;
         if (column && column.cellRenderer && !isGroup) {
-            const value = column.cellRenderer({ node, columnDef: column });
-            return { type: 'html', value: value };
+            // The renderer used to be handed `{ node, columnDef }` and nothing else,
+            // so the obvious way to write one — `params.value` — produced the string
+            // "undefined", and `params.data.x` threw. It now gets exactly what every
+            // other row-scoped hook gets.
+            return { type: 'html', value: column.cellRenderer(this.cellParams(column, node)) };
         }
         // 1. Cell Group Placeholder
-        if (isField && isEmpty && isGroup && isAutoGroup) {
-            return { type: 'placeholder', value: column?.cellRendererParams?.placeholder ?? this._cellValueGetter.transform(node.data, node, column, this._context) ?? '' };
+        if (isEmpty && isGroup && isAutoGroup) {
+            return { type: 'placeholder', value: this.resolvePlaceholder(node, column) ?? this._cellValueGetter.transform(node.data, node, column, this._context) ?? '' };
         }
         // 2. Cell Group Text Value
-        if (isField && isGroup && isAutoGroup) {
-            const value = column?.valueGetter ? this._cellValueGetter.transform(node.data, node, column, this._context) : this._cellFieldValue.transform(node.data, column.field);
+        if (isGroup && isAutoGroup) {
+            const value = this.formatValue(node, column, this.resolveValue(node, column));
             return { type: 'text', value: value ?? '' };
         }
         // 3. Cell Placeholder
-        if (isField && isEmpty && !isGroup && !isAutoGroup) {
+        //
+        // The auto group column is deliberately NOT excluded here. Cases 1 and 2
+        // above already claimed the group rows, so what reaches this point is a
+        // leaf — and a leaf on the auto group column has to render its label too,
+        // indented by level. Excluding it dropped every leaf through to case 5 and
+        // rendered the group column blank for the whole bottom row of a tree.
+        if (isEmpty && !isGroup) {
             const valueGetter = this._cellValueGetter.transform(node.data, node, column, this._context);
             if (valueGetter) {
-                return { type: 'text', value: valueGetter };
+                return { type: 'text', value: this.formatValue(node, column, valueGetter) };
             }
-            const placeholder = column?.cellRendererParams?.placeholder ?? '';
+            const placeholder = this.resolvePlaceholder(node, column) ?? '';
             return { type: 'placeholder', value: placeholder };
         }
-        // 4. Cell Text Value
-        if (isField && !(isGroup || isAutoGroup)) {
-            const value = column?.valueGetter ? this._cellValueGetter.transform(node.data, node, column, this._context) : this._cellFieldValue.transform(node.data, column.field);
+        // 4. Cell Text Value (leaves, including the auto group column — see above)
+        if (!isGroup) {
+            const value = this.formatValue(node, column, this.resolveValue(node, column));
             return { type: 'text', value: value ?? '' };
         }
         // 5. Default
@@ -637,13 +1025,26 @@ class OneGridSelectionService {
     toggleAllSelection(allIds, selected) {
         selected ? this._selectedIds = new Set(allIds) : this._selectedIds.clear();
     }
-    // Header Checkbox State
+    /**
+     * Tri-state for the header checkbox, over the rows currently present.
+     *
+     * This compared `_selectedIds.size` with `allIds.length` and never checked
+     * that the selected ids were among the present ones. Selecting two rows and
+     * then swapping in two different rows reported `checked` with nothing
+     * actually selected, because the two counts happened to match. Counting the
+     * intersection is the only thing that answers the question being asked.
+     */
     getSelectAllState(allIds) {
-        if (this._selectedIds.size === 0)
+        if (!allIds?.length)
             return 'unchecked';
-        if (this._selectedIds.size === allIds.length)
-            return 'checked';
-        return 'indeterminate';
+        let selected = 0;
+        for (const rowId of allIds) {
+            if (this._selectedIds.has(rowId))
+                selected++;
+        }
+        if (selected === 0)
+            return 'unchecked';
+        return selected === allIds.length ? 'checked' : 'indeterminate';
     }
     selectAll(rowIds) {
         this._selectedIds = new Set(rowIds);
@@ -697,6 +1098,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class OneGridApi {
+    /** Unique per grid instance, assigned during `init`. */
+    get id() {
+        return this._id;
+    }
+    /** The `[context]` the grid was given. */
+    get context() {
+        return this._context;
+    }
+    /** Selection mode, captured during `init`. Changing the input later has no effect. */
+    get rowSelection() {
+        return this._rowSelection;
+    }
+    /** Which role this instance plays: simple, master, detail or tree. */
+    get apiType() {
+        return this._apiType;
+    }
+    /** Every node the grid holds, in flattened order. */
+    get rowNodes() {
+        return this._rowNodes;
+    }
+    /** The sort model currently applied. Change it with `onSortChanged`. */
+    get sortModel() {
+        return this._sortModel;
+    }
     constructor(columnService, rowService, cellService, eventService, selectionService, expansionService) {
         this.columnService = columnService;
         this.rowService = rowService;
@@ -704,17 +1129,18 @@ class OneGridApi {
         this.eventService = eventService;
         this.selectionService = selectionService;
         this.expansionService = expansionService;
-        this.context = null;
-        this.rowSelection = null;
-        this.apiType = null;
-        this.rowNodes = [];
-        this.sortModel = [];
+        this._context = null;
+        this._rowSelection = null;
+        this._apiType = null;
+        this._rowNodes = [];
+        this._sortModel = [];
         this.rowHeight = 26;
         this.headerRowHeight = 32;
         this._currentIndex = 0;
         this._quickFilterValue = null;
         this._activeFilters = [];
         this._visibleRowNodes = [];
+        this._pinnedRowNodes = { top: [], bottom: [] };
         this._originalRowNodes = new Map();
         this._nodeCleanupMap = new Map(); // Cleanup registry (prevents memory leaks)
         this._destroyed = false;
@@ -724,63 +1150,83 @@ class OneGridApi {
         this.groupDefaultExpanded = 0;
         this.masterDetail = false;
     }
-    init(gridApiType, rowSelection, columnDefs, defaultColumnDef, context, masterDetail, detailCellRendererParams, detailRendererComponent, treeData, groupColumnDefs) {
-        this.id = v4();
-        this.apiType = gridApiType;
-        this.rowSelection = rowSelection;
-        this.context = context;
+    /**
+     * Stand the grid up. Called by `OneGridComponent` from `ngOnInit`.
+     *
+     * Takes a single `OneGridInitOptions` rather than the ten positional
+     * arguments it used to, so a call site reads as the configuration it is and
+     * a new option no longer means editing every caller.
+     *
+     * @internal Applications obtain a ready-made API from `(onGridReady)`; they
+     * should never call this themselves.
+     */
+    init(options) {
+        const { gridType, columnDefs, defaultColumnDef = {}, groupColumnDefs = [], context = null, rowSelection = null, masterDetail = false, detailCellRendererParams = null, detailRendererComponent = null, treeData = false, } = options;
+        this._id = v4();
+        this._apiType = gridType;
+        this._rowSelection = rowSelection;
+        this._context = context;
         this.masterDetail = masterDetail;
         this.detailCellRendererParams = detailCellRendererParams;
         this.detailRendererComponent = detailRendererComponent;
         this.treeData = treeData;
-        this.selectionService.setSelectionMode(this.rowSelection);
-        this.rowService.setGetRowIdFn(this.context?.componentParent?.getRowId ?? null);
+        this.selectionService.setSelectionMode(rowSelection);
+        this.rowService.setGetRowIdFn(context?.componentParent?.getRowId ?? null);
         this.cellService.applyColumnDefs(columnDefs, context);
-        this.columnService.initColumnDefs(defaultColumnDef, columnDefs, groupColumnDefs);
+        this.cellService.setGridApi(this);
+        this.columnService.initColumnDefs(defaultColumnDef, columnDefs, groupColumnDefs, context);
         const columnState = this.columnService.getColumnState();
         setTimeout(() => this.eventService.dispatchEvent('columnChanged', columnState));
     }
     /**
-     * Create Row Node & Clear All State IDS
+     * Replace every row, discarding selection and expansion.
+     *
+     * Use this when the rows represent something new. To swap the data while
+     * keeping what the user has selected and opened, use `updateRowData`.
      */
     setRowData(rowData) {
-        const validRowIds = new Set();
-        // Clear All State IDS
-        this.selectionService.deselectAll();
-        this.expansionService.clear();
-        // Build New Row Nodes
-        this.buildRowNodes(rowData, null, 0, validRowIds);
-        // Apply Filter
-        this.applyFilters();
-        // Remove invalid nodes from map
-        for (const rowId of this._originalRowNodes.keys()) {
-            if (!validRowIds.has(rowId)) {
-                this._originalRowNodes.delete(rowId);
-            }
-        }
+        this.rebuildRows(rowData, true);
     }
     /**
-     * Create Row Nodes & Not Clear State IDS
+     * Replace every row, keeping selection and expansion.
+     *
+     * State is keyed by row id, so this only preserves anything if the grid has a
+     * `context.componentParent.getRowId` — otherwise each rebuild mints new ids
+     * and there is nothing left to match against.
      */
     updateRowData(rowData) {
+        this.rebuildRows(rowData, false);
+    }
+    /**
+     * The one row-loading path. `setRowData` and `updateRowData` differed only in
+     * whether they cleared the state services first, so everything else — build,
+     * filter, prune — lives here once.
+     */
+    rebuildRows(rowData, resetState) {
+        if (this._destroyed)
+            return;
+        if (resetState) {
+            this.selectionService.deselectAll();
+            this.expansionService.clear();
+        }
         const validRowIds = new Set();
-        // Build New Row Nodes
         this.buildRowNodes(rowData, null, 0, validRowIds);
-        // Apply Filter
+        // Re-apply the active sort. `buildRowNodes` rebuilds the row list in the
+        // order the data arrived, so without this a data update silently returned
+        // the rows to that order while `sortModel` — and therefore the header's
+        // sort arrow — still said they were sorted. Sorting before filtering
+        // because filtering only sets visibility on whatever order this leaves.
+        if (this._sortModel.length > 0)
+            this.applySorting();
         this.applyFilters();
-        // Remove invalid nodes from map
-        for (const rowId of this._originalRowNodes.keys()) {
-            if (!validRowIds.has(rowId)) {
-                this._originalRowNodes.delete(rowId);
-            }
-        }
+        this.pruneRemovedNodes(validRowIds);
     }
     /**
      * Recursive Build Row Nodes (Optimized)
      */
     buildRowNodes(rowData, parent = null, level = 0, validRowIds = new Set(), expandedIds = new Set(this.expansionService.getExpandedIds()), collapsedIds = new Set(this.expansionService.getCollapsedIds()), selectedIds = new Set(this.selectionService.getSelectedIds())) {
         if (parent === null) {
-            this.rowNodes = [];
+            this._rowNodes = [];
             this._currentIndex = 0;
         }
         if (!rowData?.length)
@@ -806,7 +1252,11 @@ class OneGridApi {
                 }
             }
             const childrenExist = children && children.length >= 0;
-            node.group = this.masterDetail ? false : childrenExist;
+            // Coerced, because `childrenExist` is `children && children.length >= 0`
+            // — which is `null` for a row with no children field, not `false`. These
+            // are declared `boolean`, and assigning null made every consumer compare
+            // truthiness instead of the value.
+            node.group = this.masterDetail ? false : !!childrenExist;
             node.leaf = this.masterDetail ? true : !node.group;
             node.leafGroup = this.masterDetail ? false : (node.group && !childrenExist);
             node.expandable = this.masterDetail ? true : (node.group && !node.leafGroup);
@@ -814,11 +1264,11 @@ class OneGridApi {
             node.setExpanded(expandedIds.has(rowId) ? true : collapsedIds.has(rowId) ? false : defaultExpanded);
             node.setSelected(selectedIds.has(rowId));
             node.setCellStates(this.cellService.generateCellStates(node));
-            if (this.masterDetail && this.apiType === 'master') {
-                this.getDetailRowData({ data, node: node, successCallback: (detailRowData) => node.setDetailRowData(detailRowData) });
+            if (this.masterDetail && this._apiType === 'master') {
+                this._getDetailRowData({ data, node: node, successCallback: (detailRowData) => node.setDetailRowData(detailRowData) });
             }
             this._currentIndex++;
-            this.rowNodes.push(node);
+            this._rowNodes.push(node);
             nodes.push(node);
             node.children = this.treeData && childrenExist ? this.buildRowNodes(children || [], node, level + 1, validRowIds, expandedIds, collapsedIds, selectedIds) : [];
         }
@@ -830,19 +1280,37 @@ class OneGridApi {
     applyFilters() {
         const filters = this._activeFilters;
         const quick = this._quickFilterValue?.toLowerCase() ?? '';
-        this.rowNodes.forEach(node => filterTreeNode(node, filters, quick));
+        // The fields the grid actually shows. Without them the quick filter falls
+        // back to every property on the row, which lets a user match on data that
+        // has no column and never appears on screen.
+        const fields = this.quickFilterFields();
+        this._rowNodes.forEach(node => filterTreeNode(node, filters, quick, fields));
         this.refreshVisibleNodes();
     }
+    /**
+     * Which fields the quick filter searches: every column that has one.
+     *
+     * Empty while the columns are still being registered, in which case the
+     * helper falls back to searching the row — the same behaviour as before, and
+     * the only sensible answer when the grid does not yet know its columns.
+     */
+    quickFilterFields() {
+        return this.columnService
+            .getColumnState()
+            .columns
+            .map(column => column.field)
+            .filter((field) => !!field && field !== '_oneRowNumber');
+    }
     /**
      * Update Row Nodes Display
      */
-    refreshVisibleNodes() {
+    refreshVisibleNodes(dispatch = true) {
         if (this._destroyed)
             return;
         const visibleNodes = [];
         let rowNumber = 1;
         const visibilityCache = new Map();
-        for (const node of this.rowNodes) {
+        for (const node of this._rowNodes) {
             const parentVisible = node.parent ? visibilityCache.get(node.parent.rowId) : true;
             const isVisible = node.visible && parentVisible && (!node.parent || node.parent.expanded);
             visibilityCache.set(node.rowId, isVisible);
@@ -856,7 +1324,132 @@ class OneGridApi {
             }
         }
         this._visibleRowNodes = [...visibleNodes];
-        this.eventService.dispatchEvent('rowDataChanged', { nodes: visibleNodes });
+        if (dispatch)
+            this.eventService.dispatchEvent('rowDataChanged', { nodes: visibleNodes });
+    }
+    /**
+     * Replace the rows anchored to one edge of the grid.
+     *
+     * Pinned rows are deliberately kept out of `rowNodes` and
+     * `_originalRowNodes`: they are not data. Sorting, filtering, selection,
+     * expansion, pagination and the visible row count all ignore them, which is
+     * the whole point of a summary row. They render with the same column
+     * definitions, so renderers and value getters work as they do everywhere
+     * else.
+     */
+    setPinnedRowData(side, rowData) {
+        if (this._destroyed)
+            return;
+        for (const node of this._pinnedRowNodes[side])
+            node.destroy();
+        this._pinnedRowNodes[side] = (rowData ?? []).map((data, index) => {
+            // Ids are namespaced by side and position. They never collide with a data
+            // row's id, and they are stable across rebuilds, which keeps the rendered
+            // `data-cell-id` attributes stable too.
+            const node = new OneRowNode(`one-pinned-${side}-${index}`, data, index);
+            node.level = 0;
+            node.leaf = true;
+            node.visible = true;
+            node.setCellStates(this.cellService.generateCellStates(node));
+            return node;
+        });
+        this.eventService.dispatchEvent('pinnedRowDataChanged', {
+            side,
+            nodes: this._pinnedRowNodes[side],
+        });
+    }
+    /** The rows anchored to one edge. Read-only; change them with `setPinnedRowData`. */
+    getPinnedRowNodes(side) {
+        return this._pinnedRowNodes[side];
+    }
+    /**
+     * Row reordering
+     * --------------------------------------------------------------------------
+     *
+     * `_originalRowNodes` is the source of truth for row order: its insertion
+     * order is what `applySorting` falls back to when the sort model empties, and
+     * what a rebuild walks. `_rowNodes` is only the current display order. A move
+     * that touched one and not the other would either be undone by the next sort
+     * change or invisible until one happened, so both are rewritten together.
+     */
+    /**
+     * Whether the displayed order is the data order, and so whether a manual move
+     * would survive.
+     *
+     * @returns the reason reordering is unavailable, or `null` when it is fine.
+     */
+    getRowDragSuppressedReason() {
+        if (this.treeData)
+            return 'treeData';
+        if (this._sortModel.length > 0)
+            return 'sorted';
+        if (isFilterActive(this._activeFilters, this._quickFilterValue ?? ''))
+            return 'filtered';
+        return null;
+    }
+    /** Convenience inverse of {@link getRowDragSuppressedReason}. */
+    canReorderRows() {
+        return this.getRowDragSuppressedReason() === null;
+    }
+    /**
+     * Move a row from one position to another.
+     *
+     * Indices are positions in the grid's row order, the same order
+     * `getAllRowNodes()` returns. `targetIndex` is where the row ends up *after*
+     * it has been lifted out of `sourceIndex` — dragging row 0 to the bottom of a
+     * 5-row grid is `moveRow(0, 4)`, not `moveRow(0, 5)`.
+     *
+     * @returns `true` if the rows moved. `false` when the move was rejected —
+     *          out-of-range indices, a no-op, or an order the grid does not own
+     *          (see {@link getRowDragSuppressedReason}) — so a caller can tell a
+     *          refused move from an applied one.
+     */
+    moveRow(sourceIndex, targetIndex) {
+        if (this._destroyed)
+            return false;
+        if (!this.canReorderRows())
+            return false;
+        const order = [...this._originalRowNodes.values()];
+        if (!Number.isInteger(sourceIndex) || !Number.isInteger(targetIndex))
+            return false;
+        if (sourceIndex < 0 || sourceIndex >= order.length)
+            return false;
+        if (targetIndex < 0 || targetIndex >= order.length)
+            return false;
+        if (sourceIndex === targetIndex)
+            return false;
+        const [moved] = order.splice(sourceIndex, 1);
+        order.splice(targetIndex, 0, moved);
+        // Rebuilt rather than mutated: a Map preserves insertion order, and there
+        // is no way to reposition a key within one.
+        this._originalRowNodes = new Map(order.map(node => [node.rowId, node]));
+        this._rowNodes = order;
+        this.reindexRows();
+        this.eventService.dispatchEvent('rowOrderChanged', { nodes: this._visibleRowNodes, node: moved, fromIndex: sourceIndex, toIndex: targetIndex });
+        return true;
+    }
+    /**
+     * Move a row identified by id. Convenient when the caller holds a node rather
+     * than a position — the index it was built with goes stale after any move.
+     */
+    moveRowById(rowId, targetIndex) {
+        const sourceIndex = [...this._originalRowNodes.values()].findIndex(node => node.rowId === rowId);
+        return sourceIndex === -1 ? false : this.moveRow(sourceIndex, targetIndex);
+    }
+    /**
+     * Re-stamp `rowIndex` from the current order.
+     *
+     * Row index is denormalised onto every node, and half the grid reads it —
+     * cell params, the range selection, the detail lookup. Leaving it stale after
+     * a move puts every row below the drop point one out.
+     */
+    reindexRows() {
+        this._rowNodes.forEach((node, index) => node.setRowIndex(index));
+        // Silent: row numbers and the visible list have to be rebuilt, but the
+        // `rowDataChanged` that normally follows defers a frame and re-seeds detail
+        // rows. A keyboard drag fires one of these per arrow key, and `moveRow`
+        // announces itself through `rowOrderChanged` instead.
+        this.refreshVisibleNodes(false);
     }
     getVisibleRowNodes() {
         return this._visibleRowNodes;
@@ -865,17 +1458,19 @@ class OneGridApi {
      * Sorting Model Feature
      */
     onSortChanged(sortModel) {
-        this.sortModel = sortModel;
+        if (this._destroyed)
+            return;
+        this._sortModel = sortModel;
         this.applySorting();
-        this.eventService.dispatchEvent('sortChanged', { nodes: this.rowNodes });
+        this.eventService.dispatchEvent('sortChanged', { nodes: this._rowNodes });
     }
     applySorting() {
-        if (this.sortModel.length === 0) {
-            this.rowNodes = [...this._originalRowNodes.values()];
+        if (this._sortModel.length === 0) {
+            this._rowNodes = [...this._originalRowNodes.values()];
             return;
         }
-        this.rowNodes = [...this._originalRowNodes.values()].sort((a, b) => {
-            for (const sortItem of this.sortModel) {
+        this._rowNodes = [...this._originalRowNodes.values()].sort((a, b) => {
+            for (const sortItem of this._sortModel) {
                 const { colId, sort } = sortItem;
                 const valA = getFieldValue(a.data, colId);
                 const valB = getFieldValue(b.data, colId);
@@ -888,11 +1483,17 @@ class OneGridApi {
         });
     }
     compareValues(valA, valB, sortDirection) {
-        if (valA === null && valB === null)
+        // `undefined` has to be treated as empty alongside `null`: getFieldValue
+        // returns undefined for a missing field or an unresolved dotted path, and
+        // comparing undefined with < / > yields false both ways, which made such
+        // rows settle in whatever order the sort happened to encounter them.
+        const aEmpty = valA === null || valA === undefined;
+        const bEmpty = valB === null || valB === undefined;
+        if (aEmpty && bEmpty)
             return 0;
-        if (valA === null)
+        if (aEmpty)
             return sortDirection === 'asc' ? 1 : -1;
-        if (valB === null)
+        if (bEmpty)
             return sortDirection === 'asc' ? -1 : 1;
         if (typeof valA === 'string' && typeof valB === 'string') {
             const comparison = valA.localeCompare(valB, undefined, { numeric: true });
@@ -947,7 +1548,7 @@ class OneGridApi {
         const node = this.getRowNodeById(rowId);
         if (node) {
             if (this.selectionService.getSelectionMode() === 'single') {
-                this.rowNodes.forEach(rowNode => rowNode.setSelected(rowNode.rowId === node.rowId));
+                this._rowNodes.forEach(rowNode => rowNode.setSelected(rowNode.rowId === node.rowId));
                 this._originalRowNodes.forEach(rowNode => rowNode.setSelected(rowNode.rowId === node.rowId));
             }
             else {
@@ -972,13 +1573,13 @@ class OneGridApi {
      * Get & Set Functions
      */
     getAllRowNodes() {
-        return this.rowNodes?.length > 0 ? [...this.rowNodes] : [];
+        return this._rowNodes?.length > 0 ? [...this._rowNodes] : [];
     }
     getRowDataSelected() {
-        return this.rowNodes.filter(node => node.selected).map(node => ({ ...node.data }));
+        return this._rowNodes.filter(node => node.selected).map(node => ({ ...node.data }));
     }
     getSelectedRowNodes() {
-        const nodes = this.rowNodes.filter(node => node.selected);
+        const nodes = this._rowNodes.filter(node => node.selected);
         return nodes && nodes.length > 0 ? [...nodes] : [];
     }
     /**
@@ -988,6 +1589,8 @@ class OneGridApi {
         return this._activeFilters;
     }
     setFilterModel(model) {
+        if (this._destroyed)
+            return;
         this._activeFilters = model;
         this.applyFilters();
     }
@@ -998,76 +1601,69 @@ class OneGridApi {
      * Quick filter
      */
     setQuickFilter(value) {
+        if (this._destroyed)
+            return;
         this._quickFilterValue = (value || '').toLowerCase();
         this.applyFilters();
     }
     /**
-     * Validation Feature
+     * Run the column validators over one row.
+     *
+     * Rules run in order and stop at the first failure, so a field appears at
+     * most once. Fields that passed are absent rather than mapped to `null`.
+     *
+     * The row type comes from the grid's own `T` — this used to declare its own
+     * `<T>`, which shadowed the class parameter and let an `OneGridApi<Employee>`
+     * happily validate an unrelated shape against employee columns.
      */
     validateRow(row, columns) {
         const errors = {};
-        columns.forEach(col => {
-            // Only check columns with validationRule
-            if (!col.validationRules || col.validationRules.length === 0)
-                return;
-            const rules = col.validationRules;
-            for (const rule of rules) {
-                const error = rule(row[col.field], row);
+        for (const column of columns) {
+            // A column can only contribute an error if it has both rules and a field
+            // to key them under.
+            if (!column.field || !column.validationRules?.length)
+                continue;
+            for (const rule of column.validationRules) {
+                const error = rule(row[column.field], row);
                 if (error) {
-                    errors[col.field] = error;
-                    break; // stop at first error for this column
+                    errors[column.field] = error;
+                    break; // first failure per column wins
                 }
             }
-        });
+        }
         return errors;
     }
     /**
-     * Validate all rows and return both errors and a flag indicating if there are any errors
+     * Run the column validators over a whole dataset.
+     *
+     * Delegates to `validateRow` so the two can never disagree about what counts
+     * as invalid — they previously carried separate copies of the same loop.
      */
     validateAllRows(rowData, columns) {
-        const allErrors = rowData.map(row => {
-            const errors = {};
-            columns.forEach(col => {
-                if (!col.validationRules || col.validationRules.length === 0)
-                    return;
-                for (const rule of col.validationRules) {
-                    const error = rule(row[col.field], row);
-                    if (error) {
-                        errors[col.field] = error;
-                        break;
-                    }
-                }
-            });
-            return errors;
-        });
-        const hasErrors = allErrors.some(err => Object.keys(err).length > 0);
+        const allErrors = rowData.map(row => this.validateRow(row, columns));
+        const hasErrors = allErrors.some(errors => Object.keys(errors).length > 0);
         return { errors: allErrors, valid: !hasErrors, invalid: hasErrors };
     }
-    /** Traverse all nodes */
+    /**
+     * Traverse every node, depth-first, once each.
+     *
+     * `rowNodes` is already the flattened tree — `buildRowNodes` pushes every
+     * node into it as it descends — so walking it is the whole traversal. The
+     * previous implementation walked that flat list *and* recursed into
+     * `children`, visiting every nested node twice and every depth-3 node three
+     * times. `index` is the node's position in the flattened order, matching
+     * `node.rowIndex`, rather than its position among its siblings.
+     */
     forEachNode(callback) {
-        const visit = (nodes) => {
-            nodes.forEach((node, index) => {
-                callback(node, index);
-                if (node?.children?.length)
-                    visit(node.children);
-            });
-        };
-        visit(this.rowNodes);
+        this._rowNodes.forEach((node, index) => callback(node, index));
     }
-    /** Traverse only leaf nodes */
+    /** Traverse only leaf nodes, once each, in flattened order. */
     forEachLeafNode(callback) {
         let leafIndex = 0;
-        const visit = (nodes) => {
-            nodes.forEach(node => {
-                if (node.leaf) {
-                    callback(node, leafIndex++);
-                }
-                else if (node.group && node?.children?.length) {
-                    visit(node.children);
-                }
-            });
-        };
-        visit(this.rowNodes);
+        for (const node of this._rowNodes) {
+            if (node.leaf)
+                callback(node, leafIndex++);
+        }
     }
     getRowNodeById(rowId) {
         return this._originalRowNodes.get(rowId);
@@ -1081,8 +1677,25 @@ class OneGridApi {
     setGroupDefaultExpanded(defaultExpanded) {
         this.groupDefaultExpanded = defaultExpanded;
     }
+    /**
+     * Expansion state lives in two places, and they answer different questions.
+     *
+     * `OneGridExpansionService` records only *deliberate* changes — a click, or
+     * one of the methods below. It is an override layer: `buildRowNodes` consults
+     * it first and falls back to `groupDefaultExpanded` for every row the user
+     * has not touched. That is what lets a later `groupDefaultExpanded` change
+     * take effect, and what lets a collapse survive a rebuild.
+     *
+     * `node.expanded` is the resolved truth for a row, defaults included. Public
+     * reads report that; the override sets stay internal.
+     *
+     * The invariant the setters below maintain: `expanded` is only ever true for
+     * a node that can expand.
+     */
     toggleExpandAll(expanded) {
         this.forEachNode(node => {
+            if (!node.expandable)
+                return;
             node.setExpanded(expanded);
             this.expansionService.toggleExpanded(node.rowId, expanded);
         });
@@ -1090,7 +1703,7 @@ class OneGridApi {
     }
     setExpandedById(rowId, expanded) {
         const node = this._originalRowNodes.get(rowId);
-        if (node) {
+        if (node?.expandable) {
             node.setExpanded(expanded);
             this.expansionService.toggleExpanded(rowId, expanded);
         }
@@ -1100,7 +1713,7 @@ class OneGridApi {
         if (rowIds && rowIds.length > 0) {
             for (let rowId of rowIds) {
                 const node = this._originalRowNodes.get(rowId);
-                if (node) {
+                if (node?.expandable) {
                     node.setExpanded(expanded);
                     this.expansionService.toggleExpanded(rowId, expanded);
                 }
@@ -1108,20 +1721,32 @@ class OneGridApi {
             this.refreshVisibleNodes();
         }
     }
+    /**
+     * Every currently expanded row, in tree order.
+     *
+     * Derived from the nodes rather than read off the override record, so rows
+     * opened by `groupDefaultExpanded` are included — previously this returned
+     * only rows someone had explicitly toggled, and came back empty on first load
+     * while the first level was visibly open.
+     */
     getExpandedByIds() {
-        return Array.from(this.expansionService.getExpandedIds());
+        return this._rowNodes
+            .filter(node => node.expandable && node.expanded)
+            .map(node => node.rowId);
     }
     /**
      * Master Detail Feature
      */
     setDetailRowData(node, detailData) {
+        if (this._destroyed)
+            return;
         const rowNode = this.getRowNodeById(node.rowId);
         if (rowNode) {
             rowNode.setDetailRowData(detailData);
         }
     }
     setGetDetailRowData(getDetailRowData) {
-        this.getDetailRowData = getDetailRowData;
+        this._getDetailRowData = getDetailRowData;
     }
     /**
      * Columns State
@@ -1130,15 +1755,17 @@ class OneGridApi {
         return this.columnService.getColumnState();
     }
     setColumnDefs(columnDefs) {
+        if (this._destroyed)
+            return;
         this.columnService.setColumnDefs(columnDefs);
         const columnState = this.columnService.getColumnState();
-        this.cellService.applyColumnDefs(columnState.columns, this.context);
+        this.cellService.applyColumnDefs(columnState.columns, this._context);
         this.eventService.dispatchEvent('columnChanged', columnState);
     }
     updateColumn(id, changes) {
         this.columnService.updateColumnDef(id, changes);
         const columnState = this.columnService.getColumnState();
-        this.cellService.applyColumnDefs(columnState.columns, this.context);
+        this.cellService.applyColumnDefs(columnState.columns, this._context);
         this.eventService.dispatchEvent('columnChanged', columnState);
     }
     reorderColumnDefs(fromIndex, toIndex) {
@@ -1160,11 +1787,12 @@ class OneGridApi {
         collect(node);
         this.setSelectedByIds(Array.from(rowIds), selected);
     }
+    /**
+     * @deprecated Identical to `updateCellStates`. Kept as an alias so existing
+     * callers keep working; prefer `updateCellStates`, which says what it does.
+     */
     updateNodeStates(node) {
-        const rowNode = this.getRowNodeById(node.rowId);
-        if (rowNode) {
-            rowNode.cellStates = this.cellService.generateCellStates(rowNode);
-        }
+        this.updateCellStates(node);
     }
     updateCellState(node, column) {
         const rowNode = this.getRowNodeById(node.rowId);
@@ -1172,34 +1800,42 @@ class OneGridApi {
             rowNode.cellStates[column.field] = this.cellService.generateCellState(rowNode, column);
         }
     }
+    /**
+     * Recompute every cell of one row and repaint it.
+     *
+     * The repaint is the point: this is what a caller reaches for after mutating
+     * a row in place, and it used to regenerate the state and stop there. The
+     * body renders with OnPush, so nothing marked it dirty and the new state sat
+     * unread until some unrelated event happened to trigger change detection —
+     * which is why callers ended up nudging the grid with a synthetic DOM event.
+     */
     updateCellStates(node) {
+        if (this._destroyed)
+            return;
         const rowNode = this.getRowNodeById(node.rowId);
-        if (rowNode) {
-            rowNode.cellStates = this.cellService.generateCellStates(rowNode);
-        }
+        if (!rowNode)
+            return;
+        rowNode.cellStates = this.cellService.generateCellStates(rowNode);
+        this.eventService.dispatchEvent('cellStateChanged', { data: rowNode.data, node: rowNode });
     }
     /**
      * Handler that Reacts to Detail Changes
      */
+    /**
+     * Keep a master row's reserved height in step with its detail rows.
+     *
+     * Two listeners used to be registered here and thrown away: an empty
+     * `rowDataChanged` handler whose unsubscribe was never kept, and an
+     * `expandedChanged` handler whose body was entirely commented out. Both are
+     * gone — a listener with no behaviour is a leak with no upside.
+     */
     subscribeToDetailChanges(node) {
-        const unsubRowData = node.on('rowDataChanged', ({ node, data, previousData }) => {
-        });
-        // When detail data arrives
-        const unsubDetail = node.on('detailRowDataChanged', ({ node, detailRowData, previousDetailRowData }) => {
-            if (this.apiType === 'master') {
-                this._resolvedDetailRowHeight(node);
+        const unsubscribeDetail = node.on('detailRowDataChanged', ({ node }) => {
+            if (this._apiType === 'master') {
+                this.resolveDetailRowHeight(node);
             }
         });
-        // When row expands
-        const unsubExpand = node.on('expandedChanged', ({ node, expanded }) => {
-            // if (!expanded) return;
-            // // Only fetch if detail data not already loaded
-            // if (!node.detailRowData) {
-            //   this.getDetailRowData({ data: node.data, node, successCallback: (detailRowData) => node.setDetailRowData(detailRowData) });
-            // }
-        });
-        // // Cleanup when node is removed from grid
-        this.registerNodeCleanup(node.rowId, [unsubDetail, unsubExpand]);
+        this.registerNodeCleanup(node.rowId, [unsubscribeDetail]);
     }
     registerNodeCleanup(rowId, unsubs) {
         // Merge with any existing cleanups for this rowId
@@ -1211,7 +1847,14 @@ class OneGridApi {
         cleanups?.forEach(fn => fn());
         this._nodeCleanupMap.delete(rowId);
     }
-    // Call this when rows are removed
+    /**
+     * Drop nodes that are no longer in the data, releasing what they hold.
+     *
+     * This existed but was never called: `setRowData` and `updateRowData` each
+     * deleted straight out of `_originalRowNodes`, so a removed node kept its
+     * listeners and its entry in `_nodeCleanupMap` for the lifetime of the grid.
+     * Both now come through here, which unsubscribes and clears the node first.
+     */
     pruneRemovedNodes(validRowIds) {
         for (const [rowId, node] of this._originalRowNodes) {
             if (!validRowIds.has(rowId)) {
@@ -1222,58 +1865,427 @@ class OneGridApi {
         }
     }
     /**
-     * Resolve Detail Row Height
+     * Height a master row must reserve for its detail grid:
+     * rowHeight x clamp(rows, minRows, maxRows) + headerHeight.
      */
-    _resolvedDetailRowHeight(node) {
-        const minRows = this.detailCellRendererParams.detailGridOptions.detailRowHeightOptions.minRows;
-        const maxRows = this.detailCellRendererParams.detailGridOptions.detailRowHeightOptions.maxRows;
+    resolveDetailRowHeight(node) {
+        const heightOptions = this.detailCellRendererParams?.detailGridOptions?.detailRowHeightOptions;
+        // Reachable whenever masterDetail is on but detailCellRendererParams is
+        // incomplete; without the guard this threw from inside an event listener.
+        if (!heightOptions)
+            return;
+        const minRows = heightOptions.minRows;
+        const maxRows = heightOptions.maxRows;
         const minHeight = (this.rowHeight * minRows) + this.headerRowHeight;
         const maxHeight = (this.rowHeight * maxRows) + this.headerRowHeight;
         const rows = node.detailRowData && node.detailRowData.length ? node.detailRowData.length : 0;
         node.detailRowHeight = rows <= minRows ? minHeight : rows >= maxRows ? maxHeight : (this.rowHeight * rows) + this.headerRowHeight;
     }
     /**
-     * On Destroy
+     * Release everything the grid holds. Called by `OneGridComponent.ngOnDestroy`.
+     *
+     * The services are deliberately *not* nulled out any more. They are injected,
+     * Angular owns their lifetime, and nulling them only guaranteed a
+     * `TypeError` for any callback that arrived after teardown — a detail-row
+     * fetch resolving late, or the body's deferred update. `_destroyed` makes
+     * those calls no-ops instead, which is what a torn-down object should do.
      */
     destroy() {
         if (this._destroyed)
             return;
         this._destroyed = true;
-        this.rowNodes.forEach(node => {
-            node.children = [];
-            node.parent = null;
-        });
-        this.rowNodes = [];
+        // Unsubscribe every per-node listener before dropping the nodes.
+        for (const rowId of Array.from(this._nodeCleanupMap.keys())) {
+            this.cleanupNode(rowId);
+        }
+        // `destroy` drops the tree links and the listeners; the API no longer has
+        // to reach in and unpick each node itself.
+        this._originalRowNodes.forEach(node => node.destroy());
+        this._rowNodes.forEach(node => node.destroy());
+        for (const side of ['top', 'bottom']) {
+            this._pinnedRowNodes[side].forEach(node => node.destroy());
+            this._pinnedRowNodes[side] = [];
+        }
+        this._rowNodes = [];
+        this._visibleRowNodes = [];
         this._originalRowNodes.clear();
-        this._currentIndex = null;
-        // Clear services
-        if (this.selectionService) {
-            this.selectionService.deselectAll();
+        this._nodeCleanupMap.clear();
+        this._currentIndex = 0;
+        // Release the back-reference the cell service holds, so a torn-down api is
+        // not kept alive by the service that outlives this call.
+        this.cellService.setGridApi(null);
+        this.selectionService.deselectAll();
+        this.expansionService.clear();
+        this._activeFilters = [];
+        this._quickFilterValue = null;
+        this._sortModel = [];
+        this._context = null;
+        this.masterDetail = false;
+        this.treeData = false;
+        this.treeDataChildrenField = null;
+        this.groupDefaultExpanded = 0;
+        this.detailCellRendererParams = null;
+        this.detailRendererComponent = null;
+        this._getDetailRowData = null;
+    }
+    /** Whether `destroy` has run. Late callbacks check this before doing work. */
+    get destroyed() {
+        return this._destroyed;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridApi, deps: [{ token: OgColumnService }, { token: OneGridRowService }, { token: OneGridCellService }, { token: OneGridEventService }, { token: OneGridSelectionService }, { token: OneGridExpansionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridApi }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridApi, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OgColumnService }, { type: OneGridRowService }, { type: OneGridCellService }, { type: OneGridEventService }, { type: OneGridSelectionService }, { type: OneGridExpansionService }] });
+
+/** Pointer distance before a press becomes a drag. */
+const DRAG_THRESHOLD_PX = 4;
+/** How close to an edge auto-scroll kicks in, and how fast it goes. */
+const EDGE_ZONE_PX = 36;
+const EDGE_SPEED_PX = 12;
+/**
+ * Owns one row-drag gesture at a time.
+ *
+ * Built on pointer events rather than HTML5 drag-and-drop or the CDK's
+ * drag-drop:
+ *
+ * - HTML5 DnD does not fire for touch at all, and its drag image cannot be
+ *   styled to match the grid.
+ * - `cdkDropList` assumes every item it manages is in the DOM. Inside a virtual
+ *   scroll viewport rows unmount as they leave the buffer, so the list it
+ *   thinks it is sorting is only ever the visible window.
+ * - Pointer events cover mouse, touch and pen in one path, and pointer capture
+ *   keeps the gesture alive when the finger leaves the row it started on.
+ *
+ * Because rows are a fixed `itemSize`, the drop target is arithmetic on the
+ * pointer's Y rather than a hit test against row elements — which is also why
+ * it stays correct for rows that are scrolled out and not rendered.
+ */
+class OneGridRowDragService {
+    constructor() {
+        this.zone = inject(NgZone);
+        /** Live drag, for the body to render the handle state and the indicator. */
+        this.state$ = new BehaviorSubject(null);
+        /** Screen-reader narration for the keyboard path. */
+        this.announcement$ = new BehaviorSubject('');
+        this.context = null;
+        this.pointerId = null;
+        this.handle = null;
+        this.startY = 0;
+        this.armed = false;
+        this.lastClientY = 0;
+        this.scrollFrame = null;
+        /** A move already applied during this drag, so a cancel can undo it. */
+        this.appliedFrom = null;
+        this.handlePointerMove = (event) => {
+            if (this.pointerId === null || event.pointerId !== this.pointerId)
+                return;
+            if (!this.armed) {
+                if (Math.abs(event.clientY - this.startY) < DRAG_THRESHOLD_PX)
+                    return;
+                this.armed = true;
+                this.publish({ rowId: this.nodeAt(this.appliedFrom)?.rowId ?? '', fromIndex: this.appliedFrom, insertAt: this.appliedFrom, source: 'pointer' });
+            }
+            // Held so the auto-scroll loop can recompute the target as the viewport
+            // moves under a stationary finger.
+            this.lastClientY = event.clientY;
+            // Touch scrolling would otherwise pan the viewport out from under us.
+            event.preventDefault();
+            this.updateFromPointer();
+            this.updateAutoScroll();
+        };
+        this.handlePointerUp = (event) => {
+            if (this.pointerId === null || event.pointerId !== this.pointerId)
+                return;
+            const dragged = this.armed;
+            this.teardownPointer();
+            if (!dragged) {
+                this.reset();
+                return;
+            }
+            this.commit('pointer');
+        };
+        this.handlePointerCancel = () => {
+            this.teardownPointer();
+            this.cancel();
+        };
+        /** Escape aborts a pointer drag, the same as it does a keyboard one. */
+        this.handlePointerKeydown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            this.teardownPointer();
+            this.cancel();
+        };
+    }
+    attach(context) {
+        this.context = context;
+    }
+    get state() {
+        return this.state$.value;
+    }
+    get dragging() {
+        return this.state$.value !== null;
+    }
+    // -------------------------------------------------------------------------
+    // Pointer
+    // -------------------------------------------------------------------------
+    /**
+     * Begin a pointer drag. Nothing visible happens until the pointer has moved
+     * {@link DRAG_THRESHOLD_PX}, so a click on the handle — which is also the
+     * keyboard affordance — is not swallowed by a zero-distance drag.
+     */
+    startPointerDrag(event, node, handlers = {}) {
+        if (!this.context || this.dragging || this.pointerId !== null)
+            return;
+        // Secondary buttons open context menus; they are not a drag.
+        if (event.button !== 0)
+            return;
+        const index = this.indexOf(node);
+        if (index === -1)
+            return;
+        this.pointerId = event.pointerId;
+        this.handle = event.target;
+        this.startY = event.clientY;
+        this.lastClientY = event.clientY;
+        this.armed = false;
+        this.appliedFrom = index;
+        this.onEnd = handlers.onEnd;
+        this.handle.setPointerCapture?.(event.pointerId);
+        // Outside Angular: pointermove fires at the display's refresh rate and
+        // every one of them would otherwise run change detection over the grid.
+        // The few that change the drop target re-enter through `publish`.
+        this.zone.runOutsideAngular(() => {
+            document.addEventListener('pointermove', this.handlePointerMove, { passive: false });
+            document.addEventListener('pointerup', this.handlePointerUp);
+            document.addEventListener('pointercancel', this.handlePointerCancel);
+            document.addEventListener('keydown', this.handlePointerKeydown);
+        });
+    }
+    /**
+     * Turn the pointer's Y into an insertion boundary.
+     *
+     * Boundaries, not rows: the value is where the row would be *inserted*, so
+     * 0 is above the first row and `length` is below the last. Rounding rather
+     * than flooring puts the split at the middle of each row, which is what
+     * makes the indicator flip when you cross the halfway point.
+     */
+    updateFromPointer() {
+        const current = this.state$.value;
+        if (!this.context || !current)
+            return;
+        const rect = this.context.viewport.getBoundingClientRect();
+        const offset = this.lastClientY - rect.top + this.context.viewport.scrollTop;
+        const insertAt = this.clamp(Math.round(offset / this.context.itemSize), 0, this.context.nodes().length);
+        if (insertAt === current.insertAt)
+            return;
+        this.publish({ ...current, insertAt });
+    }
+    /**
+     * Scroll when the pointer sits near an edge, so rows outside the viewport
+     * are reachable without letting go. Runs on rAF while the pointer is parked
+     * in the zone, and re-derives the target each frame because the content
+     * moves while the pointer does not.
+     */
+    updateAutoScroll() {
+        if (!this.context)
+            return;
+        const rect = this.context.viewport.getBoundingClientRect();
+        const distanceToTop = this.lastClientY - rect.top;
+        const distanceToBottom = rect.bottom - this.lastClientY;
+        let delta = 0;
+        if (distanceToTop < EDGE_ZONE_PX)
+            delta = -EDGE_SPEED_PX;
+        else if (distanceToBottom < EDGE_ZONE_PX)
+            delta = EDGE_SPEED_PX;
+        if (delta === 0) {
+            this.stopAutoScroll();
+            return;
+        }
+        if (this.scrollFrame !== null)
+            return;
+        const step = () => {
+            if (!this.context || !this.dragging) {
+                this.stopAutoScroll();
+                return;
+            }
+            const viewport = this.context.viewport;
+            const before = viewport.scrollTop;
+            viewport.scrollTop = before + delta;
+            // Hit the end — nothing more to reveal, so stop burning frames.
+            if (viewport.scrollTop === before) {
+                this.stopAutoScroll();
+                return;
+            }
+            this.updateFromPointer();
+            this.scrollFrame = requestAnimationFrame(step);
+        };
+        this.scrollFrame = requestAnimationFrame(step);
+    }
+    stopAutoScroll() {
+        if (this.scrollFrame === null)
+            return;
+        cancelAnimationFrame(this.scrollFrame);
+        this.scrollFrame = null;
+    }
+    teardownPointer() {
+        this.stopAutoScroll();
+        if (this.handle && this.pointerId !== null) {
+            this.handle.releasePointerCapture?.(this.pointerId);
+        }
+        document.removeEventListener('pointermove', this.handlePointerMove);
+        document.removeEventListener('pointerup', this.handlePointerUp);
+        document.removeEventListener('pointercancel', this.handlePointerCancel);
+        document.removeEventListener('keydown', this.handlePointerKeydown);
+        this.pointerId = null;
+        this.handle = null;
+        this.armed = false;
+    }
+    // -------------------------------------------------------------------------
+    // Keyboard
+    //
+    // WCAG 2.5.7 Dragging Movements: anything achievable by dragging needs a
+    // single-pointer, non-dragging alternative. Arrow-key moves are that, and
+    // they are also simply how a keyboard user reorders a list.
+    // -------------------------------------------------------------------------
+    /** Space/Enter on the handle: pick the row up, or put it down. */
+    toggleKeyboardDrag(node, handlers = {}) {
+        if (!this.context)
+            return;
+        if (this.state$.value?.source === 'keyboard') {
+            this.commit('keyboard');
+            return;
+        }
+        if (this.dragging)
+            return;
+        const index = this.indexOf(node);
+        if (index === -1)
+            return;
+        this.appliedFrom = index;
+        this.onEnd = handlers.onEnd;
+        this.publish({ rowId: node.rowId, fromIndex: index, insertAt: index, source: 'keyboard' });
+        this.announce(`${this.describe(node, index)} grabbed. Use the arrow keys to move it, space to drop, escape to cancel.`);
+    }
+    /**
+     * Arrow keys move the row a position at a time, applying as they go.
+     *
+     * Applied rather than previewed because the row has to be seen to move: a
+     * keyboard user gets no drag image, and a preview line alone tells someone
+     * relying on a screen reader nothing about where the row now sits. Escape
+     * still restores the original position.
+     */
+    moveKeyboard(delta) {
+        const current = this.state$.value;
+        if (!this.context || current?.source !== 'keyboard')
+            return false;
+        const nodes = this.context.nodes();
+        const from = current.insertAt;
+        const to = this.clamp(from + delta, 0, nodes.length - 1);
+        if (to === from) {
+            this.announce(to === 0 ? 'Already at the top.' : 'Already at the bottom.');
+            return true;
+        }
+        if (!this.context.move(from, to))
+            return true;
+        this.publish({ ...current, insertAt: to });
+        const node = this.nodeAt(to);
+        this.announce(node ? `Moved to position ${to + 1} of ${nodes.length}.` : '');
+        return true;
+    }
+    // -------------------------------------------------------------------------
+    // Commit / cancel
+    // -------------------------------------------------------------------------
+    commit(source) {
+        const current = this.state$.value;
+        if (!this.context || !current) {
+            this.reset();
+            return;
+        }
+        const nodes = this.context.nodes();
+        // Pointer drags apply once, at the end. A boundary index becomes a row
+        // index by dropping one when the row travelled downwards, since lifting
+        // it out first shifts everything below it up.
+        if (source === 'pointer') {
+            const from = current.fromIndex;
+            const to = this.clamp(current.insertAt > from ? current.insertAt - 1 : current.insertAt, 0, nodes.length - 1);
+            const node = this.nodeAt(from);
+            if (node && to !== from && this.context.move(from, to)) {
+                this.finish({ node, fromIndex: from, toIndex: to, source });
+                return;
+            }
+            this.reset();
+            return;
         }
-        this.selectionService = null;
-        if (this.expansionService) {
-            this.expansionService.clear();
+        // Keyboard moves were applied as they happened; this only confirms.
+        const node = this.nodeAt(current.insertAt);
+        const moved = node && current.insertAt !== current.fromIndex;
+        this.announce(moved ? `Dropped at position ${current.insertAt + 1} of ${nodes.length}.` : 'Cancelled. Row returned to its original position.');
+        if (moved) {
+            this.finish({ node: node, fromIndex: current.fromIndex, toIndex: current.insertAt, source });
+            return;
+        }
+        this.reset();
+    }
+    /** Abort, restoring anything a keyboard drag already applied. */
+    cancel() {
+        const current = this.state$.value;
+        if (current?.source === 'keyboard' && this.context && current.insertAt !== current.fromIndex) {
+            this.context.move(current.insertAt, current.fromIndex);
+            this.announce('Cancelled. Row returned to its original position.');
+        }
+        else if (current) {
+            this.announce('Cancelled.');
+        }
+        this.reset();
+    }
+    finish(event) {
+        const done = this.onEnd;
+        this.reset();
+        this.zone.run(() => done?.(event));
+    }
+    reset() {
+        this.stopAutoScroll();
+        this.appliedFrom = null;
+        this.onEnd = undefined;
+        if (this.state$.value !== null) {
+            this.zone.run(() => this.state$.next(null));
         }
-        this.expansionService = null;
-        this.eventService = null;
-        this.rowService = null;
-        this.cellService = null;
-        // Clear filters, sorting, context
-        this._activeFilters = [];
-        this._quickFilterValue = null;
-        this.sortModel = [];
-        // Clear master/detail/treeData
-        this.masterDetail = false;
-        this.treeData = false;
-        this.treeDataChildrenField = '';
-        this.groupDefaultExpanded = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridApi, deps: [{ token: OgColumnService }, { token: OneGridRowService }, { token: OneGridCellService }, { token: OneGridEventService }, { token: OneGridSelectionService }, { token: OneGridExpansionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridApi }); }
+    // -------------------------------------------------------------------------
+    // Helpers
+    // -------------------------------------------------------------------------
+    publish(state) {
+        this.zone.run(() => this.state$.next(state));
+    }
+    announce(message) {
+        this.zone.run(() => this.announcement$.next(message));
+    }
+    describe(node, index) {
+        return `Row ${index + 1} of ${this.context?.nodes().length ?? 0},`;
+    }
+    indexOf(node) {
+        return this.context?.nodes().findIndex(candidate => candidate.rowId === node.rowId) ?? -1;
+    }
+    nodeAt(index) {
+        return this.context?.nodes()[index] ?? null;
+    }
+    clamp(value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    }
+    ngOnDestroy() {
+        this.teardownPointer();
+        this.state$.next(null);
+        this.state$.complete();
+        this.announcement$.complete();
+        this.context = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowDragService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridApi, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowDragService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: OgColumnService }, { type: OneGridRowService }, { type: OneGridCellService }, { type: OneGridEventService }, { type: OneGridSelectionService }, { type: OneGridExpansionService }] });
+        }] });
 
 class OneGridTreeDataService {
     create(tree, parentId, newNode) {
@@ -1334,6 +2346,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 const OnePageSizeOption = [25, 50, 100, 250];
 
+function resolveRowHeight(params, getRowHeight, rowHeight = 26) {
+    if (getRowHeight) {
+        const result = getRowHeight(params);
+        // fallback behavior like AG Grid
+        if (result == null) {
+            return rowHeight;
+        }
+        // guard against invalid values
+        return Math.max(1, result);
+    }
+    return rowHeight;
+}
+
 class HeaderCheckboxDisabledPipe {
     transform(rowNodes, selectionMode, allowedEdit) {
         return rowNodes?.length === 0 || selectionMode !== 'multiple' || !allowedEdit;
@@ -1384,6 +2409,8 @@ class OneGridCheckboxHeaderComponent {
         this.eventService = eventService;
         this.selectionService = selectionService;
         this.allowedEdit = false;
+        /** Unsubscribe callbacks for the two grid listeners below. */
+        this.teardown = [];
         this.state = 'unchecked';
         this.rowNodes = [];
     }
@@ -1392,19 +2419,26 @@ class OneGridCheckboxHeaderComponent {
         /**
          * Listen Row Node Selection Changed Event
          */
-        this.eventService.addEventListener('selectionChanged', (payload) => {
+        this.teardown.push(this.eventService.addEventListener('selectionChanged', (payload) => {
             this.rowNodes = this.api.getAllRowNodes();
             const rowIds = this.rowNodes && this.rowNodes.length > 0 ? this.rowNodes.map((node) => node.rowId) : [];
             this.state = this.selectionService.getSelectAllState(rowIds);
-        });
+        }));
         /**
          * Listen Row Data Changed Event
          */
-        this.eventService.addEventListener('rowDataChanged', (payload) => {
+        this.teardown.push(this.eventService.addEventListener('rowDataChanged', (payload) => {
             this.rowNodes = this.api.getAllRowNodes();
             const rowIds = this.rowNodes && this.rowNodes.length > 0 ? this.rowNodes.map((node) => node.rowId) : [];
             this.state = this.selectionService.getSelectAllState(rowIds);
-        });
+        }));
+    }
+    ngOnDestroy() {
+        // Both listeners were registered and never released. The component-scoped
+        // event service happened to clean up after them; relying on that left the
+        // component's own lifecycle incomplete.
+        this.teardown.forEach(unsubscribe => unsubscribe());
+        this.teardown.length = 0;
     }
     /**
      * Toggle Selection Action
@@ -1435,6 +2469,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class ColumnSortStatePipe {
+    // `readonly`, because this is fed straight from `api.sortModel`, which is
+    // now a readonly view rather than the mutable array it used to hand out.
     transform(field, sortModel) {
         if (!sortModel || !field)
             return null;
@@ -1452,16 +2488,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class OneGridHeaderComponent {
+    /**
+     * Horizontal offset of the body, mirrored here so the header tracks it.
+     *
+     * Applied to the viewport's `scrollLeft` rather than as a transform on the
+     * row: sticky positioning needs a real scrollport above it. The group row,
+     * which is a sibling of that viewport, still reads this for its transform.
+     */
+    set scrollLeft(value) {
+        this._scrollLeft = value ?? 0;
+        this.applyScrollLeft();
+    }
+    get scrollLeft() {
+        return this._scrollLeft;
+    }
     constructor(eventService, cdr) {
         this.eventService = eventService;
         this.cdr = cdr;
-        this.scrollLeft = 0;
+        this._scrollLeft = 0;
         this.allowedEdit = false;
         this.enableGroupColumnDefs = false;
         this.groupColumnDefs = [];
         this.columnDefs = [];
         this.sortModel = [];
-        this.destroy$ = new Subject();
         this.subscriptions = new Subscription();
         this.draggedIndex = null;
         // Track resize state
@@ -1503,6 +2552,16 @@ class OneGridHeaderComponent {
             // this.cdr.markForCheck();
         }));
     }
+    ngAfterViewInit() {
+        // The input setter can run before the view exists, so whatever arrived
+        // first is applied once here.
+        this.applyScrollLeft();
+    }
+    applyScrollLeft() {
+        if (this.headerViewport) {
+            this.headerViewport.nativeElement.scrollLeft = this._scrollLeft;
+        }
+    }
     onHeaderMenuOptionClick(columnDef) {
     }
     onHeaderMenuSortClick(colId) {
@@ -1528,7 +2587,12 @@ class OneGridHeaderComponent {
         this.resizing = true;
         this.resizeColumnIndex = columnIndex;
         this.startX = event.clientX;
-        this.startWidth = this.columnDefs[columnIndex].width;
+        // Measure what is on screen rather than trusting `col.width`, which is
+        // optional: a column sized purely by minWidth had `undefined` here, and
+        // `Math.max(50, undefined + deltaX)` is NaN — the column collapsed on the
+        // first mouse move and could not be recovered.
+        const columnElement = event.target?.closest('.one-grid-header-column');
+        this.startWidth = columnElement?.offsetWidth || resolveColumnWidth(this.columnDefs[columnIndex]);
         // Add document-level listeners for drag and release
         document.addEventListener('mousemove', this.onResizeMove);
         document.addEventListener('mouseup', this.onResizeEnd);
@@ -1561,19 +2625,27 @@ class OneGridHeaderComponent {
         event.preventDefault();
         this.draggedIndex = null;
     }
-    /**
-     * Clear All Subscriptions
-     */
     ngOnDestroy() {
-        this.destroy$.complete();
+        // This completed an unused Subject and left the real subscription running.
+        // It survived only because OneGridEventService is component-scoped and
+        // tears its own listeners down — the header was relying on that by accident.
+        this.subscriptions.unsubscribe();
+        // A resize in flight owns two listeners on `document`. Without this they
+        // outlive the component, and their closures keep it alive with them.
+        if (this.resizing) {
+            this.onResizeEnd();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridHeaderComponent, deps: [{ token: OneGridEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridHeaderComponent, selector: "one-grid-header", inputs: { scrollLeft: "scrollLeft", allowedEdit: "allowedEdit", enableGroupColumnDefs: "enableGroupColumnDefs", api: "api" }, ngImport: i0, template: "<div class=\"one-grid-header\">\n    @if (enableGroupColumnDefs) {\n        <div class=\"one-group-header-row\" [style.transform]=\"'translateX(-' + scrollLeft + 'px)'\">\n            <ng-container *ngTemplateOutlet=\"groupColumns; context: { groups: groupColumnDefs }\"></ng-container>\n        </div>\n    }\n    <div class=\"one-grid-header-viewport\">\n        <div class=\"one-header-row\" [style.transform]=\"'translateX(-' + scrollLeft + 'px)'\">\n            <ng-container *ngTemplateOutlet=\"headerColumns; context: { columns: columnDefs }\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Group Header Cell Template -->\n<ng-template #groupColumns let-groups=\"groups\">\n    @for(group of groups; track group.id) {\n        <div class=\"one-group-header-cell\"\n            [style.width.px]=\"group.width\"\n            [ngClass]=\"group._resolvedGroupClass\"\n            [ngStyle]=\"group._resolvedGroupStyle\">\n            <div class=\"one-group-header-cell-text\">\n                {{ group.headerName }}\n            </div>\n        </div>\n    }\n</ng-template>\n\n<!-- Header Cell Template -->\n<ng-template #headerColumns let-columns=\"columns\">\n    @for (col of columns; let colIndex = $index; track col.id) {\n        <div class=\"one-grid-header-column\"\n            [attr.data-index]=\"colIndex\"\n            [style.width.px]=\"col.width\"\n            [style.min-width.px]=\"col.minWidth\"\n            [style.max-width.px]=\"col.maxWidth\"\n            [draggable]=\"col?.dragable\"\n            (dragstart)=\"onDragColumnStart($event, colIndex)\"\n            (dragover)=\"onDragColumnOver($event, colIndex)\"\n            (dragend)=\"onDragColumnEnd($event)\"\n            (drop)=\"onDropColumn($event)\">\n            <div class=\"one-grid-header-cell\"\n                [ngClass]=\"col._resolvedHeaderClass\"\n                [ngStyle]=\"col._resolvedHeaderStyle\"\n                >\n                <span class=\"one-grid-header-cell-group\">\n                    @if (col?.headerCheckboxSelection) {\n                        <one-grid-checkbox-header\n                            [api]=\"api\"\n                            [allowedEdit]=\"allowedEdit\"\n                        />\n                    }\n\n                    {{ col?.headerName ?? '' }}\n                </span>\n\n                <!-- Og Resize Handler -->\n                @if (col?.resizable) {\n                    <div class=\"og-resize-handle\" (mousedown)=\"onResizeStart($event, colIndex)\">\n                        <i class=\"bi bi-grip-vertical\"></i>\n                    </div>\n                }\n\n                <div class=\"one-grid-header-cell-group\">\n\n                    <!-- Sort Menu Button -->\n                    @if (col?.sortable) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuSortClick(col.field)\">\n\n                            @if ((col.field | columnSortState:api.sortModel) === 'asc') {\n                                <lucide-icon name=\"arrow-up-a-z\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else if ((col.field | columnSortState:api.sortModel) === 'desc') {\n                                <lucide-icon name=\"arrow-down-z-a\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else {\n                                <lucide-icon name=\"arrow-down-up\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                        </div>\n                    }\n\n                    <!-- Og Option Menu Button -->\n                    @if (col && !col.suppressHeaderMenuButton) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuOptionClick(col)\">\n                            <i class=\"bi bi-three-dots-vertical\"></i>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: OneGridCheckboxHeaderComponent, selector: "one-grid-checkbox-header", inputs: ["api", "allowedEdit"] }, { kind: "pipe", type: ColumnSortStatePipe, name: "columnSortState" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridHeaderComponent, selector: "one-grid-header", inputs: { scrollLeft: "scrollLeft", allowedEdit: "allowedEdit", enableGroupColumnDefs: "enableGroupColumnDefs", api: "api" }, viewQueries: [{ propertyName: "headerViewport", first: true, predicate: ["headerViewport"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"one-grid-header\">\n    @if (enableGroupColumnDefs) {\n        <div class=\"one-group-header-row\" [style.transform]=\"'translateX(-' + scrollLeft + 'px)'\">\n            <ng-container *ngTemplateOutlet=\"groupColumns; context: { groups: groupColumnDefs }\"></ng-container>\n        </div>\n    }\n    <!-- The column row is scrolled rather than translated. `position: sticky`\n         resolves against the nearest scrollport, and a transformed ancestor is\n         not one \u2014 pinned headers could never hold their place inside it. The\n         group row above keeps its transform: groups span contiguous columns,\n         which pinning reorders, so the two features do not combine. -->\n    <div #headerViewport class=\"one-grid-header-viewport\">\n        <div class=\"one-header-row\">\n            <ng-container *ngTemplateOutlet=\"headerColumns; context: { columns: columnDefs }\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Group Header Cell Template -->\n<ng-template #groupColumns let-groups=\"groups\">\n    @for(group of groups; track group.id) {\n        <div class=\"one-group-header-cell\"\n            [style.width.px]=\"group.width\"\n            [ngClass]=\"group._resolvedGroupClass\"\n            [ngStyle]=\"group._resolvedGroupStyle\">\n            <div class=\"one-group-header-cell-text\">\n                {{ group.headerName }}\n            </div>\n        </div>\n    }\n</ng-template>\n\n<!-- Header Cell Template -->\n<ng-template #headerColumns let-columns=\"columns\">\n    @for (col of columns; let colIndex = $index; track col.id) {\n        <div class=\"one-grid-header-column\"\n            [attr.data-index]=\"colIndex\"\n            [class.one-column-pinned-left]=\"col.pinned === 'left'\"\n            [class.one-column-pinned-right]=\"col.pinned === 'right'\"\n        [class.one-column-pinned-edge]=\"col._pinnedEdge\"\n            [class.one-column-pinned-edge]=\"col._pinnedEdge\"\n            [style.left.px]=\"col.pinned === 'left' ? col._pinnedOffset : null\"\n            [style.right.px]=\"col.pinned === 'right' ? col._pinnedOffset : null\"\n            [style.width.px]=\"col.width\"\n            [style.min-width.px]=\"col.minWidth\"\n            [style.max-width.px]=\"col.maxWidth\"\n            [draggable]=\"col._resolvedDragable\"\n            (dragstart)=\"onDragColumnStart($event, colIndex)\"\n            (dragover)=\"onDragColumnOver($event, colIndex)\"\n            (dragend)=\"onDragColumnEnd($event)\"\n            (drop)=\"onDropColumn($event)\">\n            <div class=\"one-grid-header-cell\"\n                [ngClass]=\"col._resolvedHeaderClass\"\n                [ngStyle]=\"col._resolvedHeaderStyle\"\n                >\n                <span class=\"one-grid-header-cell-group\">\n                    @if (col?.headerCheckboxSelection) {\n                        <one-grid-checkbox-header\n                            [api]=\"api\"\n                            [allowedEdit]=\"allowedEdit\"\n                        />\n                    }\n\n                    {{ col?.headerName ?? '' }}\n                </span>\n\n                <!-- Og Resize Handler -->\n                @if (col._resolvedResizable) {\n                    <div class=\"og-resize-handle\" (mousedown)=\"onResizeStart($event, colIndex)\">\n                        <i class=\"bi bi-grip-vertical\"></i>\n                    </div>\n                }\n\n                <div class=\"one-grid-header-cell-group\">\n\n                    <!-- Sort Menu Button -->\n                    @if (col._resolvedSortable) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuSortClick(col.field)\">\n\n                            @if ((col.field | columnSortState:api.sortModel) === 'asc') {\n                                <lucide-icon name=\"arrow-up-a-z\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else if ((col.field | columnSortState:api.sortModel) === 'desc') {\n                                <lucide-icon name=\"arrow-down-z-a\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else {\n                                <lucide-icon name=\"arrow-down-up\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                        </div>\n                    }\n\n                    <!-- Og Option Menu Button -->\n                    @if (col && !col._resolvedSuppressHeaderMenuButton) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuOptionClick(col)\">\n                            <i class=\"bi bi-three-dots-vertical\"></i>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: OneGridCheckboxHeaderComponent, selector: "one-grid-checkbox-header", inputs: ["api", "allowedEdit"] }, { kind: "pipe", type: ColumnSortStatePipe, name: "columnSortState" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-header', template: "<div class=\"one-grid-header\">\n    @if (enableGroupColumnDefs) {\n        <div class=\"one-group-header-row\" [style.transform]=\"'translateX(-' + scrollLeft + 'px)'\">\n            <ng-container *ngTemplateOutlet=\"groupColumns; context: { groups: groupColumnDefs }\"></ng-container>\n        </div>\n    }\n    <div class=\"one-grid-header-viewport\">\n        <div class=\"one-header-row\" [style.transform]=\"'translateX(-' + scrollLeft + 'px)'\">\n            <ng-container *ngTemplateOutlet=\"headerColumns; context: { columns: columnDefs }\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Group Header Cell Template -->\n<ng-template #groupColumns let-groups=\"groups\">\n    @for(group of groups; track group.id) {\n        <div class=\"one-group-header-cell\"\n            [style.width.px]=\"group.width\"\n            [ngClass]=\"group._resolvedGroupClass\"\n            [ngStyle]=\"group._resolvedGroupStyle\">\n            <div class=\"one-group-header-cell-text\">\n                {{ group.headerName }}\n            </div>\n        </div>\n    }\n</ng-template>\n\n<!-- Header Cell Template -->\n<ng-template #headerColumns let-columns=\"columns\">\n    @for (col of columns; let colIndex = $index; track col.id) {\n        <div class=\"one-grid-header-column\"\n            [attr.data-index]=\"colIndex\"\n            [style.width.px]=\"col.width\"\n            [style.min-width.px]=\"col.minWidth\"\n            [style.max-width.px]=\"col.maxWidth\"\n            [draggable]=\"col?.dragable\"\n            (dragstart)=\"onDragColumnStart($event, colIndex)\"\n            (dragover)=\"onDragColumnOver($event, colIndex)\"\n            (dragend)=\"onDragColumnEnd($event)\"\n            (drop)=\"onDropColumn($event)\">\n            <div class=\"one-grid-header-cell\"\n                [ngClass]=\"col._resolvedHeaderClass\"\n                [ngStyle]=\"col._resolvedHeaderStyle\"\n                >\n                <span class=\"one-grid-header-cell-group\">\n                    @if (col?.headerCheckboxSelection) {\n                        <one-grid-checkbox-header\n                            [api]=\"api\"\n                            [allowedEdit]=\"allowedEdit\"\n                        />\n                    }\n\n                    {{ col?.headerName ?? '' }}\n                </span>\n\n                <!-- Og Resize Handler -->\n                @if (col?.resizable) {\n                    <div class=\"og-resize-handle\" (mousedown)=\"onResizeStart($event, colIndex)\">\n                        <i class=\"bi bi-grip-vertical\"></i>\n                    </div>\n                }\n\n                <div class=\"one-grid-header-cell-group\">\n\n                    <!-- Sort Menu Button -->\n                    @if (col?.sortable) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuSortClick(col.field)\">\n\n                            @if ((col.field | columnSortState:api.sortModel) === 'asc') {\n                                <lucide-icon name=\"arrow-up-a-z\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else if ((col.field | columnSortState:api.sortModel) === 'desc') {\n                                <lucide-icon name=\"arrow-down-z-a\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else {\n                                <lucide-icon name=\"arrow-down-up\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                        </div>\n                    }\n\n                    <!-- Og Option Menu Button -->\n                    @if (col && !col.suppressHeaderMenuButton) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuOptionClick(col)\">\n                            <i class=\"bi bi-three-dots-vertical\"></i>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: OneGridEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { scrollLeft: [{
+            args: [{ standalone: false, selector: 'one-grid-header', template: "<div class=\"one-grid-header\">\n    @if (enableGroupColumnDefs) {\n        <div class=\"one-group-header-row\" [style.transform]=\"'translateX(-' + scrollLeft + 'px)'\">\n            <ng-container *ngTemplateOutlet=\"groupColumns; context: { groups: groupColumnDefs }\"></ng-container>\n        </div>\n    }\n    <!-- The column row is scrolled rather than translated. `position: sticky`\n         resolves against the nearest scrollport, and a transformed ancestor is\n         not one \u2014 pinned headers could never hold their place inside it. The\n         group row above keeps its transform: groups span contiguous columns,\n         which pinning reorders, so the two features do not combine. -->\n    <div #headerViewport class=\"one-grid-header-viewport\">\n        <div class=\"one-header-row\">\n            <ng-container *ngTemplateOutlet=\"headerColumns; context: { columns: columnDefs }\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<!-- Group Header Cell Template -->\n<ng-template #groupColumns let-groups=\"groups\">\n    @for(group of groups; track group.id) {\n        <div class=\"one-group-header-cell\"\n            [style.width.px]=\"group.width\"\n            [ngClass]=\"group._resolvedGroupClass\"\n            [ngStyle]=\"group._resolvedGroupStyle\">\n            <div class=\"one-group-header-cell-text\">\n                {{ group.headerName }}\n            </div>\n        </div>\n    }\n</ng-template>\n\n<!-- Header Cell Template -->\n<ng-template #headerColumns let-columns=\"columns\">\n    @for (col of columns; let colIndex = $index; track col.id) {\n        <div class=\"one-grid-header-column\"\n            [attr.data-index]=\"colIndex\"\n            [class.one-column-pinned-left]=\"col.pinned === 'left'\"\n            [class.one-column-pinned-right]=\"col.pinned === 'right'\"\n        [class.one-column-pinned-edge]=\"col._pinnedEdge\"\n            [class.one-column-pinned-edge]=\"col._pinnedEdge\"\n            [style.left.px]=\"col.pinned === 'left' ? col._pinnedOffset : null\"\n            [style.right.px]=\"col.pinned === 'right' ? col._pinnedOffset : null\"\n            [style.width.px]=\"col.width\"\n            [style.min-width.px]=\"col.minWidth\"\n            [style.max-width.px]=\"col.maxWidth\"\n            [draggable]=\"col._resolvedDragable\"\n            (dragstart)=\"onDragColumnStart($event, colIndex)\"\n            (dragover)=\"onDragColumnOver($event, colIndex)\"\n            (dragend)=\"onDragColumnEnd($event)\"\n            (drop)=\"onDropColumn($event)\">\n            <div class=\"one-grid-header-cell\"\n                [ngClass]=\"col._resolvedHeaderClass\"\n                [ngStyle]=\"col._resolvedHeaderStyle\"\n                >\n                <span class=\"one-grid-header-cell-group\">\n                    @if (col?.headerCheckboxSelection) {\n                        <one-grid-checkbox-header\n                            [api]=\"api\"\n                            [allowedEdit]=\"allowedEdit\"\n                        />\n                    }\n\n                    {{ col?.headerName ?? '' }}\n                </span>\n\n                <!-- Og Resize Handler -->\n                @if (col._resolvedResizable) {\n                    <div class=\"og-resize-handle\" (mousedown)=\"onResizeStart($event, colIndex)\">\n                        <i class=\"bi bi-grip-vertical\"></i>\n                    </div>\n                }\n\n                <div class=\"one-grid-header-cell-group\">\n\n                    <!-- Sort Menu Button -->\n                    @if (col._resolvedSortable) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuSortClick(col.field)\">\n\n                            @if ((col.field | columnSortState:api.sortModel) === 'asc') {\n                                <lucide-icon name=\"arrow-up-a-z\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else if ((col.field | columnSortState:api.sortModel) === 'desc') {\n                                <lucide-icon name=\"arrow-down-z-a\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                            @else {\n                                <lucide-icon name=\"arrow-down-up\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                            }\n                        </div>\n                    }\n\n                    <!-- Og Option Menu Button -->\n                    @if (col && !col._resolvedSuppressHeaderMenuButton) {\n                        <div class=\"one-grid-header-menu-button\" (click)=\"onHeaderMenuOptionClick(col)\">\n                            <i class=\"bi bi-three-dots-vertical\"></i>\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: OneGridEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { headerViewport: [{
+                type: ViewChild,
+                args: ['headerViewport', { static: true }]
+            }], scrollLeft: [{
                 type: Input
             }], allowedEdit: [{
                 type: Input
@@ -1654,31 +2726,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-class CellDisableResolverPipe {
-    transform(node, column, context, allowedEdit) {
-        if (!column || !node)
-            return false;
-        return resolveOneCellRendererParams(column.disable, {
-            node,
-            data: node.data,
-            columnDef: column,
-            rowIndex: node.rowIndex,
-            context
-        }) || !allowedEdit;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellDisableResolverPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellDisableResolverPipe, name: "cellDisableResolver" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellDisableResolverPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellDisableResolver'
-                }]
-        }] });
-
 class OneGridRowActionComponent {
-    constructor() {
+    constructor(cellService) {
+        this.cellService = cellService;
         this.allowedEdit = false;
         this.masterDetail = false;
         this.masterNode = null;
@@ -1701,6 +2751,51 @@ class OneGridRowActionComponent {
         this.onRowOption = new EventEmitter();
         this.onRowLanguage = new EventEmitter();
         this.onRowCellOption = new EventEmitter();
+        /**
+         * Accessible names for the action buttons.
+         *
+         * Every one of them is an icon with no text, and none carried a label — a
+         * screen reader announced "button" and nothing more, fourteen times per row.
+         * These are also the `title`, so the icons are identifiable by pointer too.
+         */
+        this.labels = {
+            gotoDetail: 'Open detail',
+            addNew: 'Add new row',
+            view: 'View row',
+            location: 'Show location',
+            document: 'Open document',
+            copy: 'Copy row',
+            delete: 'Delete row',
+            gotoList: 'Open list',
+            edit: 'Edit row',
+            print: 'Print row',
+            history: 'View history',
+            option: 'Row options',
+            language: 'Change language',
+            cellOption: 'Cell options',
+        };
+    }
+    /**
+     * Whether this column's action buttons are hidden for this row.
+     *
+     * The templates read `column?.hideActionButton` directly, which is truthy for
+     * any function — so a predicate asking to hide the buttons showed them, and
+     * one asking to show them showed them too. Resolved here instead, with the
+     * same params every other row-scoped predicate gets.
+     */
+    get hideActionButton() {
+        return this.cellService.hideActionButtonFn(this.column, this.node);
+    }
+    /**
+     * Whether this column's action buttons are disabled for this row.
+     *
+     * `disable` used to be resolved by `CellDisableResolverPipe`, which built its
+     * own params — a different set from every other row-scoped predicate. It goes
+     * through the shared builder now, so `disable` sees exactly what `editable`
+     * and `hideActionButton` see.
+     */
+    get actionDisabled() {
+        return this.cellService.disableFn(this.column, this.node) || !this.allowedEdit;
     }
     ngOnInit() {
         this.detailActiveExcludeLevels = new Set(this.column.cellRendererParams?.detailActiveExcludeLevels ?? []);
@@ -1811,13 +2906,13 @@ class OneGridRowActionComponent {
         }
         this.onRowCellOption.emit(data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridRowActionComponent, selector: "one-grid-row-action", inputs: { column: "column", node: "node", allowedEdit: "allowedEdit", masterDetail: "masterDetail", masterNode: "masterNode", cellRendererParams: "cellRendererParams", gridType: "gridType", context: "context" }, outputs: { onRowGotoDetail: "onRowGotoDetail", onRowAddNew: "onRowAddNew", onRowView: "onRowView", onRowLocation: "onRowLocation", onRowDocument: "onRowDocument", onRowCopy: "onRowCopy", onRowDelete: "onRowDelete", onRowGotoList: "onRowGotoList", onRowEdit: "onRowEdit", onRowPrint: "onRowPrint", onRowHistory: "onRowHistory", onRowOption: "onRowOption", onRowLanguage: "onRowLanguage", onRowCellOption: "onRowCellOption" }, ngImport: i0, template: "@if ((cellRendererParams && node?.leaf && !column?.autoGroupField && !(node.group && node.leafGroup)) || (column?.rowActionLevels?.includes(node.level) && column?.autoGroupField)) {\n    <div class=\"btn-action-container\">\n\n        <!-- Expansion Button Status -->\n         @if ((cellRendererParams?.detailActiveButtonStatus == 1 && !(detailActiveExcludeLevels?.has(node.level)))) {\n            <a\n                class=\"me-2\"\n                [attr.aria-label]=\"node.detailActive ? 'Collapse row' : 'Expand row'\"\n                [title]=\"node.detailActive ? 'Collapse' : 'Expand'\"\n                (click)=\"invokeRowToggleDetailActiveExpand(node)\">\n\n                <i class=\"bi\" [ngClass]=\"{ 'bi-chevron-down': node.detailActive, 'bi-chevron-right': !node.detailActive }\"></i>\n            </a>\n        }\n\n        <!-- Goto Detail Button Status -->\n        @if ((cellRendererParams?.gotoDetailButtonStatus == 1 && !(gotoDetailExcludeLevels?.has(node.level))) && (!column?.hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionGotoDetail(node, column)\">\n\n                <i class=\"bi bi-list-task\"></i>\n            </button>\n        }\n\n        <!-- Add New Button Status -->\n        @if ((cellRendererParams?.addNewButtonStatus == 1 && !(addNewExcludeLevels?.has(node.level))) && (!column?.hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"!allowedEdit\"\n                (click)=\"invokeRowActionAddNew(node, column)\">\n\n                <i class=\"bi bi-plus\"></i>\n            </button>\n        }\n\n        <!-- View Button Status -->\n        @if (cellRendererParams?.viewButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionView(node, column)\">\n\n                <i class=\"bi bi-eye\"></i>\n            </button>\n        }\n        @if (cellRendererParams?.locationButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionLocation(node, column)\">\n\n                <i class=\"bi bi-geo-alt\"></i>\n            </button>\n        }\n\n        <!-- Document Button Status -->\n        @if (cellRendererParams?.documentButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionDocument(node, column)\">\n\n                <i class=\"bi bi-file-earmark-text\"></i>\n            </button>\n        }\n\n        <!-- Copy Button Status -->\n        @if (cellRendererParams?.copyButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionCopy(node, column)\">\n\n                <i class=\"bi bi-files\"></i>\n            </button>\n        }\n\n\n        <!-- Delete Button Status -->\n         @if (cellRendererParams?.deleteButtonStatus == 1 && (!column?.hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-danger\"\n                [class.disabled]=\"!allowedEdit\"\n                (click)=\"invokeRowActionDelete(node, column)\">\n\n                <i class=\"bi bi-trash3\"></i>\n            </button>\n        }\n\n        <!-- Goto List Button Status -->\n        @if (cellRendererParams?.gotoListButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-success\"\n                (click)=\"invokeRowActionGotoList(node, column)\">\n\n                <i class=\"bi bi-list-ul\"></i>\n            </button>\n        }\n\n        <!-- Edit Button Status -->\n        @if (cellRendererParams?.editButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionEdit(node, column)\">\n\n                <i class=\"bi bi-pencil\"></i>\n            </button>\n        }\n\n        <!-- Print Button Status -->\n        @if (cellRendererParams?.printButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionPrint(node, column)\">\n\n                <i class=\"bi bi-printer\"></i>\n            </button>\n        }\n\n        <!-- History Button Status -->\n        @if (cellRendererParams?.historyButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionHistory(node, column)\">\n\n                <i class=\"bi bi-clock-history\"></i>\n            </button>\n        }\n\n        <!-- Option Button Status -->\n        @if (cellRendererParams?.optionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n\n        <!-- Language Button Status -->\n        @if (cellRendererParams?.languageButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionLanguage(node, column)\">\n\n                <i class=\"bi bi-translate\"></i>\n            </button>\n        }\n\n        <!-- Cell Optoion Button Status (Context Menu) -->\n        @if (cellRendererParams?.cellOptionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary border-0 text-body\"\n                [style.background]=\"'transparent'\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionCellOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n    </div>\n}", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CellDisableResolverPipe, name: "cellDisableResolver" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowActionComponent, deps: [{ token: OneGridCellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridRowActionComponent, selector: "one-grid-row-action", inputs: { column: "column", node: "node", allowedEdit: "allowedEdit", masterDetail: "masterDetail", masterNode: "masterNode", cellRendererParams: "cellRendererParams", gridType: "gridType", context: "context" }, outputs: { onRowGotoDetail: "onRowGotoDetail", onRowAddNew: "onRowAddNew", onRowView: "onRowView", onRowLocation: "onRowLocation", onRowDocument: "onRowDocument", onRowCopy: "onRowCopy", onRowDelete: "onRowDelete", onRowGotoList: "onRowGotoList", onRowEdit: "onRowEdit", onRowPrint: "onRowPrint", onRowHistory: "onRowHistory", onRowOption: "onRowOption", onRowLanguage: "onRowLanguage", onRowCellOption: "onRowCellOption" }, ngImport: i0, template: "@if ((cellRendererParams && node?.leaf && !column?.autoGroupField && !(node.group && node.leafGroup)) || (column?.rowActionLevels?.includes(node.level) && column?.autoGroupField)) {\n    <div class=\"btn-action-container\">\n\n        <!-- Expansion Button Status -->\n         @if ((cellRendererParams?.detailActiveButtonStatus == 1 && !(detailActiveExcludeLevels?.has(node.level)))) {\n            <!-- A button, not an <a> with a click handler: it has no href, so\n                 it was neither focusable nor operable from the keyboard. -->\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-plain me-2\"\n                [attr.aria-expanded]=\"node.detailActive\"\n                [attr.aria-label]=\"node.detailActive ? 'Collapse row' : 'Expand row'\"\n                [title]=\"node.detailActive ? 'Collapse' : 'Expand'\"\n                (click)=\"invokeRowToggleDetailActiveExpand(node)\">\n\n                <i class=\"bi\" [ngClass]=\"{ 'bi-chevron-down': node.detailActive, 'bi-chevron-right': !node.detailActive }\"></i>\n            </button>\n        }\n\n        <!-- Goto Detail Button Status -->\n        @if ((cellRendererParams?.gotoDetailButtonStatus == 1 && !(gotoDetailExcludeLevels?.has(node.level))) && (!hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.gotoDetail\"\n                [title]=\"labels.gotoDetail\"\n                (click)=\"invokeRowActionGotoDetail(node, column)\">\n\n                <i class=\"bi bi-list-task\"></i>\n            </button>\n        }\n\n        <!-- Add New Button Status -->\n        @if ((cellRendererParams?.addNewButtonStatus == 1 && !(addNewExcludeLevels?.has(node.level))) && (!hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.addNew\"\n                [title]=\"labels.addNew\"\n                (click)=\"invokeRowActionAddNew(node, column)\">\n\n                <i class=\"bi bi-plus\"></i>\n            </button>\n        }\n\n        <!-- View Button Status -->\n        @if (cellRendererParams?.viewButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.view\"\n                [title]=\"labels.view\"\n                (click)=\"invokeRowActionView(node, column)\">\n\n                <i class=\"bi bi-eye\"></i>\n            </button>\n        }\n        @if (cellRendererParams?.locationButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.location\"\n                [title]=\"labels.location\"\n                (click)=\"invokeRowActionLocation(node, column)\">\n\n                <i class=\"bi bi-geo-alt\"></i>\n            </button>\n        }\n\n        <!-- Document Button Status -->\n        @if (cellRendererParams?.documentButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.document\"\n                [title]=\"labels.document\"\n                (click)=\"invokeRowActionDocument(node, column)\">\n\n                <i class=\"bi bi-file-earmark-text\"></i>\n            </button>\n        }\n\n        <!-- Copy Button Status -->\n        @if (cellRendererParams?.copyButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.copy\"\n                [title]=\"labels.copy\"\n                (click)=\"invokeRowActionCopy(node, column)\">\n\n                <i class=\"bi bi-files\"></i>\n            </button>\n        }\n\n\n        <!-- Delete Button Status -->\n         @if (cellRendererParams?.deleteButtonStatus == 1 && (!hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-danger\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.delete\"\n                [title]=\"labels.delete\"\n                (click)=\"invokeRowActionDelete(node, column)\">\n\n                <i class=\"bi bi-trash3\"></i>\n            </button>\n        }\n\n        <!-- Goto List Button Status -->\n        @if (cellRendererParams?.gotoListButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-success\"\n                [attr.aria-label]=\"labels.gotoList\"\n                [title]=\"labels.gotoList\"\n                (click)=\"invokeRowActionGotoList(node, column)\">\n\n                <i class=\"bi bi-list-ul\"></i>\n            </button>\n        }\n\n        <!-- Edit Button Status -->\n        @if (cellRendererParams?.editButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.edit\"\n                [title]=\"labels.edit\"\n                (click)=\"invokeRowActionEdit(node, column)\">\n\n                <i class=\"bi bi-pencil\"></i>\n            </button>\n        }\n\n        <!-- Print Button Status -->\n        @if (cellRendererParams?.printButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.print\"\n                [title]=\"labels.print\"\n                (click)=\"invokeRowActionPrint(node, column)\">\n\n                <i class=\"bi bi-printer\"></i>\n            </button>\n        }\n\n        <!-- History Button Status -->\n        @if (cellRendererParams?.historyButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.history\"\n                [title]=\"labels.history\"\n                (click)=\"invokeRowActionHistory(node, column)\">\n\n                <i class=\"bi bi-clock-history\"></i>\n            </button>\n        }\n\n        <!-- Option Button Status -->\n        @if (cellRendererParams?.optionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.option\"\n                [title]=\"labels.option\"\n                (click)=\"invokeRowActionOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n\n        <!-- Language Button Status -->\n        @if (cellRendererParams?.languageButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.language\"\n                [title]=\"labels.language\"\n                (click)=\"invokeRowActionLanguage(node, column)\">\n\n                <i class=\"bi bi-translate\"></i>\n            </button>\n        }\n\n        <!-- Cell Optoion Button Status (Context Menu) -->\n        @if (cellRendererParams?.cellOptionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary border-0 text-body\"\n                [style.background]=\"'transparent'\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.cellOption\"\n                [title]=\"labels.cellOption\"\n                (click)=\"invokeRowActionCellOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n    </div>\n}", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowActionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-row-action', template: "@if ((cellRendererParams && node?.leaf && !column?.autoGroupField && !(node.group && node.leafGroup)) || (column?.rowActionLevels?.includes(node.level) && column?.autoGroupField)) {\n    <div class=\"btn-action-container\">\n\n        <!-- Expansion Button Status -->\n         @if ((cellRendererParams?.detailActiveButtonStatus == 1 && !(detailActiveExcludeLevels?.has(node.level)))) {\n            <a\n                class=\"me-2\"\n                [attr.aria-label]=\"node.detailActive ? 'Collapse row' : 'Expand row'\"\n                [title]=\"node.detailActive ? 'Collapse' : 'Expand'\"\n                (click)=\"invokeRowToggleDetailActiveExpand(node)\">\n\n                <i class=\"bi\" [ngClass]=\"{ 'bi-chevron-down': node.detailActive, 'bi-chevron-right': !node.detailActive }\"></i>\n            </a>\n        }\n\n        <!-- Goto Detail Button Status -->\n        @if ((cellRendererParams?.gotoDetailButtonStatus == 1 && !(gotoDetailExcludeLevels?.has(node.level))) && (!column?.hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionGotoDetail(node, column)\">\n\n                <i class=\"bi bi-list-task\"></i>\n            </button>\n        }\n\n        <!-- Add New Button Status -->\n        @if ((cellRendererParams?.addNewButtonStatus == 1 && !(addNewExcludeLevels?.has(node.level))) && (!column?.hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"!allowedEdit\"\n                (click)=\"invokeRowActionAddNew(node, column)\">\n\n                <i class=\"bi bi-plus\"></i>\n            </button>\n        }\n\n        <!-- View Button Status -->\n        @if (cellRendererParams?.viewButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionView(node, column)\">\n\n                <i class=\"bi bi-eye\"></i>\n            </button>\n        }\n        @if (cellRendererParams?.locationButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionLocation(node, column)\">\n\n                <i class=\"bi bi-geo-alt\"></i>\n            </button>\n        }\n\n        <!-- Document Button Status -->\n        @if (cellRendererParams?.documentButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionDocument(node, column)\">\n\n                <i class=\"bi bi-file-earmark-text\"></i>\n            </button>\n        }\n\n        <!-- Copy Button Status -->\n        @if (cellRendererParams?.copyButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                (click)=\"invokeRowActionCopy(node, column)\">\n\n                <i class=\"bi bi-files\"></i>\n            </button>\n        }\n\n\n        <!-- Delete Button Status -->\n         @if (cellRendererParams?.deleteButtonStatus == 1 && (!column?.hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-danger\"\n                [class.disabled]=\"!allowedEdit\"\n                (click)=\"invokeRowActionDelete(node, column)\">\n\n                <i class=\"bi bi-trash3\"></i>\n            </button>\n        }\n\n        <!-- Goto List Button Status -->\n        @if (cellRendererParams?.gotoListButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-success\"\n                (click)=\"invokeRowActionGotoList(node, column)\">\n\n                <i class=\"bi bi-list-ul\"></i>\n            </button>\n        }\n\n        <!-- Edit Button Status -->\n        @if (cellRendererParams?.editButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionEdit(node, column)\">\n\n                <i class=\"bi bi-pencil\"></i>\n            </button>\n        }\n\n        <!-- Print Button Status -->\n        @if (cellRendererParams?.printButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionPrint(node, column)\">\n\n                <i class=\"bi bi-printer\"></i>\n            </button>\n        }\n\n        <!-- History Button Status -->\n        @if (cellRendererParams?.historyButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionHistory(node, column)\">\n\n                <i class=\"bi bi-clock-history\"></i>\n            </button>\n        }\n\n        <!-- Option Button Status -->\n        @if (cellRendererParams?.optionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n\n        <!-- Language Button Status -->\n        @if (cellRendererParams?.languageButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionLanguage(node, column)\">\n\n                <i class=\"bi bi-translate\"></i>\n            </button>\n        }\n\n        <!-- Cell Optoion Button Status (Context Menu) -->\n        @if (cellRendererParams?.cellOptionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary border-0 text-body\"\n                [style.background]=\"'transparent'\"\n                [class.disabled]=\"node | cellDisableResolver:column:context:allowedEdit\"\n                (click)=\"invokeRowActionCellOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n    </div>\n}" }]
-        }], propDecorators: { column: [{
+            args: [{ standalone: false, selector: 'one-grid-row-action', template: "@if ((cellRendererParams && node?.leaf && !column?.autoGroupField && !(node.group && node.leafGroup)) || (column?.rowActionLevels?.includes(node.level) && column?.autoGroupField)) {\n    <div class=\"btn-action-container\">\n\n        <!-- Expansion Button Status -->\n         @if ((cellRendererParams?.detailActiveButtonStatus == 1 && !(detailActiveExcludeLevels?.has(node.level)))) {\n            <!-- A button, not an <a> with a click handler: it has no href, so\n                 it was neither focusable nor operable from the keyboard. -->\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-plain me-2\"\n                [attr.aria-expanded]=\"node.detailActive\"\n                [attr.aria-label]=\"node.detailActive ? 'Collapse row' : 'Expand row'\"\n                [title]=\"node.detailActive ? 'Collapse' : 'Expand'\"\n                (click)=\"invokeRowToggleDetailActiveExpand(node)\">\n\n                <i class=\"bi\" [ngClass]=\"{ 'bi-chevron-down': node.detailActive, 'bi-chevron-right': !node.detailActive }\"></i>\n            </button>\n        }\n\n        <!-- Goto Detail Button Status -->\n        @if ((cellRendererParams?.gotoDetailButtonStatus == 1 && !(gotoDetailExcludeLevels?.has(node.level))) && (!hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.gotoDetail\"\n                [title]=\"labels.gotoDetail\"\n                (click)=\"invokeRowActionGotoDetail(node, column)\">\n\n                <i class=\"bi bi-list-task\"></i>\n            </button>\n        }\n\n        <!-- Add New Button Status -->\n        @if ((cellRendererParams?.addNewButtonStatus == 1 && !(addNewExcludeLevels?.has(node.level))) && (!hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.addNew\"\n                [title]=\"labels.addNew\"\n                (click)=\"invokeRowActionAddNew(node, column)\">\n\n                <i class=\"bi bi-plus\"></i>\n            </button>\n        }\n\n        <!-- View Button Status -->\n        @if (cellRendererParams?.viewButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.view\"\n                [title]=\"labels.view\"\n                (click)=\"invokeRowActionView(node, column)\">\n\n                <i class=\"bi bi-eye\"></i>\n            </button>\n        }\n        @if (cellRendererParams?.locationButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.location\"\n                [title]=\"labels.location\"\n                (click)=\"invokeRowActionLocation(node, column)\">\n\n                <i class=\"bi bi-geo-alt\"></i>\n            </button>\n        }\n\n        <!-- Document Button Status -->\n        @if (cellRendererParams?.documentButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.document\"\n                [title]=\"labels.document\"\n                (click)=\"invokeRowActionDocument(node, column)\">\n\n                <i class=\"bi bi-file-earmark-text\"></i>\n            </button>\n        }\n\n        <!-- Copy Button Status -->\n        @if (cellRendererParams?.copyButtonStatus == 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [attr.aria-label]=\"labels.copy\"\n                [title]=\"labels.copy\"\n                (click)=\"invokeRowActionCopy(node, column)\">\n\n                <i class=\"bi bi-files\"></i>\n            </button>\n        }\n\n\n        <!-- Delete Button Status -->\n         @if (cellRendererParams?.deleteButtonStatus == 1 && (!hideActionButton || allowedEdit)) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-danger\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.delete\"\n                [title]=\"labels.delete\"\n                (click)=\"invokeRowActionDelete(node, column)\">\n\n                <i class=\"bi bi-trash3\"></i>\n            </button>\n        }\n\n        <!-- Goto List Button Status -->\n        @if (cellRendererParams?.gotoListButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-success\"\n                [attr.aria-label]=\"labels.gotoList\"\n                [title]=\"labels.gotoList\"\n                (click)=\"invokeRowActionGotoList(node, column)\">\n\n                <i class=\"bi bi-list-ul\"></i>\n            </button>\n        }\n\n        <!-- Edit Button Status -->\n        @if (cellRendererParams?.editButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.edit\"\n                [title]=\"labels.edit\"\n                (click)=\"invokeRowActionEdit(node, column)\">\n\n                <i class=\"bi bi-pencil\"></i>\n            </button>\n        }\n\n        <!-- Print Button Status -->\n        @if (cellRendererParams?.printButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.print\"\n                [title]=\"labels.print\"\n                (click)=\"invokeRowActionPrint(node, column)\">\n\n                <i class=\"bi bi-printer\"></i>\n            </button>\n        }\n\n        <!-- History Button Status -->\n        @if (cellRendererParams?.historyButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.history\"\n                [title]=\"labels.history\"\n                (click)=\"invokeRowActionHistory(node, column)\">\n\n                <i class=\"bi bi-clock-history\"></i>\n            </button>\n        }\n\n        <!-- Option Button Status -->\n        @if (cellRendererParams?.optionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.option\"\n                [title]=\"labels.option\"\n                (click)=\"invokeRowActionOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n\n        <!-- Language Button Status -->\n        @if (cellRendererParams?.languageButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.language\"\n                [title]=\"labels.language\"\n                (click)=\"invokeRowActionLanguage(node, column)\">\n\n                <i class=\"bi bi-translate\"></i>\n            </button>\n        }\n\n        <!-- Cell Optoion Button Status (Context Menu) -->\n        @if (cellRendererParams?.cellOptionButtonStatus === 1) {\n            <button\n                type=\"button\"\n                class=\"btn-action btn-action-primary border-0 text-body\"\n                [style.background]=\"'transparent'\"\n                [class.disabled]=\"actionDisabled\"\n                [disabled]=\"actionDisabled\"\n                [attr.aria-label]=\"labels.cellOption\"\n                [title]=\"labels.cellOption\"\n                (click)=\"invokeRowActionCellOption(node, column)\">\n\n                <i class=\"bi bi-three-dots-vertical\"></i>\n            </button>\n        }\n    </div>\n}" }]
+        }], ctorParameters: () => [{ type: OneGridCellService }], propDecorators: { column: [{
                 type: Input,
                 args: [{ required: true }]
             }], node: [{
@@ -1871,18 +2966,21 @@ class OneGridCellGroupRendererComponent {
         this.masterDetail = false;
         this.expansionChanged = new EventEmitter();
     }
-    invokeChangedClick() {
-        // if (this.masterDetail && !this.node.expanded) {
-        //   this.detailCellRendererParams.getDetailRowData({ data: this.node.data, node: this.node, successCallback: (rows) => { this.node.setDetailRowData(rows) }});
-        // }
+    /**
+     * Presentational only: report the click and let the body, which holds the
+     * API, perform the toggle. The click is stopped from bubbling so it is not
+     * also read as a cell click by the cell underneath.
+     */
+    invokeChangedClick(event) {
+        event.stopPropagation();
         this.expansionChanged.emit({ rowIndex: this.node.rowIndex, data: this.node.data, node: this.node });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellGroupRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridCellGroupRendererComponent, selector: "one-grid-cell-group-renderer", inputs: { node: "node", masterDetail: "masterDetail", detailCellRendererParams: "detailCellRendererParams", detailRendererComponent: "detailRendererComponent" }, outputs: { expansionChanged: "expansionChanged" }, ngImport: i0, template: "@if (node.expandable) {\n    <span class=\"cell-group-renderer\" [style.padding-left.px]=\"6\" (click)=\"invokeChangedClick()\">\n        @if (node.children?.length > 0 || masterDetail) {\n            <i [class.node-expanded]=\"node.expanded\" class=\"bi bi-chevron-right expansion-icon\"></i>\n        }\n    </span>\n}\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridCellGroupRendererComponent, selector: "one-grid-cell-group-renderer", inputs: { node: "node", masterDetail: "masterDetail", detailCellRendererParams: "detailCellRendererParams", detailRendererComponent: "detailRendererComponent" }, outputs: { expansionChanged: "expansionChanged" }, ngImport: i0, template: "@if (node.expandable) {\n    <span class=\"cell-group-renderer\" [style.padding-left.px]=\"6\">\n        @if (node.children?.length > 0 || masterDetail) {\n            <!-- A real button, not a div with a click handler: this is a\n                 disclosure control, so it needs to be focusable, operable with\n                 Enter and Space, and to expose its state via aria-expanded.\n                 mousedown is stopped so pressing the expander does not also\n                 begin a cell range selection on the cell underneath. -->\n            <button\n                type=\"button\"\n                class=\"expansion-button\"\n                [attr.aria-expanded]=\"node.expanded\"\n                [attr.aria-label]=\"node.expanded ? 'Collapse row' : 'Expand row'\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (dblclick)=\"$event.stopPropagation()\"\n                (click)=\"invokeChangedClick($event)\">\n                <i [class.node-expanded]=\"node.expanded\" class=\"bi bi-chevron-right expansion-icon\"></i>\n            </button>\n        }\n    </span>\n}\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellGroupRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-cell-group-renderer', template: "@if (node.expandable) {\n    <span class=\"cell-group-renderer\" [style.padding-left.px]=\"6\" (click)=\"invokeChangedClick()\">\n        @if (node.children?.length > 0 || masterDetail) {\n            <i [class.node-expanded]=\"node.expanded\" class=\"bi bi-chevron-right expansion-icon\"></i>\n        }\n    </span>\n}\n" }]
+            args: [{ standalone: false, selector: 'one-grid-cell-group-renderer', template: "@if (node.expandable) {\n    <span class=\"cell-group-renderer\" [style.padding-left.px]=\"6\">\n        @if (node.children?.length > 0 || masterDetail) {\n            <!-- A real button, not a div with a click handler: this is a\n                 disclosure control, so it needs to be focusable, operable with\n                 Enter and Space, and to expose its state via aria-expanded.\n                 mousedown is stopped so pressing the expander does not also\n                 begin a cell range selection on the cell underneath. -->\n            <button\n                type=\"button\"\n                class=\"expansion-button\"\n                [attr.aria-expanded]=\"node.expanded\"\n                [attr.aria-label]=\"node.expanded ? 'Collapse row' : 'Expand row'\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (dblclick)=\"$event.stopPropagation()\"\n                (click)=\"invokeChangedClick($event)\">\n                <i [class.node-expanded]=\"node.expanded\" class=\"bi bi-chevron-right expansion-icon\"></i>\n            </button>\n        }\n    </span>\n}\n" }]
         }], propDecorators: { node: [{
                 type: Input
             }], masterDetail: [{
@@ -2000,8 +3098,15 @@ class OneCellRendererComponentDirective {
             return;
         const instance = this.compRef.instance;
         if (typeof instance.oneInit === 'function') {
+            // The body supplies `value` already, and it honours the column's
+            // valueGetter. Only derive it here when nothing did — this used to
+            // overwrite unconditionally with the raw field, so a column with both a
+            // valueGetter and a component renderer showed the underlying field
+            // instead of the value every other part of the grid displays.
             const newParams = { ...this.params };
-            newParams.value = getFieldValue(this.params.data, this.params?.columnDef?.field) ?? null;
+            if (newParams.value === undefined) {
+                newParams.value = getFieldValue(this.params.data, this.params?.columnDef?.field) ?? null;
+            }
             instance.oneInit(newParams);
         }
         else {
@@ -2038,68 +3143,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: [{ required: true }]
             }] } });
 
+/**
+ * Reveals a truncated cell in full while the pointer rests on it.
+ *
+ * Presentation lives in the stylesheet, under `.one-cell-text-expanded`. It
+ * used to be applied as inline styles here, one of which was
+ * `background: var(--ins-card-bg)` — a token from the application this library
+ * was extracted from, which no consumer defines. The expanded cell therefore
+ * had a transparent background and its text overlapped the next column. The
+ * inline rules also set `z-index` on a statically positioned element, where it
+ * does nothing.
+ *
+ * Overflow is measured on hover rather than after every view check. The old
+ * version measured on init and on every text change, and reading `scrollWidth`
+ * forces a synchronous layout — several hundred of them per render for a
+ * normal viewport, to answer a question only the hovered cell ever asks.
+ */
 class OneCellTextExpandDirective {
+    static { this.EXPANDED_CLASS = 'one-cell-text-expanded'; }
+    static { this.HOVER_DELAY_MS = 800; }
     constructor(cell, renderer) {
         this.cell = cell;
         this.renderer = renderer;
-        this.overflowing = false;
-        this.lastText = null;
-    }
-    ngAfterViewInit() {
-        this.checkOverflow();
-        this.lastText = this.cell.nativeElement.textContent;
-    }
-    ngAfterViewChecked() {
-        const currentText = this.cell.nativeElement.textContent;
-        if (this.lastText !== currentText) {
-            this.lastText = currentText;
-            this.checkOverflow();
-            this.collapse();
-        }
-    }
-    ngOnDestroy() {
-        clearTimeout(this.timer);
-        this.collapse();
-    }
-    checkOverflow() {
-        const cell = this.cell.nativeElement;
-        this.overflowing = cell.scrollWidth > cell.clientWidth;
-    }
-    onResize() {
-        this.checkOverflow();
     }
     onMouseEnter() {
-        if (!this.overflowing)
+        const element = this.cell.nativeElement;
+        // Measured here, so the layout read happens once for the cell being
+        // hovered instead of for every cell on screen.
+        if (element.scrollWidth <= element.clientWidth)
             return;
-        this.timer = setTimeout(() => this.expand(), 800);
+        this.timer = setTimeout(() => this.expand(), OneCellTextExpandDirective.HOVER_DELAY_MS);
     }
     onMouseLeave() {
-        clearTimeout(this.timer);
+        this.collapse();
+    }
+    ngOnDestroy() {
         this.collapse();
     }
     expand() {
-        const cell = this.cell.nativeElement;
-        this.renderer.setStyle(cell, 'overflow', 'visible');
-        this.renderer.setStyle(cell, 'text-overflow', 'unset');
-        this.renderer.setStyle(cell, 'z-index', '1000');
-        this.renderer.setStyle(cell, 'background', 'var(--ins-card-bg)');
-        this.renderer.setStyle(cell, 'white-space', 'nowrap');
-        this.renderer.setStyle(cell, 'transition', 'width 0.3s ease');
-        this.renderer.setStyle(cell, 'padding', '4px 8px');
-        this.renderer.setStyle(cell, 'border-radius', '4px');
+        this.renderer.addClass(this.cell.nativeElement, OneCellTextExpandDirective.EXPANDED_CLASS);
     }
     collapse() {
-        const cell = this.cell.nativeElement;
-        this.renderer.setStyle(cell, 'white-space', 'nowrap');
-        this.renderer.setStyle(cell, 'overflow', 'hidden');
-        this.renderer.setStyle(cell, 'text-overflow', 'ellipsis');
-        this.renderer.removeStyle(cell, 'z-index');
-        this.renderer.removeStyle(cell, 'background');
-        this.renderer.removeStyle(cell, 'padding');
-        this.renderer.removeStyle(cell, 'border-radius');
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.renderer.removeClass(this.cell.nativeElement, OneCellTextExpandDirective.EXPANDED_CLASS);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellTextExpandDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OneCellTextExpandDirective, selector: "[oneCellTextExpand]", host: { listeners: { "window:resize": "onResize()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OneCellTextExpandDirective, selector: "[oneCellTextExpand]", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellTextExpandDirective, decorators: [{
             type: Directive,
@@ -2107,10 +3197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     standalone: false,
                     selector: '[oneCellTextExpand]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }], onMouseEnter: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -2119,6 +3206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class OneGridCellOptionMenuComponent {
+    get menuLabel() {
+        return `Options for ${this.column?.headerName ?? this.column?.field ?? 'this cell'}`;
+    }
     constructor(elementRef) {
         this.elementRef = elementRef;
         this.column = null;
@@ -2126,6 +3216,56 @@ class OneGridCellOptionMenuComponent {
         this.options = [];
         this.cellOptionMenuSelect = new EventEmitter();
         this.cellOptionMenuClose = new EventEmitter();
+        /**
+         * Roving tabindex: one item is tabbable and the arrows move which. Standard
+         * for a menu — a list of separately tabbable buttons makes a keyboard user
+         * tab through every option to get past the menu.
+         */
+        this.activeIndex = 0;
+    }
+    /**
+     * Move focus into the menu once it exists.
+     *
+     * Opening a menu and leaving focus on the trigger strands a keyboard user:
+     * the menu is on screen and nothing they press reaches it.
+     */
+    ngAfterViewInit() {
+        this.focusItem(0);
+    }
+    onItemKeydown(event, index, option) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusItem((index + 1) % this.options.length);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusItem((index - 1 + this.options.length) % this.options.length);
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.focusItem(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                this.focusItem(this.options.length - 1);
+                return;
+            case 'Enter':
+            case ' ':
+                // A <button> already activates on both, but only once the default runs.
+                // Handling it here keeps the menu's behaviour independent of that.
+                event.preventDefault();
+                this.onOptionSelected(option);
+                return;
+            default:
+                return;
+        }
+    }
+    focusItem(index) {
+        if (!this.options?.length)
+            return;
+        this.activeIndex = index;
+        this.items?.get(index)?.nativeElement?.focus();
     }
     // Click outside
     onDocumentClick(event) {
@@ -2157,11 +3297,11 @@ class OneGridCellOptionMenuComponent {
         this.cellOptionMenuClose.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellOptionMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridCellOptionMenuComponent, selector: "one-grid-cell-option-menu", inputs: { column: "column", node: "node", options: "options" }, outputs: { cellOptionMenuSelect: "cellOptionMenuSelect", cellOptionMenuClose: "cellOptionMenuClose" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "document:scroll": "onScroll()" } }, ngImport: i0, template: "<div class=\"cell-option-menu\" #menuEl>\n    @for (opt of options; track opt.value) {\n        <div class=\"cell-option-menu-item\" (click)=\"onOptionSelected(opt)\">\n            <!-- <span [style.padding-right.px]=\"8\"><lucide-icon name=\"check\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon></span> -->\n            <span>{{ opt.text }}</span> \n        </div>\n    }\n</div>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridCellOptionMenuComponent, selector: "one-grid-cell-option-menu", inputs: { column: "column", node: "node", options: "options" }, outputs: { cellOptionMenuSelect: "cellOptionMenuSelect", cellOptionMenuClose: "cellOptionMenuClose" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "document:scroll": "onScroll()" } }, viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], ngImport: i0, template: "<!-- A menu, so it is announced as one and operable from the keyboard: the items\n     were `<div (click)>` with no role, which meant the menu could be opened by\n     mouse and then not used at all without one. -->\n<div class=\"cell-option-menu\" role=\"menu\" #menuEl [attr.aria-label]=\"menuLabel\">\n    @for (opt of options; let index = $index; track opt.value) {\n        <button\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cell-option-menu-item\"\n            #item\n            [tabindex]=\"index === activeIndex ? 0 : -1\"\n            (click)=\"onOptionSelected(opt)\"\n            (keydown)=\"onItemKeydown($event, index, opt)\">\n            <span>{{ opt.text }}</span>\n        </button>\n    }\n</div>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellOptionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'one-grid-cell-option-menu', standalone: false, template: "<div class=\"cell-option-menu\" #menuEl>\n    @for (opt of options; track opt.value) {\n        <div class=\"cell-option-menu-item\" (click)=\"onOptionSelected(opt)\">\n            <!-- <span [style.padding-right.px]=\"8\"><lucide-icon name=\"check\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon></span> -->\n            <span>{{ opt.text }}</span> \n        </div>\n    }\n</div>" }]
+            args: [{ selector: 'one-grid-cell-option-menu', standalone: false, template: "<!-- A menu, so it is announced as one and operable from the keyboard: the items\n     were `<div (click)>` with no role, which meant the menu could be opened by\n     mouse and then not used at all without one. -->\n<div class=\"cell-option-menu\" role=\"menu\" #menuEl [attr.aria-label]=\"menuLabel\">\n    @for (opt of options; let index = $index; track opt.value) {\n        <button\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cell-option-menu-item\"\n            #item\n            [tabindex]=\"index === activeIndex ? 0 : -1\"\n            (click)=\"onOptionSelected(opt)\"\n            (keydown)=\"onItemKeydown($event, index, opt)\">\n            <span>{{ opt.text }}</span>\n        </button>\n    }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { column: [{
                 type: Input
             }], node: [{
@@ -2172,6 +3312,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], cellOptionMenuClose: [{
                 type: Output
+            }], items: [{
+                type: ViewChildren,
+                args: ['item']
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2183,6 +3326,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['document:scroll']
             }] } });
 
+/** Why the handle is disabled, in words a user can act on. */
+const SUPPRESSED_TEXT = {
+    sorted: 'Rows cannot be reordered while a sort is applied. Clear the sort to reorder.',
+    filtered: 'Rows cannot be reordered while a filter is applied. Clear the filter to reorder.',
+    treeData: 'Rows cannot be reordered in a tree grid.',
+};
+/**
+ * The grab handle for one row.
+ *
+ * A real `<button>`, not a styled div: it has to be focusable and operable from
+ * the keyboard, because WCAG 2.5.7 requires everything achievable by dragging
+ * to have a non-dragging alternative. Space picks the row up, the arrows move
+ * it, space drops it and escape puts it back.
+ *
+ * When reordering is unavailable the handle is disabled and says why, rather
+ * than disappearing — a control that vanishes when the user sorts looks like a
+ * bug, and one that silently does nothing is worse.
+ */
+class OneGridRowDragHandleComponent {
+    constructor(dragService) {
+        this.dragService = dragService;
+        /** Non-null when the grid's order is not its own; see the model docs. */
+        this.suppressedReason = null;
+        this.dragEnd = new EventEmitter();
+    }
+    get disabled() {
+        return this.suppressedReason !== null;
+    }
+    get label() {
+        if (this.suppressedReason)
+            return SUPPRESSED_TEXT[this.suppressedReason];
+        return this.grabbed
+            ? 'Moving row. Arrow keys to move, space to drop, escape to cancel.'
+            : 'Drag to reorder row, or press space to move it with the arrow keys.';
+    }
+    /** True while this specific row is the one being moved. */
+    get grabbed() {
+        return this.dragService.state?.rowId === this.node.rowId;
+    }
+    onPointerDown(event) {
+        if (this.disabled)
+            return;
+        // The body starts a cell range selection on mousedown; the handle is not
+        // part of that, and a press here must not also select.
+        event.stopPropagation();
+        this.dragService.startPointerDrag(event, this.node, { onEnd: (result) => this.emit(result) });
+    }
+    onKeyDown(event) {
+        if (this.disabled)
+            return;
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.dragService.toggleKeyboardDrag(this.node, { onEnd: (result) => this.emit(result) });
+                return;
+            case 'ArrowUp':
+                if (!this.grabbed)
+                    return;
+                event.preventDefault();
+                this.dragService.moveKeyboard(-1);
+                return;
+            case 'ArrowDown':
+                if (!this.grabbed)
+                    return;
+                event.preventDefault();
+                this.dragService.moveKeyboard(1);
+                return;
+            case 'Escape':
+                if (!this.grabbed)
+                    return;
+                event.preventDefault();
+                this.dragService.cancel();
+                return;
+            default:
+                return;
+        }
+    }
+    /**
+     * A row that is picked up and dropped where it started produces no event.
+     * Blur while grabbed would otherwise strand the row mid-move, so it cancels.
+     */
+    onBlur() {
+        if (this.grabbed && this.dragService.state?.source === 'keyboard') {
+            this.dragService.cancel();
+        }
+    }
+    emit(result) {
+        if (result)
+            this.dragEnd.emit(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowDragHandleComponent, deps: [{ token: OneGridRowDragService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneGridRowDragHandleComponent, selector: "one-grid-row-drag-handle", inputs: { node: "node", suppressedReason: "suppressedReason" }, outputs: { dragEnd: "dragEnd" }, ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"one-row-drag-handle\"\n    [class.one-row-drag-handle-grabbed]=\"grabbed\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [attr.aria-pressed]=\"disabled ? null : grabbed\"\n    [title]=\"label\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (click)=\"$event.stopPropagation()\"\n    (dblclick)=\"$event.stopPropagation()\">\n    <lucide-icon name=\"grip-vertical\" [size]=\"14\" [strokeWidth]=\"2\"></lucide-icon>\n</button>\n", styles: [":host{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: i2$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridRowDragHandleComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'one-grid-row-drag-handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    type=\"button\"\n    class=\"one-row-drag-handle\"\n    [class.one-row-drag-handle-grabbed]=\"grabbed\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    [attr.aria-pressed]=\"disabled ? null : grabbed\"\n    [title]=\"label\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n    (click)=\"$event.stopPropagation()\"\n    (dblclick)=\"$event.stopPropagation()\">\n    <lucide-icon name=\"grip-vertical\" [size]=\"14\" [strokeWidth]=\"2\"></lucide-icon>\n</button>\n", styles: [":host{display:inline-flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: OneGridRowDragService }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true }]
+            }], suppressedReason: [{
+                type: Input
+            }], dragEnd: [{
+                type: Output
+            }] } });
+
 class CellInvalidPipe {
     transform(cellStates, value, column, node, allowedEdit, submitted) {
         if (!column.validationRules?.length) {
@@ -2294,10 +3543,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class OneGridBodyComponent {
-    constructor(colService, cellService, eventService, cdr) {
+    constructor(colService, cellService, eventService, rowDragService, cdr) {
         this.colService = colService;
         this.cellService = cellService;
         this.eventService = eventService;
+        this.rowDragService = rowDragService;
         this.cdr = cdr;
         this.rowData = [];
         this.pagination = false;
@@ -2305,6 +3555,14 @@ class OneGridBodyComponent {
         this.enableGroupColumnDefs = false;
         this.submitted = false;
         this.context = null;
+        /**
+         * Pinned rows are bound only so the component re-renders when they change;
+         * the nodes themselves come from the API, which owns them.
+         */
+        this.pinnedTopRowData = [];
+        this.pinnedBottomRowData = [];
+        this.pinnedTopNodes = [];
+        this.pinnedBottomNodes = [];
         this.columnDefs = [];
         this.cellRenderer = false;
         /**
@@ -2345,11 +3603,19 @@ class OneGridBodyComponent {
         this.expansionChanged = new EventEmitter();
         this.bodyScroll = new EventEmitter();
         this.cellOptionSelect = new EventEmitter();
+        this.rowDragEnd = new EventEmitter();
         /**
          * Selection Range Variables
          */
         this.rowWidth = 0;
         this.nodes = [];
+        /**
+         * Row drag state, mirrored from the service so the template can read it
+         * synchronously. `null` whenever no drag is in flight.
+         */
+        this.dragState = null;
+        this.dragAnnouncement = '';
+        this.rowDragSuppressed = null;
         this.selectedCells = new Set();
         this.isMouseDown = false;
         this.startCell = null;
@@ -2377,6 +3643,40 @@ class OneGridBodyComponent {
         this.itemSize = 30;
         this.minBufferPx = 200;
         this.maxBufferPx = 400;
+        /**
+         * Virtual Scroll Properties
+         *
+         * The buffer scales with the row count so small grids render in one pass, but
+         * it is capped: `itemSize * items * 1.5` is 1.5x the *total* content height,
+         * and CdkFixedSizeVirtualScroll expands its rendered range until the buffer is
+         * satisfied. Uncapped, that makes the viewport materialise every row and
+         * virtual scrolling stops doing anything at all (100k rows locked the tab).
+         * MAX_BUFFER_PX keeps roughly twenty rows of overscan either side instead.
+         */
+        this.MAX_BUFFER_PX = 600;
+        /**
+         * Where to paint the drop indicator, in pixels from the top of the body.
+         *
+         * `insertAt` is a boundary, so the line sits at row-height times the number
+         * of rows above it — in content space. The indicator is a sibling of the
+         * viewport rather than a child, because anything inside it either scrolls
+         * away with the transformed content wrapper or ignores the scroll entirely,
+         * so the viewport's own scroll offset and its position within the body are
+         * both subtracted back out here.
+         *
+         * A field rather than a getter: it is read from the template on every change
+         * detection pass, and it only actually moves when the drag state or the
+         * scroll position does.
+         */
+        this.dropIndicatorTop = null;
+        /**
+         * How wide the line is drawn. Rows are `width: fit-content`, so they are
+         * often narrower than the viewport — a full-bleed line would hang past the
+         * last column into empty space and read as part of the frame rather than the
+         * rows. This is the visible extent of the row content, which also shrinks
+         * correctly as the grid is scrolled sideways.
+         */
+        this.dropIndicatorWidth = 0;
     }
     ngOnInit() {
         /**
@@ -2385,13 +3685,30 @@ class OneGridBodyComponent {
         this.subscriptions.add(this.gridCopy$.subscribe((event) => {
             this.onGridCopy(event);
         }));
+        /**
+         * Row drag
+         *
+         * The service owns the gesture; the body only renders it and lends it the
+         * viewport, the row height and a way to apply a move. The suppression
+         * reason is re-read on every event that could change the order, so the
+         * handle disables itself the moment a sort or filter is applied.
+         */
+        this.subscriptions.add(this.rowDragService.state$.subscribe((state) => {
+            this.dragState = state;
+            this.updateDropIndicator();
+            this.cdr.markForCheck();
+        }));
+        this.subscriptions.add(this.rowDragService.announcement$.subscribe((message) => {
+            this.dragAnnouncement = message;
+            this.cdr.markForCheck();
+        }));
         /**
          * Listen Column Changed Event
          */
         this.subscriptions.add(this.eventService.addEventListener('columnChanged', (payload) => {
             this.columnDefs = [...payload.columns];
             this.cellRenderer = this.columnDefs.some(col => col.cellRendererComponent);
-            this.rowWidth = this.columnDefs.reduce((sum, col) => sum + (col.width ? col.width > col.maxWidth ? col.maxWidth : col.width < col.minWidth ? col.minWidth : col.width : col.minWidth), 0);
+            this.rowWidth = this.columnDefs.reduce((sum, col) => sum + resolveColumnWidth(col), 0);
             this.cdr.markForCheck();
         }));
         /**
@@ -2407,7 +3724,9 @@ class OneGridBodyComponent {
                         if (node.leaf && this.detailRendererComponent) {
                             node.detailRendererComponent = this.detailRendererComponent;
                         }
-                        if (node.expanded) {
+                        // Detail rows can still be in flight when a row is expanded, and
+                        // spreading null throws. Nothing to re-seed until they arrive.
+                        if (node.expanded && node.detailRowData) {
                             this.api.setDetailRowData(node, [...node.detailRowData]);
                         }
                         return node;
@@ -2416,14 +3735,50 @@ class OneGridBodyComponent {
                 else {
                     this.nodes = nodes;
                 }
+                this.refreshRowDragSuppressed();
                 this.cdr.markForCheck();
             });
         }));
+        /**
+         * Listen Pinned Row Data Changed Event
+         */
+        this.subscriptions.add(this.eventService.addEventListener('pinnedRowDataChanged', ({ side, nodes }) => {
+            if (side === 'top') {
+                this.pinnedTopNodes = nodes;
+            }
+            else {
+                this.pinnedBottomNodes = nodes;
+            }
+            this.cdr.markForCheck();
+        }));
         /**
          * Listen Sort Changed Event
          */
         this.subscriptions.add(this.eventService.addEventListener('sortChanged', ({ nodes }) => {
             this.nodes = nodes;
+            // Sorting takes ownership of the order away from the user, so the handles
+            // have to disable in the same frame the rows re-sort.
+            this.refreshRowDragSuppressed();
+            this.cdr.markForCheck();
+        }));
+        /**
+         * Listen Row Order Changed Event
+         *
+         * Deliberately not folded into `rowDataChanged`: that path defers a frame
+         * and re-seeds detail rows, which is right for a data load and far too much
+         * for a move. A reorder is the same nodes in a different order.
+         */
+        this.subscriptions.add(this.eventService.addEventListener('rowOrderChanged', ({ nodes }) => {
+            this.nodes = [...nodes];
+            this.cdr.markForCheck();
+        }));
+        /**
+         * Listen Cell State Changed Event
+         *
+         * The body renders OnPush, so regenerating a row's cell state is invisible
+         * until something marks the body dirty. This is that something.
+         */
+        this.subscriptions.add(this.eventService.addEventListener('cellStateChanged', () => {
             this.cdr.markForCheck();
         }));
         /**
@@ -2442,9 +3797,33 @@ class OneGridBodyComponent {
         const scrollLeft = event.target.scrollLeft;
         if (scrollLeft !== this.lastScrollLeft) {
             this.lastScrollLeft = scrollLeft;
+            this.syncPinnedRows(scrollLeft);
             this.bodyScroll.emit(scrollLeft);
+            // The indicator is clipped to the row content, which moves sideways too.
+            if (this.dragState) {
+                this.updateDropIndicator();
+                this.cdr.markForCheck();
+            }
             return;
         }
+        // Vertical: the drop indicator is anchored to the body, not the content, so
+        // it has to be repositioned as the rows move beneath it — which they do on
+        // their own during auto-scroll, with the pointer standing still.
+        if (this.dragState) {
+            this.updateDropIndicator();
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Keep the pinned rows in step with the body's horizontal position.
+     *
+     * Assigned rather than transformed, for the same reason as the header: sticky
+     * positioning for pinned *columns* has to resolve against a real scrollport,
+     * and a transformed ancestor is not one. Pinned rows and pinned columns
+     * therefore compose — a frozen corner cell stays frozen on both axes.
+     */
+    syncPinnedRows(scrollLeft) {
+        this.pinnedViewports?.forEach(viewport => (viewport.nativeElement.scrollLeft = scrollLeft));
     }
     /**
      * Track Rendering Row Node By Row ID
@@ -2624,14 +4003,56 @@ class OneGridBodyComponent {
     invokeRowActionLanguage(event) {
         this.onRowLanguage.emit(event);
     }
+    /**
+     * Open the cell option menu, and tell the host it was asked for.
+     *
+     * The opening is the part that was missing. Everything else existed — the
+     * trigger button behind `cellRendererParams.cellOptionButtonStatus`, the menu
+     * component, the `cellOptionMenu` column property, the selection event wired
+     * through to the grid's output — but nothing ever set the flag the template
+     * renders on, so the button did nothing at all.
+     *
+     * Done here rather than in the row-action component because this is the
+     * component whose template renders the menu, and so the one that has to be
+     * marked for check.
+     */
     invokeRowActionCellOption(event) {
+        const field = event.column?.field;
+        // Nothing to open when the column declared no options; the event still
+        // goes to the host, which may be driving something of its own.
+        if (field && event.node && event.column?.cellOptionMenu?.length) {
+            event.node.cellOptions[field] = true;
+            this.cdr.markForCheck();
+        }
         this.onRowCellOption.emit(event);
     }
+    /**
+     * The menu closed itself — on select, on Escape, or on a click outside. It
+     * has already cleared its own flag; this is what repaints without it.
+     */
+    cellOptionMenuClosed() {
+        this.cdr.markForCheck();
+    }
     invokeRowActionSelection(event) {
         this.onRowSelection.emit(event);
     }
+    /**
+     * Toggle a group / master row, then report the result.
+     *
+     * The group renderer is presentational: it says "the expander was clicked"
+     * and nothing more. Performing the state change belongs here, where the API
+     * is available. Previously this method only re-emitted, so the expander
+     * rendered, animated on hover and did nothing at all — every consumer had to
+     * discover for itself that `expansionChanged` was a request rather than the
+     * notification its past-tense name promises.
+     *
+     * The event is re-emitted *after* the toggle, so `event.node.expanded` is the
+     * new state, which is what a past-tense event should carry.
+     */
     invokeExpansionChangedClick(event) {
-        this.expansionChanged.emit(event);
+        const node = this.api.getRowNodeById(event.node.rowId) ?? event.node;
+        this.api.setExpandedById(node.rowId, !node.expanded);
+        this.expansionChanged.emit({ ...event, node, api: this.api });
     }
     cellOptionMenuSelected(event) {
         this.cellOptionSelect.emit(event);
@@ -2721,26 +4142,94 @@ class OneGridBodyComponent {
             }
         }
     }
-    /**
-     * Virtual Scroll Properties
-     */
     setVirtualScroll(items = 0) {
-        this.minBufferPx = this.itemSize * items * 1.5;
+        this.minBufferPx = Math.min(this.itemSize * items * 1.5, this.MAX_BUFFER_PX);
         this.maxBufferPx = this.minBufferPx * 2;
     }
     /**
      * Unsubscribe All Subscriptions
      */
+    /**
+     * Hand the drag service what it needs to run a gesture.
+     *
+     * Deferred to here because the viewport element does not exist until the view
+     * is up, and `nodes` is passed as a getter rather than a value — a drag
+     * mutates the order underneath it, so a snapshot taken at attach time would
+     * go stale on the first move.
+     */
+    ngAfterViewInit() {
+        const element = this.viewport?.elementRef?.nativeElement;
+        if (!element)
+            return;
+        this.rowDragService.attach({
+            viewport: element,
+            itemSize: this.itemSize,
+            nodes: () => this.nodes,
+            move: (fromIndex, toIndex) => {
+                const moved = this.api.moveRow(fromIndex, toIndex);
+                if (moved)
+                    this.cdr.markForCheck();
+                return moved;
+            },
+        });
+        this.refreshRowDragSuppressed();
+    }
+    /**
+     * The params every per-cell callback receives.
+     *
+     * Built here rather than inline in the template so the whole documented
+     * shape is passed — `value`, `field`, `rowIndex`, `api` and `context` were
+     * all declared on `OneCellRendererParams` and none of them were being sent,
+     * so a `cellClass` reading `params.value` silently got `undefined`.
+     */
+    cellParams(node, column) {
+        return this.cellService.cellParams(column, node);
+    }
+    /**
+     * Params for a component cell renderer.
+     *
+     * The cell params, plus whatever the column declared in
+     * `cellRendererParams` — a field that exists precisely so a renderer can be
+     * configured per column, and that nothing had ever forwarded to it. Column
+     * config goes first so the grid's own fields win a name collision.
+     */
+    rendererParams(node, column) {
+        return { ...(column?.cellRendererParams ?? {}), ...this.cellParams(node, column) };
+    }
+    /** Is this the row currently being moved? */
+    isRowDragging(node) {
+        return this.dragState?.rowId === node.rowId;
+    }
+    updateDropIndicator() {
+        const state = this.dragState;
+        const element = this.viewport?.elementRef?.nativeElement;
+        if (state?.source !== 'pointer' || !element) {
+            this.dropIndicatorTop = null;
+            return;
+        }
+        this.dropIndicatorTop = (state.insertAt * this.itemSize) - element.scrollTop + element.offsetTop;
+        this.dropIndicatorWidth = Math.max(Math.min(this.rowWidth - element.scrollLeft, element.clientWidth), 0);
+    }
+    onRowDragEnd(event) {
+        this.rowDragEnd.emit(event);
+    }
+    refreshRowDragSuppressed() {
+        const reason = this.api?.getRowDragSuppressedReason?.() ?? null;
+        if (reason === this.rowDragSuppressed)
+            return;
+        this.rowDragSuppressed = reason;
+        this.cdr.markForCheck();
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridBodyComponent, deps: [{ token: OgColumnService }, { token: OneGridCellService }, { token: OneGridEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridBodyComponent, selector: "one-grid-body", inputs: { rowData: "rowData", rowNumber: "rowNumber", api: "api", pagination: "pagination", allowedEdit: "allowedEdit", enableGroupColumnDefs: "enableGroupColumnDefs", submitted: "submitted", context: "context", getRowId: "getRowId", gridCopy$: "gridCopy$", gridType: "gridType", masterDetail: "masterDetail", masterNode: "masterNode", detailRowMaxHeight: "detailRowMaxHeight", detailCellRendererParams: "detailCellRendererParams", detailGridTemplate: "detailGridTemplate", detailRendererComponent: "detailRendererComponent", treeData: "treeData", treeDataChildrenField: "treeDataChildrenField", autoGroupColumnDef: "autoGroupColumnDef", groupDefaultExpanded: "groupDefaultExpanded" }, outputs: { onRowGotoDetail: "onRowGotoDetail", onRowAddNew: "onRowAddNew", onRowView: "onRowView", onRowCopy: "onRowCopy", onRowLocation: "onRowLocation", onRowDocument: "onRowDocument", onRowDelete: "onRowDelete", onRowGotoList: "onRowGotoList", onRowEdit: "onRowEdit", onRowPrint: "onRowPrint", onRowHistory: "onRowHistory", onRowOption: "onRowOption", onRowLanguage: "onRowLanguage", onRowCellOption: "onRowCellOption", onRowSelection: "onRowSelection", onShiftDoubleClick: "onShiftDoubleClick", rowCountChanged: "rowCountChanged", expansionChanged: "expansionChanged", bodyScroll: "bodyScroll", cellOptionSelect: "cellOptionSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:mouseup": "onGlobalMouseUp()" } }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["bodyRef"], descendants: true, static: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div #bodyRef class=\"one-grid-body\">\n    <cdk-virtual-scroll-viewport\n        class=\"one-grid-body-viewport\"\n        [itemSize]=\"itemSize\"\n        [minBufferPx]=\"minBufferPx\"\n        [maxBufferPx]=\"maxBufferPx\"\n        (scroll)=\"onBodyScroll($event)\">\n\n        <ng-container *cdkVirtualFor=\"let node of nodes; trackBy: trackByRowId;\">\n            \n            <div class=\"one-row\" [attr.data-row-id]=\"node.rowId\" [class.one-row-selected]=\"node.selected\">\n                @for (col of columnDefs; track col.field;) {\n                    <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{ node, rowIndex: node.rowIndex, column: col }\"></ng-container>\n                }\n            </div>\n\n            <!-- Custom Detail Component -->\n             @if(node.leaf && node.detailActive && node?.detailRendererComponent) {\n                <ng-container\n                    oneCellRendererComponent\n                    [cellRendererComponent]=\"node?.detailRendererComponent\"\n                    [params]=\"{ data: node.data, rowIndex: node.rowIndex, node: node, context: context }\">\n                </ng-container>\n            }\n\n            <!-- Master Detail Grid (template provided by the parent one-grid to avoid a compile-time import cycle) -->\n            @if (masterDetail && node.expanded && node?.detailRowData) {\n                <div class=\"one-row-detail-container\" [attr.data-row-id]=\"node.rowId + '-detail'\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"detailGridTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: node, node: node }\">\n                    </ng-container>\n                </div>\n            }\n        </ng-container>\n        @if (!nodes?.length) {\n            <div style=\"width: max-content; border-top: 1px solid transparent;\">\n                <div [style.width.px]=\"rowWidth\"></div>\n            </div>\n        }\n    </cdk-virtual-scroll-viewport>\n    @if (!nodes?.length) {\n        <span class=\"one-grid-empty-message\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\">No Rows to Show</span>\n    }\n</div>\n\n<!-- Master Column Template  -->\n<ng-template #cellTemplate let-node=\"node\" let-rowIndex=\"rowIndex\" let-column=\"column\">\n    <div\n        class=\"one-column\"\n        [attr.data-cell-id]=\"node.rowId | cellKey:column.field\"\n        [style.width.px]=\"column?.width\"\n        [style.min-width.px]=\"column?.minWidth\"\n        [style.max-width.px]=\"column?.maxWidth\"\n        [class.one-column-border-top]=\"masterDetail && nodes?.length > 0 && nodes[node.rowIndex - 1]?.expanded\"\n        [class.one-cell-selected]=\"selectedCells | cellSelected:node.rowId:column.field\"\n        [class.one-cell-invalid]=\"node.cellStates | cellInvalid:node.data[column.field]:column:node:allowedEdit:submitted\"\n        (dblclick)=\"startEdit($event, node, column)\"\n        (mousedown)=\"startSelection(node.rowId, column.field)\"\n        (mouseenter)=\"extendSelection(node.rowId, column.field)\"\n        (mouseup)=\"endSelection()\">\n\n        <!-- One Grid Cell Option -->\n        @if (node.cellOptions[column.field]) {\n            <one-grid-cell-option-menu\n                #contextOptionMenuRef\n                [node]=\"node\"\n                [column]=\"column\"\n                [options]=\"column.cellOptionMenu\"\n                (cellOptionMenuSelect)=\"cellOptionMenuSelected($event)\"/>\n        }\n\n        <!-- Grid Cell Template -->\n        @if(column?.cellRendererComponent) {\n            <ng-container\n                oneCellRendererComponent\n                [cellRendererComponent]=\"column?.cellRendererComponent\"\n                [params]=\"{ data: node.data, field: column.field, rowIndex: node.rowIndex, columnDef: column, node: node, context: context }\">\n            </ng-container>\n        }\n        @else if (node.editing[column.field]) {\n            <!-- Cell Editing Input -->\n            <input class=\"one-cell-input\"\n                name=\"{{ node.rowId + '' + column.field }}\"\n                oneCellInputValidator\n                [validationType]=\"column?.cellRendererParams?.inputType === 'number' ? 'number' : 'none'\"\n                [placeholder]=\"column?.cellRendererParams?.placeholder\"\n                [type]=\"column?.cellRendererParams?.inputType === 'number' ? 'text' : column?.cellRendererParams?.inputType\"\n                [value]=\"node?.data[column?.field]\"\n                [maxLength]=\"250\"\n                (blur)=\"stopEdit(node, column, $event)\"\n                (keydown.enter)=\"stopEdit(node, column, $event)\"\n                (keydown.esc)=\"cancelEdit(node, column)\"\n            />\n        }\n        @else if (column?.cellRenderer) {\n            <div\n                [ngStyle]=\"{ width: column.width + 'px' , position: 'relative' }\"\n                [innerHTML]=\"node.cellStates | cellStateRenderer:column.field\"\n                [class.editable-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n            </div>\n        }\n        @else {\n            <div class=\"one-cell\"\n                [class.align-content-left]=\"column?.alignContent === 'left'\"\n                [class.align-content-center]=\"column?.alignContent === 'center'\"\n                [class.align-content-right]=\"column?.alignContent === 'right'\"\n                [ngClass]=\"colService.resolveCellPresentation(column, { node, data: node.data, columnDef: column })._resolvedCellClass\"\n                [ngStyle]=\"colService.resolveCellPresentation(column, { node, data: node.data, columnDef: column })._resolvedCellStyle\"\n                [style.padding-left.px]=\"column.autoGroupField && node.level | cellLevelPadding:24\"\n                [class.one-cell-allowed-edit-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n\n                <!-- Cell Checkbox Selection -->\n                @if (column?.checkboxSelection) {\n                    <one-grid-checkbox\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [api]=\"api\"\n                        (onRowSelection)=\"invokeRowActionSelection($event)\"\n                    />\n                }\n\n                <!-- Expand & Collapse Icon -->\n                @if (((node?.group || detailRendererComponent) && column?.autoGroupField) || (masterDetail && node?.expandable && gridType === 'master' && column?.masterGroupField)) {\n                    <one-grid-cell-group-renderer\n                        [node]=\"node\"\n                        [masterDetail]=\"masterDetail\"\n                        [detailCellRendererParams]=\"detailCellRendererParams\"\n                        [detailRendererComponent]=\"detailRendererComponent\"\n                        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n                    />\n                }\n\n                @if(column?.cellRendererComponent) {\n                    <ng-container\n                        oneCellRendererComponent\n                        [cellRendererComponent]=\"column?.cellRendererComponent\"\n                        [params]=\"{ data: node.data, field: column.field, rowIndex: node.rowIndex, columnDef: column, node: node, context: context }\">\n                    </ng-container>\n                }\n                @else {\n                    <!-- Cell Value OR Placeholder -->\n                    <div oneCellTextExpand class=\"one-cell-text\" [class.one-cell-placeholder]=\"node.cellStates[column.field]?.type === 'placeholder'\">\n                        {{ (node.cellStates | cellStateRenderer:column.field) }}\n                    </div>\n                }\n\n                <!-- Cell Action Buttons -->\n                @if (column.cellRendererParams | cellActionButtonEnable) {\n                    <one-grid-row-action\n                        [ngStyle]=\"{ marginLeft: 'auto' }\"\n                        [column]=\"column\"\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [masterNode]=\"masterNode\"\n                        [masterDetail]=\"masterDetail\"\n                        [gridType]=\"gridType\"\n                        [context]=\"context\"\n                        [cellRendererParams]=\"column?.cellRendererParams\"\n                        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n                        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n                        (onRowView)=\"invokeRowActionView($event)\"\n                        (onRowLocation)=\"invokeRowActionLocation($event)\"\n                        (onRowDocument)=\"invokeRowActionDocument($event)\"\n                        (onRowCopy)=\"invokeRowActionCopy($event)\"\n                        (onRowDelete)=\"invokeRowActionDelete($event)\"\n                        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n                        (onRowEdit)=\"invokeRowActionEdit($event)\"\n                        (onRowPrint)=\"invokeRowActionPrint($event)\"\n                        (onRowHistory)=\"invokeRowActionHistory($event)\"\n                        (onRowOption)=\"invokeRowActionOption($event)\"\n                        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n                        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n                    />\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: OneGridCheckboxComponent, selector: "one-grid-checkbox", inputs: ["node", "allowedEdit", "api"], outputs: ["onRowSelection"] }, { kind: "component", type: OneGridRowActionComponent, selector: "one-grid-row-action", inputs: ["column", "node", "allowedEdit", "masterDetail", "masterNode", "cellRendererParams", "gridType", "context"], outputs: ["onRowGotoDetail", "onRowAddNew", "onRowView", "onRowLocation", "onRowDocument", "onRowCopy", "onRowDelete", "onRowGotoList", "onRowEdit", "onRowPrint", "onRowHistory", "onRowOption", "onRowLanguage", "onRowCellOption"] }, { kind: "component", type: OneGridCellGroupRendererComponent, selector: "one-grid-cell-group-renderer", inputs: ["node", "masterDetail", "detailCellRendererParams", "detailRendererComponent"], outputs: ["expansionChanged"] }, { kind: "directive", type: OneCellInputValidatorDirective, selector: "[oneCellInputValidator]", inputs: ["validationType", "regex"] }, { kind: "directive", type: OneCellRendererComponentDirective, selector: "[oneCellRendererComponent]", inputs: ["cellRendererComponent", "params"] }, { kind: "directive", type: OneCellTextExpandDirective, selector: "[oneCellTextExpand]" }, { kind: "component", type: OneGridCellOptionMenuComponent, selector: "one-grid-cell-option-menu", inputs: ["column", "node", "options"], outputs: ["cellOptionMenuSelect", "cellOptionMenuClose"] }, { kind: "pipe", type: CellEditablePipe, name: "cellEditable" }, { kind: "pipe", type: CellInvalidPipe, name: "cellInvalid" }, { kind: "pipe", type: CellSelectedPipe, name: "cellSelected" }, { kind: "pipe", type: CellActionButtonEnablePipe, name: "cellActionButtonEnable" }, { kind: "pipe", type: CellKeyPipe, name: "cellKey" }, { kind: "pipe", type: CellLevelPaddingPipe, name: "cellLevelPadding" }, { kind: "pipe", type: CellStateRendererPipe, name: "cellStateRenderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridBodyComponent, deps: [{ token: OgColumnService }, { token: OneGridCellService }, { token: OneGridEventService }, { token: OneGridRowDragService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridBodyComponent, selector: "one-grid-body", inputs: { rowData: "rowData", rowNumber: "rowNumber", api: "api", pagination: "pagination", allowedEdit: "allowedEdit", enableGroupColumnDefs: "enableGroupColumnDefs", submitted: "submitted", context: "context", getRowId: "getRowId", gridCopy$: "gridCopy$", pinnedTopRowData: "pinnedTopRowData", pinnedBottomRowData: "pinnedBottomRowData", gridType: "gridType", masterDetail: "masterDetail", masterNode: "masterNode", detailRowMaxHeight: "detailRowMaxHeight", detailCellRendererParams: "detailCellRendererParams", detailGridTemplate: "detailGridTemplate", detailRendererComponent: "detailRendererComponent", treeData: "treeData", treeDataChildrenField: "treeDataChildrenField", autoGroupColumnDef: "autoGroupColumnDef", groupDefaultExpanded: "groupDefaultExpanded" }, outputs: { onRowGotoDetail: "onRowGotoDetail", onRowAddNew: "onRowAddNew", onRowView: "onRowView", onRowCopy: "onRowCopy", onRowLocation: "onRowLocation", onRowDocument: "onRowDocument", onRowDelete: "onRowDelete", onRowGotoList: "onRowGotoList", onRowEdit: "onRowEdit", onRowPrint: "onRowPrint", onRowHistory: "onRowHistory", onRowOption: "onRowOption", onRowLanguage: "onRowLanguage", onRowCellOption: "onRowCellOption", onRowSelection: "onRowSelection", onShiftDoubleClick: "onShiftDoubleClick", rowCountChanged: "rowCountChanged", expansionChanged: "expansionChanged", bodyScroll: "bodyScroll", cellOptionSelect: "cellOptionSelect", rowDragEnd: "rowDragEnd" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:mouseup": "onGlobalMouseUp()" } }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["bodyRef"], descendants: true, static: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "pinnedViewports", predicate: ["pinnedViewport"], descendants: true }], ngImport: i0, template: "<div #bodyRef class=\"one-grid-body\">\n\n    <!-- Pinned rows live outside the scroll viewport so they never scroll\n         vertically, and mirror its scrollLeft so the columns stay aligned. -->\n    @if (pinnedTopNodes.length) {\n        <div #pinnedViewport class=\"one-pinned-rows one-pinned-rows-top\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedTopNodes }\"></ng-container>\n        </div>\n    }\n\n    <!-- tabindex makes the scroll container reachable, so a keyboard user can\n         scroll the rows with the arrow keys, Page Up/Down and Home/End. Without\n         it the body is scrollable by pointer only (WCAG 2.1.1). -->\n    <cdk-virtual-scroll-viewport\n        class=\"one-grid-body-viewport\"\n        tabindex=\"0\"\n        [itemSize]=\"itemSize\"\n        [minBufferPx]=\"minBufferPx\"\n        [maxBufferPx]=\"maxBufferPx\"\n        (scroll)=\"onBodyScroll($event)\">\n\n        <ng-container *cdkVirtualFor=\"let node of nodes; trackBy: trackByRowId;\">\n            \n            <div class=\"one-row\"\n                [attr.data-row-id]=\"node.rowId\"\n                [class.one-row-selected]=\"node.selected\"\n                [class.one-row-dragging]=\"isRowDragging(node)\">\n                @for (col of columnDefs; track col.field;) {\n                    <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{ node, rowIndex: node.rowIndex, column: col }\"></ng-container>\n                }\n            </div>\n\n            <!-- Custom Detail Component -->\n             @if(node.leaf && node.detailActive && node?.detailRendererComponent) {\n                <ng-container\n                    oneCellRendererComponent\n                    [cellRendererComponent]=\"node?.detailRendererComponent\"\n                    [params]=\"{ data: node.data, rowIndex: node.rowIndex, node: node, context: context }\">\n                </ng-container>\n            }\n\n            <!-- Master Detail Grid (template provided by the parent one-grid to avoid a compile-time import cycle) -->\n            @if (masterDetail && node.expanded && node?.detailRowData) {\n                <div class=\"one-row-detail-container\" [attr.data-row-id]=\"node.rowId + '-detail'\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"detailGridTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: node, node: node }\">\n                    </ng-container>\n                </div>\n            }\n        </ng-container>\n        @if (!nodes?.length) {\n            <div style=\"width: max-content; border-top: 1px solid transparent;\">\n                <div [style.width.px]=\"rowWidth\"></div>\n            </div>\n        }\n    </cdk-virtual-scroll-viewport>\n\n    <!-- Drop indicator.\n         A line at the insertion point rather than a gap opened between rows:\n         the viewport is virtualised at a fixed itemSize, so shifting rows apart\n         would desynchronise the scroller from its own geometry. It is also the\n         clearer signal \u2014 the row lands exactly where the line is.\n         Positioned against the body, with the viewport's scroll subtracted, so\n         it stays put while the content moves under it during auto-scroll. -->\n    @if (dropIndicatorTop !== null) {\n        <div class=\"one-row-drop-indicator\" aria-hidden=\"true\"\n             [style.top.px]=\"dropIndicatorTop\"\n             [style.width.px]=\"dropIndicatorWidth\"></div>\n    }\n\n    <!-- Keyboard reordering has no drag image to watch, so it narrates instead.\n         Assertive because the message is the only feedback that the row moved. -->\n    <div class=\"one-grid-visually-hidden\" role=\"status\" aria-live=\"assertive\" aria-atomic=\"true\">{{ dragAnnouncement }}</div>\n    @if (!nodes?.length) {\n        <span class=\"one-grid-empty-message\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\">No Rows to Show</span>\n    }\n\n    @if (pinnedBottomNodes.length) {\n        <div #pinnedViewport class=\"one-pinned-rows one-pinned-rows-bottom\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedBottomNodes }\"></ng-container>\n        </div>\n    }\n</div>\n\n<!-- Pinned rows are display-only: they render exactly what a data cell renders,\n     but carry none of its interactions. A totals row should not open an editor\n     on double-click or start a range selection on drag. -->\n<ng-template #pinnedRows let-nodes=\"nodes\">\n    @for (node of nodes; track node.rowId) {\n        <div class=\"one-row one-row-pinned\" [attr.data-row-id]=\"node.rowId\">\n            @for (column of columnDefs; track column.field) {\n                <div\n                    class=\"one-column\"\n                    [attr.data-cell-id]=\"node.rowId | cellKey:column.field\"\n                    [class.one-column-pinned-left]=\"column.pinned === 'left'\"\n                    [class.one-column-pinned-right]=\"column.pinned === 'right'\"\n                    [class.one-column-pinned-edge]=\"column._pinnedEdge\"\n                    [style.left.px]=\"column.pinned === 'left' ? column._pinnedOffset : null\"\n                    [style.right.px]=\"column.pinned === 'right' ? column._pinnedOffset : null\"\n                    [style.width.px]=\"column?.width\"\n                    [style.min-width.px]=\"column?.minWidth\"\n                    [style.max-width.px]=\"column?.maxWidth\">\n\n                    @if (column?.cellRendererComponent) {\n                        <ng-container\n                            oneCellRendererComponent\n                            [cellRendererComponent]=\"column?.cellRendererComponent\"\n                            [params]=\"rendererParams(node, column)\">\n                        </ng-container>\n                    }\n                    @else if (column?.cellRenderer) {\n                        <div\n                            [ngStyle]=\"{ width: column.width + 'px', position: 'relative' }\"\n                            [innerHTML]=\"node.cellStates | cellStateRenderer:column.field\">\n                        </div>\n                    }\n                    @else {\n                        <div class=\"one-cell\"\n                            [class.align-content-left]=\"column?.alignContent === 'left'\"\n                            [class.align-content-center]=\"column?.alignContent === 'center'\"\n                            [class.align-content-right]=\"column?.alignContent === 'right'\"\n                            [ngClass]=\"colService.resolveCellClass(column, cellParams(node, column))\"\n                            [ngStyle]=\"colService.resolveCellStyle(column, cellParams(node, column))\">\n                            <div class=\"one-cell-text\">{{ (node.cellStates | cellStateRenderer:column.field) }}</div>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n\n<!-- Master Column Template  -->\n<ng-template #cellTemplate let-node=\"node\" let-rowIndex=\"rowIndex\" let-column=\"column\">\n    <div\n        class=\"one-column\"\n        [attr.data-cell-id]=\"node.rowId | cellKey:column.field\"\n        [class.one-column-pinned-left]=\"column.pinned === 'left'\"\n        [class.one-column-pinned-right]=\"column.pinned === 'right'\"\n        [class.one-column-pinned-edge]=\"column._pinnedEdge\"\n        [style.left.px]=\"column.pinned === 'left' ? column._pinnedOffset : null\"\n        [style.right.px]=\"column.pinned === 'right' ? column._pinnedOffset : null\"\n        [style.width.px]=\"column?.width\"\n        [style.min-width.px]=\"column?.minWidth\"\n        [style.max-width.px]=\"column?.maxWidth\"\n        [class.one-column-border-top]=\"masterDetail && nodes?.length > 0 && nodes[node.rowIndex - 1]?.expanded\"\n        [class.one-cell-selected]=\"selectedCells | cellSelected:node.rowId:column.field\"\n        [class.one-cell-invalid]=\"node.cellStates | cellInvalid:node.data[column.field]:column:node:allowedEdit:submitted\"\n        (dblclick)=\"startEdit($event, node, column)\"\n        (mousedown)=\"startSelection(node.rowId, column.field)\"\n        (mouseenter)=\"extendSelection(node.rowId, column.field)\"\n        (mouseup)=\"endSelection()\">\n\n        <!-- One Grid Cell Option -->\n        @if (node.cellOptions[column.field]) {\n            <one-grid-cell-option-menu\n                #contextOptionMenuRef\n                [node]=\"node\"\n                [column]=\"column\"\n                [options]=\"column.cellOptionMenu\"\n                (cellOptionMenuSelect)=\"cellOptionMenuSelected($event)\"\n                (cellOptionMenuClose)=\"cellOptionMenuClosed()\"/>\n        }\n\n        <!-- Grid Cell Template -->\n        @if(column?.cellRendererComponent) {\n            <ng-container\n                oneCellRendererComponent\n                [cellRendererComponent]=\"column?.cellRendererComponent\"\n                [params]=\"rendererParams(node, column)\">\n            </ng-container>\n        }\n        @else if (node.editing[column.field]) {\n            <!-- Cell Editing Input -->\n            <input class=\"one-cell-input\"\n                name=\"{{ node.rowId + '' + column.field }}\"\n                oneCellInputValidator\n                [validationType]=\"column?.cellRendererParams?.inputType === 'number' ? 'number' : 'none'\"\n                [placeholder]=\"column?.cellRendererParams?.placeholder\"\n                [type]=\"column?.cellRendererParams?.inputType === 'number' ? 'text' : column?.cellRendererParams?.inputType\"\n                [value]=\"node?.data[column?.field]\"\n                [maxLength]=\"250\"\n                (blur)=\"stopEdit(node, column, $event)\"\n                (keydown.enter)=\"stopEdit(node, column, $event)\"\n                (keydown.esc)=\"cancelEdit(node, column)\"\n            />\n        }\n        @else if (column?.cellRenderer) {\n            <div\n                [ngStyle]=\"{ width: column.width + 'px' , position: 'relative' }\"\n                [innerHTML]=\"node.cellStates | cellStateRenderer:column.field\"\n                [class.editable-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n            </div>\n        }\n        @else {\n            <div class=\"one-cell\"\n                [class.align-content-left]=\"column?.alignContent === 'left'\"\n                [class.align-content-center]=\"column?.alignContent === 'center'\"\n                [class.align-content-right]=\"column?.alignContent === 'right'\"\n                [ngClass]=\"colService.resolveCellClass(column, cellParams(node, column))\"\n                [ngStyle]=\"colService.resolveCellStyle(column, cellParams(node, column))\"\n                [style.padding-left.px]=\"column.autoGroupField && node.level | cellLevelPadding:24\"\n                [class.one-cell-allowed-edit-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n\n                <!-- Row Drag Handle -->\n                @if (cellService.rowDragFn(column, node)) {\n                    <one-grid-row-drag-handle\n                        [node]=\"node\"\n                        [suppressedReason]=\"rowDragSuppressed\"\n                        (dragEnd)=\"onRowDragEnd($event)\"\n                    />\n                }\n\n                <!-- Cell Checkbox Selection -->\n                @if (column?.checkboxSelection) {\n                    <one-grid-checkbox\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [api]=\"api\"\n                        (onRowSelection)=\"invokeRowActionSelection($event)\"\n                    />\n                }\n\n                <!-- Expand & Collapse Icon -->\n                @if (((node?.group || detailRendererComponent) && column?.autoGroupField) || (masterDetail && node?.expandable && gridType === 'master' && column?.masterGroupField)) {\n                    <one-grid-cell-group-renderer\n                        [node]=\"node\"\n                        [masterDetail]=\"masterDetail\"\n                        [detailCellRendererParams]=\"detailCellRendererParams\"\n                        [detailRendererComponent]=\"detailRendererComponent\"\n                        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n                    />\n                }\n\n                @if(column?.cellRendererComponent) {\n                    <ng-container\n                        oneCellRendererComponent\n                        [cellRendererComponent]=\"column?.cellRendererComponent\"\n                        [params]=\"rendererParams(node, column)\">\n                    </ng-container>\n                }\n                @else {\n                    <!-- Cell Value OR Placeholder -->\n                    <div oneCellTextExpand class=\"one-cell-text\" [class.one-cell-placeholder]=\"node.cellStates[column.field]?.type === 'placeholder'\">\n                        {{ (node.cellStates | cellStateRenderer:column.field) }}\n                    </div>\n                }\n\n                <!-- Cell Action Buttons -->\n                @if (column.cellRendererParams | cellActionButtonEnable) {\n                    <one-grid-row-action\n                        [ngStyle]=\"{ marginLeft: 'auto' }\"\n                        [column]=\"column\"\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [masterNode]=\"masterNode\"\n                        [masterDetail]=\"masterDetail\"\n                        [gridType]=\"gridType\"\n                        [context]=\"context\"\n                        [cellRendererParams]=\"column?.cellRendererParams\"\n                        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n                        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n                        (onRowView)=\"invokeRowActionView($event)\"\n                        (onRowLocation)=\"invokeRowActionLocation($event)\"\n                        (onRowDocument)=\"invokeRowActionDocument($event)\"\n                        (onRowCopy)=\"invokeRowActionCopy($event)\"\n                        (onRowDelete)=\"invokeRowActionDelete($event)\"\n                        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n                        (onRowEdit)=\"invokeRowActionEdit($event)\"\n                        (onRowPrint)=\"invokeRowActionPrint($event)\"\n                        (onRowHistory)=\"invokeRowActionHistory($event)\"\n                        (onRowOption)=\"invokeRowActionOption($event)\"\n                        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n                        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n                    />\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: OneGridCheckboxComponent, selector: "one-grid-checkbox", inputs: ["node", "allowedEdit", "api"], outputs: ["onRowSelection"] }, { kind: "component", type: OneGridRowActionComponent, selector: "one-grid-row-action", inputs: ["column", "node", "allowedEdit", "masterDetail", "masterNode", "cellRendererParams", "gridType", "context"], outputs: ["onRowGotoDetail", "onRowAddNew", "onRowView", "onRowLocation", "onRowDocument", "onRowCopy", "onRowDelete", "onRowGotoList", "onRowEdit", "onRowPrint", "onRowHistory", "onRowOption", "onRowLanguage", "onRowCellOption"] }, { kind: "component", type: OneGridCellGroupRendererComponent, selector: "one-grid-cell-group-renderer", inputs: ["node", "masterDetail", "detailCellRendererParams", "detailRendererComponent"], outputs: ["expansionChanged"] }, { kind: "directive", type: OneCellInputValidatorDirective, selector: "[oneCellInputValidator]", inputs: ["validationType", "regex"] }, { kind: "directive", type: OneCellRendererComponentDirective, selector: "[oneCellRendererComponent]", inputs: ["cellRendererComponent", "params"] }, { kind: "directive", type: OneCellTextExpandDirective, selector: "[oneCellTextExpand]" }, { kind: "component", type: OneGridCellOptionMenuComponent, selector: "one-grid-cell-option-menu", inputs: ["column", "node", "options"], outputs: ["cellOptionMenuSelect", "cellOptionMenuClose"] }, { kind: "component", type: OneGridRowDragHandleComponent, selector: "one-grid-row-drag-handle", inputs: ["node", "suppressedReason"], outputs: ["dragEnd"] }, { kind: "pipe", type: CellEditablePipe, name: "cellEditable" }, { kind: "pipe", type: CellInvalidPipe, name: "cellInvalid" }, { kind: "pipe", type: CellSelectedPipe, name: "cellSelected" }, { kind: "pipe", type: CellActionButtonEnablePipe, name: "cellActionButtonEnable" }, { kind: "pipe", type: CellKeyPipe, name: "cellKey" }, { kind: "pipe", type: CellLevelPaddingPipe, name: "cellLevelPadding" }, { kind: "pipe", type: CellStateRendererPipe, name: "cellStateRenderer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridBodyComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #bodyRef class=\"one-grid-body\">\n    <cdk-virtual-scroll-viewport\n        class=\"one-grid-body-viewport\"\n        [itemSize]=\"itemSize\"\n        [minBufferPx]=\"minBufferPx\"\n        [maxBufferPx]=\"maxBufferPx\"\n        (scroll)=\"onBodyScroll($event)\">\n\n        <ng-container *cdkVirtualFor=\"let node of nodes; trackBy: trackByRowId;\">\n            \n            <div class=\"one-row\" [attr.data-row-id]=\"node.rowId\" [class.one-row-selected]=\"node.selected\">\n                @for (col of columnDefs; track col.field;) {\n                    <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{ node, rowIndex: node.rowIndex, column: col }\"></ng-container>\n                }\n            </div>\n\n            <!-- Custom Detail Component -->\n             @if(node.leaf && node.detailActive && node?.detailRendererComponent) {\n                <ng-container\n                    oneCellRendererComponent\n                    [cellRendererComponent]=\"node?.detailRendererComponent\"\n                    [params]=\"{ data: node.data, rowIndex: node.rowIndex, node: node, context: context }\">\n                </ng-container>\n            }\n\n            <!-- Master Detail Grid (template provided by the parent one-grid to avoid a compile-time import cycle) -->\n            @if (masterDetail && node.expanded && node?.detailRowData) {\n                <div class=\"one-row-detail-container\" [attr.data-row-id]=\"node.rowId + '-detail'\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"detailGridTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: node, node: node }\">\n                    </ng-container>\n                </div>\n            }\n        </ng-container>\n        @if (!nodes?.length) {\n            <div style=\"width: max-content; border-top: 1px solid transparent;\">\n                <div [style.width.px]=\"rowWidth\"></div>\n            </div>\n        }\n    </cdk-virtual-scroll-viewport>\n    @if (!nodes?.length) {\n        <span class=\"one-grid-empty-message\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\">No Rows to Show</span>\n    }\n</div>\n\n<!-- Master Column Template  -->\n<ng-template #cellTemplate let-node=\"node\" let-rowIndex=\"rowIndex\" let-column=\"column\">\n    <div\n        class=\"one-column\"\n        [attr.data-cell-id]=\"node.rowId | cellKey:column.field\"\n        [style.width.px]=\"column?.width\"\n        [style.min-width.px]=\"column?.minWidth\"\n        [style.max-width.px]=\"column?.maxWidth\"\n        [class.one-column-border-top]=\"masterDetail && nodes?.length > 0 && nodes[node.rowIndex - 1]?.expanded\"\n        [class.one-cell-selected]=\"selectedCells | cellSelected:node.rowId:column.field\"\n        [class.one-cell-invalid]=\"node.cellStates | cellInvalid:node.data[column.field]:column:node:allowedEdit:submitted\"\n        (dblclick)=\"startEdit($event, node, column)\"\n        (mousedown)=\"startSelection(node.rowId, column.field)\"\n        (mouseenter)=\"extendSelection(node.rowId, column.field)\"\n        (mouseup)=\"endSelection()\">\n\n        <!-- One Grid Cell Option -->\n        @if (node.cellOptions[column.field]) {\n            <one-grid-cell-option-menu\n                #contextOptionMenuRef\n                [node]=\"node\"\n                [column]=\"column\"\n                [options]=\"column.cellOptionMenu\"\n                (cellOptionMenuSelect)=\"cellOptionMenuSelected($event)\"/>\n        }\n\n        <!-- Grid Cell Template -->\n        @if(column?.cellRendererComponent) {\n            <ng-container\n                oneCellRendererComponent\n                [cellRendererComponent]=\"column?.cellRendererComponent\"\n                [params]=\"{ data: node.data, field: column.field, rowIndex: node.rowIndex, columnDef: column, node: node, context: context }\">\n            </ng-container>\n        }\n        @else if (node.editing[column.field]) {\n            <!-- Cell Editing Input -->\n            <input class=\"one-cell-input\"\n                name=\"{{ node.rowId + '' + column.field }}\"\n                oneCellInputValidator\n                [validationType]=\"column?.cellRendererParams?.inputType === 'number' ? 'number' : 'none'\"\n                [placeholder]=\"column?.cellRendererParams?.placeholder\"\n                [type]=\"column?.cellRendererParams?.inputType === 'number' ? 'text' : column?.cellRendererParams?.inputType\"\n                [value]=\"node?.data[column?.field]\"\n                [maxLength]=\"250\"\n                (blur)=\"stopEdit(node, column, $event)\"\n                (keydown.enter)=\"stopEdit(node, column, $event)\"\n                (keydown.esc)=\"cancelEdit(node, column)\"\n            />\n        }\n        @else if (column?.cellRenderer) {\n            <div\n                [ngStyle]=\"{ width: column.width + 'px' , position: 'relative' }\"\n                [innerHTML]=\"node.cellStates | cellStateRenderer:column.field\"\n                [class.editable-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n            </div>\n        }\n        @else {\n            <div class=\"one-cell\"\n                [class.align-content-left]=\"column?.alignContent === 'left'\"\n                [class.align-content-center]=\"column?.alignContent === 'center'\"\n                [class.align-content-right]=\"column?.alignContent === 'right'\"\n                [ngClass]=\"colService.resolveCellPresentation(column, { node, data: node.data, columnDef: column })._resolvedCellClass\"\n                [ngStyle]=\"colService.resolveCellPresentation(column, { node, data: node.data, columnDef: column })._resolvedCellStyle\"\n                [style.padding-left.px]=\"column.autoGroupField && node.level | cellLevelPadding:24\"\n                [class.one-cell-allowed-edit-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n\n                <!-- Cell Checkbox Selection -->\n                @if (column?.checkboxSelection) {\n                    <one-grid-checkbox\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [api]=\"api\"\n                        (onRowSelection)=\"invokeRowActionSelection($event)\"\n                    />\n                }\n\n                <!-- Expand & Collapse Icon -->\n                @if (((node?.group || detailRendererComponent) && column?.autoGroupField) || (masterDetail && node?.expandable && gridType === 'master' && column?.masterGroupField)) {\n                    <one-grid-cell-group-renderer\n                        [node]=\"node\"\n                        [masterDetail]=\"masterDetail\"\n                        [detailCellRendererParams]=\"detailCellRendererParams\"\n                        [detailRendererComponent]=\"detailRendererComponent\"\n                        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n                    />\n                }\n\n                @if(column?.cellRendererComponent) {\n                    <ng-container\n                        oneCellRendererComponent\n                        [cellRendererComponent]=\"column?.cellRendererComponent\"\n                        [params]=\"{ data: node.data, field: column.field, rowIndex: node.rowIndex, columnDef: column, node: node, context: context }\">\n                    </ng-container>\n                }\n                @else {\n                    <!-- Cell Value OR Placeholder -->\n                    <div oneCellTextExpand class=\"one-cell-text\" [class.one-cell-placeholder]=\"node.cellStates[column.field]?.type === 'placeholder'\">\n                        {{ (node.cellStates | cellStateRenderer:column.field) }}\n                    </div>\n                }\n\n                <!-- Cell Action Buttons -->\n                @if (column.cellRendererParams | cellActionButtonEnable) {\n                    <one-grid-row-action\n                        [ngStyle]=\"{ marginLeft: 'auto' }\"\n                        [column]=\"column\"\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [masterNode]=\"masterNode\"\n                        [masterDetail]=\"masterDetail\"\n                        [gridType]=\"gridType\"\n                        [context]=\"context\"\n                        [cellRendererParams]=\"column?.cellRendererParams\"\n                        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n                        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n                        (onRowView)=\"invokeRowActionView($event)\"\n                        (onRowLocation)=\"invokeRowActionLocation($event)\"\n                        (onRowDocument)=\"invokeRowActionDocument($event)\"\n                        (onRowCopy)=\"invokeRowActionCopy($event)\"\n                        (onRowDelete)=\"invokeRowActionDelete($event)\"\n                        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n                        (onRowEdit)=\"invokeRowActionEdit($event)\"\n                        (onRowPrint)=\"invokeRowActionPrint($event)\"\n                        (onRowHistory)=\"invokeRowActionHistory($event)\"\n                        (onRowOption)=\"invokeRowActionOption($event)\"\n                        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n                        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n                    />\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: OgColumnService }, { type: OneGridCellService }, { type: OneGridEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { bodyRef: [{
+            args: [{ standalone: false, selector: 'one-grid-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #bodyRef class=\"one-grid-body\">\n\n    <!-- Pinned rows live outside the scroll viewport so they never scroll\n         vertically, and mirror its scrollLeft so the columns stay aligned. -->\n    @if (pinnedTopNodes.length) {\n        <div #pinnedViewport class=\"one-pinned-rows one-pinned-rows-top\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedTopNodes }\"></ng-container>\n        </div>\n    }\n\n    <!-- tabindex makes the scroll container reachable, so a keyboard user can\n         scroll the rows with the arrow keys, Page Up/Down and Home/End. Without\n         it the body is scrollable by pointer only (WCAG 2.1.1). -->\n    <cdk-virtual-scroll-viewport\n        class=\"one-grid-body-viewport\"\n        tabindex=\"0\"\n        [itemSize]=\"itemSize\"\n        [minBufferPx]=\"minBufferPx\"\n        [maxBufferPx]=\"maxBufferPx\"\n        (scroll)=\"onBodyScroll($event)\">\n\n        <ng-container *cdkVirtualFor=\"let node of nodes; trackBy: trackByRowId;\">\n            \n            <div class=\"one-row\"\n                [attr.data-row-id]=\"node.rowId\"\n                [class.one-row-selected]=\"node.selected\"\n                [class.one-row-dragging]=\"isRowDragging(node)\">\n                @for (col of columnDefs; track col.field;) {\n                    <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{ node, rowIndex: node.rowIndex, column: col }\"></ng-container>\n                }\n            </div>\n\n            <!-- Custom Detail Component -->\n             @if(node.leaf && node.detailActive && node?.detailRendererComponent) {\n                <ng-container\n                    oneCellRendererComponent\n                    [cellRendererComponent]=\"node?.detailRendererComponent\"\n                    [params]=\"{ data: node.data, rowIndex: node.rowIndex, node: node, context: context }\">\n                </ng-container>\n            }\n\n            <!-- Master Detail Grid (template provided by the parent one-grid to avoid a compile-time import cycle) -->\n            @if (masterDetail && node.expanded && node?.detailRowData) {\n                <div class=\"one-row-detail-container\" [attr.data-row-id]=\"node.rowId + '-detail'\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"detailGridTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: node, node: node }\">\n                    </ng-container>\n                </div>\n            }\n        </ng-container>\n        @if (!nodes?.length) {\n            <div style=\"width: max-content; border-top: 1px solid transparent;\">\n                <div [style.width.px]=\"rowWidth\"></div>\n            </div>\n        }\n    </cdk-virtual-scroll-viewport>\n\n    <!-- Drop indicator.\n         A line at the insertion point rather than a gap opened between rows:\n         the viewport is virtualised at a fixed itemSize, so shifting rows apart\n         would desynchronise the scroller from its own geometry. It is also the\n         clearer signal \u2014 the row lands exactly where the line is.\n         Positioned against the body, with the viewport's scroll subtracted, so\n         it stays put while the content moves under it during auto-scroll. -->\n    @if (dropIndicatorTop !== null) {\n        <div class=\"one-row-drop-indicator\" aria-hidden=\"true\"\n             [style.top.px]=\"dropIndicatorTop\"\n             [style.width.px]=\"dropIndicatorWidth\"></div>\n    }\n\n    <!-- Keyboard reordering has no drag image to watch, so it narrates instead.\n         Assertive because the message is the only feedback that the row moved. -->\n    <div class=\"one-grid-visually-hidden\" role=\"status\" aria-live=\"assertive\" aria-atomic=\"true\">{{ dragAnnouncement }}</div>\n    @if (!nodes?.length) {\n        <span class=\"one-grid-empty-message\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\">No Rows to Show</span>\n    }\n\n    @if (pinnedBottomNodes.length) {\n        <div #pinnedViewport class=\"one-pinned-rows one-pinned-rows-bottom\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedBottomNodes }\"></ng-container>\n        </div>\n    }\n</div>\n\n<!-- Pinned rows are display-only: they render exactly what a data cell renders,\n     but carry none of its interactions. A totals row should not open an editor\n     on double-click or start a range selection on drag. -->\n<ng-template #pinnedRows let-nodes=\"nodes\">\n    @for (node of nodes; track node.rowId) {\n        <div class=\"one-row one-row-pinned\" [attr.data-row-id]=\"node.rowId\">\n            @for (column of columnDefs; track column.field) {\n                <div\n                    class=\"one-column\"\n                    [attr.data-cell-id]=\"node.rowId | cellKey:column.field\"\n                    [class.one-column-pinned-left]=\"column.pinned === 'left'\"\n                    [class.one-column-pinned-right]=\"column.pinned === 'right'\"\n                    [class.one-column-pinned-edge]=\"column._pinnedEdge\"\n                    [style.left.px]=\"column.pinned === 'left' ? column._pinnedOffset : null\"\n                    [style.right.px]=\"column.pinned === 'right' ? column._pinnedOffset : null\"\n                    [style.width.px]=\"column?.width\"\n                    [style.min-width.px]=\"column?.minWidth\"\n                    [style.max-width.px]=\"column?.maxWidth\">\n\n                    @if (column?.cellRendererComponent) {\n                        <ng-container\n                            oneCellRendererComponent\n                            [cellRendererComponent]=\"column?.cellRendererComponent\"\n                            [params]=\"rendererParams(node, column)\">\n                        </ng-container>\n                    }\n                    @else if (column?.cellRenderer) {\n                        <div\n                            [ngStyle]=\"{ width: column.width + 'px', position: 'relative' }\"\n                            [innerHTML]=\"node.cellStates | cellStateRenderer:column.field\">\n                        </div>\n                    }\n                    @else {\n                        <div class=\"one-cell\"\n                            [class.align-content-left]=\"column?.alignContent === 'left'\"\n                            [class.align-content-center]=\"column?.alignContent === 'center'\"\n                            [class.align-content-right]=\"column?.alignContent === 'right'\"\n                            [ngClass]=\"colService.resolveCellClass(column, cellParams(node, column))\"\n                            [ngStyle]=\"colService.resolveCellStyle(column, cellParams(node, column))\">\n                            <div class=\"one-cell-text\">{{ (node.cellStates | cellStateRenderer:column.field) }}</div>\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n\n<!-- Master Column Template  -->\n<ng-template #cellTemplate let-node=\"node\" let-rowIndex=\"rowIndex\" let-column=\"column\">\n    <div\n        class=\"one-column\"\n        [attr.data-cell-id]=\"node.rowId | cellKey:column.field\"\n        [class.one-column-pinned-left]=\"column.pinned === 'left'\"\n        [class.one-column-pinned-right]=\"column.pinned === 'right'\"\n        [class.one-column-pinned-edge]=\"column._pinnedEdge\"\n        [style.left.px]=\"column.pinned === 'left' ? column._pinnedOffset : null\"\n        [style.right.px]=\"column.pinned === 'right' ? column._pinnedOffset : null\"\n        [style.width.px]=\"column?.width\"\n        [style.min-width.px]=\"column?.minWidth\"\n        [style.max-width.px]=\"column?.maxWidth\"\n        [class.one-column-border-top]=\"masterDetail && nodes?.length > 0 && nodes[node.rowIndex - 1]?.expanded\"\n        [class.one-cell-selected]=\"selectedCells | cellSelected:node.rowId:column.field\"\n        [class.one-cell-invalid]=\"node.cellStates | cellInvalid:node.data[column.field]:column:node:allowedEdit:submitted\"\n        (dblclick)=\"startEdit($event, node, column)\"\n        (mousedown)=\"startSelection(node.rowId, column.field)\"\n        (mouseenter)=\"extendSelection(node.rowId, column.field)\"\n        (mouseup)=\"endSelection()\">\n\n        <!-- One Grid Cell Option -->\n        @if (node.cellOptions[column.field]) {\n            <one-grid-cell-option-menu\n                #contextOptionMenuRef\n                [node]=\"node\"\n                [column]=\"column\"\n                [options]=\"column.cellOptionMenu\"\n                (cellOptionMenuSelect)=\"cellOptionMenuSelected($event)\"\n                (cellOptionMenuClose)=\"cellOptionMenuClosed()\"/>\n        }\n\n        <!-- Grid Cell Template -->\n        @if(column?.cellRendererComponent) {\n            <ng-container\n                oneCellRendererComponent\n                [cellRendererComponent]=\"column?.cellRendererComponent\"\n                [params]=\"rendererParams(node, column)\">\n            </ng-container>\n        }\n        @else if (node.editing[column.field]) {\n            <!-- Cell Editing Input -->\n            <input class=\"one-cell-input\"\n                name=\"{{ node.rowId + '' + column.field }}\"\n                oneCellInputValidator\n                [validationType]=\"column?.cellRendererParams?.inputType === 'number' ? 'number' : 'none'\"\n                [placeholder]=\"column?.cellRendererParams?.placeholder\"\n                [type]=\"column?.cellRendererParams?.inputType === 'number' ? 'text' : column?.cellRendererParams?.inputType\"\n                [value]=\"node?.data[column?.field]\"\n                [maxLength]=\"250\"\n                (blur)=\"stopEdit(node, column, $event)\"\n                (keydown.enter)=\"stopEdit(node, column, $event)\"\n                (keydown.esc)=\"cancelEdit(node, column)\"\n            />\n        }\n        @else if (column?.cellRenderer) {\n            <div\n                [ngStyle]=\"{ width: column.width + 'px' , position: 'relative' }\"\n                [innerHTML]=\"node.cellStates | cellStateRenderer:column.field\"\n                [class.editable-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n            </div>\n        }\n        @else {\n            <div class=\"one-cell\"\n                [class.align-content-left]=\"column?.alignContent === 'left'\"\n                [class.align-content-center]=\"column?.alignContent === 'center'\"\n                [class.align-content-right]=\"column?.alignContent === 'right'\"\n                [ngClass]=\"colService.resolveCellClass(column, cellParams(node, column))\"\n                [ngStyle]=\"colService.resolveCellStyle(column, cellParams(node, column))\"\n                [style.padding-left.px]=\"column.autoGroupField && node.level | cellLevelPadding:24\"\n                [class.one-cell-allowed-edit-active]=\"node.cellStates | cellEditable:column:node:cellService.editableFn:cellService.updatableFn:allowedEdit\">\n\n                <!-- Row Drag Handle -->\n                @if (cellService.rowDragFn(column, node)) {\n                    <one-grid-row-drag-handle\n                        [node]=\"node\"\n                        [suppressedReason]=\"rowDragSuppressed\"\n                        (dragEnd)=\"onRowDragEnd($event)\"\n                    />\n                }\n\n                <!-- Cell Checkbox Selection -->\n                @if (column?.checkboxSelection) {\n                    <one-grid-checkbox\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [api]=\"api\"\n                        (onRowSelection)=\"invokeRowActionSelection($event)\"\n                    />\n                }\n\n                <!-- Expand & Collapse Icon -->\n                @if (((node?.group || detailRendererComponent) && column?.autoGroupField) || (masterDetail && node?.expandable && gridType === 'master' && column?.masterGroupField)) {\n                    <one-grid-cell-group-renderer\n                        [node]=\"node\"\n                        [masterDetail]=\"masterDetail\"\n                        [detailCellRendererParams]=\"detailCellRendererParams\"\n                        [detailRendererComponent]=\"detailRendererComponent\"\n                        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n                    />\n                }\n\n                @if(column?.cellRendererComponent) {\n                    <ng-container\n                        oneCellRendererComponent\n                        [cellRendererComponent]=\"column?.cellRendererComponent\"\n                        [params]=\"rendererParams(node, column)\">\n                    </ng-container>\n                }\n                @else {\n                    <!-- Cell Value OR Placeholder -->\n                    <div oneCellTextExpand class=\"one-cell-text\" [class.one-cell-placeholder]=\"node.cellStates[column.field]?.type === 'placeholder'\">\n                        {{ (node.cellStates | cellStateRenderer:column.field) }}\n                    </div>\n                }\n\n                <!-- Cell Action Buttons -->\n                @if (column.cellRendererParams | cellActionButtonEnable) {\n                    <one-grid-row-action\n                        [ngStyle]=\"{ marginLeft: 'auto' }\"\n                        [column]=\"column\"\n                        [node]=\"node\"\n                        [allowedEdit]=\"allowedEdit\"\n                        [masterNode]=\"masterNode\"\n                        [masterDetail]=\"masterDetail\"\n                        [gridType]=\"gridType\"\n                        [context]=\"context\"\n                        [cellRendererParams]=\"column?.cellRendererParams\"\n                        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n                        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n                        (onRowView)=\"invokeRowActionView($event)\"\n                        (onRowLocation)=\"invokeRowActionLocation($event)\"\n                        (onRowDocument)=\"invokeRowActionDocument($event)\"\n                        (onRowCopy)=\"invokeRowActionCopy($event)\"\n                        (onRowDelete)=\"invokeRowActionDelete($event)\"\n                        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n                        (onRowEdit)=\"invokeRowActionEdit($event)\"\n                        (onRowPrint)=\"invokeRowActionPrint($event)\"\n                        (onRowHistory)=\"invokeRowActionHistory($event)\"\n                        (onRowOption)=\"invokeRowActionOption($event)\"\n                        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n                        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n                    />\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: OgColumnService }, { type: OneGridCellService }, { type: OneGridEventService }, { type: OneGridRowDragService }, { type: i0.ChangeDetectorRef }], propDecorators: { bodyRef: [{
                 type: ViewChild,
                 args: ['bodyRef', { static: true }]
             }], rowData: [{
@@ -2765,6 +4254,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], gridCopy$: [{
                 type: Input,
                 args: [{ required: true }]
+            }], pinnedTopRowData: [{
+                type: Input
+            }], pinnedBottomRowData: [{
+                type: Input
+            }], pinnedViewports: [{
+                type: ViewChildren,
+                args: ['pinnedViewport']
             }], viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -2830,6 +4326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], cellOptionSelect: [{
                 type: Output
+            }], rowDragEnd: [{
+                type: Output
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2853,31 +4351,56 @@ class OneGridPaginationComponent {
         this.goToNext = new EventEmitter();
         this.goToLast = new EventEmitter();
         this.pageSizeChange = new EventEmitter();
-        this.pageSize = OnePageSizeOption[0];
-        this.pageSizeOptions = OnePageSizeOption;
     }
-    ngAfterViewInit() {
-        if (this.paginate?.pageSizeOptions) {
-            this.pageSizeOptions = this.paginate.pageSizeOptions;
-        }
+    /**
+     * The page size the bar shows.
+     *
+     * Derived from the input rather than held locally. The bar is a display of
+     * the host's paging state — it does not own it — and a local copy meant a
+     * host that supplied `perPage: 50` still saw "25 rows" selected.
+     */
+    get pageSize() {
+        return this.paginate?.perPage ?? OnePageSizeOption[0];
+    }
+    /**
+     * The size options offered.
+     *
+     * Also derived. These used to be copied out of the input in
+     * `ngAfterViewInit` — after the view had already been checked with the
+     * defaults — so any grid supplying its own options threw `NG0100` in dev
+     * mode, and later changes to the list were ignored entirely.
+     */
+    get pageSizeOptions() {
+        return this.paginate?.pageSizeOptions?.length ? this.paginate.pageSizeOptions : OnePageSizeOption;
+    }
+    /** Whether there is a page before the current one. */
+    get hasPrevious() {
+        return this.pageCount > 1 && (this.paginate?.currentPage ?? 1) > 1;
+    }
+    /** Whether there is a page after the current one. */
+    get hasNext() {
+        return this.pageCount > 1 && (this.paginate?.currentPage ?? 1) < (this.paginate?.lastPage ?? 1);
+    }
+    get pageCount() {
+        return this.paginate?.lastPage ?? 1;
     }
     goToFirstPage() {
-        if (!(this.paginate?.perPage < this.paginate?.total && this.paginate?.currentPage > 1))
+        if (!this.hasPrevious)
             return;
         this.goToFirst.emit(this.paginate?.currentPage);
     }
     goToPreviousPage() {
-        if (!(this.paginate?.perPage < this.paginate?.total && this.paginate?.currentPage > 1))
+        if (!this.hasPrevious)
             return;
         this.goToPrevious.emit(this.paginate?.currentPage);
     }
     goToNextPage() {
-        if (!(this.paginate?.perPage < this.paginate?.total && this.paginate?.currentPage < this.paginate?.lastPage))
+        if (!this.hasNext)
             return;
         this.goToNext.emit(this.paginate?.currentPage);
     }
     goToLastPage() {
-        if (!(this.paginate?.perPage < this.paginate?.total && this.paginate?.currentPage < this.paginate?.lastPage))
+        if (!this.hasNext)
             return;
         this.goToLast.emit(this.paginate?.currentPage);
     }
@@ -2885,16 +4408,15 @@ class OneGridPaginationComponent {
         const select = event.target;
         const newSize = Number(select.value);
         if (newSize !== this.pageSize) {
-            this.pageSize = newSize;
-            this.pageSizeChange.emit(this.pageSize);
+            this.pageSizeChange.emit(newSize);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridPaginationComponent, selector: "one-grid-pagination", inputs: { paginate: "paginate" }, outputs: { goToFirst: "goToFirst", goToPrevious: "goToPrevious", goToNext: "goToNext", goToLast: "goToLast", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"one-grid-pagination\">\n    <div class=\"one-pagination-row\">\n        @if (paginate?.firstRowIndex > 0 && paginate?.lastRowIndex > 0 && paginate?.total > 0) {\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <span>{{ paginate?.firstRowIndex }}</span>\n                    <span>-</span>\n                    <span>{{ paginate?.lastRowIndex }}</span>\n                    &nbsp;<span>/</span>&nbsp;\n                    <span>{{ paginate?.total }}</span>\n                </div>\n            </div>\n        }\n        <div class=\"one-pagination-columns-group\">\n            <div class=\"one-pagination-column\">\n                <button \n                    class=\"one-pagination-btn\"\n                    (click)=\"goToFirstPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage > 1)\">\n                    <lucide-icon name=\"chevron-first\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    class=\"one-pagination-btn\"\n                    (click)=\"goToPreviousPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage > 1)\">\n                    <lucide-icon name=\"chevron-left\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <div class=\"one-pagination-column\">\n                &nbsp;{{ paginate?.currentPage }}<span>/</span>{{ paginate?.lastPage }}&nbsp;\n            </div>\n            <div class=\"one-pagination-column\">\n                <button\n                    class=\"one-pagination-btn\"\n                    (click)=\"goToNextPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage < paginate?.lastPage)\">\n                     <lucide-icon name=\"chevron-right\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    class=\"one-pagination-btn\"\n                    (click)=\"goToLastPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage < paginate?.lastPage)\">\n                     <lucide-icon name=\"chevron-last\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <select name=\"row-per-page\" [value]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\n                        @for (size of pageSizeOptions; track $index) {\n                            <option [value]=\"size\">{{ size }} rows</option>\n                        }\n                    </select>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridPaginationComponent, selector: "one-grid-pagination", inputs: { paginate: "paginate" }, outputs: { goToFirst: "goToFirst", goToPrevious: "goToPrevious", goToNext: "goToNext", goToLast: "goToLast", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<!-- A navigation landmark, so the bar is reachable as one thing rather than as\n     four unlabelled icon buttons floating under the grid. -->\n<div class=\"one-grid-pagination\" role=\"navigation\" aria-label=\"Pagination\">\n    <div class=\"one-pagination-row\">\n        @if (paginate?.firstRowIndex > 0 && paginate?.lastRowIndex > 0 && paginate?.total > 0) {\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <span>{{ paginate?.firstRowIndex }}</span>\n                    <span>-</span>\n                    <span>{{ paginate?.lastRowIndex }}</span>\n                    &nbsp;<span>/</span>&nbsp;\n                    <span>{{ paginate?.total }}</span>\n                </div>\n            </div>\n        }\n        <div class=\"one-pagination-columns-group\">\n            <div class=\"one-pagination-column\">\n                <!-- `type=\"button\"` so the bar cannot submit a surrounding form,\n                     a real `disabled` rather than a class that only stops the\n                     mouse, and a name on every icon-only control. -->\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"First page\"\n                    title=\"First page\"\n                    [disabled]=\"!hasPrevious\"\n                    [class.disabled]=\"!hasPrevious\"\n                    (click)=\"goToFirstPage()\">\n                    <lucide-icon name=\"chevron-first\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"Previous page\"\n                    title=\"Previous page\"\n                    [disabled]=\"!hasPrevious\"\n                    [class.disabled]=\"!hasPrevious\"\n                    (click)=\"goToPreviousPage()\">\n                    <lucide-icon name=\"chevron-left\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <!-- Announced as a live region: the numbers are the only feedback a\n                 screen reader gets that the page actually changed. -->\n            <div class=\"one-pagination-column\" role=\"status\" aria-live=\"polite\">\n                &nbsp;<span class=\"one-grid-visually-hidden\">Page </span>{{ paginate?.currentPage }}<span>/</span>{{ paginate?.lastPage }}&nbsp;\n            </div>\n            <div class=\"one-pagination-column\">\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"Next page\"\n                    title=\"Next page\"\n                    [disabled]=\"!hasNext\"\n                    [class.disabled]=\"!hasNext\"\n                    (click)=\"goToNextPage()\">\n                     <lucide-icon name=\"chevron-right\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"Last page\"\n                    title=\"Last page\"\n                    [disabled]=\"!hasNext\"\n                    [class.disabled]=\"!hasNext\"\n                    (click)=\"goToLastPage()\">\n                     <lucide-icon name=\"chevron-last\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <!-- `[selected]` per option, not `[value]` on the select:\n                         with options rendered by `@for`, the select's value is\n                         set before they exist and does not stick. -->\n                    <select name=\"row-per-page\" aria-label=\"Rows per page\" (change)=\"onPageSizeChange($event)\">\n                        @for (size of pageSizeOptions; track size) {\n                            <option [value]=\"size\" [selected]=\"size === pageSize\">{{ size }} rows</option>\n                        }\n                    </select>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i2$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridPaginationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-pagination', template: "<div class=\"one-grid-pagination\">\n    <div class=\"one-pagination-row\">\n        @if (paginate?.firstRowIndex > 0 && paginate?.lastRowIndex > 0 && paginate?.total > 0) {\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <span>{{ paginate?.firstRowIndex }}</span>\n                    <span>-</span>\n                    <span>{{ paginate?.lastRowIndex }}</span>\n                    &nbsp;<span>/</span>&nbsp;\n                    <span>{{ paginate?.total }}</span>\n                </div>\n            </div>\n        }\n        <div class=\"one-pagination-columns-group\">\n            <div class=\"one-pagination-column\">\n                <button \n                    class=\"one-pagination-btn\"\n                    (click)=\"goToFirstPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage > 1)\">\n                    <lucide-icon name=\"chevron-first\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    class=\"one-pagination-btn\"\n                    (click)=\"goToPreviousPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage > 1)\">\n                    <lucide-icon name=\"chevron-left\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <div class=\"one-pagination-column\">\n                &nbsp;{{ paginate?.currentPage }}<span>/</span>{{ paginate?.lastPage }}&nbsp;\n            </div>\n            <div class=\"one-pagination-column\">\n                <button\n                    class=\"one-pagination-btn\"\n                    (click)=\"goToNextPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage < paginate?.lastPage)\">\n                     <lucide-icon name=\"chevron-right\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    class=\"one-pagination-btn\"\n                    (click)=\"goToLastPage()\"\n                    [class.disabled]=\"!(paginate?.perPage < paginate?.total && paginate?.currentPage < paginate?.lastPage)\">\n                     <lucide-icon name=\"chevron-last\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <select name=\"row-per-page\" [value]=\"pageSize\" (change)=\"onPageSizeChange($event)\">\n                        @for (size of pageSizeOptions; track $index) {\n                            <option [value]=\"size\">{{ size }} rows</option>\n                        }\n                    </select>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>" }]
+            args: [{ standalone: false, selector: 'one-grid-pagination', template: "<!-- A navigation landmark, so the bar is reachable as one thing rather than as\n     four unlabelled icon buttons floating under the grid. -->\n<div class=\"one-grid-pagination\" role=\"navigation\" aria-label=\"Pagination\">\n    <div class=\"one-pagination-row\">\n        @if (paginate?.firstRowIndex > 0 && paginate?.lastRowIndex > 0 && paginate?.total > 0) {\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <span>{{ paginate?.firstRowIndex }}</span>\n                    <span>-</span>\n                    <span>{{ paginate?.lastRowIndex }}</span>\n                    &nbsp;<span>/</span>&nbsp;\n                    <span>{{ paginate?.total }}</span>\n                </div>\n            </div>\n        }\n        <div class=\"one-pagination-columns-group\">\n            <div class=\"one-pagination-column\">\n                <!-- `type=\"button\"` so the bar cannot submit a surrounding form,\n                     a real `disabled` rather than a class that only stops the\n                     mouse, and a name on every icon-only control. -->\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"First page\"\n                    title=\"First page\"\n                    [disabled]=\"!hasPrevious\"\n                    [class.disabled]=\"!hasPrevious\"\n                    (click)=\"goToFirstPage()\">\n                    <lucide-icon name=\"chevron-first\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"Previous page\"\n                    title=\"Previous page\"\n                    [disabled]=\"!hasPrevious\"\n                    [class.disabled]=\"!hasPrevious\"\n                    (click)=\"goToPreviousPage()\">\n                    <lucide-icon name=\"chevron-left\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <!-- Announced as a live region: the numbers are the only feedback a\n                 screen reader gets that the page actually changed. -->\n            <div class=\"one-pagination-column\" role=\"status\" aria-live=\"polite\">\n                &nbsp;<span class=\"one-grid-visually-hidden\">Page </span>{{ paginate?.currentPage }}<span>/</span>{{ paginate?.lastPage }}&nbsp;\n            </div>\n            <div class=\"one-pagination-column\">\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"Next page\"\n                    title=\"Next page\"\n                    [disabled]=\"!hasNext\"\n                    [class.disabled]=\"!hasNext\"\n                    (click)=\"goToNextPage()\">\n                     <lucide-icon name=\"chevron-right\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n                <button\n                    type=\"button\"\n                    class=\"one-pagination-btn\"\n                    aria-label=\"Last page\"\n                    title=\"Last page\"\n                    [disabled]=\"!hasNext\"\n                    [class.disabled]=\"!hasNext\"\n                    (click)=\"goToLastPage()\">\n                     <lucide-icon name=\"chevron-last\" [size]=\"16\" [strokeWidth]=\"2\"></lucide-icon>\n                </button>\n            </div>\n            <div class=\"one-pagination-columns-group\">\n                <div class=\"one-pagination-column\">\n                    <!-- `[selected]` per option, not `[value]` on the select:\n                         with options rendered by `@for`, the select's value is\n                         set before they exist and does not stick. -->\n                    <select name=\"row-per-page\" aria-label=\"Rows per page\" (change)=\"onPageSizeChange($event)\">\n                        @for (size of pageSizeOptions; track size) {\n                            <option [value]=\"size\" [selected]=\"size === pageSize\">{{ size }} rows</option>\n                        }\n                    </select>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { paginate: [{
                 type: Input
             }], goToFirst: [{
@@ -2924,6 +4446,14 @@ class OneGridComponent {
         this.groupColumnDefs = [];
         this.defaultColumnDef = {};
         this.columnDefs = [];
+        /**
+         * Rows anchored above the scrolling area — a header summary, or an entry line.
+         * They keep column alignment and scroll sideways with the body, but are not
+         * data: sorting, filtering, selection and the row count all pass them by.
+         */
+        this.pinnedTopRowData = [];
+        /** Rows anchored below the scrolling area, typically a totals row. */
+        this.pinnedBottomRowData = [];
         // RXJS Properties
         this.gridCopy$ = new Subject();
         /**
@@ -2941,6 +4471,11 @@ class OneGridComponent {
         /**
          * Bind Row Action Events & Data to Parent
          */
+        /**
+         * A row finished moving. Fires once per completed reorder — not while the
+         * pointer is in flight — and only when the position actually changed.
+         */
+        this.rowDragEnd = new EventEmitter();
         this.onGridReady = new EventEmitter();
         this.onRowGotoDetail = new EventEmitter();
         this.onRowAddNew = new EventEmitter();
@@ -2988,6 +4523,15 @@ class OneGridComponent {
         if (changes["rowData"] && !changes["rowData"]?.firstChange) {
             this.treeData || this.masterDetail ? this.api.updateRowData(this.rowData) : this.api.setRowData(this.rowData);
         }
+        // Only later changes. The first one arrives before ngOnInit has run
+        // api.init, so the column definitions are not registered yet and the body
+        // has not subscribed — the initial load happens in ngAfterViewInit instead.
+        if (changes["pinnedTopRowData"] && !changes["pinnedTopRowData"].firstChange) {
+            this.api.setPinnedRowData('top', this.pinnedTopRowData);
+        }
+        if (changes["pinnedBottomRowData"] && !changes["pinnedBottomRowData"].firstChange) {
+            this.api.setPinnedRowData('bottom', this.pinnedBottomRowData);
+        }
     }
     ngOnInit() {
         /**
@@ -3015,7 +4559,18 @@ class OneGridComponent {
         /**
          * Initialize One Grid API
          */
-        this.api.init(this.gridType, this.rowSelection, this.columnDefs, this.defaultColumnDef, this.context, this.masterDetail, this.detailCellRendererParams, this.detailRendererComponent, this.treeData, this.groupColumnDefs);
+        this.api.init({
+            gridType: this.gridType,
+            columnDefs: this.columnDefs,
+            defaultColumnDef: this.defaultColumnDef,
+            groupColumnDefs: this.groupColumnDefs,
+            context: this.context,
+            rowSelection: this.rowSelection,
+            masterDetail: this.masterDetail,
+            detailCellRendererParams: this.detailCellRendererParams,
+            detailRendererComponent: this.detailRendererComponent,
+            treeData: this.treeData,
+        });
         /**
          * Setup Master Detail Configuration
          */
@@ -3043,14 +4598,20 @@ class OneGridComponent {
         }));
     }
     ngAfterViewInit() {
-        const headerViewport = this.elementRef.nativeElement.querySelector('.one-grid-header-column');
-        const bodyViewport = this.elementRef.nativeElement.querySelector('.one-grid-body-viewport');
-        // Listen Scroll Event Changed
-        this.subscriptions.add(fromEvent(bodyViewport, 'scroll').subscribe(() => {
-            if (headerViewport) {
-                headerViewport.scrollLeft = bodyViewport.scrollLeft;
-            }
-        }));
+        // The header follows the body through (bodyScroll) -> [scrollLeft]. A second
+        // subscription used to live here that queried '.one-grid-header-column' — a
+        // header *cell*, not the viewport — and assigned scrollLeft to it, which
+        // does nothing. It has been removed rather than repaired: the binding path
+        // is the one that works, and it now drives the pinned columns too.
+        // Pinned rows, now that the columns are registered and the body is
+        // listening. Unlike rowData these are not loaded through (onGridReady) —
+        // binding them is the whole contract — so the grid loads them itself.
+        if (this.pinnedTopRowData?.length) {
+            this.api.setPinnedRowData('top', this.pinnedTopRowData);
+        }
+        if (this.pinnedBottomRowData?.length) {
+            this.api.setPinnedRowData('bottom', this.pinnedBottomRowData);
+        }
         /**
          * Emit Grid Ready Event
          */
@@ -3149,6 +4710,9 @@ class OneGridComponent {
     invokePageSizeChange(pageSize) {
         this.pageSizeChange.emit(pageSize);
     }
+    invokeRowDragEnd(event) {
+        this.rowDragEnd.emit(event);
+    }
     invokeExpansionChangedClick(event) {
         this.expansionChanged.emit(event);
     }
@@ -3161,15 +4725,16 @@ class OneGridComponent {
         this.subscriptions.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridComponent, deps: [{ token: OneGridApi }, { token: OneGridEventService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridComponent, selector: "one-grid", inputs: { rowNumber: "rowNumber", allowedEdit: "allowedEdit", submitted: "submitted", context: "context", rowData: "rowData", rowSelection: "rowSelection", enableGroupColumnDefs: "enableGroupColumnDefs", groupColumnDefs: "groupColumnDefs", defaultColumnDef: "defaultColumnDef", columnDefs: "columnDefs", gridType: "gridType", masterDetail: "masterDetail", masterNode: "masterNode", detailCellRendererParams: "detailCellRendererParams", detailRendererComponent: "detailRendererComponent", treeData: "treeData", treeDataChildrenField: "treeDataChildrenField", autoGroupColumnDef: "autoGroupColumnDef", groupDefaultExpanded: "groupDefaultExpanded", pagination: "pagination", paginate: "paginate" }, outputs: { onGridReady: "onGridReady", onRowGotoDetail: "onRowGotoDetail", onRowAddNew: "onRowAddNew", onRowView: "onRowView", onRowLocation: "onRowLocation", onRowDocument: "onRowDocument", onRowCopy: "onRowCopy", onRowDelete: "onRowDelete", onRowGotoList: "onRowGotoList", onRowEdit: "onRowEdit", onRowPrint: "onRowPrint", onRowHistory: "onRowHistory", onRowOption: "onRowOption", onRowLanguage: "onRowLanguage", onRowSelection: "onRowSelection", onShiftDoubleClick: "onShiftDoubleClick", rowCountChanged: "rowCountChanged", selectionChanged: "selectionChanged", expansionChanged: "expansionChanged", cellOptionSelect: "cellOptionSelect", onRowCellOption: "onRowCellOption", goToFirst: "goToFirst", goToPrevious: "goToPrevious", goToNext: "goToNext", goToLast: "goToLast", pageSizeChange: "pageSizeChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridComponent, selector: "one-grid", inputs: { rowNumber: "rowNumber", allowedEdit: "allowedEdit", submitted: "submitted", context: "context", rowData: "rowData", rowSelection: "rowSelection", enableGroupColumnDefs: "enableGroupColumnDefs", groupColumnDefs: "groupColumnDefs", defaultColumnDef: "defaultColumnDef", columnDefs: "columnDefs", pinnedTopRowData: "pinnedTopRowData", pinnedBottomRowData: "pinnedBottomRowData", gridType: "gridType", masterDetail: "masterDetail", masterNode: "masterNode", detailCellRendererParams: "detailCellRendererParams", detailRendererComponent: "detailRendererComponent", treeData: "treeData", treeDataChildrenField: "treeDataChildrenField", autoGroupColumnDef: "autoGroupColumnDef", groupDefaultExpanded: "groupDefaultExpanded", pagination: "pagination", paginate: "paginate" }, outputs: { rowDragEnd: "rowDragEnd", onGridReady: "onGridReady", onRowGotoDetail: "onRowGotoDetail", onRowAddNew: "onRowAddNew", onRowView: "onRowView", onRowLocation: "onRowLocation", onRowDocument: "onRowDocument", onRowCopy: "onRowCopy", onRowDelete: "onRowDelete", onRowGotoList: "onRowGotoList", onRowEdit: "onRowEdit", onRowPrint: "onRowPrint", onRowHistory: "onRowHistory", onRowOption: "onRowOption", onRowLanguage: "onRowLanguage", onRowSelection: "onRowSelection", onShiftDoubleClick: "onShiftDoubleClick", rowCountChanged: "rowCountChanged", selectionChanged: "selectionChanged", expansionChanged: "expansionChanged", cellOptionSelect: "cellOptionSelect", onRowCellOption: "onRowCellOption", goToFirst: "goToFirst", goToPrevious: "goToPrevious", goToNext: "goToNext", goToLast: "goToLast", pageSizeChange: "pageSizeChange" }, providers: [
             OneGridEventService,
             OneGridApi,
             OgColumnService,
             OneGridSelectionService,
             OneGridExpansionService,
             OneGridRowService,
-            OneGridCellService
-        ], viewQueries: [{ propertyName: "ogRef", first: true, predicate: ["ogRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #ogRef class=\"one-grid\" (copy)=\"onGridCopy($event)\" tabindex=\"0\">\n    \n    <!-- Headers -->\n    <one-grid-header\n        [api]=\"api\"\n        [enableGroupColumnDefs]=\"enableGroupColumnDefs\"\n        [allowedEdit]=\"allowedEdit\"\n        [scrollLeft]=\"bodyScrollLeft\"\n    />\n\n    <!-- Body -->\n    <one-grid-body\n        [gridCopy$]=\"gridCopy$\"\n        [rowData]=\"rowData\"\n        [api]=\"api\"\n        [rowNumber]=\"rowNumber\"\n        [pagination]=\"pagination\"\n        [allowedEdit]=\"allowedEdit\"\n        [submitted]=\"submitted\"\n        [context]=\"context\"\n        [treeData]=\"treeData\"\n        [gridType]=\"gridType\"\n        [masterDetail]=\"masterDetail\"\n        [masterNode]=\"masterNode\"\n        [detailCellRendererParams]=\"detailCellRendererParams\"\n        [detailRendererComponent]=\"detailRendererComponent\"\n        [detailGridTemplate]=\"detailGridTpl\"\n        [treeDataChildrenField]=\"treeDataChildrenField\"\n        [autoGroupColumnDef]=\"autoGroupColumnDef\"\n        [groupDefaultExpanded]=\"groupDefaultExpanded\"\n        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n        (onRowView)=\"invokeRowActionView($event)\"\n        (onRowLocation)=\"invokeRowActionLocation($event)\"\n        (onRowDocument)=\"invokeRowActionDocument($event)\"\n        (onRowCopy)=\"invokeRowActionCopy($event)\"\n        (onRowDelete)=\"invokeRowActionDelete($event)\"\n        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n        (onRowEdit)=\"invokeRowActionEdit($event)\"\n        (onRowPrint)=\"invokeRowActionPrint($event)\"\n        (onRowHistory)=\"invokeRowActionHistory($event)\"\n        (onRowOption)=\"invokeRowActionOption($event)\"\n        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n        (onRowSelection)=\"invokeRowActionSelection($event)\"\n        (onShiftDoubleClick)=\"invokeShiftDoubleClick($event)\"\n        (rowCountChanged)=\"invokeRowCountChanged($event)\"\n        (cellOptionSelect)=\"cellOptionMenuSelected($event)\"\n        (bodyScroll)=\"onBodyScroll($event)\"\n    />\n    \n    <!-- Pagination -->\n    @if (pagination) {\n        <one-grid-pagination\n            [paginate]=\"paginate\"\n            (goToFirst)=\"invokeGoToFirst()\"\n            (goToLast)=\"invokeGoToLast()\"\n            (goToPrevious)=\"invokeGoToPrevious()\"\n            (goToNext)=\"invokeGoToNext()\"\n            (pageSizeChange)=\"invokePageSizeChange($event)\"\n        />\n    }\n\n    <!-- Master Detail Grid template, rendered inside one-grid-body via ngTemplateOutlet.\n         Declared here (self-reference) so one-grid-body's template does not need to\n         import one-grid, which would create an unsupported compile-time cycle. -->\n    <ng-template #detailGridTpl let-node=\"node\">\n        <one-grid\n            [style.height.px]=\"node.detailRowHeight\"\n            [gridType]=\"'detail'\"\n            [masterNode]=\"node\"\n            [masterDetail]=\"masterDetail\"\n            [defaultColumnDef]=\"detailCellRendererParams.detailGridOptions.defaultColumnDef\"\n            [columnDefs]=\"detailCellRendererParams.detailGridOptions.columnDefs\"\n            [rowData]=\"node?.detailRowData\"\n            [rowNumber]=\"detailCellRendererParams.detailGridOptions?.rowNumber\"\n            [allowedEdit]=\"allowedEdit\"\n            [submitted]=\"submitted\"\n            [context]=\"context\"\n            (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n            (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n            (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n            (onRowView)=\"invokeRowActionView($event)\"\n            (onRowLocation)=\"invokeRowActionLocation($event)\"\n            (onRowDocument)=\"invokeRowActionDocument($event)\"\n            (onRowCopy)=\"invokeRowActionCopy($event)\"\n            (onRowDelete)=\"invokeRowActionDelete($event)\"\n            (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n            (onRowEdit)=\"invokeRowActionEdit($event)\"\n            (onRowPrint)=\"invokeRowActionPrint($event)\"\n            (onRowHistory)=\"invokeRowActionHistory($event)\"\n            (onRowOption)=\"invokeRowActionOption($event)\"\n            (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n            (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n            (onGridReady)=\"onDetailGridReady($event)\"\n        />\n    </ng-template>\n</div>", styles: [""], dependencies: [{ kind: "component", type: OneGridComponent, selector: "one-grid", inputs: ["rowNumber", "allowedEdit", "submitted", "context", "rowData", "rowSelection", "enableGroupColumnDefs", "groupColumnDefs", "defaultColumnDef", "columnDefs", "gridType", "masterDetail", "masterNode", "detailCellRendererParams", "detailRendererComponent", "treeData", "treeDataChildrenField", "autoGroupColumnDef", "groupDefaultExpanded", "pagination", "paginate"], outputs: ["onGridReady", "onRowGotoDetail", "onRowAddNew", "onRowView", "onRowLocation", "onRowDocument", "onRowCopy", "onRowDelete", "onRowGotoList", "onRowEdit", "onRowPrint", "onRowHistory", "onRowOption", "onRowLanguage", "onRowSelection", "onShiftDoubleClick", "rowCountChanged", "selectionChanged", "expansionChanged", "cellOptionSelect", "onRowCellOption", "goToFirst", "goToPrevious", "goToNext", "goToLast", "pageSizeChange"] }, { kind: "component", type: OneGridHeaderComponent, selector: "one-grid-header", inputs: ["scrollLeft", "allowedEdit", "enableGroupColumnDefs", "api"] }, { kind: "component", type: OneGridBodyComponent, selector: "one-grid-body", inputs: ["rowData", "rowNumber", "api", "pagination", "allowedEdit", "enableGroupColumnDefs", "submitted", "context", "getRowId", "gridCopy$", "gridType", "masterDetail", "masterNode", "detailRowMaxHeight", "detailCellRendererParams", "detailGridTemplate", "detailRendererComponent", "treeData", "treeDataChildrenField", "autoGroupColumnDef", "groupDefaultExpanded"], outputs: ["onRowGotoDetail", "onRowAddNew", "onRowView", "onRowCopy", "onRowLocation", "onRowDocument", "onRowDelete", "onRowGotoList", "onRowEdit", "onRowPrint", "onRowHistory", "onRowOption", "onRowLanguage", "onRowCellOption", "onRowSelection", "onShiftDoubleClick", "rowCountChanged", "expansionChanged", "bodyScroll", "cellOptionSelect"] }, { kind: "component", type: OneGridPaginationComponent, selector: "one-grid-pagination", inputs: ["paginate"], outputs: ["goToFirst", "goToPrevious", "goToNext", "goToLast", "pageSizeChange"] }] }); }
+            OneGridCellService,
+            OneGridRowDragService
+        ], viewQueries: [{ propertyName: "ogRef", first: true, predicate: ["ogRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- No tabindex here. The tab stop belongs on the body viewport, which is the\n     element that actually scrolls; a focusable wrapper around a scrollable\n     child is reachable but cannot be scrolled with the keyboard. The copy\n     handler is unaffected: a copy event fired at the focused viewport bubbles\n     up to here. -->\n<div #ogRef class=\"one-grid\" (copy)=\"onGridCopy($event)\">\n    \n    <!-- Headers -->\n    <one-grid-header\n        [api]=\"api\"\n        [enableGroupColumnDefs]=\"enableGroupColumnDefs\"\n        [allowedEdit]=\"allowedEdit\"\n        [scrollLeft]=\"bodyScrollLeft\"\n    />\n\n    <!-- Body -->\n    <one-grid-body\n        [gridCopy$]=\"gridCopy$\"\n        [rowData]=\"rowData\"\n        [pinnedTopRowData]=\"pinnedTopRowData\"\n        [pinnedBottomRowData]=\"pinnedBottomRowData\"\n        [api]=\"api\"\n        [rowNumber]=\"rowNumber\"\n        [pagination]=\"pagination\"\n        [allowedEdit]=\"allowedEdit\"\n        [submitted]=\"submitted\"\n        [context]=\"context\"\n        [treeData]=\"treeData\"\n        [gridType]=\"gridType\"\n        [masterDetail]=\"masterDetail\"\n        [masterNode]=\"masterNode\"\n        [detailCellRendererParams]=\"detailCellRendererParams\"\n        [detailRendererComponent]=\"detailRendererComponent\"\n        [detailGridTemplate]=\"detailGridTpl\"\n        [treeDataChildrenField]=\"treeDataChildrenField\"\n        [autoGroupColumnDef]=\"autoGroupColumnDef\"\n        [groupDefaultExpanded]=\"groupDefaultExpanded\"\n        (rowDragEnd)=\"invokeRowDragEnd($event)\"\n        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n        (onRowView)=\"invokeRowActionView($event)\"\n        (onRowLocation)=\"invokeRowActionLocation($event)\"\n        (onRowDocument)=\"invokeRowActionDocument($event)\"\n        (onRowCopy)=\"invokeRowActionCopy($event)\"\n        (onRowDelete)=\"invokeRowActionDelete($event)\"\n        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n        (onRowEdit)=\"invokeRowActionEdit($event)\"\n        (onRowPrint)=\"invokeRowActionPrint($event)\"\n        (onRowHistory)=\"invokeRowActionHistory($event)\"\n        (onRowOption)=\"invokeRowActionOption($event)\"\n        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n        (onRowSelection)=\"invokeRowActionSelection($event)\"\n        (onShiftDoubleClick)=\"invokeShiftDoubleClick($event)\"\n        (rowCountChanged)=\"invokeRowCountChanged($event)\"\n        (cellOptionSelect)=\"cellOptionMenuSelected($event)\"\n        (bodyScroll)=\"onBodyScroll($event)\"\n    />\n    \n    <!-- Pagination -->\n    @if (pagination) {\n        <one-grid-pagination\n            [paginate]=\"paginate\"\n            (goToFirst)=\"invokeGoToFirst()\"\n            (goToLast)=\"invokeGoToLast()\"\n            (goToPrevious)=\"invokeGoToPrevious()\"\n            (goToNext)=\"invokeGoToNext()\"\n            (pageSizeChange)=\"invokePageSizeChange($event)\"\n        />\n    }\n\n    <!-- Master Detail Grid template, rendered inside one-grid-body via ngTemplateOutlet.\n         Declared here (self-reference) so one-grid-body's template does not need to\n         import one-grid, which would create an unsupported compile-time cycle. -->\n    <ng-template #detailGridTpl let-node=\"node\">\n        <one-grid\n            [style.height.px]=\"node.detailRowHeight\"\n            [gridType]=\"'detail'\"\n            [masterNode]=\"node\"\n            [masterDetail]=\"masterDetail\"\n            [defaultColumnDef]=\"detailCellRendererParams.detailGridOptions.defaultColumnDef\"\n            [columnDefs]=\"detailCellRendererParams.detailGridOptions.columnDefs\"\n            [rowData]=\"node?.detailRowData\"\n            [rowNumber]=\"detailCellRendererParams.detailGridOptions?.rowNumber\"\n            [allowedEdit]=\"allowedEdit\"\n            [submitted]=\"submitted\"\n            [context]=\"context\"\n            (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n            (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n            (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n            (onRowView)=\"invokeRowActionView($event)\"\n            (onRowLocation)=\"invokeRowActionLocation($event)\"\n            (onRowDocument)=\"invokeRowActionDocument($event)\"\n            (onRowCopy)=\"invokeRowActionCopy($event)\"\n            (onRowDelete)=\"invokeRowActionDelete($event)\"\n            (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n            (onRowEdit)=\"invokeRowActionEdit($event)\"\n            (onRowPrint)=\"invokeRowActionPrint($event)\"\n            (onRowHistory)=\"invokeRowActionHistory($event)\"\n            (onRowOption)=\"invokeRowActionOption($event)\"\n            (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n            (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n            (onGridReady)=\"onDetailGridReady($event)\"\n        />\n    </ng-template>\n</div>", styles: [""], dependencies: [{ kind: "component", type: OneGridComponent, selector: "one-grid", inputs: ["rowNumber", "allowedEdit", "submitted", "context", "rowData", "rowSelection", "enableGroupColumnDefs", "groupColumnDefs", "defaultColumnDef", "columnDefs", "pinnedTopRowData", "pinnedBottomRowData", "gridType", "masterDetail", "masterNode", "detailCellRendererParams", "detailRendererComponent", "treeData", "treeDataChildrenField", "autoGroupColumnDef", "groupDefaultExpanded", "pagination", "paginate"], outputs: ["rowDragEnd", "onGridReady", "onRowGotoDetail", "onRowAddNew", "onRowView", "onRowLocation", "onRowDocument", "onRowCopy", "onRowDelete", "onRowGotoList", "onRowEdit", "onRowPrint", "onRowHistory", "onRowOption", "onRowLanguage", "onRowSelection", "onShiftDoubleClick", "rowCountChanged", "selectionChanged", "expansionChanged", "cellOptionSelect", "onRowCellOption", "goToFirst", "goToPrevious", "goToNext", "goToLast", "pageSizeChange"] }, { kind: "component", type: OneGridHeaderComponent, selector: "one-grid-header", inputs: ["scrollLeft", "allowedEdit", "enableGroupColumnDefs", "api"] }, { kind: "component", type: OneGridBodyComponent, selector: "one-grid-body", inputs: ["rowData", "rowNumber", "api", "pagination", "allowedEdit", "enableGroupColumnDefs", "submitted", "context", "getRowId", "gridCopy$", "pinnedTopRowData", "pinnedBottomRowData", "gridType", "masterDetail", "masterNode", "detailRowMaxHeight", "detailCellRendererParams", "detailGridTemplate", "detailRendererComponent", "treeData", "treeDataChildrenField", "autoGroupColumnDef", "groupDefaultExpanded"], outputs: ["onRowGotoDetail", "onRowAddNew", "onRowView", "onRowCopy", "onRowLocation", "onRowDocument", "onRowDelete", "onRowGotoList", "onRowEdit", "onRowPrint", "onRowHistory", "onRowOption", "onRowLanguage", "onRowCellOption", "onRowSelection", "onShiftDoubleClick", "rowCountChanged", "expansionChanged", "bodyScroll", "cellOptionSelect", "rowDragEnd"] }, { kind: "component", type: OneGridPaginationComponent, selector: "one-grid-pagination", inputs: ["paginate"], outputs: ["goToFirst", "goToPrevious", "goToNext", "goToLast", "pageSizeChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridComponent, decorators: [{
             type: Component,
@@ -3180,8 +4745,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         OneGridSelectionService,
                         OneGridExpansionService,
                         OneGridRowService,
-                        OneGridCellService
-                    ], template: "<div #ogRef class=\"one-grid\" (copy)=\"onGridCopy($event)\" tabindex=\"0\">\n    \n    <!-- Headers -->\n    <one-grid-header\n        [api]=\"api\"\n        [enableGroupColumnDefs]=\"enableGroupColumnDefs\"\n        [allowedEdit]=\"allowedEdit\"\n        [scrollLeft]=\"bodyScrollLeft\"\n    />\n\n    <!-- Body -->\n    <one-grid-body\n        [gridCopy$]=\"gridCopy$\"\n        [rowData]=\"rowData\"\n        [api]=\"api\"\n        [rowNumber]=\"rowNumber\"\n        [pagination]=\"pagination\"\n        [allowedEdit]=\"allowedEdit\"\n        [submitted]=\"submitted\"\n        [context]=\"context\"\n        [treeData]=\"treeData\"\n        [gridType]=\"gridType\"\n        [masterDetail]=\"masterDetail\"\n        [masterNode]=\"masterNode\"\n        [detailCellRendererParams]=\"detailCellRendererParams\"\n        [detailRendererComponent]=\"detailRendererComponent\"\n        [detailGridTemplate]=\"detailGridTpl\"\n        [treeDataChildrenField]=\"treeDataChildrenField\"\n        [autoGroupColumnDef]=\"autoGroupColumnDef\"\n        [groupDefaultExpanded]=\"groupDefaultExpanded\"\n        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n        (onRowView)=\"invokeRowActionView($event)\"\n        (onRowLocation)=\"invokeRowActionLocation($event)\"\n        (onRowDocument)=\"invokeRowActionDocument($event)\"\n        (onRowCopy)=\"invokeRowActionCopy($event)\"\n        (onRowDelete)=\"invokeRowActionDelete($event)\"\n        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n        (onRowEdit)=\"invokeRowActionEdit($event)\"\n        (onRowPrint)=\"invokeRowActionPrint($event)\"\n        (onRowHistory)=\"invokeRowActionHistory($event)\"\n        (onRowOption)=\"invokeRowActionOption($event)\"\n        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n        (onRowSelection)=\"invokeRowActionSelection($event)\"\n        (onShiftDoubleClick)=\"invokeShiftDoubleClick($event)\"\n        (rowCountChanged)=\"invokeRowCountChanged($event)\"\n        (cellOptionSelect)=\"cellOptionMenuSelected($event)\"\n        (bodyScroll)=\"onBodyScroll($event)\"\n    />\n    \n    <!-- Pagination -->\n    @if (pagination) {\n        <one-grid-pagination\n            [paginate]=\"paginate\"\n            (goToFirst)=\"invokeGoToFirst()\"\n            (goToLast)=\"invokeGoToLast()\"\n            (goToPrevious)=\"invokeGoToPrevious()\"\n            (goToNext)=\"invokeGoToNext()\"\n            (pageSizeChange)=\"invokePageSizeChange($event)\"\n        />\n    }\n\n    <!-- Master Detail Grid template, rendered inside one-grid-body via ngTemplateOutlet.\n         Declared here (self-reference) so one-grid-body's template does not need to\n         import one-grid, which would create an unsupported compile-time cycle. -->\n    <ng-template #detailGridTpl let-node=\"node\">\n        <one-grid\n            [style.height.px]=\"node.detailRowHeight\"\n            [gridType]=\"'detail'\"\n            [masterNode]=\"node\"\n            [masterDetail]=\"masterDetail\"\n            [defaultColumnDef]=\"detailCellRendererParams.detailGridOptions.defaultColumnDef\"\n            [columnDefs]=\"detailCellRendererParams.detailGridOptions.columnDefs\"\n            [rowData]=\"node?.detailRowData\"\n            [rowNumber]=\"detailCellRendererParams.detailGridOptions?.rowNumber\"\n            [allowedEdit]=\"allowedEdit\"\n            [submitted]=\"submitted\"\n            [context]=\"context\"\n            (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n            (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n            (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n            (onRowView)=\"invokeRowActionView($event)\"\n            (onRowLocation)=\"invokeRowActionLocation($event)\"\n            (onRowDocument)=\"invokeRowActionDocument($event)\"\n            (onRowCopy)=\"invokeRowActionCopy($event)\"\n            (onRowDelete)=\"invokeRowActionDelete($event)\"\n            (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n            (onRowEdit)=\"invokeRowActionEdit($event)\"\n            (onRowPrint)=\"invokeRowActionPrint($event)\"\n            (onRowHistory)=\"invokeRowActionHistory($event)\"\n            (onRowOption)=\"invokeRowActionOption($event)\"\n            (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n            (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n            (onGridReady)=\"onDetailGridReady($event)\"\n        />\n    </ng-template>\n</div>" }]
+                        OneGridCellService,
+                        OneGridRowDragService
+                    ], template: "<!-- No tabindex here. The tab stop belongs on the body viewport, which is the\n     element that actually scrolls; a focusable wrapper around a scrollable\n     child is reachable but cannot be scrolled with the keyboard. The copy\n     handler is unaffected: a copy event fired at the focused viewport bubbles\n     up to here. -->\n<div #ogRef class=\"one-grid\" (copy)=\"onGridCopy($event)\">\n    \n    <!-- Headers -->\n    <one-grid-header\n        [api]=\"api\"\n        [enableGroupColumnDefs]=\"enableGroupColumnDefs\"\n        [allowedEdit]=\"allowedEdit\"\n        [scrollLeft]=\"bodyScrollLeft\"\n    />\n\n    <!-- Body -->\n    <one-grid-body\n        [gridCopy$]=\"gridCopy$\"\n        [rowData]=\"rowData\"\n        [pinnedTopRowData]=\"pinnedTopRowData\"\n        [pinnedBottomRowData]=\"pinnedBottomRowData\"\n        [api]=\"api\"\n        [rowNumber]=\"rowNumber\"\n        [pagination]=\"pagination\"\n        [allowedEdit]=\"allowedEdit\"\n        [submitted]=\"submitted\"\n        [context]=\"context\"\n        [treeData]=\"treeData\"\n        [gridType]=\"gridType\"\n        [masterDetail]=\"masterDetail\"\n        [masterNode]=\"masterNode\"\n        [detailCellRendererParams]=\"detailCellRendererParams\"\n        [detailRendererComponent]=\"detailRendererComponent\"\n        [detailGridTemplate]=\"detailGridTpl\"\n        [treeDataChildrenField]=\"treeDataChildrenField\"\n        [autoGroupColumnDef]=\"autoGroupColumnDef\"\n        [groupDefaultExpanded]=\"groupDefaultExpanded\"\n        (rowDragEnd)=\"invokeRowDragEnd($event)\"\n        (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n        (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n        (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n        (onRowView)=\"invokeRowActionView($event)\"\n        (onRowLocation)=\"invokeRowActionLocation($event)\"\n        (onRowDocument)=\"invokeRowActionDocument($event)\"\n        (onRowCopy)=\"invokeRowActionCopy($event)\"\n        (onRowDelete)=\"invokeRowActionDelete($event)\"\n        (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n        (onRowEdit)=\"invokeRowActionEdit($event)\"\n        (onRowPrint)=\"invokeRowActionPrint($event)\"\n        (onRowHistory)=\"invokeRowActionHistory($event)\"\n        (onRowOption)=\"invokeRowActionOption($event)\"\n        (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n        (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n        (onRowSelection)=\"invokeRowActionSelection($event)\"\n        (onShiftDoubleClick)=\"invokeShiftDoubleClick($event)\"\n        (rowCountChanged)=\"invokeRowCountChanged($event)\"\n        (cellOptionSelect)=\"cellOptionMenuSelected($event)\"\n        (bodyScroll)=\"onBodyScroll($event)\"\n    />\n    \n    <!-- Pagination -->\n    @if (pagination) {\n        <one-grid-pagination\n            [paginate]=\"paginate\"\n            (goToFirst)=\"invokeGoToFirst()\"\n            (goToLast)=\"invokeGoToLast()\"\n            (goToPrevious)=\"invokeGoToPrevious()\"\n            (goToNext)=\"invokeGoToNext()\"\n            (pageSizeChange)=\"invokePageSizeChange($event)\"\n        />\n    }\n\n    <!-- Master Detail Grid template, rendered inside one-grid-body via ngTemplateOutlet.\n         Declared here (self-reference) so one-grid-body's template does not need to\n         import one-grid, which would create an unsupported compile-time cycle. -->\n    <ng-template #detailGridTpl let-node=\"node\">\n        <one-grid\n            [style.height.px]=\"node.detailRowHeight\"\n            [gridType]=\"'detail'\"\n            [masterNode]=\"node\"\n            [masterDetail]=\"masterDetail\"\n            [defaultColumnDef]=\"detailCellRendererParams.detailGridOptions.defaultColumnDef\"\n            [columnDefs]=\"detailCellRendererParams.detailGridOptions.columnDefs\"\n            [rowData]=\"node?.detailRowData\"\n            [rowNumber]=\"detailCellRendererParams.detailGridOptions?.rowNumber\"\n            [allowedEdit]=\"allowedEdit\"\n            [submitted]=\"submitted\"\n            [context]=\"context\"\n            (expansionChanged)=\"invokeExpansionChangedClick($event)\"\n            (onRowGotoDetail)=\"invokeRowActionGotoDetail($event)\"\n            (onRowAddNew)=\"invokeRowActionAddNew($event)\"\n            (onRowView)=\"invokeRowActionView($event)\"\n            (onRowLocation)=\"invokeRowActionLocation($event)\"\n            (onRowDocument)=\"invokeRowActionDocument($event)\"\n            (onRowCopy)=\"invokeRowActionCopy($event)\"\n            (onRowDelete)=\"invokeRowActionDelete($event)\"\n            (onRowGotoList)=\"invokeRowActionGotoList($event)\"\n            (onRowEdit)=\"invokeRowActionEdit($event)\"\n            (onRowPrint)=\"invokeRowActionPrint($event)\"\n            (onRowHistory)=\"invokeRowActionHistory($event)\"\n            (onRowOption)=\"invokeRowActionOption($event)\"\n            (onRowLanguage)=\"invokeRowActionLanguage($event)\"\n            (onRowCellOption)=\"invokeRowActionCellOption($event)\"\n            (onGridReady)=\"onDetailGridReady($event)\"\n        />\n    </ng-template>\n</div>" }]
         }], ctorParameters: () => [{ type: OneGridApi }, { type: OneGridEventService }, { type: i0.ElementRef }], propDecorators: { ogRef: [{
                 type: ViewChild,
                 args: ['ogRef', { static: true }]
@@ -3205,6 +4771,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], columnDefs: [{
                 type: Input
+            }], pinnedTopRowData: [{
+                type: Input
+            }], pinnedBottomRowData: [{
+                type: Input
             }], gridType: [{
                 type: Input
             }], masterDetail: [{
@@ -3223,6 +4793,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], groupDefaultExpanded: [{
                 type: Input
+            }], rowDragEnd: [{
+                type: Output
             }], onGridReady: [{
                 type: Output
             }], onRowGotoDetail: [{
@@ -3385,7 +4957,7 @@ class OneGridCellCurrencyComponent {
         this.unsubscribe?.();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellCurrencyComponent, deps: [{ token: OneGridCellService }, { token: OneGridEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridCellCurrencyComponent, selector: "app-one-grid-cell-currency", inputs: { allowedEdit: "allowedEdit" }, ngImport: i0, template: "<div class=\"cell-wrapper\"\n     [class.editable]=\"isEditable\"\n     [attr.data-cell-id]=\"getCellField(params.node?.rowIndex, params.columnDef?.field)\"\n     [style.min-width.px]=\"params.columnDef?.minWidth\"\n     [style.max-width.px]=\"params.columnDef?.maxWidth\">\n\n    @if (params.node?.editing?.[params.columnDef?.field]) {\n      <input class=\"one-cell-input\"\n        name=\"{{ params.node?.rowIndex }}_{{ params.columnDef?.field }}\"\n        oneCellInputValidator\n        validationType=\"number\"\n        [placeholder]=\"params.columnDef?.cellRendererParams?.placeholder || ''\"\n        type=\"text\"\n        [(ngModel)]=\"value\"\n        [maxLength]=\"250\"\n        (blur)=\"stopEdit(params.node, params.columnDef, $event)\"\n        (keydown.enter)=\"stopEdit(params.node, params.columnDef, $event)\"\n        (keydown.esc)=\"cancelEdit(params.node, params.columnDef)\" />\n    }\n    @else {\n      <div class=\"d-flex justify-content-between px-2 pt-1\"\n        [class.one-cell-allowed-edit-active]=\"isEditable\"\n        (dblclick)=\"startEdit(params.node, params.columnDef)\">\n        <span class=\"currency-code\" style=\"font-weight: bold;\">{{ this.params?.data?.currency?.currencyCode || 'USD' }}</span>\n        <span class=\"amount-value\">\n          {{ result | number:(this.params?.field === 'amount' ? '1.3-3' : '1.2-2') }}\n        </span>\n      </div>\n    }\n</div>\n", styles: [".one-cell-input{position:absolute;top:0;left:0;width:calc(100% - 1px);height:100%;padding:0 6px;background-color:var(--one-grid-input-bg, var(--bs-input-bg, #fff));border:1px solid var(--one-grid-success, var(--bs-success, #198754));border-radius:var(--one-grid-action-btn-radius, 4px);z-index:5}.one-cell-input:focus{background:var(--one-grid-input-bg, var(--bs-input-bg, #fff));border:1px solid var(--one-grid-success, var(--bs-success, #198754))}:host{display:block;width:100%;height:100%;position:relative}.cell-wrapper{position:relative;width:100%;height:100%}.cell-wrapper.editable:before{content:\"\";position:absolute;top:4px;right:4px;width:4px;height:4px;background-color:var(--one-grid-success, var(--bs-success, #198754));border-radius:50%;z-index:1;opacity:.5;transition:opacity .2s ease}.cell-wrapper.editable:hover:before{opacity:1}\n"], dependencies: [{ kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OneCellInputValidatorDirective, selector: "[oneCellInputValidator]", inputs: ["validationType", "regex"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridCellCurrencyComponent, selector: "app-one-grid-cell-currency", inputs: { allowedEdit: "allowedEdit" }, ngImport: i0, template: "<div class=\"cell-wrapper\"\n     [class.editable]=\"isEditable\"\n     [attr.data-cell-id]=\"getCellField(params.node?.rowIndex, params.columnDef?.field)\"\n     [style.min-width.px]=\"params.columnDef?.minWidth\"\n     [style.max-width.px]=\"params.columnDef?.maxWidth\">\n\n    @if (params.node?.editing?.[params.columnDef?.field]) {\n      <input class=\"one-cell-input\"\n        name=\"{{ params.node?.rowIndex }}_{{ params.columnDef?.field }}\"\n        oneCellInputValidator\n        validationType=\"number\"\n        [placeholder]=\"params.columnDef?.cellRendererParams?.placeholder || ''\"\n        type=\"text\"\n        [(ngModel)]=\"value\"\n        [maxLength]=\"250\"\n        (blur)=\"stopEdit(params.node, params.columnDef, $event)\"\n        (keydown.enter)=\"stopEdit(params.node, params.columnDef, $event)\"\n        (keydown.esc)=\"cancelEdit(params.node, params.columnDef)\" />\n    }\n    @else {\n      <div class=\"d-flex justify-content-between px-2 pt-1\"\n        [class.one-cell-allowed-edit-active]=\"isEditable\"\n        (dblclick)=\"startEdit(params.node, params.columnDef)\">\n        <span class=\"currency-code\" style=\"font-weight: bold;\">{{ this.params?.data?.currency?.currencyCode || 'USD' }}</span>\n        <span class=\"amount-value\">\n          {{ result | number:(this.params?.field === 'amount' ? '1.3-3' : '1.2-2') }}\n        </span>\n      </div>\n    }\n</div>\n", styles: [".one-cell-input{position:absolute;top:0;left:0;width:calc(100% - 1px);height:100%;padding:0 6px;background-color:var(--one-grid-input-bg, var(--bs-input-bg, #fff));border:1px solid var(--one-grid-success, var(--bs-success, #198754));border-radius:var(--one-grid-action-btn-radius, 4px);z-index:5}.one-cell-input:focus{background:var(--one-grid-input-bg, var(--bs-input-bg, #fff));border:1px solid var(--one-grid-success, var(--bs-success, #198754))}:host{display:block;width:100%;height:100%;position:relative}.cell-wrapper{position:relative;width:100%;height:100%}.cell-wrapper.editable:before{content:\"\";position:absolute;top:4px;right:4px;width:4px;height:4px;background-color:var(--one-grid-success, var(--bs-success, #198754));border-radius:50%;z-index:1;opacity:.5;transition:opacity .2s ease}.cell-wrapper.editable:hover:before{opacity:1}\n"], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OneCellInputValidatorDirective, selector: "[oneCellInputValidator]", inputs: ["validationType", "regex"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellCurrencyComponent, decorators: [{
             type: Component,
@@ -3481,7 +5053,6 @@ class OneGridModule {
             CellSelectedPipe,
             CellActionButtonEnablePipe,
             CellNumberValuePipe,
-            CellDisableResolverPipe,
             CellFieldPipe,
             CellKeyPipe,
             CellLevelPaddingPipe,
@@ -3495,17 +5066,14 @@ class OneGridModule {
             OneCellRendererComponentDirective,
             OneCellTextExpandDirective,
             OneGridCellCurrencyComponent,
-            OneGridCellOptionMenuComponent], imports: [CommonModule,
+            OneGridCellOptionMenuComponent,
+            OneGridRowDragHandleComponent], imports: [CommonModule,
             FormsModule,
             ScrollingModule,
-            NgbTypeahead,
-            NgbHighlight,
-            ReactiveFormsModule,
-            CdkDragPlaceholder, i3.LucideAngularModule], exports: [OneGridComponent] }); }
+            ReactiveFormsModule, i2$1.LucideAngularModule], exports: [OneGridComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridModule, imports: [CommonModule,
             FormsModule,
             ScrollingModule,
-            NgbHighlight,
             ReactiveFormsModule,
             LucideAngularModule.pick(icons)] }); }
 }
@@ -3531,7 +5099,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CellSelectedPipe,
                         CellActionButtonEnablePipe,
                         CellNumberValuePipe,
-                        CellDisableResolverPipe,
                         CellFieldPipe,
                         CellKeyPipe,
                         CellLevelPaddingPipe,
@@ -3545,16 +5112,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         OneCellRendererComponentDirective,
                         OneCellTextExpandDirective,
                         OneGridCellCurrencyComponent,
-                        OneGridCellOptionMenuComponent
+                        OneGridCellOptionMenuComponent,
+                        OneGridRowDragHandleComponent
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         ScrollingModule,
-                        NgbTypeahead,
-                        NgbHighlight,
                         ReactiveFormsModule,
-                        CdkDragPlaceholder,
                         LucideAngularModule.pick(icons),
                     ],
                     exports: [OneGridComponent]
@@ -3569,5 +5134,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { OneGridApi, OneGridCellCurrencyComponent, OneGridCellService, OneGridComponent, OneGridEventService, OneGridExpansionService, OneGridModule, OneGridSelectionService, OneGridStatusComponent, OneGridTreeDataService, OnePageSizeOption, OneRowNode, ValidationRules, Validators, applyDefaultColumnDef, getCellError, resolveOneCellRendererParams, resolveOneColumDefParams, resolveOneValueGetterParams };
+export { ONE_DEFAULT_COLUMN_WIDTH, OneGridApi, OneGridCellCurrencyComponent, OneGridCellService, OneGridComponent, OneGridEventService, OneGridExpansionService, OneGridModule, OneGridRowDragService, OneGridSelectionService, OneGridStatusComponent, OneGridTreeDataService, OnePageSizeOption, OneRowNode, ValidationRules, Validators, applyDefaultColumnDef, getCellError, resolveColumnWidth, resolveOneCellRendererParams, resolveOneColumDefParams, resolveOneValueGetterParams, resolveRowHeight };
 //# sourceMappingURL=one-grid-core-angular.mjs.map