@one-grid-core/angular 0.2.1 → 0.5.0

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

@@ -1,17 +1,16 @@
 import { v4 } from 'uuid';
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, inject, NgZone, Input, Component, ViewChild, EventEmitter, Output, HostListener, Directive, ViewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, inject, NgZone, Pipe, Input, Component, EventEmitter, HostListener, ViewChildren, Output, ViewChild, ChangeDetectionStrategy, Directive, 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 i2$1 from 'lucide-angular';
-import { LucideAngularModule, icons } from 'lucide-angular';
-import * as i6 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { filter, map, debounceTime, take } from 'rxjs/operators';
+import { NgClass, NgStyle, NgTemplateOutlet, DecimalPipe } from '@angular/common';
+import * as i2 from 'lucide-angular';
+import { GripVertical, ChevronRight, ChevronLeft, ChevronLast, ChevronFirst, ArrowUpAZ, ArrowDownZA, ArrowDownUp, LucideIconProvider, LUCIDE_ICONS, LucideAngularModule } from 'lucide-angular';
+import * as i5 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
 /** Width used when a column defines neither `width` nor `minWidth`. */
 const ONE_DEFAULT_COLUMN_WIDTH = 150;
@@ -65,6 +64,182 @@ function resolveOneColumDefParams(prop, params) {
 function resolveOneValueGetterParams(prop, params) {
     return typeof prop === 'function' ? prop(params) : prop;
 }
+/**
+ * Run a column's `valueGetter` for one row.
+ *
+ * Was `CellValueGetterPipe`, which existed only to call this resolver from a
+ * service. The pipe added a module declaration and an indirection for a
+ * template use that never existed.
+ */
+function resolveCellValueGetter(data, node, column, context) {
+    return resolveOneValueGetterParams(column?.valueGetter, {
+        data,
+        rowIndex: node?.rowIndex,
+        node,
+        context,
+    });
+}
+
+/**
+ * The columns an export can say anything about: those that read a row —
+ * through a field or a valueGetter. Action columns have neither, and the
+ * row-number column reads state the data does not hold; both are skipped.
+ */
+function exportableColumns(columns) {
+    return (columns ?? []).filter(column => (column.field && column.field !== '_oneRowNumber') || column.valueGetter);
+}
+/**
+ * Serialize rows to RFC 4180 CSV.
+ *
+ * Each cell goes through the same value pipeline the grid renders with:
+ * `valueGetter` when declared, the field otherwise, then `valueFormatter` —
+ * so the file says what the screen says. Null and undefined export as empty
+ * cells, before the formatter, exactly as the grid leaves them to the
+ * placeholder.
+ */
+function buildCsv(nodes, columns, context = null, options = {}) {
+    const separator = options.columnSeparator ?? ',';
+    const exportable = exportableColumns(columns);
+    const lines = [];
+    if (options.includeHeaders ?? true) {
+        lines.push(exportable.map(column => escapeCsvCell(column.headerName ?? column.field ?? '', separator)).join(separator));
+    }
+    nodes?.forEach((node, rowIndex) => {
+        const cells = exportable.map(column => {
+            let value = column.valueGetter
+                ? column.valueGetter({ data: node.data, rowIndex, node, context })
+                : node.data?.[column.field];
+            if (value === null || value === undefined)
+                return '';
+            if (column.valueFormatter) {
+                value = column.valueFormatter({
+                    value,
+                    data: node.data,
+                    node,
+                    rowIndex,
+                    field: column.field,
+                    columnDef: column,
+                    context,
+                });
+            }
+            return escapeCsvCell(value, separator);
+        });
+        lines.push(cells.join(separator));
+    });
+    // CRLF is what RFC 4180 asks for, and what spreadsheet apps expect.
+    return lines.join('\r\n');
+}
+/** Quote a cell when it holds the separator, a quote, or a line break. */
+function escapeCsvCell(value, separator) {
+    const text = `${value}`;
+    if (text.includes(separator) || text.includes('"') || text.includes('\n') || text.includes('\r')) {
+        return `"${text.replace(/"/g, '""')}"`;
+    }
+    return text;
+}
+
+/** Marks a synthetic group row, so anything can tell it from real data. */
+const ONE_GROUP_FLAG = '__oneGroup';
+/** Stable id for a group row: its value path. Survives every rebuild. */
+const ONE_GROUP_ID_FIELD = '__oneGroupId';
+/** The label the auto group column shows for a group row. */
+const ONE_GROUP_VALUE_FIELD = '__oneGroupValue';
+/** Where a group row keeps its children, for the tree pipeline to recurse. */
+const ONE_GROUP_CHILDREN_FIELD = '__oneGroupChildren';
+/** What a group of rows with no value in the grouped field is labelled. */
+const ONE_GROUP_BLANK_LABEL = '(Blank)';
+/** The `rowGroup` fields of a column set, in definition order. */
+function rowGroupFields(columns) {
+    return (columns ?? [])
+        .filter(column => column.rowGroup && column.field)
+        .map(column => column.field);
+}
+/** The `aggFunc` columns of a column set. */
+function aggColumns(columns) {
+    return (columns ?? [])
+        .filter(column => column.aggFunc && column.field)
+        .map(column => ({ field: column.field, aggFunc: column.aggFunc }));
+}
+/**
+ * Fold flat rows into a tree of synthetic group rows, one level per group
+ * field, in first-appearance order. Each group row carries:
+ *
+ * - the marker, id and label fields above;
+ * - its own grouped field's value, so sorting and filtering read it naturally;
+ * - one aggregated value per `aggFunc` column, computed over the group's
+ *   leaves (not its child groups), stored under the column's own field so the
+ *   ordinary cell pipeline renders it.
+ *
+ * Pure: the input rows are referenced, never mutated.
+ */
+function buildGroupedRows(rows, groupFields, aggregations = []) {
+    if (!groupFields?.length)
+        return [...(rows ?? [])];
+    return groupLevel(rows ?? [], groupFields, 0, aggregations, 'og-group');
+}
+function groupLevel(rows, groupFields, level, aggregations, idPrefix) {
+    const field = groupFields[level];
+    // Insertion-ordered buckets, keyed by the value's string form. The raw
+    // value is kept as well, so the group row exposes the real value under the
+    // grouped field, not its stringification.
+    const buckets = new Map();
+    for (const row of rows) {
+        const value = row?.[field];
+        const key = value === null || value === undefined || value === '' ? ONE_GROUP_BLANK_LABEL : String(value);
+        const bucket = buckets.get(key);
+        if (bucket) {
+            bucket.rows.push(row);
+        }
+        else {
+            buckets.set(key, { value, rows: [row] });
+        }
+    }
+    return [...buckets.entries()].map(([key, bucket]) => {
+        const id = `${idPrefix}:${key}`;
+        const children = level + 1 < groupFields.length
+            ? groupLevel(bucket.rows, groupFields, level + 1, aggregations, id)
+            : bucket.rows;
+        const groupRow = {
+            [ONE_GROUP_FLAG]: true,
+            [ONE_GROUP_ID_FIELD]: id,
+            [ONE_GROUP_VALUE_FIELD]: key,
+            [field]: bucket.value,
+            [ONE_GROUP_CHILDREN_FIELD]: children,
+        };
+        // Aggregates always read the original leaves, so a two-level group's
+        // parent is not averaging averages.
+        for (const aggregation of aggregations) {
+            groupRow[aggregation.field] = aggregate(bucket.rows, aggregation.field, aggregation.aggFunc);
+        }
+        return groupRow;
+    });
+}
+/** Apply one aggregation over a set of leaf rows. */
+function aggregate(rows, field, aggFunc) {
+    const values = rows
+        .map(row => row?.[field])
+        .filter(value => value !== null && value !== undefined);
+    if (typeof aggFunc === 'function') {
+        return aggFunc({ values, rows: rows, field });
+    }
+    switch (aggFunc) {
+        case 'count': return values.length;
+        case 'first': return values.length ? values[0] : null;
+        case 'last': return values.length ? values[values.length - 1] : null;
+    }
+    // The numeric aggregates ignore what does not parse, so one stray string in
+    // a column does not turn the whole group's total into NaN.
+    const numbers = values.map(Number).filter(Number.isFinite);
+    if (!numbers.length)
+        return null;
+    switch (aggFunc) {
+        case 'sum': return numbers.reduce((total, value) => total + value, 0);
+        case 'min': return Math.min(...numbers);
+        case 'max': return Math.max(...numbers);
+        case 'avg': return numbers.reduce((total, value) => total + value, 0) / numbers.length;
+        default: return null;
+    }
+}
 
 /**
  * One Grid Validators
@@ -371,13 +546,23 @@ function matchesAdvancedFilters(node, filters) {
         const val = (node.data[filter.field] ?? '').toString().toLowerCase();
         const results = filter.conditions.map(condition => {
             const cmp = (condition.value ?? '').toString().toLowerCase();
+            const cmpTo = (condition.valueTo ?? '').toString().toLowerCase();
             switch (condition.operator) {
                 case 'equals': return val === cmp;
+                case 'notEqual': return val !== cmp;
                 case 'contains': return val.includes(cmp);
+                case 'notContains': return !val.includes(cmp);
                 case 'startsWith': return val.startsWith(cmp);
                 case 'endsWith': return val.endsWith(cmp);
                 case 'greaterThan': return compare(val, cmp) > 0;
+                case 'greaterThanOrEqual': return compare(val, cmp) >= 0;
                 case 'lessThan': return compare(val, cmp) < 0;
+                case 'lessThanOrEqual': return compare(val, cmp) <= 0;
+                case 'inRange': return compare(val, cmp) >= 0 && compare(val, cmpTo) <= 0;
+                // `val` has already been through `?? ''`, so null and undefined land
+                // here as the empty string. 0 stringifies to '0' and does not.
+                case 'blank': return val === '';
+                case 'notBlank': return val !== '';
                 default: return true; // Unknown operator = ignore
             }
         });
@@ -474,6 +659,35 @@ function resolveCellClass(column, row) {
         ? column.cellClass(row)
         : column.cellClass;
 }
+/**
+ * The cell's raw field value, with blank treated as absent.
+ *
+ * Was `CellFieldValuePipe`. It lived as an Angular pipe but was only ever
+ * instantiated inside a service — a utility wearing a `@Pipe` decorator, which
+ * also cost it a module declaration for a template use that never existed.
+ */
+function readCellValue(data, field) {
+    const value = getFieldValue(data, field);
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === 'string' && value.trim() === '')
+        return null;
+    return value;
+}
+/**
+ * Whether a cell has nothing to show.
+ *
+ * Was `CellFieldValueEmptyPipe`. `field` is optional on `OneColumnDef` — an
+ * action-only column legitimately has none — and reading it unguarded used to
+ * throw while the grid built cell state, taking the whole grid down. No field
+ * means nothing to read, which is empty by definition.
+ */
+function isCellEmpty(data, field) {
+    if (!data || !field)
+        return true;
+    const value = getFieldValue(data, field);
+    return value === null || value === undefined || value === '';
+}
 
 class OgColumnService {
     constructor() {
@@ -483,6 +697,14 @@ class OgColumnService {
          * callbacks do. Set during init; null in a bare service.
          */
         this.context = null;
+        /**
+         * Every column, hidden ones included, in display order. `columnDefs$` below
+         * carries only the visible subset — it is what the header and body render
+         * from, so hiding a column means leaving it out of the emission, and every
+         * consumer keeps working with no notion of visibility at all. This list is
+         * what remembers a hidden column's place, width and pin for when it returns.
+         */
+        this.allColumnDefs = [];
         this.columnDefs$ = new BehaviorSubject([]);
         this.groupColumnDefs$ = new BehaviorSubject([]);
     }
@@ -510,9 +732,20 @@ class OgColumnService {
             };
             return this.resolveHeaderPresentation(column);
         });
+        this.commit(columns);
+    }
+    /**
+     * Re-band, re-measure and publish a new column list.
+     *
+     * Every mutation funnels here so the master list and the visible emission
+     * cannot drift apart.
+     */
+    commit(columns) {
         const ordered = this.applyPinning(columns);
-        this.recalculateGroups(ordered);
-        this.columnDefs$.next(ordered);
+        this.allColumnDefs = ordered;
+        const visible = ordered.filter(column => !column.hide);
+        this.recalculateGroups(visible);
+        this.columnDefs$.next(visible);
     }
     /**
      * Move pinned columns to their edge and measure how far in each one sits.
@@ -536,11 +769,14 @@ class OgColumnService {
             return columns;
         }
         const center = columns.filter(column => column.pinned !== 'left' && column.pinned !== 'right');
+        // Hidden columns keep their place in the band but take up no space, so
+        // they are skipped when measuring offsets and never carry the divider.
         let offset = 0;
         for (const column of left) {
             column._pinnedOffset = offset;
             column._pinnedEdge = false;
-            offset += resolveColumnWidth(column);
+            if (!column.hide)
+                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.
@@ -548,46 +784,146 @@ class OgColumnService {
         for (let index = right.length - 1; index >= 0; index--) {
             right[index]._pinnedOffset = offset;
             right[index]._pinnedEdge = false;
-            offset += resolveColumnWidth(right[index]);
+            if (!right[index].hide)
+                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;
+        // Only the innermost visible column of each band carries the divider, so
+        // stacked pinned columns do not each cast a shadow onto the next.
+        const leftVisible = left.filter(column => !column.hide);
+        const rightVisible = right.filter(column => !column.hide);
+        if (leftVisible.length)
+            leftVisible[leftVisible.length - 1]._pinnedEdge = true;
+        if (rightVisible.length)
+            rightVisible[0]._pinnedEdge = true;
         return [...left, ...center, ...right];
     }
-    /** Total width of the columns frozen against the given edge. */
+    /** Total width of the visible 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
+    // Update single column. Works on the master list, so a hidden column can be
+    // patched — including `hide` itself, which is how visibility toggles.
     updateColumnDef(id, changes) {
-        const columns = this.getColumnState().columns;
-        const updatedColumns = columns.map(col => col.id === id ? { ...col, ...changes } : col);
-        // 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
+        const updatedColumns = this.allColumnDefs.map(col => col.id === id ? { ...col, ...changes } : col);
+        // Re-pinned (inside commit), 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.
+        this.commit(updatedColumns);
+    }
+    /**
+     * Reorder columns. The indexes are *visible* positions — they come from the
+     * header, which only renders visible columns — so they are mapped onto the
+     * master list before splicing. A hidden column between the two keeps its
+     * place relative to its neighbours.
+     */
     reorderColumnDefs(fromIndex, toIndex) {
-        const columns = _.clone(this.getColumnState().columns);
-        const [moved] = columns.splice(fromIndex, 1);
-        columns.splice(toIndex, 0, moved);
-        // 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));
+        const columns = _.clone(this.allColumnDefs);
+        const visible = columns.filter(column => !column.hide);
+        const moved = visible[fromIndex];
+        if (!moved)
+            return;
+        columns.splice(columns.indexOf(moved), 1);
+        // Land before the visible column now at the target index — the same splice
+        // the visible-only list used to do after removal — or at the end when the
+        // target is past the last visible column.
+        const visibleAfter = visible.filter(column => column !== moved);
+        const anchor = visibleAfter[toIndex];
+        columns.splice(anchor ? columns.indexOf(anchor) : columns.length, 0, moved);
+        // Dragging can drop a column between two pinned ones; re-pinning (inside
+        // commit) puts the bands back in order rather than leaving them
+        // interleaved, which would make the computed offsets meaningless.
+        this.commit(columns);
+    }
+    /**
+     * Distribute the viewport width left over by fixed columns among the flex
+     * ones, in proportion to their `flex` values and clamped to their bounds.
+     *
+     * @returns Whether any width actually changed — the caller only dispatches
+     * (and the body only re-triggers) on a real change, which is what terminates
+     * the columnChanged → flex → columnChanged loop.
+     */
+    applyFlexWidths(availableWidth) {
+        const visible = this.columnDefs$.getValue();
+        const flexColumns = visible.filter(column => (column.flex ?? 0) > 0);
+        if (!flexColumns.length || !(availableWidth > 0))
+            return false;
+        const fixedWidth = visible
+            .filter(column => !((column.flex ?? 0) > 0))
+            .reduce((total, column) => total + resolveColumnWidth(column), 0);
+        let remaining = Math.max(availableWidth - fixedWidth, 0);
+        // Clamped columns stop flexing and release their share to the rest, so
+        // the pass repeats until the split is stable. Each pass settles at least
+        // one column; the loop is bounded by the column count.
+        const widths = new Map();
+        let unsettled = [...flexColumns];
+        while (unsettled.length) {
+            const totalFlex = unsettled.reduce((total, column) => total + (column.flex ?? 0), 0);
+            const share = remaining / totalFlex;
+            const clamped = unsettled.filter(column => {
+                const ideal = share * (column.flex ?? 0);
+                const min = Math.max(column.minWidth ?? 0, 50);
+                const max = column.maxWidth ?? Number.POSITIVE_INFINITY;
+                const width = Math.min(Math.max(ideal, min), max);
+                if (width === ideal)
+                    return false;
+                widths.set(column.id, Math.round(width));
+                remaining = Math.max(remaining - width, 0);
+                return true;
+            });
+            unsettled = unsettled.filter(column => !clamped.includes(column));
+            if (!clamped.length) {
+                unsettled.forEach(column => widths.set(column.id, Math.floor(share * (column.flex ?? 0))));
+                break;
+            }
+        }
+        const changed = flexColumns.some(column => widths.get(column.id) !== resolveColumnWidth(column));
+        if (!changed)
+            return false;
+        this.commit(this.allColumnDefs.map(column => widths.has(column.id) ? { ...column, width: widths.get(column.id) } : column));
+        return true;
+    }
+    /**
+     * One JSON-safe entry per column — hidden ones included — in display order.
+     */
+    getColumnStateSnapshot() {
+        return this.allColumnDefs.map(column => {
+            const entry = { id: column.id, hide: !!column.hide, pinned: column.pinned ?? null };
+            if (column.width != null)
+                entry.width = column.width;
+            return entry;
+        });
+    }
+    /**
+     * Restore a saved snapshot: order, width, pin and visibility.
+     *
+     * Entries are applied in the order given and become the front of the new
+     * column order; columns the snapshot does not mention keep their current
+     * relative order behind them, and ids the grid no longer has are skipped —
+     * so a stale snapshot degrades to a partial restore instead of an error.
+     * Only the properties present on an entry are applied.
+     */
+    applyColumnState(entries) {
+        const byId = new Map(this.allColumnDefs.map(column => [column.id, column]));
+        const mentioned = (entries ?? []).filter(entry => entry && byId.has(entry.id));
+        const mentionedIds = new Set(mentioned.map(entry => entry.id));
+        const restored = mentioned.map(entry => {
+            const column = { ...byId.get(entry.id) };
+            if (entry.width != null)
+                column.width = entry.width;
+            if ('pinned' in entry)
+                column.pinned = entry.pinned ?? undefined;
+            if ('hide' in entry)
+                column.hide = !!entry.hide;
+            return column;
+        });
+        const rest = this.allColumnDefs.filter(column => !mentionedIds.has(column.id));
+        this.commit([...restored, ...rest]);
     }
     /**
      * Group Header Columns
@@ -633,6 +969,7 @@ class OgColumnService {
         col._resolvedSortable = resolveOneCellRendererParams(col.sortable, params);
         col._resolvedResizable = resolveOneCellRendererParams(col.resizable, params);
         col._resolvedDragable = resolveOneCellRendererParams(col.dragable, params);
+        col._resolvedFilterable = resolveOneCellRendererParams(col.filterable, params);
         col._resolvedSuppressHeaderMenuButton = resolveOneCellRendererParams(col.suppressHeaderMenuButton, params);
         return col;
     }
@@ -684,76 +1021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Injectable
         }] });
 
-class CellFieldValueEmptyPipe {
-    transform(data, field) {
-        // `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 = 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 }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellFieldValueEmptyPipe, name: "cellFieldValueEmpty" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellFieldValueEmptyPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellFieldValueEmpty'
-                }]
-        }] });
-
-class CellValueGetterPipe {
-    transform(data, node, column, context) {
-        return resolveOneValueGetterParams(column.valueGetter, {
-            data,
-            rowIndex: node.rowIndex,
-            node: node,
-            context: context
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellValueGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellValueGetterPipe, name: "cellValueGetter" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellValueGetterPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellValueGetter'
-                }]
-        }] });
-
-class CellFieldValuePipe {
-    transform(data, field) {
-        const value = getFieldValue(data, field);
-        if (value === null || value === undefined) {
-            return null;
-        }
-        if (typeof value === 'string' && value.trim() === '') {
-            return null;
-        }
-        return value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellFieldValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellFieldValuePipe, name: "cellFieldValue" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellFieldValuePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellFieldValue'
-                }]
-        }] });
-
 class OneGridCellService {
     constructor() {
-        this._cellFieldValueEmpty = new CellFieldValueEmptyPipe();
-        this._cellValueGetter = new CellValueGetterPipe();
-        this._cellFieldValue = new CellFieldValuePipe();
         this._columnDefs = [];
         this._api = null;
         // ---------------------------------------------------------------------------
@@ -848,8 +1117,8 @@ class OneGridCellService {
      */
     resolveValue(node, column) {
         return column?.valueGetter
-            ? this._cellValueGetter.transform(node.data, node, column, this._context)
-            : this._cellFieldValue.transform(node.data, column.field);
+            ? resolveCellValueGetter(node.data, node, column, this._context)
+            : readCellValue(node.data, column.field);
     }
     /**
      * Apply the column's `valueFormatter`.
@@ -907,7 +1176,7 @@ class OneGridCellService {
         if (!field) {
             return { type: 'none', value: '' };
         }
-        const isEmpty = this._cellFieldValueEmpty.transform(node.data, field);
+        const isEmpty = isCellEmpty(node.data, field);
         const isGroup = node.group || node.leafGroup;
         const isAutoGroup = column?.autoGroupField;
         if (column && column.cellRenderer && !isGroup) {
@@ -919,7 +1188,7 @@ class OneGridCellService {
         }
         // 1. Cell Group Placeholder
         if (isEmpty && isGroup && isAutoGroup) {
-            return { type: 'placeholder', value: this.resolvePlaceholder(node, column) ?? this._cellValueGetter.transform(node.data, node, column, this._context) ?? '' };
+            return { type: 'placeholder', value: this.resolvePlaceholder(node, column) ?? resolveCellValueGetter(node.data, node, column, this._context) ?? '' };
         }
         // 2. Cell Group Text Value
         if (isGroup && isAutoGroup) {
@@ -934,7 +1203,7 @@ class OneGridCellService {
         // 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);
+            const valueGetter = resolveCellValueGetter(node.data, node, column, this._context);
             if (valueGetter) {
                 return { type: 'text', value: this.formatValue(node, column, valueGetter) };
             }
@@ -946,7 +1215,14 @@ class OneGridCellService {
             const value = this.formatValue(node, column, this.resolveValue(node, column));
             return { type: 'text', value: value ?? '' };
         }
-        // 5. Default
+        // 5. A group row outside the group column: render the value when the row
+        // actually carries one — aggregates land in these cells, and a tree
+        // parent's own data belongs on screen too. Blank stays blank.
+        if (!isEmpty) {
+            const value = this.formatValue(node, column, this.resolveValue(node, column));
+            return { type: 'text', value: value ?? '' };
+        }
+        // 6. Default
         return { type: 'none', value: '' };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1149,6 +1425,23 @@ class OneGridApi {
         this.treeDataChildrenField = null;
         this.groupDefaultExpanded = 0;
         this.masterDetail = false;
+        // ---------------------------------------------------------------------------
+        // Row grouping
+        // ---------------------------------------------------------------------------
+        this._rowGroupFields = [];
+        this._aggColumns = [];
+        // ---------------------------------------------------------------------------
+        // Undo / redo of cell edits
+        // ---------------------------------------------------------------------------
+        this._undoLimit = 0;
+        this._undoStack = [];
+        this._redoStack = [];
+        // ---------------------------------------------------------------------------
+        // Client-side pagination
+        // ---------------------------------------------------------------------------
+        this._clientPagination = false;
+        this._pageSize = 25;
+        this._currentPage = 1;
     }
     /**
      * Stand the grid up. Called by `OneGridComponent` from `ngOnInit`.
@@ -1171,7 +1464,13 @@ class OneGridApi {
         this.detailRendererComponent = detailRendererComponent;
         this.treeData = treeData;
         this.selectionService.setSelectionMode(rowSelection);
-        this.rowService.setGetRowIdFn(context?.componentParent?.getRowId ?? null);
+        // Synthetic group rows carry their own stable id — the path of group
+        // values — which no host getRowId knows how to derive. The wrapper reads
+        // it first and defers to the host's function (or the uuid fallback) for
+        // real rows, so grouping keeps expansion across rebuilds even when the
+        // host provided no id function at all.
+        const hostGetRowId = context?.componentParent?.getRowId ?? null;
+        this.rowService.setGetRowIdFn((params) => params?.data?.[ONE_GROUP_ID_FIELD] ?? hostGetRowId?.(params) ?? null);
         this.cellService.applyColumnDefs(columnDefs, context);
         this.cellService.setGridApi(this);
         this.columnService.initColumnDefs(defaultColumnDef, columnDefs, groupColumnDefs, context);
@@ -1209,8 +1508,19 @@ class OneGridApi {
             this.selectionService.deselectAll();
             this.expansionService.clear();
         }
+        // Row grouping is a transform on the way in: the host keeps handing the
+        // grid flat rows, and the tree pipeline below sees synthetic group rows
+        // with children — the same shape tree data arrives in.
+        if (this._rowGroupFields.length) {
+            rowData = buildGroupedRows(rowData, this._rowGroupFields, this._aggColumns);
+        }
         const validRowIds = new Set();
         this.buildRowNodes(rowData, null, 0, validRowIds);
+        // Prune BEFORE sorting and filtering: both read `_originalRowNodes`, and
+        // with the prune last, a data swap while a sort was active resurrected
+        // the removed rows into `_rowNodes` for one whole render — the old and
+        // the new dataset on screen together until the next rebuild.
+        this.pruneRemovedNodes(validRowIds);
         // 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
@@ -1219,12 +1529,11 @@ class OneGridApi {
         if (this._sortModel.length > 0)
             this.applySorting();
         this.applyFilters();
-        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())) {
+    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()), visitedData = new Set()) {
         if (parent === null) {
             this._rowNodes = [];
             this._currentIndex = 0;
@@ -1234,6 +1543,16 @@ class OneGridApi {
         const nodes = [];
         for (const data of rowData) {
             const rowId = this.rowService.generateRowId(data, this._currentIndex);
+            // A cycle in the children graph — a row reachable from its own subtree,
+            // the classic ORM back-reference — used to recurse until the stack blew,
+            // freezing the app; and with generated row ids it did so while minting
+            // nodes the whole way down. The same guard also drops a duplicate row id
+            // (or the same row object appearing twice): first occurrence wins.
+            if (visitedData.has(data) || validRowIds.has(rowId)) {
+                console.warn(`[one-grid] cyclic or duplicate row (id "${rowId}") — skipped, first occurrence wins. Tree data must be acyclic and row ids unique.`);
+                continue;
+            }
+            visitedData.add(data);
             const children = data[this.treeDataChildrenField] || null;
             let node = this._originalRowNodes.get(rowId);
             validRowIds.add(rowId);
@@ -1270,7 +1589,7 @@ class OneGridApi {
             this._currentIndex++;
             this._rowNodes.push(node);
             nodes.push(node);
-            node.children = this.treeData && childrenExist ? this.buildRowNodes(children || [], node, level + 1, validRowIds, expandedIds, collapsedIds, selectedIds) : [];
+            node.children = this.treeData && childrenExist ? this.buildRowNodes(children || [], node, level + 1, validRowIds, expandedIds, collapsedIds, selectedIds, visitedData) : [];
         }
         return nodes;
     }
@@ -1462,14 +1781,14 @@ class OneGridApi {
             return;
         this._sortModel = sortModel;
         this.applySorting();
-        this.eventService.dispatchEvent('sortChanged', { nodes: this._rowNodes });
+        this.eventService.dispatchEvent('sortChanged', { nodes: this._rowNodes, sortModel: this._sortModel });
     }
     applySorting() {
         if (this._sortModel.length === 0) {
             this._rowNodes = [...this._originalRowNodes.values()];
             return;
         }
-        this._rowNodes = [...this._originalRowNodes.values()].sort((a, b) => {
+        const comparator = (a, b) => {
             for (const sortItem of this._sortModel) {
                 const { colId, sort } = sortItem;
                 const valA = getFieldValue(a.data, colId);
@@ -1480,7 +1799,31 @@ class OneGridApi {
                 }
             }
             return 0;
-        });
+        };
+        if (!this.treeData) {
+            this._rowNodes = [...this._originalRowNodes.values()].sort(comparator);
+            return;
+        }
+        // A tree sorts siblings within their parent, never across it — a flat
+        // sort of the whole list interleaved parents with other parents' children
+        // and scrambled the hierarchy. Sorting the sibling arrays and re-walking
+        // depth-first keeps every parent immediately above its own children,
+        // which `refreshVisibleNodes` also depends on for its visibility cache.
+        // Group rows carry their aggregates in `data`, so sorting a grouped grid
+        // on an aggregated column orders the groups by their aggregate.
+        const flattened = [];
+        const walk = (siblings) => {
+            const sorted = [...siblings].sort(comparator);
+            for (const node of sorted) {
+                flattened.push(node);
+                if (node.children?.length) {
+                    node.children = walk(node.children);
+                }
+            }
+            return sorted;
+        };
+        walk([...this._originalRowNodes.values()].filter(node => !node.parent));
+        this._rowNodes = flattened;
     }
     compareValues(valA, valB, sortDirection) {
         // `undefined` has to be treated as empty alongside `null`: getFieldValue
@@ -1536,6 +1879,50 @@ class OneGridApi {
             });
         }
     }
+    /**
+     * Select or deselect one row, honouring the grid's selection mode.
+     *
+     * The mode rule used to live in the checkbox component, which meant the only
+     * way to select a row was to click that checkbox — anything else reaching for
+     * `toggleSelection` got multi-select behaviour on a single-select grid. It
+     * lives here so every path into selection obeys the same rule.
+     *
+     * @returns `false` when the grid has no selection mode, so a caller can tell
+     *          a refused request from an applied one.
+     */
+    toggleRowSelection(rowId, selected) {
+        if (this._destroyed || !this._rowSelection)
+            return false;
+        const node = this.getRowNodeById(rowId);
+        if (!node)
+            return false;
+        // Single select is "this row and no other", which means clearing first.
+        if (this._rowSelection === 'single')
+            this.deselectAll();
+        this.toggleSelection(rowId, selected);
+        node.cellStates = { ...node.cellStates };
+        return true;
+    }
+    /**
+     * Select every row between two, inclusive, in display order.
+     *
+     * What a shift-extended keyboard selection needs. Multi-select only — a
+     * single-select grid has no meaningful range.
+     */
+    selectRowRange(fromRowId, toRowId) {
+        if (this._destroyed || this._rowSelection !== 'multiple')
+            return false;
+        const order = this._visibleRowNodes.length ? this._visibleRowNodes : this._rowNodes;
+        const from = order.findIndex(node => node.rowId === fromRowId);
+        const to = order.findIndex(node => node.rowId === toRowId);
+        if (from === -1 || to === -1)
+            return false;
+        const ids = order
+            .slice(Math.min(from, to), Math.max(from, to) + 1)
+            .map(node => node.rowId);
+        this.setSelectedByIds(ids, true);
+        return true;
+    }
     toggleSelection(rowId, selected) {
         const node = this.getRowNodeById(rowId);
         if (node) {
@@ -1760,19 +2147,237 @@ class OneGridApi {
         this.columnService.setColumnDefs(columnDefs);
         const columnState = this.columnService.getColumnState();
         this.cellService.applyColumnDefs(columnState.columns, this._context);
+        // Cell state is derived from the columns, so replacing them wholesale
+        // stales every node built before this ran. Tree and grouping mode hit
+        // this on every load: the group column registers from a deferred
+        // setColumnDefs, after the host has typically already loaded rows —
+        // hosts used to have to defer setRowData themselves to dodge it.
+        this.regenerateCellStates();
         this.eventService.dispatchEvent('columnChanged', columnState);
     }
     updateColumn(id, changes) {
+        const before = this.visibleColumnFields();
         this.columnService.updateColumnDef(id, changes);
         const columnState = this.columnService.getColumnState();
         this.cellService.applyColumnDefs(columnState.columns, this._context);
+        // Only when the set of visible columns changed (a hide, a show): a cell
+        // state can appear or disappear then. Width patches — this method runs
+        // per mousemove during a resize — skip the O(rows × columns) pass.
+        if (this.visibleColumnFields() !== before)
+            this.regenerateCellStates();
         this.eventService.dispatchEvent('columnChanged', columnState);
     }
+    /** The visible fields as one comparable key. */
+    visibleColumnFields() {
+        return this.columnService.getColumnState().columns?.map(column => column.field).join('|') ?? '';
+    }
+    /** Recompute every node's cell states against the current columns. */
+    regenerateCellStates() {
+        const refresh = (node) => node.setCellStates(this.cellService.generateCellStates(node));
+        this._rowNodes.forEach(refresh);
+        this._pinnedRowNodes.top.forEach(refresh);
+        this._pinnedRowNodes.bottom.forEach(refresh);
+    }
     reorderColumnDefs(fromIndex, toIndex) {
         this.columnService.reorderColumnDefs(fromIndex, toIndex);
         const columnState = this.columnService.getColumnState();
         this.eventService.dispatchEvent('columnChanged', columnState);
     }
+    /** The fields the rows are grouped by, in nesting order. Empty when off. */
+    get rowGroupFields() {
+        return this._rowGroupFields;
+    }
+    /**
+     * Turn row grouping on. Called by `OneGridComponent` when column
+     * definitions declare `rowGroup`; the grid then behaves as a tree over
+     * synthetic group rows, and `setRowData` / `updateRowData` keep taking the
+     * flat rows they always took.
+     */
+    setRowGrouping(groupFields, aggregations = []) {
+        this._rowGroupFields = groupFields ?? [];
+        this._aggColumns = aggregations ?? [];
+    }
+    /**
+     * Start recording committed cell edits for undo/redo. Called by
+     * `OneGridComponent` from `[undoRedoCellEditing]`; the stack keeps the last
+     * `limit` edits. Programmatic `setDataValue` writes are not recorded — only
+     * commits, the ones that raise `cellValueChanged` without a source.
+     */
+    enableUndoRedoCellEditing(limit = 10) {
+        if (this._undoLimit > 0)
+            return;
+        this._undoLimit = Math.max(Math.floor(limit), 1);
+        this.eventService.addEventListener('cellValueChanged', (event) => {
+            if (event.source)
+                return;
+            this._undoStack.push({ rowId: event.node.rowId, field: event.field, oldValue: event.oldValue, newValue: event.newValue });
+            if (this._undoStack.length > this._undoLimit)
+                this._undoStack.shift();
+            // A new edit forks history; what was undone can no longer be redone.
+            this._redoStack = [];
+        });
+    }
+    /** Revert the most recent committed edit. Returns whether one was undone. */
+    undoCellEditing() {
+        return this.replayEdit(this._undoStack, this._redoStack, 'undo');
+    }
+    /** Re-apply the most recently undone edit. Returns whether one was redone. */
+    redoCellEditing() {
+        return this.replayEdit(this._redoStack, this._undoStack, 'redo');
+    }
+    getCurrentUndoSize() {
+        return this._undoStack.length;
+    }
+    getCurrentRedoSize() {
+        return this._redoStack.length;
+    }
+    replayEdit(from, to, source) {
+        if (this._destroyed)
+            return false;
+        const edit = from.pop();
+        if (!edit)
+            return false;
+        const node = this.getRowNodeById(edit.rowId);
+        // The row can be gone — a setRowData replaced the data under the stack.
+        // The edit is dropped rather than replayed onto nothing.
+        if (!node)
+            return false;
+        const value = source === 'undo' ? edit.oldValue : edit.newValue;
+        const previous = source === 'undo' ? edit.newValue : edit.oldValue;
+        node.data[edit.field] = value;
+        this.updateCellStates(node);
+        to.push(edit);
+        const column = this.columnService.getColumnState().columns?.find(col => col.field === edit.field) ?? null;
+        this.eventService.dispatchEvent('cellValueChanged', {
+            node,
+            data: node.data,
+            column: column,
+            field: edit.field,
+            oldValue: previous,
+            newValue: value,
+            source,
+        });
+        return true;
+    }
+    /** The paging state, when the grid pages its own rows. */
+    get paginationState() {
+        return { enabled: this._clientPagination, pageSize: this._pageSize, currentPage: this._currentPage };
+    }
+    /**
+     * Turn grid-owned paging on or off. Called by `OneGridComponent` from its
+     * `clientSidePagination` input; the display slice is what changes — the
+     * full dataset stays behind the API (selection, filters and sorting keep
+     * operating on all of it).
+     */
+    setClientSidePagination(enabled, pageSize) {
+        this._clientPagination = enabled;
+        if (pageSize && pageSize > 0)
+            this._pageSize = pageSize;
+        this._currentPage = 1;
+    }
+    /** Change the page size and return to the first page. */
+    setPageSize(pageSize) {
+        if (this._destroyed || !(pageSize > 0))
+            return;
+        this._pageSize = Math.floor(pageSize);
+        this._currentPage = 1;
+        this.applyFilters();
+    }
+    /** Move to a page (1-based). Clamped to at least 1; the top end clamps when the slice is taken. */
+    setCurrentPage(page) {
+        if (this._destroyed)
+            return;
+        const target = Math.max(Math.floor(page), 1);
+        if (target === this._currentPage)
+            return;
+        this._currentPage = target;
+        this.applyFilters();
+    }
+    /**
+     * The slice of rows the current page shows — a passthrough while paging is
+     * off. The body routes its render list through here, after reporting the
+     * full count, so `rowCountChanged` keeps meaning "rows after filtering"
+     * whether or not the grid pages.
+     */
+    pageNodes(nodes) {
+        if (!this._clientPagination)
+            return (nodes ?? []);
+        const lastPage = Math.max(Math.ceil((nodes?.length ?? 0) / this._pageSize), 1);
+        // A shrinking dataset (a filter, a delete) can strand the page past the
+        // end; clamping here shows the last page instead of an empty one.
+        if (this._currentPage > lastPage)
+            this._currentPage = lastPage;
+        const start = (this._currentPage - 1) * this._pageSize;
+        return (nodes ?? []).slice(start, start + this._pageSize);
+    }
+    /**
+     * Size the flex columns into the given width.
+     *
+     * Called by the grid body with its own viewport width — on first render, on
+     * container resize and after column changes — so `columnDef.flex` works
+     * without the host doing anything. Also callable directly with any width.
+     * A no-op when no visible column declares `flex` or nothing would change.
+     */
+    applyFlexWidths(availableWidth) {
+        if (this._destroyed)
+            return;
+        if (!this.columnService.applyFlexWidths(availableWidth))
+            return;
+        const columnState = this.columnService.getColumnState();
+        this.cellService.applyColumnDefs(columnState.columns, this._context);
+        this.eventService.dispatchEvent('columnChanged', columnState);
+    }
+    /**
+     * The current grid as CSV: visible columns in display order, visible rows
+     * in current sort order, values through the same getter/formatter pipeline
+     * the cells render with. Pinned rows and detail grids are not data and are
+     * not included.
+     */
+    getDataAsCsv(options = {}) {
+        const nodes = options.onlySelected ? this.getSelectedRowNodes() : this._visibleRowNodes;
+        return buildCsv(nodes, this.columnService.getColumnState().columns, this._context, options);
+    }
+    /** Build the CSV and hand it to the browser as a download. */
+    exportDataAsCsv(options = {}) {
+        if (typeof document === 'undefined')
+            return;
+        const blob = new Blob([this.getDataAsCsv(options)], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = options.fileName ?? 'export.csv';
+        link.click();
+        URL.revokeObjectURL(link.href);
+    }
+    /**
+     * Show or hide one column. A hidden column keeps its order, width and pin,
+     * so showing it again restores it exactly.
+     */
+    setColumnVisible(id, visible) {
+        this.updateColumn(id, { hide: !visible });
+    }
+    /**
+     * Persistable layout state: one JSON-safe entry per column — hidden ones
+     * included — in display order. Feed it back through `applyColumnState`.
+     */
+    getColumnStateSnapshot() {
+        return this.columnService.getColumnStateSnapshot();
+    }
+    /**
+     * Restore a snapshot from `getColumnStateSnapshot`: order, width, pin and
+     * visibility. Ids the grid no longer has are skipped, so a stale snapshot
+     * degrades to a partial restore rather than an error.
+     */
+    applyColumnState(entries) {
+        if (this._destroyed)
+            return;
+        this.columnService.applyColumnState(entries);
+        const columnState = this.columnService.getColumnState();
+        this.cellService.applyColumnDefs(columnState.columns, this._context);
+        // A restore can show columns that were hidden when the rows were built,
+        // and their cells have no state yet.
+        this.regenerateCellStates();
+        this.eventService.dispatchEvent('columnChanged', columnState);
+    }
     /**
      * Update checkbox selection features
      */
@@ -2359,47 +2964,84 @@ function resolveRowHeight(params, getRowHeight, rowHeight = 26) {
     return rowHeight;
 }
 
-class HeaderCheckboxDisabledPipe {
-    transform(rowNodes, selectionMode, allowedEdit) {
-        return rowNodes?.length === 0 || selectionMode !== 'multiple' || !allowedEdit;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxDisabledPipe, name: "headerCheckboxDisabled" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxDisabledPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'headerCheckboxDisabled'
-                }]
-        }] });
+/**
+ * The Lucide icons the grid draws, and only those.
+ *
+ * Every component that renders a `<lucide-icon>` picks this set itself, so the
+ * icons travel with the component. That matters now the components are
+ * standalone: a consumer importing `OneGridComponent` directly never touches
+ * `OneGridModule`, and previously got a runtime error — "The 'chevron-first'
+ * icon has not been provided by any available icon providers" — the moment the
+ * pagination bar rendered.
+ *
+ * Eight icons rather than `LucideAngularModule.pick(icons)`, which registered
+ * the entire Lucide set. Nothing else in the grid uses one, and the rest were
+ * dead weight in every consumer's bundle.
+ */
+const ONE_GRID_ICONS = {
+    ArrowDownUp,
+    ArrowDownZA,
+    ArrowUpAZ,
+    ChevronFirst,
+    ChevronLast,
+    ChevronLeft,
+    ChevronRight,
+    GripVertical,
+};
+/**
+ * Providers that register {@link ONE_GRID_ICONS} for one standalone component.
+ *
+ * `LucideAngularModule.pick()` cannot be used here: it returns a
+ * `ModuleWithProviders`, and a standalone component's `imports` only accepts
+ * components, directives, pipes and NgModule classes. This is the same
+ * registration `pick` performs, expressed as providers so it can sit on the
+ * component instead.
+ */
+const ONE_GRID_ICON_PROVIDERS = [
+    { provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(ONE_GRID_ICONS) },
+];
 
 class HeaderCheckboxCheckedPipe {
     transform(rowNodes, selectionMode, state) {
         return rowNodes?.length > 0 && selectionMode === 'multiple' && state === 'checked';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxCheckedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxCheckedPipe, name: "headerCheckboxChecked" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxCheckedPipe, isStandalone: true, name: "headerCheckboxChecked" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxCheckedPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     name: 'headerCheckboxChecked'
                 }]
         }] });
 
+class HeaderCheckboxDisabledPipe {
+    transform(rowNodes, selectionMode, allowedEdit) {
+        return rowNodes?.length === 0 || selectionMode !== 'multiple' || !allowedEdit;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxDisabledPipe, isStandalone: true, name: "headerCheckboxDisabled" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'headerCheckboxDisabled'
+                }]
+        }] });
+
 class HeaderCheckboxIndeterminatePipe {
     transform(rowNodes, selectionMode, state) {
         return rowNodes?.length > 0 && selectionMode === 'multiple' && state === 'indeterminate';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxIndeterminatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxIndeterminatePipe, name: "headerCheckboxIndeterminate" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxIndeterminatePipe, isStandalone: true, name: "headerCheckboxIndeterminate" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCheckboxIndeterminatePipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     name: 'headerCheckboxIndeterminate'
                 }]
         }] });
@@ -2457,36 +3099,200 @@ class OneGridCheckboxHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCheckboxHeaderComponent, deps: [{ token: OneGridEventService }, { token: OneGridSelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneGridCheckboxHeaderComponent, selector: "one-grid-checkbox-header", inputs: { api: "api", allowedEdit: "allowedEdit" }, ngImport: i0, template: "<div class=\"one-grid-checkbox\">\n    <input\n        [id]=\"api.id\"\n        [type]=\"'checkbox'\"\n        [class.disabled]=\"rowNodes | headerCheckboxDisabled:selectionMode:allowedEdit\"\n        [checked]=\"rowNodes | headerCheckboxChecked:selectionMode:state\"\n        [indeterminate]=\"rowNodes | headerCheckboxIndeterminate:selectionMode:state\"\n        (change)=\"toggleSelectionAll($event)\" />\n</div>", styles: [""], dependencies: [{ kind: "pipe", type: HeaderCheckboxDisabledPipe, name: "headerCheckboxDisabled" }, { kind: "pipe", type: HeaderCheckboxCheckedPipe, name: "headerCheckboxChecked" }, { kind: "pipe", type: HeaderCheckboxIndeterminatePipe, name: "headerCheckboxIndeterminate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneGridCheckboxHeaderComponent, isStandalone: true, selector: "one-grid-checkbox-header", inputs: { api: "api", allowedEdit: "allowedEdit" }, ngImport: i0, template: "<div class=\"one-grid-checkbox\">\n    <input\n        [id]=\"api.id\"\n        [type]=\"'checkbox'\"\n        [class.disabled]=\"rowNodes | headerCheckboxDisabled:selectionMode:allowedEdit\"\n        [checked]=\"rowNodes | headerCheckboxChecked:selectionMode:state\"\n        [indeterminate]=\"rowNodes | headerCheckboxIndeterminate:selectionMode:state\"\n        (change)=\"toggleSelectionAll($event)\" />\n</div>", styles: [""], dependencies: [{ kind: "pipe", type: HeaderCheckboxCheckedPipe, name: "headerCheckboxChecked" }, { kind: "pipe", type: HeaderCheckboxDisabledPipe, name: "headerCheckboxDisabled" }, { kind: "pipe", type: HeaderCheckboxIndeterminatePipe, name: "headerCheckboxIndeterminate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCheckboxHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-checkbox-header', template: "<div class=\"one-grid-checkbox\">\n    <input\n        [id]=\"api.id\"\n        [type]=\"'checkbox'\"\n        [class.disabled]=\"rowNodes | headerCheckboxDisabled:selectionMode:allowedEdit\"\n        [checked]=\"rowNodes | headerCheckboxChecked:selectionMode:state\"\n        [indeterminate]=\"rowNodes | headerCheckboxIndeterminate:selectionMode:state\"\n        (change)=\"toggleSelectionAll($event)\" />\n</div>" }]
+            args: [{ standalone: true, imports: [HeaderCheckboxCheckedPipe, HeaderCheckboxDisabledPipe, HeaderCheckboxIndeterminatePipe], selector: 'one-grid-checkbox-header', template: "<div class=\"one-grid-checkbox\">\n    <input\n        [id]=\"api.id\"\n        [type]=\"'checkbox'\"\n        [class.disabled]=\"rowNodes | headerCheckboxDisabled:selectionMode:allowedEdit\"\n        [checked]=\"rowNodes | headerCheckboxChecked:selectionMode:state\"\n        [indeterminate]=\"rowNodes | headerCheckboxIndeterminate:selectionMode:state\"\n        (change)=\"toggleSelectionAll($event)\" />\n</div>" }]
         }], ctorParameters: () => [{ type: OneGridEventService }, { type: OneGridSelectionService }], propDecorators: { api: [{
                 type: Input
             }], allowedEdit: [{
                 type: Input
             }] } });
 
-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)
+/**
+ * The grid's default column menu, opened by the header's ⋮ button when the
+ * grid sets `[headerMenu]="true"`.
+ *
+ * Entries follow the column: sorting only on a sortable column and only the
+ * transitions that make sense from the current state, pinning without the
+ * side it is already on, hiding never for the last visible column. The menu
+ * only reports the chosen action — the header executes it against the API,
+ * for the same reason the cell option menu does not mutate rows itself.
+ *
+ * Keyboard behaviour is the menu pattern the cell option menu established:
+ * focus moves in on open, arrows rove, Escape and outside clicks close.
+ */
+class OneGridHeaderMenuComponent {
+    get menuLabel() {
+        return `Column menu for ${this.column?.headerName ?? this.column?.field ?? 'this column'}`;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.column = null;
+        /** The column's current sort, so the menu offers only the other states. */
+        this.sortState = null;
+        /** False when this is the last visible column, which must stay visible. */
+        this.canHide = true;
+        this.menuAction = new EventEmitter();
+        this.menuClose = new EventEmitter();
+        this.entries = [];
+        this.activeIndex = 0;
+    }
+    /**
+     * Built once on open rather than in a getter: the entries feed the roving
+     * tabindex, and a list that re-derives mid-interaction would move focus.
+     */
+    ngOnInit() {
+        const entries = [];
+        const column = this.column;
+        if (column?._resolvedSortable && column.field) {
+            if (this.sortState !== 'asc')
+                entries.push({ action: 'sortAsc', label: 'Sort ascending' });
+            if (this.sortState !== 'desc')
+                entries.push({ action: 'sortDesc', label: 'Sort descending' });
+            if (this.sortState)
+                entries.push({ action: 'clearSort', label: 'Clear sort' });
+        }
+        if (column?.pinned !== 'left')
+            entries.push({ action: 'pinLeft', label: 'Pin left' });
+        if (column?.pinned !== 'right')
+            entries.push({ action: 'pinRight', label: 'Pin right' });
+        if (column?.pinned)
+            entries.push({ action: 'unpin', label: 'Unpin' });
+        if (this.canHide)
+            entries.push({ action: 'hide', label: 'Hide column' });
+        this.entries = entries;
+    }
+    ngAfterViewInit() {
+        this.focusItem(0);
+    }
+    onEntrySelected(entry) {
+        this.menuAction.emit(entry.action);
+        this.menuClose.emit();
+    }
+    onItemKeydown(event, index, entry) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusItem((index + 1) % this.entries.length);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusItem((index - 1 + this.entries.length) % this.entries.length);
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.focusItem(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                this.focusItem(this.entries.length - 1);
+                return;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.onEntrySelected(entry);
+                return;
+            default:
+                return;
+        }
+    }
+    focusItem(index) {
+        if (!this.entries.length)
+            return;
+        this.activeIndex = index;
+        this.items?.get(index)?.nativeElement?.focus();
+    }
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.menuClose.emit();
+        }
+    }
+    onEscape() {
+        this.menuClose.emit();
+    }
+    onScroll() {
+        this.menuClose.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridHeaderMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridHeaderMenuComponent, isStandalone: true, selector: "one-grid-header-menu", inputs: { column: "column", sortState: "sortState", canHide: "canHide" }, outputs: { menuAction: "menuAction", menuClose: "menuClose" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "document:scroll": "onScroll()" } }, viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], ngImport: i0, template: "<div class=\"one-header-menu\" role=\"menu\" [attr.aria-label]=\"menuLabel\">\n    @for (entry of entries; let index = $index; track entry.action) {\n        <button\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"one-header-menu-item\"\n            #item\n            [tabindex]=\"index === activeIndex ? 0 : -1\"\n            (click)=\"onEntrySelected(entry)\"\n            (keydown)=\"onItemKeydown($event, index, entry)\">\n            <span>{{ entry.label }}</span>\n        </button>\n    }\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridHeaderMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'one-grid-header-menu', standalone: true, template: "<div class=\"one-header-menu\" role=\"menu\" [attr.aria-label]=\"menuLabel\">\n    @for (entry of entries; let index = $index; track entry.action) {\n        <button\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"one-header-menu-item\"\n            #item\n            [tabindex]=\"index === activeIndex ? 0 : -1\"\n            (click)=\"onEntrySelected(entry)\"\n            (keydown)=\"onItemKeydown($event, index, entry)\">\n            <span>{{ entry.label }}</span>\n        </button>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { column: [{
+                type: Input
+            }], sortState: [{
+                type: Input
+            }], canHide: [{
+                type: Input
+            }], menuAction: [{
+                type: Output
+            }], menuClose: [{
+                type: Output
+            }], items: [{
+                type: ViewChildren,
+                args: ['item']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onScroll: [{
+                type: HostListener,
+                args: ['document:scroll']
+            }] } });
+
+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;
         return sortModel.find(s => s.colId === field)?.sort ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColumnSortStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ColumnSortStatePipe, name: "columnSortState" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ColumnSortStatePipe, isStandalone: true, name: "columnSortState" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColumnSortStatePipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     name: 'columnSortState'
                 }]
         }] });
 
+/**
+ * Maps the grid's sort state onto the values `aria-sort` accepts.
+ *
+ * The attribute takes `ascending` / `descending` / `none`, not the `asc` /
+ * `desc` the sort model uses. `none` is only correct on a column that *can* be
+ * sorted — on one that cannot, the attribute is omitted entirely, because
+ * "not sorted" and "not sortable" are different statements.
+ */
+class AriaSortPipe {
+    transform(sort, sortable) {
+        if (!sortable)
+            return null;
+        if (sort === 'asc')
+            return 'ascending';
+        if (sort === 'desc')
+            return 'descending';
+        return 'none';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AriaSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: AriaSortPipe, isStandalone: true, name: "ariaSort" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AriaSortPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'ariaSort',
+                }]
+        }] });
+
 class OneGridHeaderComponent {
     /**
      * Horizontal offset of the body, mirrored here so the header tracks it.
@@ -2502,9 +3308,10 @@ class OneGridHeaderComponent {
     get scrollLeft() {
         return this._scrollLeft;
     }
-    constructor(eventService, cdr) {
+    constructor(eventService, cdr, elementRef) {
         this.eventService = eventService;
         this.cdr = cdr;
+        this.elementRef = elementRef;
         this._scrollLeft = 0;
         this.allowedEdit = false;
         this.enableGroupColumnDefs = false;
@@ -2513,11 +3320,51 @@ class OneGridHeaderComponent {
         this.sortModel = [];
         this.subscriptions = new Subscription();
         this.draggedIndex = null;
+        /** Where the drag started, for reporting the completed move as one event. */
+        this.dragSourceIndex = null;
         // Track resize state
         this.resizing = false;
         this.resizeColumnIndex = null;
         this.startX = 0;
         this.startWidth = 0;
+        /**
+         * Render a filter input under each column whose `filterable` resolves true.
+         *
+         * The inputs build a contains-filter per column and hand it to
+         * `api.setFilterModel`, debounced. Fields without a filter input are left
+         * alone: a programmatic filter on a non-filterable column survives typing
+         * here, while the filterable fields belong to the row — last writer wins.
+         */
+        this.filterRow = false;
+        /** Current filter text per field. */
+        this.filterTexts = {};
+        this.filterInput$ = new Subject();
+        /**
+         * Minimum a column can be resized to, by pointer or keyboard.
+         *
+         * Exposed to the template for `aria-valuemin`, so what the resizer announces
+         * and what it enforces cannot drift apart.
+         */
+        this.MIN_COLUMN_WIDTH = 50;
+        /**
+         * The header's ⋮ button was a div with an empty handler — it rendered,
+         * looked interactive, and did nothing at all. Making it keyboard-reachable
+         * without giving it a purpose would only have added a dead tab stop per
+         * column, so it now reports the press the same way every row action does and
+         * the host decides what a column menu means.
+         */
+        this.headerMenuClick = new EventEmitter();
+        /**
+         * Render the grid's default column menu behind the ⋮ button.
+         *
+         * Opt-in: hosts that bound `(headerMenuClick)` to open their own menu keep
+         * exactly the behaviour they had — the intent still emits either way.
+         */
+        this.headerMenu = false;
+        /** The column whose default menu is open, or null. */
+        this.openMenuColumn = null;
+        /** Distance from the header's right edge to the open column's, in px. */
+        this.menuOffsetRight = 0;
         // Arrow function to preserve 'this' context
         this.onResizeMove = (event) => {
             if (!this.resizing || this.resizeColumnIndex === null)
@@ -2525,11 +3372,21 @@ class OneGridHeaderComponent {
             // Calculate how far the mouse has moved
             const deltaX = event.clientX - this.startX;
             // Calculate new width (with minimum of 50px)
-            const newWidth = Math.max(50, this.startWidth + deltaX);
-            // Update the column width
-            this.api.updateColumn(this.columnDefs[this.resizeColumnIndex].id, { width: newWidth });
+            const newWidth = Math.max(this.MIN_COLUMN_WIDTH, this.startWidth + deltaX);
+            // Update the column width. A hand-resized column stops flexing, or the
+            // next reflow would overwrite the width the user is dragging out.
+            this.api.updateColumn(this.columnDefs[this.resizeColumnIndex].id, { width: newWidth, flex: undefined });
         };
         this.onResizeEnd = () => {
+            // One event per completed gesture, not one per mousemove — and none at all
+            // for a click on the handle that never moved.
+            if (this.resizeColumnIndex !== null) {
+                const column = this.columnDefs[this.resizeColumnIndex];
+                const newWidth = column?.width ?? this.startWidth;
+                if (column && newWidth !== this.startWidth) {
+                    this.eventService.dispatchEvent('columnResized', { columnId: column.id, newWidth });
+                }
+            }
             // Clean up
             this.resizing = false;
             this.resizeColumnIndex = null;
@@ -2539,7 +3396,30 @@ class OneGridHeaderComponent {
             document.removeEventListener('mouseup', this.onResizeEnd);
         };
     }
+    /** Debounce for the filter row, in ms. */
+    static { this.FILTER_DEBOUNCE = 200; }
+    onFilterInput(col, event) {
+        this.filterTexts[col.field] = event.target.value;
+        this.filterInput$.next();
+    }
+    applyFilterRow() {
+        const managed = new Set(this.columnDefs
+            .filter(column => column._resolvedFilterable && column.field)
+            .map(column => column.field));
+        const preserved = this.api.getFilterModel().filter(entry => !managed.has(entry.field));
+        const own = Object.entries(this.filterTexts)
+            .filter(([field, text]) => managed.has(field) && text.trim() !== '')
+            .map(([field, text]) => ({
+            field,
+            logicOperator: 'AND',
+            conditions: [{ operator: 'contains', value: text.trim() }],
+        }));
+        this.api.setFilterModel([...preserved, ...own]);
+    }
     ngOnInit() {
+        this.subscriptions.add(this.filterInput$
+            .pipe(debounceTime(OneGridHeaderComponent.FILTER_DEBOUNCE))
+            .subscribe(() => this.applyFilterRow()));
         // Listen Column Changed Event
         this.subscriptions.add(this.eventService.addEventListener('columnChanged', (payload) => {
             const { groups, columns } = payload;
@@ -2562,7 +3442,100 @@ class OneGridHeaderComponent {
             this.headerViewport.nativeElement.scrollLeft = this._scrollLeft;
         }
     }
-    onHeaderMenuOptionClick(columnDef) {
+    onHeaderMenuOptionClick(columnDef, event) {
+        this.headerMenuClick.emit(columnDef);
+        if (!this.headerMenu)
+            return;
+        if (this.openMenuColumn?.id === columnDef.id) {
+            this.openMenuColumn = null;
+            return;
+        }
+        // Right-aligned under the opening column. Measured because the menu
+        // cannot render inside the column — every box in the header clips — so
+        // it sits outside and has to be told where the column is.
+        const columnElement = event?.target?.closest('.one-grid-header-column');
+        const hostElement = this.elementRef.nativeElement;
+        this.menuOffsetRight = columnElement
+            ? Math.max(hostElement.getBoundingClientRect().right - columnElement.getBoundingClientRect().right, 0)
+            : 0;
+        this.openMenuColumn = columnDef;
+    }
+    /** The open column's current sort, so the menu offers the other states. */
+    menuSortState(col) {
+        return this.api.sortModel.find(entry => entry.colId === col.field)?.sort ?? null;
+    }
+    onHeaderMenuAction(action, col) {
+        switch (action) {
+            case 'sortAsc':
+            case 'sortDesc': {
+                // Mirrors a sort-button click: a single-column model. The header's own
+                // cycle state follows, so the sort button keeps cycling from here.
+                this.sortModel = [{ colId: col.field, sort: action === 'sortAsc' ? 'asc' : 'desc' }];
+                this.api.onSortChanged(this.sortModel);
+                return;
+            }
+            case 'clearSort':
+                this.sortModel = [];
+                this.api.onSortChanged(this.sortModel);
+                return;
+            case 'pinLeft':
+                this.api.updateColumn(col.id, { pinned: 'left' });
+                return;
+            case 'pinRight':
+                this.api.updateColumn(col.id, { pinned: 'right' });
+                return;
+            case 'unpin':
+                this.api.updateColumn(col.id, { pinned: undefined });
+                return;
+            case 'hide':
+                this.api.setColumnVisible(col.id, false);
+                return;
+        }
+    }
+    closeHeaderMenu() {
+        this.openMenuColumn = null;
+    }
+    /**
+     * Resize from the keyboard.
+     *
+     * The pointer path is a drag, and WCAG 2.5.7 requires a single-pointer
+     * alternative that is not one. Arrows step, shift steps coarser, and
+     * Home/End go to the column's own bounds.
+     */
+    onResizeKeydown(event, columnIndex) {
+        const column = this.columnDefs[columnIndex];
+        if (!column)
+            return;
+        const step = event.shiftKey ? 50 : 10;
+        const current = column.width ?? resolveColumnWidth(column);
+        let width;
+        switch (event.key) {
+            case 'ArrowLeft':
+                width = current - step;
+                break;
+            case 'ArrowRight':
+                width = current + step;
+                break;
+            case 'Home':
+                width = column.minWidth ?? this.MIN_COLUMN_WIDTH;
+                break;
+            case 'End':
+                width = column.maxWidth ?? current + step;
+                break;
+            default: return;
+        }
+        event.preventDefault();
+        const min = Math.max(column.minWidth ?? 0, this.MIN_COLUMN_WIDTH);
+        const max = column.maxWidth ?? Number.POSITIVE_INFINITY;
+        const newWidth = Math.min(Math.max(width, min), max);
+        // Home at the minimum, End at the maximum: already clamped there, nothing
+        // changed, nothing to announce.
+        if (newWidth === current)
+            return;
+        // A hand-resized column stops flexing — otherwise the next reflow would
+        // overwrite the width the user just chose.
+        this.api.updateColumn(column.id, { width: newWidth, flex: undefined });
+        this.eventService.dispatchEvent('columnResized', { columnId: column.id, newWidth });
     }
     onHeaderMenuSortClick(colId) {
         const currentSort = this.sortModel.find(sort => sort.colId === colId)?.sort ?? null;
@@ -2602,6 +3575,7 @@ class OneGridHeaderComponent {
     // Track the dragged column index
     onDragColumnStart(event, index) {
         this.draggedIndex = index;
+        this.dragSourceIndex = index;
         // Optional: Set drag image/effect
         if (event.dataTransfer) {
             event.dataTransfer.effectAllowed = 'move';
@@ -2619,11 +3593,27 @@ class OneGridHeaderComponent {
         this.draggedIndex = targetIndex;
     }
     onDragColumnEnd(event) {
-        this.draggedIndex = null;
+        this.finishColumnDrag();
     }
     onDropColumn(event) {
         event.preventDefault();
+        this.finishColumnDrag();
+    }
+    /**
+     * The reorder itself already happened, step by step, during dragover — this
+     * only reports the completed move. Both `drop` and `dragend` funnel here and
+     * both can fire for one gesture; nulling the indexes makes the second call a
+     * no-op, so one gesture reports once.
+     */
+    finishColumnDrag() {
+        if (this.draggedIndex !== null && this.dragSourceIndex !== null && this.draggedIndex !== this.dragSourceIndex) {
+            const column = this.columnDefs[this.draggedIndex];
+            if (column) {
+                this.eventService.dispatchEvent('columnMoved', { columnId: column.id, toIndex: this.draggedIndex });
+            }
+        }
         this.draggedIndex = null;
+        this.dragSourceIndex = null;
     }
     ngOnDestroy() {
         // This completed an unused Subject and left the real subscription running.
@@ -2636,13 +3626,22 @@ class OneGridHeaderComponent {
             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" }, 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridHeaderComponent, deps: [{ token: OneGridEventService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridHeaderComponent, isStandalone: true, selector: "one-grid-header", inputs: { scrollLeft: "scrollLeft", allowedEdit: "allowedEdit", enableGroupColumnDefs: "enableGroupColumnDefs", api: "api", filterRow: "filterRow", headerMenu: "headerMenu" }, outputs: { headerMenuClick: "headerMenuClick" }, host: { attributes: { "role": "presentation" } }, providers: [ONE_GRID_ICON_PROVIDERS], viewQueries: [{ propertyName: "headerViewport", first: true, predicate: ["headerViewport"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"one-grid-header\" role=\"rowgroup\">\n    @if (enableGroupColumnDefs) {\n        <div class=\"one-group-header-row\" role=\"presentation\" [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\" role=\"presentation\">\n        <div class=\"one-header-row\" role=\"row\" aria-rowindex=\"1\">\n            <ng-container *ngTemplateOutlet=\"headerColumns; context: { columns: columnDefs }\"></ng-container>\n        </div>\n\n        <!-- Filter Row (grid opt-in). Lives inside the header viewport so it\n             scrolls with the columns and its pinned cells stick the same way. -->\n        @if (filterRow) {\n            <div class=\"one-filter-row\" role=\"row\" aria-rowindex=\"2\">\n                @for (col of columnDefs; track col.id) {\n                    <div class=\"one-filter-cell\"\n                        role=\"gridcell\"\n                        [attr.aria-colindex]=\"$index + 1\"\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                        [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                        @if (col._resolvedFilterable && col.field) {\n                            <input class=\"one-filter-input\"\n                                type=\"text\"\n                                [attr.aria-label]=\"'Filter ' + (col.headerName || col.field)\"\n                                [value]=\"filterTexts[col.field] ?? ''\"\n                                (input)=\"onFilterInput(col, $event)\" />\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</div>\n\n<!-- The default column menu (grid opt-in). A sibling of the header block\n     because everything inside it clips with overflow: hidden; the host\n     positions it just below, right-aligned to the opening column. -->\n@if (headerMenu && openMenuColumn) {\n    <one-grid-header-menu\n        [style.right.px]=\"menuOffsetRight\"\n        [column]=\"openMenuColumn\"\n        [sortState]=\"menuSortState(openMenuColumn)\"\n        [canHide]=\"columnDefs.length > 1\"\n        (menuAction)=\"onHeaderMenuAction($event, openMenuColumn)\"\n        (menuClose)=\"closeHeaderMenu()\" />\n}\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            role=\"columnheader\"\n            [attr.aria-colindex]=\"colIndex + 1\"\n            [attr.aria-sort]=\"col.field | columnSortState:api.sortModel | ariaSort:col._resolvedSortable\"\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                    <!-- `separator` is the ARIA window-splitter pattern, which is\n                         what a column resizer is. Focusable and arrow-operable\n                         because WCAG 2.5.7 requires everything achievable by\n                         dragging to have a non-dragging alternative. -->\n                    <div\n                        class=\"og-resize-handle\"\n                        role=\"separator\"\n                        tabindex=\"0\"\n                        aria-orientation=\"vertical\"\n                        [attr.aria-label]=\"'Resize ' + (col.headerName || col.field)\"\n                        [attr.aria-valuenow]=\"col.width\"\n                        [attr.aria-valuemin]=\"col.minWidth || MIN_COLUMN_WIDTH\"\n                        [attr.aria-valuemax]=\"col.maxWidth || null\"\n                        (mousedown)=\"onResizeStart($event, colIndex)\"\n                        (keydown)=\"onResizeKeydown($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                        <!-- A button, not a div with a click handler: sorting was\n                             pointer-only. The current state is not repeated here \u2014\n                             it is on the columnheader's `aria-sort`, and saying it\n                             twice makes a screen reader read it twice. -->\n                        <button\n                            type=\"button\"\n                            class=\"one-grid-header-menu-button\"\n                            [attr.aria-label]=\"'Sort by ' + (col.headerName || col.field)\"\n                            [title]=\"'Sort by ' + (col.headerName || col.field)\"\n                            (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                        </button>\n                    }\n\n                    <!-- Og Option Menu Button -->\n                    @if (col && !col._resolvedSuppressHeaderMenuButton) {\n                        <button\n                            type=\"button\"\n                            class=\"one-grid-header-menu-button\"\n                            [attr.aria-label]=\"'Options for ' + (col.headerName || col.field)\"\n                            [attr.aria-haspopup]=\"headerMenu ? 'menu' : null\"\n                            [attr.aria-expanded]=\"headerMenu ? openMenuColumn?.id === col.id : null\"\n                            [title]=\"'Options for ' + (col.headerName || col.field)\"\n                            (click)=\"onHeaderMenuOptionClick(col, $event)\">\n                            <i class=\"bi bi-three-dots-vertical\"></i>\n                        </button>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}one-grid-header-menu{position:absolute;top:100%;z-index:1000}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.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: "component", type: OneGridHeaderMenuComponent, selector: "one-grid-header-menu", inputs: ["column", "sortState", "canHide"], outputs: ["menuAction", "menuClose"] }, { kind: "pipe", type: ColumnSortStatePipe, name: "columnSortState" }, { kind: "pipe", type: AriaSortPipe, name: "ariaSort" }] }); }
 }
 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    <!-- 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: [{
+            args: [{ standalone: true, imports: [
+                        NgClass,
+                        NgStyle,
+                        NgTemplateOutlet,
+                        LucideAngularModule,
+                        OneGridCheckboxHeaderComponent,
+                        OneGridHeaderMenuComponent,
+                        ColumnSortStatePipe,
+                        AriaSortPipe,
+                    ], selector: 'one-grid-header', host: { 'role': 'presentation' }, providers: [ONE_GRID_ICON_PROVIDERS], template: "<div class=\"one-grid-header\" role=\"rowgroup\">\n    @if (enableGroupColumnDefs) {\n        <div class=\"one-group-header-row\" role=\"presentation\" [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\" role=\"presentation\">\n        <div class=\"one-header-row\" role=\"row\" aria-rowindex=\"1\">\n            <ng-container *ngTemplateOutlet=\"headerColumns; context: { columns: columnDefs }\"></ng-container>\n        </div>\n\n        <!-- Filter Row (grid opt-in). Lives inside the header viewport so it\n             scrolls with the columns and its pinned cells stick the same way. -->\n        @if (filterRow) {\n            <div class=\"one-filter-row\" role=\"row\" aria-rowindex=\"2\">\n                @for (col of columnDefs; track col.id) {\n                    <div class=\"one-filter-cell\"\n                        role=\"gridcell\"\n                        [attr.aria-colindex]=\"$index + 1\"\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                        [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                        @if (col._resolvedFilterable && col.field) {\n                            <input class=\"one-filter-input\"\n                                type=\"text\"\n                                [attr.aria-label]=\"'Filter ' + (col.headerName || col.field)\"\n                                [value]=\"filterTexts[col.field] ?? ''\"\n                                (input)=\"onFilterInput(col, $event)\" />\n                        }\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</div>\n\n<!-- The default column menu (grid opt-in). A sibling of the header block\n     because everything inside it clips with overflow: hidden; the host\n     positions it just below, right-aligned to the opening column. -->\n@if (headerMenu && openMenuColumn) {\n    <one-grid-header-menu\n        [style.right.px]=\"menuOffsetRight\"\n        [column]=\"openMenuColumn\"\n        [sortState]=\"menuSortState(openMenuColumn)\"\n        [canHide]=\"columnDefs.length > 1\"\n        (menuAction)=\"onHeaderMenuAction($event, openMenuColumn)\"\n        (menuClose)=\"closeHeaderMenu()\" />\n}\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            role=\"columnheader\"\n            [attr.aria-colindex]=\"colIndex + 1\"\n            [attr.aria-sort]=\"col.field | columnSortState:api.sortModel | ariaSort:col._resolvedSortable\"\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                    <!-- `separator` is the ARIA window-splitter pattern, which is\n                         what a column resizer is. Focusable and arrow-operable\n                         because WCAG 2.5.7 requires everything achievable by\n                         dragging to have a non-dragging alternative. -->\n                    <div\n                        class=\"og-resize-handle\"\n                        role=\"separator\"\n                        tabindex=\"0\"\n                        aria-orientation=\"vertical\"\n                        [attr.aria-label]=\"'Resize ' + (col.headerName || col.field)\"\n                        [attr.aria-valuenow]=\"col.width\"\n                        [attr.aria-valuemin]=\"col.minWidth || MIN_COLUMN_WIDTH\"\n                        [attr.aria-valuemax]=\"col.maxWidth || null\"\n                        (mousedown)=\"onResizeStart($event, colIndex)\"\n                        (keydown)=\"onResizeKeydown($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                        <!-- A button, not a div with a click handler: sorting was\n                             pointer-only. The current state is not repeated here \u2014\n                             it is on the columnheader's `aria-sort`, and saying it\n                             twice makes a screen reader read it twice. -->\n                        <button\n                            type=\"button\"\n                            class=\"one-grid-header-menu-button\"\n                            [attr.aria-label]=\"'Sort by ' + (col.headerName || col.field)\"\n                            [title]=\"'Sort by ' + (col.headerName || col.field)\"\n                            (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                        </button>\n                    }\n\n                    <!-- Og Option Menu Button -->\n                    @if (col && !col._resolvedSuppressHeaderMenuButton) {\n                        <button\n                            type=\"button\"\n                            class=\"one-grid-header-menu-button\"\n                            [attr.aria-label]=\"'Options for ' + (col.headerName || col.field)\"\n                            [attr.aria-haspopup]=\"headerMenu ? 'menu' : null\"\n                            [attr.aria-expanded]=\"headerMenu ? openMenuColumn?.id === col.id : null\"\n                            [title]=\"'Options for ' + (col.headerName || col.field)\"\n                            (click)=\"onHeaderMenuOptionClick(col, $event)\">\n                            <i class=\"bi bi-three-dots-vertical\"></i>\n                        </button>\n                    }\n                </div>\n            </div>\n        </div>\n    }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}one-grid-header-menu{position:absolute;top:100%;z-index:1000}\n"] }]
+        }], ctorParameters: () => [{ type: OneGridEventService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { headerViewport: [{
                 type: ViewChild,
                 args: ['headerViewport', { static: true }]
             }], scrollLeft: [{
@@ -2653,6 +3652,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], api: [{
                 type: Input
+            }], filterRow: [{
+                type: Input
+            }], headerMenuClick: [{
+                type: Output
+            }], headerMenu: [{
+                type: Input
             }] } });
 
 class CellEditablePipe {
@@ -2673,13 +3678,13 @@ class CellEditablePipe {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellEditablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellEditablePipe, name: "cellEditable" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellEditablePipe, isStandalone: true, name: "cellEditable" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellEditablePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'cellEditable',
-                    standalone: false
+                    standalone: true
                 }]
         }] });
 
@@ -2693,29 +3698,18 @@ class OneGridCheckboxComponent {
     onToggleSelection(event) {
         const isChecked = event.target.checked;
         const { rowId, rowIndex, data } = this.node;
-        const selectionMode = this.selectionService.getSelectionMode();
-        if (selectionMode === 'single') {
-            this.api.deselectAll();
-            if (isChecked) {
-                this.node.setSelected(true);
-            }
-            this.api.toggleSelection(rowId, isChecked);
-        }
-        else {
-            // Multi-select mode
-            this.selectionService.toggleSelection(rowId, isChecked);
-            this.node.setSelected(isChecked);
-        }
-        this.node.cellStates = { ...this.node.cellStates };
-        this.eventService.dispatchEvent('selectionChanged', { rowIndex, selected: isChecked, data, node: this.node });
+        // The mode rule (single clears the rest, multiple toggles) lives on the api
+        // now, so pressing Space on a focused row and clicking this checkbox cannot
+        // drift apart. It dispatches `selectionChanged` itself.
+        this.api.toggleRowSelection(rowId, isChecked);
         this.onRowSelection.emit({ rowIndex, selected: isChecked, data, node: this.node });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCheckboxComponent, deps: [{ token: OneGridSelectionService }, { token: OneGridEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneGridCheckboxComponent, selector: "one-grid-checkbox", inputs: { node: "node", allowedEdit: "allowedEdit", api: "api" }, outputs: { onRowSelection: "onRowSelection" }, ngImport: i0, template: "\n<div class=\"one-grid-checkbox\">\n    <input type=\"checkbox\"\n        [name]=\"node.rowId\"\n        [class.disabled]=\"!(allowedEdit)\"\n        [checked]=\"node.selected\"\n        (change)=\"onToggleSelection($event)\"/>\n</div>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneGridCheckboxComponent, isStandalone: true, selector: "one-grid-checkbox", inputs: { node: "node", allowedEdit: "allowedEdit", api: "api" }, outputs: { onRowSelection: "onRowSelection" }, ngImport: i0, template: "\n<div class=\"one-grid-checkbox\">\n    <input type=\"checkbox\"\n        [name]=\"node.rowId\"\n        [class.disabled]=\"!(allowedEdit)\"\n        [checked]=\"node.selected\"\n        (change)=\"onToggleSelection($event)\"/>\n</div>", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-checkbox', template: "\n<div class=\"one-grid-checkbox\">\n    <input type=\"checkbox\"\n        [name]=\"node.rowId\"\n        [class.disabled]=\"!(allowedEdit)\"\n        [checked]=\"node.selected\"\n        (change)=\"onToggleSelection($event)\"/>\n</div>" }]
+            args: [{ standalone: true, selector: 'one-grid-checkbox', template: "\n<div class=\"one-grid-checkbox\">\n    <input type=\"checkbox\"\n        [name]=\"node.rowId\"\n        [class.disabled]=\"!(allowedEdit)\"\n        [checked]=\"node.selected\"\n        (change)=\"onToggleSelection($event)\"/>\n</div>" }]
         }], ctorParameters: () => [{ type: OneGridSelectionService }, { type: OneGridEventService }], propDecorators: { node: [{
                 type: Input
             }], allowedEdit: [{
@@ -2726,76 +3720,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-class OneGridRowActionComponent {
-    constructor(cellService) {
-        this.cellService = cellService;
-        this.allowedEdit = false;
+class OneGridCellGroupRendererComponent {
+    constructor() {
         this.masterDetail = false;
-        this.masterNode = null;
-        this.gridType = null;
-        this.context = null;
-        /**
-         * Bind Event to Parent Component
-         */
-        this.onRowGotoDetail = new EventEmitter();
-        this.onRowAddNew = new EventEmitter();
-        this.onRowView = new EventEmitter();
-        this.onRowLocation = new EventEmitter();
-        this.onRowDocument = new EventEmitter();
-        this.onRowCopy = new EventEmitter();
-        this.onRowDelete = new EventEmitter();
-        this.onRowGotoList = new EventEmitter();
-        this.onRowEdit = new EventEmitter();
-        this.onRowPrint = new EventEmitter();
-        this.onRowHistory = new EventEmitter();
-        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',
-        };
+        this.expansionChanged = new EventEmitter();
     }
     /**
-     * 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.
+     * 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.
      */
-    get hideActionButton() {
-        return this.cellService.hideActionButtonFn(this.column, this.node);
+    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, isStandalone: true, 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: true, 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: [{
+                type: Input
+            }], detailCellRendererParams: [{
+                type: Input
+            }], detailRendererComponent: [{
+                type: Input
+            }], expansionChanged: [{
+                type: Output
+            }] } });
+
+class OneGridCellOptionMenuComponent {
+    get menuLabel() {
+        return `Options for ${this.column?.headerName ?? this.column?.field ?? 'this cell'}`;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.column = null;
+        this.node = null;
+        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;
     }
     /**
-     * Whether this column's action buttons are disabled for this row.
+     * Move focus into the menu once it exists.
      *
-     * `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.
+     * Opening a menu and leaving focus on the trigger strands a keyboard user:
+     * the menu is on screen and nothing they press reaches it.
      */
-    get actionDisabled() {
-        return this.cellService.disableFn(this.column, this.node) || !this.allowedEdit;
+    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) {
+        const target = event.target;
+        if (!this.elementRef.nativeElement.contains(target)) {
+            this.close();
+        }
+    }
+    // Escape key
+    onEscape() {
+        this.close();
+    }
+    // Scroll closes menu (prevents misalignment)
+    onScroll() {
+        this.close();
+    }
+    // Option selected
+    onOptionSelected(option) {
+        this.cellOptionMenuSelect.emit({
+            column: this.column,
+            node: this.node,
+            option: option
+        });
+        this.close();
+    }
+    // Single close method
+    close() {
+        this.node.cellOptions[this.column.field] = false;
+        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, isStandalone: true, 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: true, 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: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], cellOptionMenuSelect: [{
+                type: Output
+            }], cellOptionMenuClose: [{
+                type: Output
+            }], items: [{
+                type: ViewChildren,
+                args: ['item']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onScroll: [{
+                type: HostListener,
+                args: ['document:scroll']
+            }] } });
+
+class OneGridRowActionComponent {
+    constructor(cellService) {
+        this.cellService = cellService;
+        this.allowedEdit = false;
+        this.masterDetail = false;
+        this.masterNode = null;
+        this.gridType = null;
+        this.context = null;
+        /**
+         * Bind Event to Parent Component
+         */
+        this.onRowGotoDetail = new EventEmitter();
+        this.onRowAddNew = new EventEmitter();
+        this.onRowView = new EventEmitter();
+        this.onRowLocation = new EventEmitter();
+        this.onRowDocument = new EventEmitter();
+        this.onRowCopy = new EventEmitter();
+        this.onRowDelete = new EventEmitter();
+        this.onRowGotoList = new EventEmitter();
+        this.onRowEdit = new EventEmitter();
+        this.onRowPrint = new EventEmitter();
+        this.onRowHistory = new EventEmitter();
+        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 ?? []);
@@ -2907,11 +4054,11 @@ class OneGridRowActionComponent {
         this.onRowCellOption.emit(data);
     }
     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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridRowActionComponent, isStandalone: true, 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: 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 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}" }]
+            args: [{ standalone: true, imports: [NgClass], 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 }]
@@ -2961,51 +4108,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-class OneGridCellGroupRendererComponent {
-    constructor() {
-        this.masterDetail = false;
-        this.expansionChanged = new EventEmitter();
+/** 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();
     }
-    /**
-     * 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 });
+    get disabled() {
+        return this.suppressedReason !== null;
     }
-    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\">\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\">\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: [{
-                type: Input
-            }], detailCellRendererParams: [{
-                type: Input
-            }], detailRendererComponent: [{
-                type: Input
-            }], expansionChanged: [{
-                type: Output
-            }] } });
-
-class OneCellInputValidatorDirective {
-    constructor(el) {
-        this.el = el;
-        this.regex = '';
-        this.MAX_CODE_LENGTH = 36;
-        this.KHMER_CHARACTER_RANGE = /[\u1780-\u17FF]/;
+    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.';
     }
-    onKeyPress(event) {
-        let isValid = false;
-        const char = event.key;
-        const inputElement = this.el.nativeElement;
-        switch (this.validationType) {
-            case 'disabled':
+    /** 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, isStandalone: true, selector: "one-grid-row-drag-handle", inputs: { node: "node", suppressedReason: "suppressedReason" }, outputs: { dragEnd: "dragEnd" }, providers: [ONE_GRID_ICON_PROVIDERS], 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: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.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: true, imports: [LucideAngularModule], selector: 'one-grid-row-drag-handle', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ONE_GRID_ICON_PROVIDERS], 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 OneCellInputValidatorDirective {
+    constructor(el) {
+        this.el = el;
+        this.regex = '';
+        this.MAX_CODE_LENGTH = 36;
+        this.KHMER_CHARACTER_RANGE = /[\u1780-\u17FF]/;
+    }
+    onKeyPress(event) {
+        let isValid = false;
+        const char = event.key;
+        const inputElement = this.el.nativeElement;
+        switch (this.validationType) {
+            case 'disabled':
                 event.preventDefault();
                 return;
             case 'integer':
@@ -3042,12 +4263,12 @@ class OneCellInputValidatorDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellInputValidatorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OneCellInputValidatorDirective, selector: "[oneCellInputValidator]", inputs: { validationType: "validationType", regex: "regex" }, host: { listeners: { "keypress": "onKeyPress($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OneCellInputValidatorDirective, isStandalone: true, selector: "[oneCellInputValidator]", inputs: { validationType: "validationType", regex: "regex" }, host: { listeners: { "keypress": "onKeyPress($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellInputValidatorDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     selector: '[oneCellInputValidator]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { validationType: [{
@@ -3064,408 +4285,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class OneCellRendererComponentDirective {
     constructor(vcr) {
-        this.vcr = vcr;
-        this.initialized = false;
-    }
-    ngOnInit() {
-        this.initialized = true;
-        this.createOrUpdateComponent(true);
-    }
-    ngOnChanges(changes) {
-        if (!this.initialized)
-            return;
-        const componentChanged = changes['cellRendererComponent'];
-        const paramsChanged = changes['params'];
-        if (componentChanged) {
-            this.destroyComponent();
-            this.createOrUpdateComponent(true);
-        }
-        else if (paramsChanged) {
-            this.updateComponentInputs();
-        }
-    }
-    createOrUpdateComponent(forceCreate = false) {
-        if (!this.cellRendererComponent)
-            return;
-        if (forceCreate || !this.compRef) {
-            this.vcr.clear();
-            this.compRef = this.vcr.createComponent(this.cellRendererComponent);
-        }
-        this.updateComponentInputs();
-    }
-    updateComponentInputs() {
-        if (!this.compRef?.instance)
-            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 };
-            if (newParams.value === undefined) {
-                newParams.value = getFieldValue(this.params.data, this.params?.columnDef?.field) ?? null;
-            }
-            instance.oneInit(newParams);
-        }
-        else {
-            Object.assign(instance, this.params);
-        }
-        // Optional: call change detector if needed
-        // if (this.compRef.changeDetectorRef) {
-        //   this.compRef.changeDetectorRef.detectChanges();
-        // }
-    }
-    destroyComponent() {
-        if (this.compRef) {
-            this.compRef.destroy();
-            this.compRef = undefined;
-        }
-    }
-    ngOnDestroy() {
-        this.destroyComponent();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellRendererComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OneCellRendererComponentDirective, selector: "[oneCellRendererComponent]", inputs: { cellRendererComponent: "cellRendererComponent", params: "params" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellRendererComponentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[oneCellRendererComponent]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { cellRendererComponent: [{
-                type: Input,
-                args: [{ required: true }]
-            }], params: [{
-                type: Input,
-                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;
-    }
-    onMouseEnter() {
-        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(), OneCellTextExpandDirective.HOVER_DELAY_MS);
-    }
-    onMouseLeave() {
-        this.collapse();
-    }
-    ngOnDestroy() {
-        this.collapse();
-    }
-    expand() {
-        this.renderer.addClass(this.cell.nativeElement, OneCellTextExpandDirective.EXPANDED_CLASS);
-    }
-    collapse() {
-        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: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellTextExpandDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[oneCellTextExpand]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
-class OneGridCellOptionMenuComponent {
-    get menuLabel() {
-        return `Options for ${this.column?.headerName ?? this.column?.field ?? 'this cell'}`;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.column = null;
-        this.node = null;
-        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) {
-        const target = event.target;
-        if (!this.elementRef.nativeElement.contains(target)) {
-            this.close();
-        }
-    }
-    // Escape key
-    onEscape() {
-        this.close();
-    }
-    // Scroll closes menu (prevents misalignment)
-    onScroll() {
-        this.close();
-    }
-    // Option selected
-    onOptionSelected(option) {
-        this.cellOptionMenuSelect.emit({
-            column: this.column,
-            node: this.node,
-            option: option
-        });
-        this.close();
-    }
-    // Single close method
-    close() {
-        this.node.cellOptions[this.column.field] = false;
-        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()" } }, 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: "<!-- 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: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], cellOptionMenuSelect: [{
-                type: Output
-            }], cellOptionMenuClose: [{
-                type: Output
-            }], items: [{
-                type: ViewChildren,
-                args: ['item']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }], onScroll: [{
-                type: HostListener,
-                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;
+        this.vcr = vcr;
+        this.initialized = false;
     }
-    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.';
+    ngOnInit() {
+        this.initialized = true;
+        this.createOrUpdateComponent(true);
     }
-    /** True while this specific row is the one being moved. */
-    get grabbed() {
-        return this.dragService.state?.rowId === this.node.rowId;
+    ngOnChanges(changes) {
+        if (!this.initialized)
+            return;
+        const componentChanged = changes['cellRendererComponent'];
+        const paramsChanged = changes['params'];
+        if (componentChanged) {
+            this.destroyComponent();
+            this.createOrUpdateComponent(true);
+        }
+        else if (paramsChanged) {
+            this.updateComponentInputs();
+        }
     }
-    onPointerDown(event) {
-        if (this.disabled)
+    createOrUpdateComponent(forceCreate = false) {
+        if (!this.cellRendererComponent)
             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) });
+        if (forceCreate || !this.compRef) {
+            this.vcr.clear();
+            this.compRef = this.vcr.createComponent(this.cellRendererComponent);
+        }
+        this.updateComponentInputs();
     }
-    onKeyDown(event) {
-        if (this.disabled)
+    updateComponentInputs() {
+        if (!this.compRef?.instance)
             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;
+        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 };
+            if (newParams.value === undefined) {
+                newParams.value = getFieldValue(this.params.data, this.params?.columnDef?.field) ?? null;
+            }
+            instance.oneInit(newParams);
+        }
+        else {
+            Object.assign(instance, this.params);
         }
+        // Optional: call change detector if needed
+        // if (this.compRef.changeDetectorRef) {
+        //   this.compRef.changeDetectorRef.detectChanges();
+        // }
     }
-    /**
-     * 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();
+    destroyComponent() {
+        if (this.compRef) {
+            this.compRef.destroy();
+            this.compRef = undefined;
         }
     }
-    emit(result) {
-        if (result)
-            this.dragEnd.emit(result);
+    ngOnDestroy() {
+        this.destroyComponent();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellRendererComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OneCellRendererComponentDirective, isStandalone: true, selector: "[oneCellRendererComponent]", inputs: { cellRendererComponent: "cellRendererComponent", params: "params" }, usesOnChanges: true, ngImport: i0 }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellRendererComponentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[oneCellRendererComponent]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { cellRendererComponent: [{
+                type: Input,
+                args: [{ required: true }]
+            }], params: [{
                 type: Input,
                 args: [{ required: true }]
-            }], suppressedReason: [{
-                type: Input
-            }], dragEnd: [{
-                type: Output
             }] } });
 
-class CellInvalidPipe {
-    transform(cellStates, value, column, node, allowedEdit, submitted) {
-        if (!column.validationRules?.length) {
-            return false;
-        }
-        return getCellError(column, node, value, node.data) !== null && !(node.editing[column.field]) && !(column?.cellRendererParams?.validateSelectedRowOnly && !node?.selected) && allowedEdit && submitted;
+/**
+ * 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;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellInvalidPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellInvalidPipe, name: "cellInvalid" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellInvalidPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellInvalid'
-                }]
-        }] });
-
-class CellSelectedPipe {
-    transform(selectedCells, rowId, field) {
-        if (!selectedCells)
-            return false;
-        return selectedCells.has(getCellKey(rowId, field));
+    onMouseEnter() {
+        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(), OneCellTextExpandDirective.HOVER_DELAY_MS);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellSelectedPipe, name: "cellSelected" }); }
+    onMouseLeave() {
+        this.collapse();
+    }
+    ngOnDestroy() {
+        this.collapse();
+    }
+    expand() {
+        this.renderer.addClass(this.cell.nativeElement, OneCellTextExpandDirective.EXPANDED_CLASS);
+    }
+    collapse() {
+        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, isStandalone: true, selector: "[oneCellTextExpand]", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellSelectedPipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneCellTextExpandDirective, decorators: [{
+            type: Directive,
             args: [{
-                    standalone: false,
-                    name: 'cellSelected'
+                    standalone: true,
+                    selector: '[oneCellTextExpand]'
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
 
 class CellActionButtonEnablePipe {
     transform(params) {
@@ -3476,16 +4435,34 @@ class CellActionButtonEnablePipe {
         return statusValues.some(status => status === 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellActionButtonEnablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellActionButtonEnablePipe, name: "cellActionButtonEnable" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellActionButtonEnablePipe, isStandalone: true, name: "cellActionButtonEnable" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellActionButtonEnablePipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     name: 'cellActionButtonEnable'
                 }]
         }] });
 
+class CellInvalidPipe {
+    transform(cellStates, value, column, node, allowedEdit, submitted) {
+        if (!column.validationRules?.length) {
+            return false;
+        }
+        return getCellError(column, node, value, node.data) !== null && !(node.editing[column.field]) && !(column?.cellRendererParams?.validateSelectedRowOnly && !node?.selected) && allowedEdit && submitted;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellInvalidPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellInvalidPipe, isStandalone: true, name: "cellInvalid" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellInvalidPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'cellInvalid'
+                }]
+        }] });
+
 class CellKeyPipe {
     transform(rowId, field) {
         if (!rowId || !field) {
@@ -3494,12 +4471,12 @@ class CellKeyPipe {
         return getCellKey(rowId, field);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellKeyPipe, name: "cellKey" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellKeyPipe, isStandalone: true, name: "cellKey" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellKeyPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     name: 'cellKey'
                 }]
         }] });
@@ -3510,16 +4487,33 @@ class CellLevelPaddingPipe {
         return level * factor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellLevelPaddingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellLevelPaddingPipe, name: "cellLevelPadding" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellLevelPaddingPipe, isStandalone: true, name: "cellLevelPadding" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellLevelPaddingPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     name: 'cellLevelPadding'
                 }]
         }] });
 
+class CellSelectedPipe {
+    transform(selectedCells, rowId, field) {
+        if (!selectedCells)
+            return false;
+        return selectedCells.has(getCellKey(rowId, field));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellSelectedPipe, isStandalone: true, name: "cellSelected" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'cellSelected'
+                }]
+        }] });
+
 class CellStateRendererPipe {
     transform(cellStates, field) {
         const value = cellStates?.[field]?.value;
@@ -3532,12 +4526,12 @@ class CellStateRendererPipe {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellStateRendererPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellStateRendererPipe, name: "cellStateRenderer" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellStateRendererPipe, isStandalone: true, name: "cellStateRenderer" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellStateRendererPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: false,
+                    standalone: true,
                     name: 'cellStateRenderer'
                 }]
         }] });
@@ -3554,6 +4548,12 @@ class OneGridBodyComponent {
         this.allowedEdit = true;
         this.enableGroupColumnDefs = false;
         this.submitted = false;
+        /**
+         * `'fullRow'`: a double-click opens every editable cell of the row, Enter or
+         * focus leaving the row commits them together, Escape closes them all
+         * without committing. Default: one cell at a time.
+         */
+        this.editType = null;
         this.context = null;
         /**
          * Pinned rows are bound only so the component re-renders when they change;
@@ -3654,6 +4654,22 @@ class OneGridBodyComponent {
          * MAX_BUFFER_PX keeps roughly twenty rows of overscan either side instead.
          */
         this.MAX_BUFFER_PX = 600;
+        // ---------------------------------------------------------------------------
+        // Cell navigation
+        //
+        // The WAI-ARIA grid pattern: the whole grid is one tab stop, and the arrows
+        // move a focused cell within it. Before this the only tab stop was the scroll
+        // viewport, so a keyboard user could scroll the rows and reach nothing in
+        // them — and a screen reader had no cursor to read a cell from.
+        //
+        // Focus is real DOM focus on a roving tabindex rather than
+        // `aria-activedescendant`, because the rows are virtualised: the element a
+        // descendant id pointed at would keep being destroyed underneath it.
+        // ---------------------------------------------------------------------------
+        /** The cell holding the grid's tab stop. Null until something is focused. */
+        this.activeCell = null;
+        /** The row a shift-extended selection is measured from. */
+        this.selectionAnchorRowId = null;
         /**
          * Where to paint the drop indicator, in pixels from the top of the body.
          *
@@ -3709,13 +4725,20 @@ class OneGridBodyComponent {
             this.columnDefs = [...payload.columns];
             this.cellRenderer = this.columnDefs.some(col => col.cellRendererComponent);
             this.rowWidth = this.columnDefs.reduce((sum, col) => sum + resolveColumnWidth(col), 0);
+            // A column change can alter the width left for flex columns (a hide, a
+            // resize, new defs). Re-flexing only dispatches when a width actually
+            // changes, so this cannot ping-pong.
+            this.applyFlexWidths();
             this.cdr.markForCheck();
         }));
         /**
          * Listen Row Data Changed Event
          */
-        this.subscriptions.add(this.eventService.addEventListener('rowDataChanged', ({ nodes }) => {
-            this.rowCountChanged.emit(nodes?.length ?? 0);
+        this.subscriptions.add(this.eventService.addEventListener('rowDataChanged', ({ nodes: allNodes }) => {
+            // The full post-filter count, reported before the page slice is taken,
+            // so the host's paging totals see everything.
+            this.rowCountChanged.emit(allNodes?.length ?? 0);
+            const nodes = this.api.pageNodes(allNodes);
             setTimeout(() => {
                 this.viewport?.checkViewportSize();
                 this.setVirtualScroll(nodes?.length);
@@ -3755,7 +4778,7 @@ class OneGridBodyComponent {
          * Listen Sort Changed Event
          */
         this.subscriptions.add(this.eventService.addEventListener('sortChanged', ({ nodes }) => {
-            this.nodes = nodes;
+            this.nodes = this.api.pageNodes(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();
@@ -3769,7 +4792,7 @@ class OneGridBodyComponent {
          * 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.nodes = this.api.pageNodes([...nodes]);
             this.cdr.markForCheck();
         }));
         /**
@@ -4087,13 +5110,28 @@ class OneGridBodyComponent {
         }
         let rowNode = this.api.getRowNodeById(node.rowId);
         if (rowNode) {
-            rowNode.editing[column.field] = true;
+            if (this.editType === 'fullRow') {
+                // The whole row edits together, so every cell that would accept its
+                // own double-click opens now. The clicked one still takes focus below.
+                for (const col of this.columnDefs) {
+                    if (!col.field)
+                        continue;
+                    if (this.cellEditablePipe.transform(rowNode.cellStates, col, rowNode, this.cellService.editableFn, this.cellService.updatableFn, this.allowedEdit)) {
+                        rowNode.editing[col.field] = true;
+                    }
+                }
+            }
+            else {
+                rowNode.editing[column.field] = true;
+            }
             setTimeout(() => {
-                const input = document.querySelector(`[data-cell-id="${getCellKey(node.rowId, column.field)}"] input`);
+                const input = document.querySelector(`[data-cell-id="${getCellKey(node.rowId, column.field)}"] input, [data-cell-id="${getCellKey(node.rowId, column.field)}"] select`);
                 if (input) {
                     input.focus();
                     const value = input.value;
-                    if (value && ["text"].includes(input.type)) {
+                    // A select reports type 'select-one', so only a text input gets its
+                    // caret placed.
+                    if (value && ["text"].includes(input.type) && 'setSelectionRange' in input) {
                         input.setSelectionRange(value.length, value.length);
                     }
                 }
@@ -4103,19 +5141,72 @@ class OneGridBodyComponent {
     /**
      * Save Cell Edit Mode
      */
-    stopEdit(node, column, event) {
+    stopEdit(node, column, event) {
+        if (this.editType === 'fullRow') {
+            this.stopRowEditFromEvent(node, event);
+            return;
+        }
+        let rowNode = this.api.getRowNodeById(node.rowId);
+        // The editing guard makes a second commit for one edit a no-op: a select
+        // commits on (change), which closes the editor, and the (blur) that can
+        // follow must not commit again.
+        if (rowNode && rowNode.editing[column.field]) {
+            event.preventDefault();
+            event.stopPropagation();
+            const value = event.target.value ?? '';
+            const oldValue = rowNode.data[column.field];
+            this.setCellValueByRowId(node.rowId, column, value);
+            this.finishEdit(rowNode, column, oldValue);
+        }
+    }
+    /**
+     * Save a `select` editor's choice.
+     *
+     * Separate from `stopEdit` because the value is not the element's string:
+     * the chosen index maps back into `selectOptions`, so the committed value
+     * keeps whatever type the option declared.
+     */
+    stopEditSelect(node, column, event) {
+        if (this.editType === 'fullRow') {
+            // (change) is not a commit in full-row mode — the choice sits in the
+            // select until the row commits and reads every editor at once. Only a
+            // blur that actually leaves the row closes it.
+            if (event.type === 'blur')
+                this.stopRowEditFromEvent(node, event);
+            return;
+        }
         let rowNode = this.api.getRowNodeById(node.rowId);
-        if (rowNode) {
-            event.preventDefault();
+        if (rowNode && rowNode.editing[column.field]) {
             event.stopPropagation();
-            const value = event.target.value ?? '';
-            this.setCellValueByRowId(node.rowId, column, value);
-            rowNode.cellStates = this.cellService.generateCellStates(rowNode);
-            rowNode.editing[column.field] = false;
-            this.eventService.dispatchEvent('cellStateChanged', {
-                data: rowNode.data,
+            const options = column?.cellRendererParams?.selectOptions ?? [];
+            const option = options[event.target.selectedIndex];
+            if (!option)
+                return;
+            const oldValue = rowNode.data[column.field];
+            rowNode.data[column.field] = option.value;
+            this.finishEdit(rowNode, column, oldValue);
+        }
+    }
+    /** Close the editor and announce the commit. Shared by both editor kinds. */
+    finishEdit(rowNode, column, oldValue) {
+        const newValue = rowNode.data[column.field];
+        rowNode.cellStates = this.cellService.generateCellStates(rowNode);
+        rowNode.editing[column.field] = false;
+        this.eventService.dispatchEvent('cellStateChanged', {
+            data: rowNode.data,
+            node: rowNode,
+            column: column
+        });
+        // Compared after normalisation ('' -> null, number coercion), so a blur
+        // that leaves the value as it was does not announce an edit.
+        if (newValue !== oldValue) {
+            this.eventService.dispatchEvent('cellValueChanged', {
                 node: rowNode,
-                column: column
+                data: rowNode.data,
+                column: column,
+                field: column.field,
+                oldValue,
+                newValue,
             });
         }
     }
@@ -4125,9 +5216,63 @@ class OneGridBodyComponent {
     cancelEdit(node, column) {
         let rowNode = this.api.getRowNodeById(node.rowId);
         if (rowNode) {
+            if (this.editType === 'fullRow') {
+                // Escape abandons the whole row: every editor closes, nothing commits.
+                Object.keys(rowNode.editing).forEach(field => rowNode.editing[field] = false);
+                return;
+            }
             rowNode.editing[column.field] = false;
         }
     }
+    /**
+     * Full-row commit, routed from any one editor's Enter or blur.
+     *
+     * A blur that lands on another editor in the same row is the user tabbing
+     * between fields, not leaving the row — the editors stay open and their
+     * typed values stay in the DOM until the row commits.
+     */
+    stopRowEditFromEvent(node, event) {
+        if (event.type === 'blur') {
+            const next = event.relatedTarget;
+            if (next?.matches?.('input.one-cell-input, select.one-cell-input')
+                && next.closest?.(`[data-cell-id^="${node.rowId}--"]`)) {
+                return;
+            }
+        }
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        this.stopRowEdit(node);
+    }
+    /** Commit every open editor of one row, reading each from the DOM. */
+    stopRowEdit(node) {
+        const rowNode = this.api.getRowNodeById(node.rowId);
+        if (!rowNode)
+            return;
+        for (const column of this.columnDefs) {
+            const field = column.field;
+            if (!field || !rowNode.editing[field])
+                continue;
+            const key = getCellKey(rowNode.rowId, field);
+            const editor = document.querySelector(`[data-cell-id="${key}"] input, [data-cell-id="${key}"] select`);
+            const oldValue = rowNode.data[field];
+            if (editor?.tagName === 'SELECT') {
+                const options = column.cellRendererParams?.selectOptions ?? [];
+                const option = options[editor.selectedIndex];
+                if (option)
+                    rowNode.data[field] = option.value;
+            }
+            else if (editor) {
+                const raw = editor.value ?? '';
+                rowNode.data[field] = raw === ''
+                    ? null
+                    : column.cellRendererParams?.inputType === 'number' ? Number(raw) : raw;
+            }
+            // finishEdit closes the editor, refreshes the cell state and raises
+            // cellValueChanged when the value moved — one event per changed cell,
+            // the same contract as single-cell editing.
+            this.finishEdit(rowNode, column, oldValue);
+        }
+    }
     /**
      * Set Cell Value
      */
@@ -4173,6 +5318,24 @@ class OneGridBodyComponent {
             },
         });
         this.refreshRowDragSuppressed();
+        // The CDK inserts its own content wrapper between the viewport and the
+        // rows. It has no template of ours to annotate, and left generic it breaks
+        // the `grid > row` ownership the roles depend on.
+        const wrapper = element.querySelector('.cdk-virtual-scroll-content-wrapper');
+        wrapper?.setAttribute('role', 'presentation');
+        // Flex columns size against this viewport, now and whenever it resizes.
+        // applyFlexWidths is a no-op without flex columns and dispatches only on a
+        // real change, so grids that never use flex pay nothing here.
+        this.applyFlexWidths();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.flexResizeObserver = new ResizeObserver(() => this.applyFlexWidths());
+            this.flexResizeObserver.observe(element);
+        }
+    }
+    applyFlexWidths() {
+        const width = this.viewport?.elementRef?.nativeElement?.clientWidth ?? 0;
+        if (width > 0)
+            this.api.applyFlexWidths(width);
     }
     /**
      * The params every per-cell callback receives.
@@ -4196,6 +5359,226 @@ class OneGridBodyComponent {
     rendererParams(node, column) {
         return { ...(column?.cellRendererParams ?? {}), ...this.cellParams(node, column) };
     }
+    /**
+     * `aria-rowindex` is 1-based over the whole grid, not over what is rendered.
+     *
+     * That is the point of it: the body virtualises, so the DOM holds a sliding
+     * window of rows and the index is how a screen reader knows where the window
+     * sits. Row 1 is the header, then any pinned-top rows, then the data.
+     */
+    dataRowAriaIndex(node) {
+        return 2 + this.pinnedTopNodes.length + node.rowIndex;
+    }
+    /** Pinned rows bracket the data: top ones follow the header, bottom ones end the grid. */
+    pinnedRowAriaIndex(node, side) {
+        const index = (side === 'top' ? this.pinnedTopNodes : this.pinnedBottomNodes).indexOf(node);
+        return side === 'top'
+            ? 2 + index
+            : 2 + this.pinnedTopNodes.length + this.nodes.length + index;
+    }
+    /**
+     * Whether rows can be selected at all.
+     *
+     * `aria-selected="false"` on every row of a grid nobody can select announces
+     * a selection affordance that does not exist, so the attribute is omitted
+     * rather than set false.
+     */
+    get rowSelectionEnabled() {
+        return !!this.api?.rowSelection;
+    }
+    isActiveCell(node, column) {
+        if (this.activeCell) {
+            return this.activeCell.rowId === node.rowId && this.activeCell.field === column.field;
+        }
+        // Nothing focused yet, so the first cell holds the tab stop. Without this
+        // fallback a grid nobody has clicked has *no* tabbable cell, and a keyboard
+        // user cannot get into it at all — the roving tabindex has to start
+        // somewhere.
+        return node === this.nodes[0] && column === this.navigableColumns()[0];
+    }
+    /**
+     * Adopt whatever the user focused, however they got there — click, tab, or
+     * the arrow keys below. Keeping this in one place is what stops the roving
+     * tabindex drifting away from the element that actually has focus.
+     */
+    onCellFocus(node, column) {
+        if (this.isActiveCell(node, column))
+            return;
+        this.activeCell = { rowId: node.rowId, field: column.field };
+        this.cdr.markForCheck();
+    }
+    onGridKeydown(event) {
+        // Undo/redo of committed edits, anywhere in the grid except inside an
+        // open editor — a text input's Ctrl+Z is the browser's, and it operates
+        // on the uncommitted text.
+        if ((event.ctrlKey || event.metaKey) && ['z', 'y'].includes(event.key.toLowerCase())) {
+            const tag = event.target?.tagName?.toLowerCase();
+            if (tag === 'input' || tag === 'select' || tag === 'textarea')
+                return;
+            event.preventDefault();
+            const redo = event.key.toLowerCase() === 'y' || event.shiftKey;
+            const applied = redo ? this.api.redoCellEditing() : this.api.undoCellEditing();
+            if (applied)
+                this.cdr.markForCheck();
+            return;
+        }
+        const columns = this.navigableColumns();
+        if (!this.nodes.length || !columns.length)
+            return;
+        // Navigate only when a cell itself holds focus. Anything focusable *inside*
+        // a cell owns its own keys — a text editor's caret, the row drag handle's
+        // reorder keys, the option menu's arrows — and all of them bubble to here.
+        // Checking the target rather than blocklisting tag names is what keeps this
+        // correct as more controls are added to cells.
+        const target = event.target;
+        if (!target?.matches?.('[role="gridcell"]'))
+            return;
+        const current = this.activeCellPosition(columns);
+        let row = current.row;
+        let col = current.col;
+        switch (event.key) {
+            case 'ArrowDown':
+                row += 1;
+                break;
+            case 'ArrowUp':
+                row -= 1;
+                break;
+            case 'ArrowRight':
+                col += 1;
+                break;
+            case 'ArrowLeft':
+                col -= 1;
+                break;
+            // Selection. Space is the grid pattern's toggle, and it has to be caught
+            // here or the browser scrolls the page with it.
+            case ' ': {
+                const node = this.nodes[current.row];
+                if (node) {
+                    event.preventDefault();
+                    this.toggleRowSelection(node);
+                }
+                return;
+            }
+            case 'a':
+            case 'A':
+                if (!event.ctrlKey && !event.metaKey)
+                    return;
+                event.preventDefault();
+                this.api.selectAll();
+                this.cdr.markForCheck();
+                return;
+            case 'Home':
+                col = 0;
+                if (event.ctrlKey || event.metaKey)
+                    row = 0;
+                break;
+            case 'End':
+                col = columns.length - 1;
+                if (event.ctrlKey || event.metaKey)
+                    row = this.nodes.length - 1;
+                break;
+            // A page is what the viewport can show, which is the only definition that
+            // matches what the user sees move.
+            case 'PageDown':
+                row += this.rowsPerPage();
+                break;
+            case 'PageUp':
+                row -= this.rowsPerPage();
+                break;
+            case 'Enter':
+            case 'F2': {
+                const node = this.nodes[current.row];
+                const column = columns[current.col];
+                if (node && column) {
+                    event.preventDefault();
+                    this.startEdit({ target: event.target }, node, column);
+                }
+                return;
+            }
+            default: return;
+        }
+        event.preventDefault();
+        const targetRow = Math.min(Math.max(row, 0), this.nodes.length - 1);
+        this.focusCell(targetRow, Math.min(Math.max(col, 0), columns.length - 1));
+        // Shift with a vertical move extends the selection, anchored where the
+        // extension began — the same gesture a file list uses.
+        if (event.shiftKey && targetRow !== current.row) {
+            this.extendSelectionTo(current.row, targetRow);
+        }
+    }
+    toggleRowSelection(node) {
+        if (!this.api.toggleRowSelection(node.rowId, !node.selected))
+            return;
+        // Where a subsequent shift-extension counts from.
+        this.selectionAnchorRowId = node.rowId;
+        this.cdr.markForCheck();
+    }
+    extendSelectionTo(fromRow, toRow) {
+        const target = this.nodes[toRow];
+        if (!target)
+            return;
+        // With nothing selected yet the row the extension started on becomes the
+        // anchor, so shift+arrow selects both ends rather than only the far one.
+        const anchor = this.selectionAnchorRowId ?? this.nodes[fromRow]?.rowId;
+        if (!anchor)
+            return;
+        this.selectionAnchorRowId = anchor;
+        this.api.selectRowRange(anchor, target.rowId);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Columns a cell cursor can land on.
+     *
+     * A column with no field renders no cell state and is keyed by field, so it
+     * cannot be addressed — an action-only column is a legitimate example.
+     */
+    navigableColumns() {
+        return this.columnDefs.filter(column => !!column?.field);
+    }
+    activeCellPosition(columns) {
+        if (!this.activeCell)
+            return { row: 0, col: 0 };
+        const row = this.nodes.findIndex(node => node.rowId === this.activeCell.rowId);
+        const col = columns.findIndex(column => column.field === this.activeCell.field);
+        return { row: row < 0 ? 0 : row, col: col < 0 ? 0 : col };
+    }
+    rowsPerPage() {
+        const height = this.viewport?.elementRef?.nativeElement?.clientHeight ?? 0;
+        return Math.max(1, Math.floor(height / this.itemSize));
+    }
+    /**
+     * Move the cursor, scrolling the row into view first when it is outside the
+     * rendered window.
+     *
+     * The scroll is the reason focusing is deferred: a virtualised row that is
+     * not on screen has no element to focus until the viewport has rendered it.
+     */
+    focusCell(rowIndex, colIndex) {
+        const node = this.nodes[rowIndex];
+        const column = this.navigableColumns()[colIndex];
+        if (!node || !column)
+            return;
+        this.activeCell = { rowId: node.rowId, field: column.field };
+        this.cdr.markForCheck();
+        const range = this.viewport?.getRenderedRange();
+        const rendered = range && rowIndex >= range.start && rowIndex < range.end;
+        if (rendered) {
+            setTimeout(() => this.focusCellElement(node, column));
+            return;
+        }
+        this.viewport?.scrollToIndex(rowIndex);
+        // Scrolling is not enough: the CDK renders on its own schedule, so the row
+        // has no element to focus until it has. Waiting for the rendered range to
+        // actually contain the row is the only reliable signal — a fixed delay
+        // races the viewport and silently drops focus when it loses.
+        this.subscriptions.add(this.viewport?.renderedRangeStream
+            .pipe(filter(next => rowIndex >= next.start && rowIndex < next.end), take(1))
+            .subscribe(() => setTimeout(() => this.focusCellElement(node, column))));
+    }
+    focusCellElement(node, column) {
+        const key = getCellKey(node.rowId, column.field);
+        this.bodyRef?.nativeElement?.querySelector(`[data-cell-id="${key}"]`)?.focus();
+    }
     /** Is this the row currently being moved? */
     isRowDragging(node) {
         return this.dragState?.rowId === node.rowId;
@@ -4221,14 +5604,35 @@ class OneGridBodyComponent {
         this.cdr.markForCheck();
     }
     ngOnDestroy() {
+        this.flexResizeObserver?.disconnect();
         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: 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridBodyComponent, isStandalone: true, selector: "one-grid-body", inputs: { rowData: "rowData", rowNumber: "rowNumber", api: "api", pagination: "pagination", allowedEdit: "allowedEdit", enableGroupColumnDefs: "enableGroupColumnDefs", submitted: "submitted", editType: "editType", 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: { attributes: { "role": "presentation" }, 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\" role=\"presentation\">\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\" role=\"rowgroup\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedTopNodes, side: 'top' }\"></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        role=\"rowgroup\"\n        [attr.tabindex]=\"nodes?.length ? null : 0\"\n        (keydown)=\"onGridKeydown($event)\"\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                role=\"row\"\n                [attr.aria-rowindex]=\"dataRowAriaIndex(node)\"\n                [attr.aria-selected]=\"rowSelectionEnabled ? node.selected : null\"\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, colIndex: $index }\"></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\" role=\"rowgroup\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedBottomNodes, side: 'bottom' }\"></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\" let-side=\"side\">\n    @for (node of nodes; track node.rowId) {\n        <div class=\"one-row one-row-pinned\"\n            role=\"row\"\n            [attr.aria-rowindex]=\"pinnedRowAriaIndex(node, side)\"\n            [attr.data-row-id]=\"node.rowId\">\n            @for (column of columnDefs; track column.field) {\n                <div\n                    class=\"one-column\"\n                    role=\"gridcell\"\n                    [attr.aria-colindex]=\"$index + 1\"\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\" let-colIndex=\"colIndex\">\n    <div\n        class=\"one-column\"\n        role=\"gridcell\"\n        [attr.aria-colindex]=\"colIndex + 1\"\n        [attr.tabindex]=\"isActiveCell(node, column) ? 0 : -1\"\n        [class.one-cell-active]=\"isActiveCell(node, column)\"\n        (focus)=\"onCellFocus(node, 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            @if (column?.cellRendererParams?.inputType === 'select') {\n                <!-- Cell Editing Select. Commits on change \u2014 picking an option\n                     is the whole edit \u2014 with blur as the keyboard fallback. -->\n                <select class=\"one-cell-input\"\n                    name=\"{{ node.rowId + '' + column.field }}\"\n                    (change)=\"stopEditSelect(node, column, $event)\"\n                    (blur)=\"stopEditSelect(node, column, $event)\"\n                    (keydown.esc)=\"cancelEdit(node, column)\">\n                    @for (option of column?.cellRendererParams?.selectOptions ?? []; track $index) {\n                        <option [selected]=\"option.value === node.data[column.field]\">{{ option.label }}</option>\n                    }\n                </select>\n            }\n            @else {\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        }\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { 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: OneGridCellGroupRendererComponent, selector: "one-grid-cell-group-renderer", inputs: ["node", "masterDetail", "detailCellRendererParams", "detailRendererComponent"], outputs: ["expansionChanged"] }, { kind: "component", type: OneGridCellOptionMenuComponent, selector: "one-grid-cell-option-menu", inputs: ["column", "node", "options"], outputs: ["cellOptionMenuSelect", "cellOptionMenuClose"] }, { 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: OneGridRowDragHandleComponent, selector: "one-grid-row-drag-handle", inputs: ["node", "suppressedReason"], outputs: ["dragEnd"] }, { 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: "pipe", type: CellActionButtonEnablePipe, name: "cellActionButtonEnable" }, { kind: "pipe", type: CellEditablePipe, name: "cellEditable" }, { kind: "pipe", type: CellInvalidPipe, name: "cellInvalid" }, { kind: "pipe", type: CellKeyPipe, name: "cellKey" }, { kind: "pipe", type: CellLevelPaddingPipe, name: "cellLevelPadding" }, { kind: "pipe", type: CellSelectedPipe, name: "cellSelected" }, { 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\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" }]
+            args: [{ standalone: true, imports: [
+                        NgClass,
+                        NgStyle,
+                        NgTemplateOutlet,
+                        ScrollingModule,
+                        OneGridCheckboxComponent,
+                        OneGridCellGroupRendererComponent,
+                        OneGridCellOptionMenuComponent,
+                        OneGridRowActionComponent,
+                        OneGridRowDragHandleComponent,
+                        OneCellInputValidatorDirective,
+                        OneCellRendererComponentDirective,
+                        OneCellTextExpandDirective,
+                        CellActionButtonEnablePipe,
+                        CellEditablePipe,
+                        CellInvalidPipe,
+                        CellKeyPipe,
+                        CellLevelPaddingPipe,
+                        CellSelectedPipe,
+                        CellStateRendererPipe,
+                    ], selector: 'one-grid-body', host: { 'role': 'presentation' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #bodyRef class=\"one-grid-body\" role=\"presentation\">\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\" role=\"rowgroup\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedTopNodes, side: 'top' }\"></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        role=\"rowgroup\"\n        [attr.tabindex]=\"nodes?.length ? null : 0\"\n        (keydown)=\"onGridKeydown($event)\"\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                role=\"row\"\n                [attr.aria-rowindex]=\"dataRowAriaIndex(node)\"\n                [attr.aria-selected]=\"rowSelectionEnabled ? node.selected : null\"\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, colIndex: $index }\"></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\" role=\"rowgroup\">\n            <ng-container [ngTemplateOutlet]=\"pinnedRows\" [ngTemplateOutletContext]=\"{ nodes: pinnedBottomNodes, side: 'bottom' }\"></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\" let-side=\"side\">\n    @for (node of nodes; track node.rowId) {\n        <div class=\"one-row one-row-pinned\"\n            role=\"row\"\n            [attr.aria-rowindex]=\"pinnedRowAriaIndex(node, side)\"\n            [attr.data-row-id]=\"node.rowId\">\n            @for (column of columnDefs; track column.field) {\n                <div\n                    class=\"one-column\"\n                    role=\"gridcell\"\n                    [attr.aria-colindex]=\"$index + 1\"\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\" let-colIndex=\"colIndex\">\n    <div\n        class=\"one-column\"\n        role=\"gridcell\"\n        [attr.aria-colindex]=\"colIndex + 1\"\n        [attr.tabindex]=\"isActiveCell(node, column) ? 0 : -1\"\n        [class.one-cell-active]=\"isActiveCell(node, column)\"\n        (focus)=\"onCellFocus(node, 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            @if (column?.cellRendererParams?.inputType === 'select') {\n                <!-- Cell Editing Select. Commits on change \u2014 picking an option\n                     is the whole edit \u2014 with blur as the keyboard fallback. -->\n                <select class=\"one-cell-input\"\n                    name=\"{{ node.rowId + '' + column.field }}\"\n                    (change)=\"stopEditSelect(node, column, $event)\"\n                    (blur)=\"stopEditSelect(node, column, $event)\"\n                    (keydown.esc)=\"cancelEdit(node, column)\">\n                    @for (option of column?.cellRendererParams?.selectOptions ?? []; track $index) {\n                        <option [selected]=\"option.value === node.data[column.field]\">{{ option.label }}</option>\n                    }\n                </select>\n            }\n            @else {\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        }\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 }]
@@ -4247,6 +5651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], submitted: [{
                 type: Input
+            }], editType: [{
+                type: Input
             }], context: [{
                 type: Input
             }], getRowId: [{
@@ -4412,11 +5818,11 @@ class OneGridPaginationComponent {
         }
     }
     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: "<!-- 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridPaginationComponent, isStandalone: true, selector: "one-grid-pagination", inputs: { paginate: "paginate" }, outputs: { goToFirst: "goToFirst", goToPrevious: "goToPrevious", goToNext: "goToNext", goToLast: "goToLast", pageSizeChange: "pageSizeChange" }, providers: [ONE_GRID_ICON_PROVIDERS], 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: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.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: "<!-- 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" }]
+            args: [{ standalone: true, imports: [LucideAngularModule], selector: 'one-grid-pagination', providers: [ONE_GRID_ICON_PROVIDERS], 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: [{
@@ -4432,16 +5838,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class OneGridComponent {
-    constructor(api, eventService, elementRef) {
+    /**
+     * Recompute the bar's numbers from the filtered row count and the API's
+     * paging state. Deferred a tick for the same reason the aria counts are:
+     * the count arrives while the first change detection pass is still running.
+     */
+    refreshClientPagination(total) {
+        const { pageSize, currentPage } = this.api.paginationState;
+        const lastPage = Math.max(Math.ceil(total / pageSize), 1);
+        const page = Math.min(currentPage, lastPage);
+        setTimeout(() => {
+            this.internalPaginate = {
+                total,
+                currentPage: page,
+                lastPage,
+                perPage: pageSize,
+                firstRowIndex: total === 0 ? 0 : (page - 1) * pageSize + 1,
+                lastRowIndex: Math.min(page * pageSize, total),
+                pageSizeOptions: this.paginate?.pageSizeOptions,
+            };
+            this.cdr.markForCheck();
+        });
+    }
+    constructor(api, eventService, elementRef, cdr) {
         this.api = api;
         this.eventService = eventService;
         this.elementRef = elementRef;
+        this.cdr = cdr;
         this.rowNumber = false;
         this.allowedEdit = true;
         this.submitted = false;
         this.context = null;
         this.rowData = [];
         this.rowSelection = null;
+        /**
+         * The grid's accessible name.
+         *
+         * A `role="grid"` with no name is announced as an unlabelled grid, which
+         * tells a screen-reader user nothing about what they have landed in. Set it
+         * to whatever the grid is showing — "Employees", "Order lines".
+         */
+        this.gridLabel = 'Data grid';
         this.enableGroupColumnDefs = false;
         this.groupColumnDefs = [];
         this.defaultColumnDef = {};
@@ -4476,6 +5913,41 @@ class OneGridComponent {
          * pointer is in flight — and only when the position actually changed.
          */
         this.rowDragEnd = new EventEmitter();
+        /**
+         * The header's ⋮ button was pressed for this column.
+         *
+         * The grid has no column menu of its own — this reports the intent so the
+         * host can show whatever a column menu means in its app. Set
+         * `columnDef.suppressHeaderMenuButton` to hide the button entirely.
+         */
+        this.headerMenuClick = new EventEmitter();
+        /**
+         * Render the grid's own column menu behind the header ⋮ button: sort, pin,
+         * hide. Opt-in — a host that built its menu on `(headerMenuClick)` keeps
+         * exactly what it had, and the intent still emits either way.
+         */
+        this.headerMenu = false;
+        /**
+         * Render a filter input under every column whose `filterable` resolves
+         * true. The inputs feed `api.setFilterModel` with contains-conditions,
+         * debounced; filters on fields without an input are left untouched.
+         */
+        this.filterRow = false;
+        /**
+         * Record committed cell edits so `api.undoCellEditing` /
+         * `api.redoCellEditing` (and Ctrl+Z / Ctrl+Y in the grid) can walk them.
+         * Programmatic `setDataValue` writes are not recorded.
+         */
+        this.undoRedoCellEditing = false;
+        /** How many edits the undo stack keeps. */
+        this.undoRedoCellEditingLimit = 10;
+        /**
+         * `'fullRow'` opens every editable cell of the row on a double-click and
+         * commits them together — Enter anywhere in the row, or focus leaving the
+         * row. Escape closes the whole row without committing. Default: cells edit
+         * one at a time.
+         */
+        this.editType = null;
         this.onGridReady = new EventEmitter();
         this.onRowGotoDetail = new EventEmitter();
         this.onRowAddNew = new EventEmitter();
@@ -4495,6 +5967,22 @@ class OneGridComponent {
         this.rowCountChanged = new EventEmitter();
         this.selectionChanged = new EventEmitter();
         this.expansionChanged = new EventEmitter();
+        /**
+         * The sort model changed — a header click or `api.onSortChanged`. Carries
+         * the re-sorted nodes and the model that produced them; `api.sortModel`
+         * stays readable between emissions.
+         */
+        this.sortChanged = new EventEmitter();
+        /**
+         * An inline edit was committed with a value different from the one it
+         * started with. Programmatic `node.setDataValue` does not emit here — the
+         * caller already holds both values.
+         */
+        this.cellValueChanged = new EventEmitter();
+        /** A header drag finished somewhere other than where it started. */
+        this.columnMoved = new EventEmitter();
+        /** A resize gesture finished — one event per gesture, not per pixel. */
+        this.columnResized = new EventEmitter();
         // For context menu option
         this.cellOptionSelect = new EventEmitter();
         this.onRowCellOption = new EventEmitter();
@@ -4502,17 +5990,42 @@ class OneGridComponent {
          * Bind One Grid Pagination Feature
          */
         this.pagination = false;
+        /**
+         * Let the grid page its own rows. The bar renders, the grid slices the
+         * filtered rows to the current page, and the navigation buttons work
+         * without the host handling anything — `[paginate]` is ignored in this
+         * mode (the grid owns those numbers) except for `pageSizeOptions`. The
+         * navigation outputs still emit, as notifications rather than intents.
+         * Selection, filtering and sorting keep operating on the whole dataset.
+         */
+        this.clientSidePagination = false;
+        /** Rows per page for `clientSidePagination`. */
+        this.pageSize = 25;
         this.goToFirst = new EventEmitter();
         this.goToPrevious = new EventEmitter();
         this.goToNext = new EventEmitter();
         this.goToLast = new EventEmitter();
         this.pageSizeChange = new EventEmitter();
+        /** The paging numbers the bar shows when the grid pages its own rows. */
+        this.internalPaginate = {
+            total: 0, currentPage: 1, lastPage: 1, perPage: 25, firstRowIndex: 0, lastRowIndex: 0,
+        };
         /**
          * One Grid Properties
          */
         this.bodyScrollLeft = 0;
         this._oneRowNumberColumnDef = null;
         this.subscriptions = new Subscription();
+        /**
+         * Totals for `aria-rowcount` / `aria-colcount`.
+         *
+         * Held as fields rather than computed in the template: they are read on every
+         * change detection pass and only actually change when the data or the columns
+         * do. `-1` is the ARIA value for "unknown", which is the honest answer before
+         * the first row arrives.
+         */
+        this.ariaRowCount = -1;
+        this.ariaColCount = -1;
     }
     ngOnChanges(changes) {
         if (changes['masterNode'] && changes['masterNode'].isFirstChange) {
@@ -4556,6 +6069,35 @@ class OneGridComponent {
                 maxWidth: 200
             };
         }
+        /**
+         * Row grouping: column defs declaring `rowGroup` turn the grid into a
+         * tree over synthetic group rows. Configured before `api.init` because
+         * everything downstream — the treeData flag the API captures, the group
+         * column the tree block below prepends — has to see the tree shape.
+         */
+        const rowGroupColumnFields = this.treeData || this.masterDetail
+            ? []
+            : rowGroupFields(this.columnDefs);
+        if (rowGroupColumnFields.length) {
+            this.treeData = true;
+            this.treeDataChildrenField = ONE_GROUP_CHILDREN_FIELD;
+            // The group column: host-tuned through autoGroupColumnDef, but its
+            // field is always the synthetic label — that is where a group row
+            // carries its display value.
+            this.autoGroupColumnDef = {
+                headerName: 'Group',
+                minWidth: 200,
+                ...this.autoGroupColumnDef,
+                field: ONE_GROUP_VALUE_FIELD,
+                // The marker the tree machinery keys on: the expander renders on this
+                // column and group rows print their label here.
+                autoGroupField: true,
+            };
+            // A grouped-by column's value is on the group row; showing the flat
+            // column too repeats it down every leaf. Hidden, not removed — the
+            // host can bring it back with api.setColumnVisible.
+            this.columnDefs = this.columnDefs.map(column => column.rowGroup ? { ...column, hide: true } : column);
+        }
         /**
          * Initialize One Grid API
          */
@@ -4571,6 +6113,15 @@ class OneGridComponent {
             detailRendererComponent: this.detailRendererComponent,
             treeData: this.treeData,
         });
+        if (rowGroupColumnFields.length) {
+            this.api.setRowGrouping(rowGroupColumnFields, aggColumns(this.columnDefs));
+        }
+        if (this.undoRedoCellEditing) {
+            this.api.enableUndoRedoCellEditing(this.undoRedoCellEditingLimit);
+        }
+        if (this.clientSidePagination) {
+            this.api.setClientSidePagination(true, this.paginate?.perPage ?? this.pageSize);
+        }
         /**
          * Setup Master Detail Configuration
          */
@@ -4593,9 +6144,28 @@ class OneGridComponent {
             setTimeout(() => this.api.setColumnDefs(columnDefs));
         }
         // Listen Selection Changed Event
+        // Columns can be replaced at runtime through `api.setColumnDefs`, and
+        // `aria-colcount` has to follow.
+        this.subscriptions.add(this.eventService.addEventListener('columnChanged', () => {
+            this.ariaColCount = this.api?.getColumnState()?.columns?.length ?? -1;
+        }));
         this.subscriptions.add(this.eventService.addEventListener('selectionChanged', (payload) => {
             this.selectionChanged.emit(payload);
         }));
+        // The internal events a host can act on, surfaced as outputs. Same
+        // forwarding pattern as selectionChanged above.
+        this.subscriptions.add(this.eventService.addEventListener('sortChanged', (payload) => {
+            this.sortChanged.emit(payload);
+        }));
+        this.subscriptions.add(this.eventService.addEventListener('cellValueChanged', (payload) => {
+            this.cellValueChanged.emit(payload);
+        }));
+        this.subscriptions.add(this.eventService.addEventListener('columnMoved', (payload) => {
+            this.columnMoved.emit(payload);
+        }));
+        this.subscriptions.add(this.eventService.addEventListener('columnResized', (payload) => {
+            this.columnResized.emit(payload);
+        }));
     }
     ngAfterViewInit() {
         // The header follows the body through (bodyScroll) -> [scrollLeft]. A second
@@ -4687,8 +6257,34 @@ class OneGridComponent {
         this.onShiftDoubleClick.emit(event);
     }
     invokeRowCountChanged(length) {
+        this.refreshAriaCounts(length);
+        if (this.clientSidePagination)
+            this.refreshClientPagination(length);
         this.rowCountChanged.emit(length);
     }
+    /**
+     * Recompute the totals a screen reader is told about.
+     *
+     * `aria-rowcount` counts every row the grid represents, not the handful the
+     * virtual scroller currently has in the DOM — the header row, the pinned rows
+     * either side, and all the data rows.
+     */
+    refreshAriaCounts(dataRows) {
+        const pinned = (this.pinnedTopRowData?.length ?? 0) + (this.pinnedBottomRowData?.length ?? 0);
+        const rows = 1 + pinned + dataRows;
+        const cols = this.api?.getColumnState()?.columns?.length ?? -1;
+        if (rows === this.ariaRowCount && cols === this.ariaColCount)
+            return;
+        // Deferred a tick. The body emits its row count while the first change
+        // detection pass is still running, after this component's own attributes
+        // were checked — assigning here directly is the textbook NG0100. The body
+        // defers its node list for the same reason.
+        setTimeout(() => {
+            this.ariaRowCount = rows;
+            this.ariaColCount = cols;
+            this.cdr.markForCheck();
+        });
+    }
     cellOptionMenuSelected(event) {
         this.cellOptionSelect.emit(event);
     }
@@ -4696,18 +6292,28 @@ class OneGridComponent {
      * Bing Pagination Events to Parent Component
      */
     invokeGoToFirst() {
+        if (this.clientSidePagination)
+            this.api.setCurrentPage(1);
         this.goToFirst.emit();
     }
     invokeGoToPrevious() {
+        if (this.clientSidePagination)
+            this.api.setCurrentPage(this.api.paginationState.currentPage - 1);
         this.goToPrevious.emit();
     }
     invokeGoToNext() {
+        if (this.clientSidePagination)
+            this.api.setCurrentPage(this.api.paginationState.currentPage + 1);
         this.goToNext.emit();
     }
     invokeGoToLast() {
+        if (this.clientSidePagination)
+            this.api.setCurrentPage(this.internalPaginate.lastPage ?? 1);
         this.goToLast.emit();
     }
     invokePageSizeChange(pageSize) {
+        if (this.clientSidePagination)
+            this.api.setPageSize(pageSize);
         this.pageSizeChange.emit(pageSize);
     }
     invokeRowDragEnd(event) {
@@ -4724,8 +6330,8 @@ class OneGridComponent {
         this.api.destroy();
         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", 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: [
+    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 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridComponent, isStandalone: true, selector: "one-grid", inputs: { rowNumber: "rowNumber", allowedEdit: "allowedEdit", submitted: "submitted", context: "context", rowData: "rowData", rowSelection: "rowSelection", gridLabel: "gridLabel", 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", headerMenu: "headerMenu", filterRow: "filterRow", undoRedoCellEditing: "undoRedoCellEditing", undoRedoCellEditingLimit: "undoRedoCellEditingLimit", editType: "editType", pagination: "pagination", paginate: "paginate", clientSidePagination: "clientSidePagination", pageSize: "pageSize" }, outputs: { rowDragEnd: "rowDragEnd", headerMenuClick: "headerMenuClick", 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", sortChanged: "sortChanged", cellValueChanged: "cellValueChanged", columnMoved: "columnMoved", columnResized: "columnResized", cellOptionSelect: "cellOptionSelect", onRowCellOption: "onRowCellOption", goToFirst: "goToFirst", goToPrevious: "goToPrevious", goToNext: "goToNext", goToLast: "goToLast", pageSizeChange: "pageSizeChange" }, providers: [
             OneGridEventService,
             OneGridApi,
             OgColumnService,
@@ -4734,11 +6340,16 @@ class OneGridComponent {
             OneGridRowService,
             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"] }] }); }
+        ], 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<!-- role=\"grid\" is what turns this from a pile of divs into something a screen\n     reader can navigate. The counts are the *total* \u2014 `aria-rowcount` includes\n     the header row and any pinned rows, and both stay correct while the body is\n     virtualised and most rows are not in the DOM, which is exactly what these\n     attributes exist to communicate. -->\n<div #ogRef\n    class=\"one-grid\"\n    role=\"grid\"\n    [attr.aria-label]=\"gridLabel\"\n    [attr.aria-rowcount]=\"ariaRowCount\"\n    [attr.aria-colcount]=\"ariaColCount\"\n    [attr.aria-multiselectable]=\"rowSelection === 'multiple' ? true : null\"\n    (copy)=\"onGridCopy($event)\">\n    \n    <!-- Headers -->\n    <one-grid-header\n        [api]=\"api\"\n        [enableGroupColumnDefs]=\"enableGroupColumnDefs\"\n        [allowedEdit]=\"allowedEdit\"\n        [scrollLeft]=\"bodyScrollLeft\"\n        [headerMenu]=\"headerMenu\"\n        [filterRow]=\"filterRow\"\n        (headerMenuClick)=\"headerMenuClick.emit($event)\"\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        [editType]=\"editType\"\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 || clientSidePagination) {\n        <one-grid-pagination\n            [paginate]=\"clientSidePagination ? internalPaginate : 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", "gridLabel", "enableGroupColumnDefs", "groupColumnDefs", "defaultColumnDef", "columnDefs", "pinnedTopRowData", "pinnedBottomRowData", "gridType", "masterDetail", "masterNode", "detailCellRendererParams", "detailRendererComponent", "treeData", "treeDataChildrenField", "autoGroupColumnDef", "groupDefaultExpanded", "headerMenu", "filterRow", "undoRedoCellEditing", "undoRedoCellEditingLimit", "editType", "pagination", "paginate", "clientSidePagination", "pageSize"], outputs: ["rowDragEnd", "headerMenuClick", "onGridReady", "onRowGotoDetail", "onRowAddNew", "onRowView", "onRowLocation", "onRowDocument", "onRowCopy", "onRowDelete", "onRowGotoList", "onRowEdit", "onRowPrint", "onRowHistory", "onRowOption", "onRowLanguage", "onRowSelection", "onShiftDoubleClick", "rowCountChanged", "selectionChanged", "expansionChanged", "sortChanged", "cellValueChanged", "columnMoved", "columnResized", "cellOptionSelect", "onRowCellOption", "goToFirst", "goToPrevious", "goToNext", "goToLast", "pageSizeChange"] }, { kind: "component", type: OneGridHeaderComponent, selector: "one-grid-header", inputs: ["scrollLeft", "allowedEdit", "enableGroupColumnDefs", "api", "filterRow", "headerMenu"], outputs: ["headerMenuClick"] }, { kind: "component", type: OneGridBodyComponent, selector: "one-grid-body", inputs: ["rowData", "rowNumber", "api", "pagination", "allowedEdit", "enableGroupColumnDefs", "submitted", "editType", "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,
-            args: [{ standalone: false, selector: 'one-grid', providers: [
+            args: [{ standalone: true, imports: [
+                        NgTemplateOutlet,
+                        OneGridHeaderComponent,
+                        OneGridBodyComponent,
+                        OneGridPaginationComponent,
+                    ], selector: 'one-grid', providers: [
                         OneGridEventService,
                         OneGridApi,
                         OgColumnService,
@@ -4747,8 +6358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         OneGridRowService,
                         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: [{
+                    ], 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<!-- role=\"grid\" is what turns this from a pile of divs into something a screen\n     reader can navigate. The counts are the *total* \u2014 `aria-rowcount` includes\n     the header row and any pinned rows, and both stay correct while the body is\n     virtualised and most rows are not in the DOM, which is exactly what these\n     attributes exist to communicate. -->\n<div #ogRef\n    class=\"one-grid\"\n    role=\"grid\"\n    [attr.aria-label]=\"gridLabel\"\n    [attr.aria-rowcount]=\"ariaRowCount\"\n    [attr.aria-colcount]=\"ariaColCount\"\n    [attr.aria-multiselectable]=\"rowSelection === 'multiple' ? true : null\"\n    (copy)=\"onGridCopy($event)\">\n    \n    <!-- Headers -->\n    <one-grid-header\n        [api]=\"api\"\n        [enableGroupColumnDefs]=\"enableGroupColumnDefs\"\n        [allowedEdit]=\"allowedEdit\"\n        [scrollLeft]=\"bodyScrollLeft\"\n        [headerMenu]=\"headerMenu\"\n        [filterRow]=\"filterRow\"\n        (headerMenuClick)=\"headerMenuClick.emit($event)\"\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        [editType]=\"editType\"\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 || clientSidePagination) {\n        <one-grid-pagination\n            [paginate]=\"clientSidePagination ? internalPaginate : 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 }, { type: i0.ChangeDetectorRef }], propDecorators: { ogRef: [{
                 type: ViewChild,
                 args: ['ogRef', { static: true }]
             }], rowNumber: [{
@@ -4763,6 +6374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], rowSelection: [{
                 type: Input
+            }], gridLabel: [{
+                type: Input
             }], enableGroupColumnDefs: [{
                 type: Input
             }], groupColumnDefs: [{
@@ -4795,6 +6408,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], rowDragEnd: [{
                 type: Output
+            }], headerMenuClick: [{
+                type: Output
+            }], headerMenu: [{
+                type: Input
+            }], filterRow: [{
+                type: Input
+            }], undoRedoCellEditing: [{
+                type: Input
+            }], undoRedoCellEditingLimit: [{
+                type: Input
+            }], editType: [{
+                type: Input
             }], onGridReady: [{
                 type: Output
             }], onRowGotoDetail: [{
@@ -4833,6 +6458,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], expansionChanged: [{
                 type: Output
+            }], sortChanged: [{
+                type: Output
+            }], cellValueChanged: [{
+                type: Output
+            }], columnMoved: [{
+                type: Output
+            }], columnResized: [{
+                type: Output
             }], cellOptionSelect: [{
                 type: Output
             }], onRowCellOption: [{
@@ -4841,6 +6474,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], paginate: [{
                 type: Input
+            }], clientSidePagination: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
             }], goToFirst: [{
                 type: Output
             }], goToPrevious: [{
@@ -4878,11 +6515,11 @@ class OneGridStatusComponent {
         return labels[type][status === 1 ? 1 : 0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneGridStatusComponent, selector: "one-grid-status", ngImport: i0, template: "<span class=\"one-cell-status\"\n    [style.width.px]=\"params.columnDef?.width\"\n    [style.min-width.px]=\"params.columnDef?.minWidth\"\n    [style.max-width.px]=\"params.columnDef?.maxWidth\"\n    >\n    <span class=\"one-cell-status-body\" [ngClass]=\"label === 1 ? 'one-success-bg' : 'one-warning-bg'\">\n        {{ value }}\n    </span>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OneGridStatusComponent, isStandalone: true, selector: "one-grid-status", ngImport: i0, template: "<span class=\"one-cell-status\"\n    [style.width.px]=\"params.columnDef?.width\"\n    [style.min-width.px]=\"params.columnDef?.minWidth\"\n    [style.max-width.px]=\"params.columnDef?.maxWidth\"\n    >\n    <span class=\"one-cell-status-body\" [ngClass]=\"label === 1 ? 'one-success-bg' : 'one-warning-bg'\">\n        {{ value }}\n    </span>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridStatusComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'one-grid-status', template: "<span class=\"one-cell-status\"\n    [style.width.px]=\"params.columnDef?.width\"\n    [style.min-width.px]=\"params.columnDef?.minWidth\"\n    [style.max-width.px]=\"params.columnDef?.maxWidth\"\n    >\n    <span class=\"one-cell-status-body\" [ngClass]=\"label === 1 ? 'one-success-bg' : 'one-warning-bg'\">\n        {{ value }}\n    </span>\n</span>\n" }]
+            args: [{ standalone: true, imports: [NgClass], selector: 'one-grid-status', template: "<span class=\"one-cell-status\"\n    [style.width.px]=\"params.columnDef?.width\"\n    [style.min-width.px]=\"params.columnDef?.minWidth\"\n    [style.max-width.px]=\"params.columnDef?.maxWidth\"\n    >\n    <span class=\"one-cell-status-body\" [ngClass]=\"label === 1 ? 'one-success-bg' : 'one-warning-bg'\">\n        {{ value }}\n    </span>\n</span>\n" }]
         }] });
 
 class OneGridCellCurrencyComponent {
@@ -4957,172 +6594,50 @@ 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.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OneGridCellCurrencyComponent, isStandalone: true, 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: "pipe", type: DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridCellCurrencyComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'app-one-grid-cell-currency', 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"] }]
+            args: [{ standalone: true, imports: [DecimalPipe, FormsModule, OneCellInputValidatorDirective], selector: 'app-one-grid-cell-currency', 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"] }]
         }], ctorParameters: () => [{ type: OneGridCellService }, { type: OneGridEventService }], propDecorators: { allowedEdit: [{
                 type: Input
             }] } });
 
-class CellActionButtonVisiblePipe {
-    transform(column, node) {
-        return (node?.leaf && !(node?.group && node?.leafGroup) && !column?.autoGroupField) || (!node?.leaf && (node?.group || node?.leafGroup) && column?.autoGroupField && column?.editableLevels?.includes(node.level));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellActionButtonVisiblePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellActionButtonVisiblePipe, name: "cellActionButtonVisible" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellActionButtonVisiblePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellActionButtonVisible'
-                }]
-        }] });
-
-class CellNumberValuePipe {
-    transform(value) {
-        if (value === null || value === undefined)
-            return undefined;
-        return Number(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellNumberValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellNumberValuePipe, name: "cellNumberValue" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellNumberValuePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellNumberValue'
-                }]
-        }] });
-
-class CellFieldPipe {
-    transform(rowIndex, field) {
-        if (rowIndex === null || rowIndex === undefined || !field)
-            return '';
-        return getCellField(rowIndex, field);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellFieldPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellFieldPipe, name: "cellField" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellFieldPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellField'
-                }]
-        }] });
-
-class CellStateGroupRendererPipe {
-    constructor() {
-        this._cellFieldValue = new CellFieldValuePipe();
-    }
-    transform(value, data, column) {
-        return value ? this._cellFieldValue.transform(data, column.field) : column?.cellRendererParams?.placeholder ?? '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellStateGroupRendererPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CellStateGroupRendererPipe, name: "cellStateGroupRenderer" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CellStateGroupRendererPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: false,
-                    name: 'cellStateGroupRenderer'
-                }]
-        }] });
-
+/**
+ * Compatibility shim.
+ *
+ * Every component, directive and pipe in the library is standalone, so this
+ * module declares nothing — it exists so `imports: [OneGridModule]` keeps
+ * working for anyone already on it. New code can import `OneGridComponent`
+ * directly instead.
+ *
+ * Icons no longer need registering here: each component that draws one
+ * provides the eight the grid uses, so they travel with the component whichever
+ * way it is imported.
+ */
 class OneGridModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OneGridModule, declarations: [OneGridComponent,
-            OneGridHeaderComponent,
-            OneGridBodyComponent,
-            OneGridCheckboxComponent,
-            OneGridCheckboxHeaderComponent,
-            OneGridRowActionComponent,
-            OneGridPaginationComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OneGridModule, imports: [OneGridComponent,
             OneGridStatusComponent,
-            OneGridCellGroupRendererComponent,
-            CellFieldValueEmptyPipe,
-            CellValueGetterPipe,
-            CellFieldValuePipe,
-            CellActionButtonVisiblePipe,
-            CellEditablePipe,
-            CellInvalidPipe,
-            CellSelectedPipe,
-            CellActionButtonEnablePipe,
-            CellNumberValuePipe,
-            CellFieldPipe,
-            CellKeyPipe,
-            CellLevelPaddingPipe,
-            ColumnSortStatePipe,
-            HeaderCheckboxDisabledPipe,
-            HeaderCheckboxCheckedPipe,
-            HeaderCheckboxIndeterminatePipe,
-            CellStateRendererPipe,
-            CellStateGroupRendererPipe,
-            OneCellInputValidatorDirective,
-            OneCellRendererComponentDirective,
-            OneCellTextExpandDirective,
-            OneGridCellCurrencyComponent,
-            OneGridCellOptionMenuComponent,
-            OneGridRowDragHandleComponent], imports: [CommonModule,
-            FormsModule,
-            ScrollingModule,
-            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,
-            ReactiveFormsModule,
-            LucideAngularModule.pick(icons)] }); }
+            OneGridCellCurrencyComponent], exports: [OneGridComponent,
+            OneGridStatusComponent,
+            OneGridCellCurrencyComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridModule, imports: [OneGridComponent,
+            OneGridCellCurrencyComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OneGridModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         OneGridComponent,
-                        OneGridHeaderComponent,
-                        OneGridBodyComponent,
-                        OneGridCheckboxComponent,
-                        OneGridCheckboxHeaderComponent,
-                        OneGridRowActionComponent,
-                        OneGridPaginationComponent,
                         OneGridStatusComponent,
-                        OneGridCellGroupRendererComponent,
-                        CellFieldValueEmptyPipe,
-                        CellValueGetterPipe,
-                        CellFieldValuePipe,
-                        CellActionButtonVisiblePipe,
-                        CellEditablePipe,
-                        CellInvalidPipe,
-                        CellSelectedPipe,
-                        CellActionButtonEnablePipe,
-                        CellNumberValuePipe,
-                        CellFieldPipe,
-                        CellKeyPipe,
-                        CellLevelPaddingPipe,
-                        ColumnSortStatePipe,
-                        HeaderCheckboxDisabledPipe,
-                        HeaderCheckboxCheckedPipe,
-                        HeaderCheckboxIndeterminatePipe,
-                        CellStateRendererPipe,
-                        CellStateGroupRendererPipe,
-                        OneCellInputValidatorDirective,
-                        OneCellRendererComponentDirective,
-                        OneCellTextExpandDirective,
                         OneGridCellCurrencyComponent,
-                        OneGridCellOptionMenuComponent,
-                        OneGridRowDragHandleComponent
                     ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ScrollingModule,
-                        ReactiveFormsModule,
-                        LucideAngularModule.pick(icons),
+                    exports: [
+                        OneGridComponent,
+                        OneGridStatusComponent,
+                        OneGridCellCurrencyComponent,
                     ],
-                    exports: [OneGridComponent]
                 }]
         }] });
 
@@ -5134,5 +6649,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { ONE_DEFAULT_COLUMN_WIDTH, ONE_GROUP_BLANK_LABEL, ONE_GROUP_CHILDREN_FIELD, ONE_GROUP_FLAG, ONE_GROUP_ID_FIELD, ONE_GROUP_VALUE_FIELD, OneGridApi, OneGridCellCurrencyComponent, OneGridCellService, OneGridComponent, OneGridEventService, OneGridExpansionService, OneGridModule, OneGridRowDragService, OneGridSelectionService, OneGridStatusComponent, OneGridTreeDataService, OnePageSizeOption, OneRowNode, ValidationRules, Validators, aggColumns, aggregate, applyDefaultColumnDef, buildCsv, buildGroupedRows, exportableColumns, getCellError, resolveCellValueGetter, resolveColumnWidth, resolveOneCellRendererParams, resolveOneColumDefParams, resolveOneValueGetterParams, resolveRowHeight, rowGroupFields };
 //# sourceMappingURL=one-grid-core-angular.mjs.map