@thkl/agrid 0.1.7 → 0.1.10

package/fesm2022/thkl-agrid.mjs

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, viewChild, effect, ChangeDetectionStrategy, Component, linkedSignal, isWritableSignal, inject, DestroyRef, ElementRef, afterNextRender } from '@angular/core';
+import { input, output, signal, computed, viewChild, effect, ChangeDetectionStrategy, Component, inject, ElementRef, DestroyRef, afterNextRender, linkedSignal, isWritableSignal, forwardRef, Directive, HostListener } from '@angular/core';
 import * as i1 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import { VIRTUAL_SCROLL_STRATEGY, ScrollingModule } from '@angular/cdk/scrolling';
+import { NgTemplateOutlet } from '@angular/common';
+import { Subject, distinctUntilChanged } from 'rxjs';
 
 // Display resolution
 // Matches YYYY-MM-DD with optional time component — strict enough to avoid false positives.
@@ -77,7 +79,11 @@ function getDisplayForField(col, raw, locale) {
 }
 /** Returns whether a virtual-scroll item represents a data row. */
 function isDataRowItem(item) {
-    return typeof item === 'object' && item !== null && 'row' in item;
+    return typeof item === 'object' && item !== null && 'row' in item && !('detailFor' in item);
+}
+/** Returns whether a virtual-scroll item represents a master/detail panel row. */
+function isDetailRowItem(item) {
+    return typeof item === 'object' && item !== null && 'detailFor' in item;
 }
 /** Returns whether a virtual-scroll item represents a group header. */
 function isGroupHeaderItem(item) {
@@ -90,7 +96,15 @@ function isGroupHeaderItem(item) {
  * additionally narrows to the indentation/expansion fields via the `level` discriminator.
  */
 function isTreeRowItem(item) {
-    return typeof item === 'object' && item !== null && 'level' in item;
+    return isDataRowItem(item) && 'level' in item;
+}
+/** Returns whether a virtual-scroll item is a generated path-tree branch node. */
+function isPathTreeNodeItem(item) {
+    return typeof item === 'object' && item !== null && 'pathNodeId' in item;
+}
+/** Returns whether a tree configuration derives its hierarchy from path segments. */
+function isPathTreeConfig(config) {
+    return typeof config.getPath === 'function';
 }
 // Filtering
 /** Apply text substring and value-set filters, returning the surviving row indices. */
@@ -107,17 +121,33 @@ function applyTextAndValueFilters(rows, indices, filters, colMap, locale) {
             result = result.filter(i => allowed.has(String(rows[i][field] ?? '')));
         }
         if (filter.operator && filter.operand != null && filter.operand !== '') {
-            result = result.filter(i => passesRangeFilter(col, rows[i][field], filter));
+            result = result.filter(i => passesConditionFilter(col, rows[i][field], filter, locale));
         }
     }
     return result;
 }
 /**
- * Evaluate a typed range filter (`number` / `date`) for one cell value.
- * Date columns compare epoch-millis; everything else compares as numbers.
- * Rows whose value can't be parsed to the comparison type are excluded.
+ * Evaluate a text, number, or date condition for one cell value.
  */
-function passesRangeFilter(col, raw, filter) {
+function passesConditionFilter(col, raw, filter, locale) {
+    if (col?.type !== 'number' && col?.type !== 'date') {
+        const value = getDisplayForField(col, raw, locale).toLocaleLowerCase(locale);
+        const operand = String(filter.operand ?? '').toLocaleLowerCase(locale);
+        switch (filter.operator) {
+            case 'eq': return value === operand;
+            case 'neq': return value !== operand;
+            case 'startsWith': return value.startsWith(operand);
+            case 'endsWith': return value.endsWith(operand);
+            case 'includes': return value.includes(operand);
+            case 'notIncludes': return !value.includes(operand);
+            case 'like': {
+                const escaped = operand.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                const pattern = escaped.replace(/%/g, '.*').replace(/_/g, '.');
+                return new RegExp(`^${pattern}$`, 'u').test(value);
+            }
+            default: return true;
+        }
+    }
     const isDate = col?.type === 'date' || looksLikeDate(raw);
     const toNum = (v) => isDate
         ? (v instanceof Date ? v.getTime() : new Date(v).getTime())
@@ -164,18 +194,18 @@ function applySortToIndices(rows, indices, sortEntries, colMap, locale) {
     if (sortEntries.length === 0)
         return indices;
     const collator = new Intl.Collator(locale, { numeric: true, sensitivity: 'base' });
-    const fields = sortEntries.map(([field, filter]) => ({
-        field,
-        direction: filter.sort === 'desc' ? -1 : 1,
-        col: colMap.get(field),
-    }));
-    const decorated = indices.map((index, position) => ({
-        index,
-        position,
-        keys: fields.map(({ field, col }) => {
+    const fields = sortEntries.map(([field, filter]) => {
+        const col = colMap.get(field);
+        const dateLike = new Uint8Array(indices.length);
+        const dateValues = new Float64Array(indices.length);
+        const numericValues = new Float64Array(indices.length);
+        numericValues.fill(Number.NaN);
+        const displayValues = new Array(indices.length);
+        for (let position = 0; position < indices.length; position++) {
+            const index = indices[position];
             const raw = rows[index][field];
-            const dateLike = col?.type === 'date' || looksLikeDate(raw);
-            const dateValue = dateLike
+            const isDateLike = col?.type === 'date' || looksLikeDate(raw);
+            const dateValue = isDateLike
                 ? raw instanceof Date ? raw.getTime() : new Date(raw).getTime()
                 : Number.NaN;
             const numericValue = col?.type === 'number'
@@ -184,36 +214,42 @@ function applySortToIndices(rows, indices, sortEntries, colMap, locale) {
                 && typeof raw === 'number'
                 && Number.isFinite(raw)
                 ? raw
-                : null;
-            return {
-                display: dateLike ? '' : getDisplayForField(col, raw, locale),
-                dateLike,
-                dateValue: Number.isNaN(dateValue) ? -1 : dateValue,
-                numericValue,
-            };
-        }),
-    }));
-    decorated.sort((a, b) => {
+                : Number.NaN;
+            dateLike[position] = isDateLike ? 1 : 0;
+            dateValues[position] = Number.isNaN(dateValue) ? -1 : dateValue;
+            numericValues[position] = numericValue;
+            displayValues[position] = isDateLike ? '' : getDisplayForField(col, raw, locale);
+        }
+        return {
+            direction: filter.sort === 'desc' ? -1 : 1,
+            dateLike,
+            dateValues,
+            numericValues,
+            displayValues,
+        };
+    });
+    const positions = Array.from({ length: indices.length }, (_, position) => position);
+    positions.sort((a, b) => {
         for (let fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
-            const keyA = a.keys[fieldIndex];
-            const keyB = b.keys[fieldIndex];
+            const field = fields[fieldIndex];
             let comparison;
-            if (keyA.dateLike || keyB.dateLike) {
-                comparison = keyA.dateValue - keyB.dateValue;
+            if (field.dateLike[a] || field.dateLike[b]) {
+                comparison = field.dateValues[a] - field.dateValues[b];
             }
-            else if (keyA.numericValue !== null && keyB.numericValue !== null) {
-                comparison = keyA.numericValue - keyB.numericValue;
+            else if (!Number.isNaN(field.numericValues[a])
+                && !Number.isNaN(field.numericValues[b])) {
+                comparison = field.numericValues[a] - field.numericValues[b];
             }
             else {
-                comparison = collator.compare(keyA.display, keyB.display);
+                comparison = collator.compare(field.displayValues[a], field.displayValues[b]);
             }
             if (comparison !== 0) {
-                return comparison * fields[fieldIndex].direction;
+                return comparison * field.direction;
             }
         }
-        return a.position - b.position;
+        return a - b;
     });
-    return decorated.map(item => item.index);
+    return positions.map(position => indices[position]);
 }
 /**
  * Compute aggregate values for the given rows across every column that has a static
@@ -226,29 +262,45 @@ function computeAggregates(rows, indices, cols, controlAggregates) {
         const aggregate = controlAggregates[col.field] ?? col.aggregate;
         if (!aggregate)
             continue;
-        const values = indices.map(index => rows[index][col.field]);
         if (typeof aggregate === 'function') {
+            const values = indices.map(index => rows[index][col.field]);
             result[col.field] = aggregate(values);
             continue;
         }
-        const numbers = values.map(Number).filter(value => !Number.isNaN(value));
+        let count = 0;
+        let numericCount = 0;
+        let sum = 0;
+        let min = Infinity;
+        let max = -Infinity;
+        for (const index of indices) {
+            const raw = rows[index][col.field];
+            if (raw != null && raw !== '')
+                count++;
+            const value = Number(raw);
+            if (Number.isNaN(value))
+                continue;
+            numericCount++;
+            sum += value;
+            if (value < min)
+                min = value;
+            if (value > max)
+                max = value;
+        }
         switch (aggregate) {
             case 'sum':
-                result[col.field] = numbers.reduce((sum, value) => sum + value, 0);
+                result[col.field] = sum;
                 break;
             case 'avg':
-                result[col.field] = numbers.length
-                    ? numbers.reduce((sum, value) => sum + value, 0) / numbers.length
-                    : null;
+                result[col.field] = numericCount ? sum / numericCount : null;
                 break;
             case 'min':
-                result[col.field] = numbers.length ? Math.min(...numbers) : null;
+                result[col.field] = numericCount ? min : null;
                 break;
             case 'max':
-                result[col.field] = numbers.length ? Math.max(...numbers) : null;
+                result[col.field] = numericCount ? max : null;
                 break;
             case 'count':
-                result[col.field] = values.filter(value => value != null && value !== '').length;
+                result[col.field] = count;
                 break;
         }
     }
@@ -344,6 +396,123 @@ function buildTreeItems(rows, indices, accessors, expandedIds, forceExpandedIds)
         visit(rootIndex, 0);
     return items;
 }
+/** Stable expansion id for a generated path prefix. */
+function pathTreeNodeId(path) {
+    return `__agrid_path__${JSON.stringify(path.map(String))}`;
+}
+function pathTreeNodeUuid(path) {
+    const source = JSON.stringify(path.map(String));
+    let a = 0x9e3779b9;
+    let b = 0x85ebca6b;
+    let c = 0xc2b2ae35;
+    let d = 0x27d4eb2f;
+    for (let i = 0; i < source.length; i++) {
+        const code = source.charCodeAt(i);
+        a = Math.imul(a ^ code, 0x85ebca6b);
+        b = Math.imul(b ^ code, 0xc2b2ae35);
+        c = Math.imul(c ^ code, 0x27d4eb2f);
+        d = Math.imul(d ^ code, 0x165667b1);
+    }
+    const hex = [a, b, c, d]
+        .map(value => (value >>> 0).toString(16).padStart(8, '0'))
+        .join('')
+        .split('');
+    hex[12] = '5';
+    hex[16] = ((parseInt(hex[16], 16) & 0x3) | 0x8).toString(16);
+    return `${hex.slice(0, 8).join('')}-${hex.slice(8, 12).join('')}-${hex.slice(12, 16).join('')}-${hex.slice(16, 20).join('')}-${hex.slice(20, 32).join('')}`;
+}
+/** Builds display-only branch nodes and datasource-backed leaves from path segments. */
+function buildPathTreeItems(rows, indices, config, expandedIds, forceExpanded = false) {
+    const roots = new Map();
+    for (const originalIndex of indices) {
+        const rawPath = config.getPath(rows[originalIndex]).filter(segment => String(segment).length > 0);
+        if (rawPath.length === 0)
+            continue;
+        const path = rawPath.map(String);
+        const formatSegment = (level, leaf) => config.formatPathSegment?.({
+            row: rows[originalIndex],
+            segment: rawPath[level],
+            level,
+            path: rawPath.slice(0, level + 1),
+            leaf,
+        }) ?? path[level];
+        const resolveNodeUuid = (prefix) => String(config.nodeUuid?.(rows[originalIndex])
+            ?? config.nodeUUid?.(rows[originalIndex])
+            ?? pathTreeNodeUuid(prefix));
+        let branches = roots;
+        for (let level = 0; level < path.length - 1; level++) {
+            const prefix = path.slice(0, level + 1);
+            const id = pathTreeNodeId(prefix);
+            let branch = branches.get(id);
+            if (!branch) {
+                branch = {
+                    id,
+                    uuid: resolveNodeUuid(prefix),
+                    label: formatSegment(level, false),
+                    level,
+                    children: new Map(),
+                    leaves: [],
+                };
+                branches.set(id, branch);
+            }
+            if (level === path.length - 2) {
+                branch.leaves.push({
+                    originalIndex,
+                    label: formatSegment(path.length - 1, true),
+                });
+            }
+            branches = branch.children;
+        }
+        if (path.length === 1) {
+            const id = pathTreeNodeId([]);
+            let branch = roots.get(id);
+            if (!branch) {
+                branch = {
+                    id,
+                    uuid: resolveNodeUuid([]),
+                    label: '',
+                    level: -1,
+                    children: new Map(),
+                    leaves: [],
+                };
+                roots.set(id, branch);
+            }
+            branch.leaves.push({ originalIndex, label: formatSegment(0, true) });
+        }
+    }
+    const items = [];
+    const visit = (branch) => {
+        const isHiddenRoot = branch.level < 0;
+        const expanded = forceExpanded || expandedIds.has(branch.id);
+        if (!isHiddenRoot) {
+            items.push({
+                uuid: branch.uuid,
+                pathNodeId: branch.id,
+                pathLabel: branch.label,
+                level: branch.level,
+                expandable: true,
+                expanded,
+            });
+        }
+        if (!isHiddenRoot && !expanded)
+            return;
+        for (const child of branch.children.values())
+            visit(child);
+        for (const leaf of branch.leaves) {
+            items.push({
+                row: rows[leaf.originalIndex],
+                originalIndex: leaf.originalIndex,
+                level: isHiddenRoot ? 0 : branch.level + 1,
+                expandable: false,
+                expanded: false,
+                treeLabel: leaf.label,
+            });
+        }
+    };
+    for (const branch of roots.values())
+        visit(branch);
+    return items;
+}
 // Selection range
 /** Build the set of original indices spanning from `fromOrig` to `toOrig` in display order. */
 function buildSelectionRange(fromOrig, toOrig, items) {
@@ -360,6 +529,11 @@ function buildSelectionRange(fromOrig, toOrig, items) {
     }
     return next;
 }
+/** Test a complete proposed editor value against a regex input mask. */
+function matchesInputMask(value, mask) {
+    const flags = mask.flags.replace(/[gy]/g, '');
+    return new RegExp(`^(?:${mask.source})$`, flags).test(String(value ?? ''));
+}
 
 /**
  * Individual cell component used inside `AgridComponent`.
@@ -378,6 +552,8 @@ class AgridCellComponent {
     colIndex = input.required(...(ngDevMode ? [{ debugName: "colIndex" }] : /* istanbul ignore next */ []));
     /** Current field value from the data source (displayed when not editing). */
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Optional display-only text override; editing still uses the original {@link value}. */
+    displayValueOverride = input(null, ...(ngDevMode ? [{ debugName: "displayValueOverride" }] : /* istanbul ignore next */ []));
     /** Full row data — passed to `cellRenderer` when set. */
     row = input({}, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     /** Locale used for built-in date formatting. */
@@ -388,6 +564,8 @@ class AgridCellComponent {
     editing = input(false, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
     /** Whether this cell may be edited (drives the boolean checkbox enabled state). */
     editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    /** Whether a right-aligned information button is visible in this cell. */
+    showInfoIcon = input(false, ...(ngDevMode ? [{ debugName: "showInfoIcon" }] : /* istanbul ignore next */ []));
     /** Validation error message to show under the editor, or `null` when the value is valid. */
     error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     /** Whether this cell is the tree column and should render indentation + a twisty. */
@@ -407,6 +585,8 @@ class AgridCellComponent {
      * while the cell is selected (type-to-start-editing behavior).
      */
     seedChar = input('', ...(ngDevMode ? [{ debugName: "seedChar" }] : /* istanbul ignore next */ []));
+    /** Whether an unseeded text editor should select all text when focused. */
+    selectTextOnEdit = input(true, ...(ngDevMode ? [{ debugName: "selectTextOnEdit" }] : /* istanbul ignore next */ []));
     /**
      * Emitted on single click — the grid selects this cell.
      * For `values` columns the grid also enters edit mode immediately.
@@ -416,6 +596,8 @@ class AgridCellComponent {
     startEdit = output();
     /** Emitted when a boolean-column checkbox is toggled, carrying the new value. */
     booleanToggle = output();
+    /** Emitted when the cell's optional information button is clicked. */
+    infoClick = output();
     /**
      * Emitted on every keystroke inside the edit input or on every select change.
      * The grid stores the latest value in `currentDraft` so it can commit on Tab / Enter.
@@ -426,10 +608,23 @@ class AgridCellComponent {
     /** String value accepted by the active native input element. */
     editorValue = computed(() => {
         const draft = this.draft();
-        return this.col().type === 'date'
-            ? getDateInputValue(draft)
-            : String(draft ?? '');
+        if (this.col().type === 'date') {
+            return getDateInputValue(draft);
+        }
+        return String(draft ?? '');
     }, ...(ngDevMode ? [{ debugName: "editorValue" }] : /* istanbul ignore next */ []));
+    /** Mask selected for the current row and cell, if this is a maskable text column. */
+    resolvedInputMask = computed(() => {
+        const col = this.col();
+        if (!col.inputMask || col.type === 'number' || col.type === 'date' || col.type === 'boolean') {
+            return null;
+        }
+        return col.inputMask({
+            row: this.row(),
+            value: this.value(),
+            column: col,
+        }) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedInputMask" }] : /* istanbul ignore next */ []));
     /** Whether this cell renders as an inline boolean checkbox (no edit mode). */
     booleanCell = computed(() => this.col().type === 'boolean' && !this.col().cellRenderer, ...(ngDevMode ? [{ debugName: "booleanCell" }] : /* istanbul ignore next */ []));
     /** Truthiness of the current boolean value (accepts `true`, `'true'`, `1`, `'1'`). */
@@ -458,19 +653,8 @@ class AgridCellComponent {
      * Priority: ValueOption label → `ColDef.formatter` → raw string.
      */
     displayValue = computed(() => {
-        const raw = this.value();
-        const col = this.col();
-        if (col.values?.length) {
-            const opt = col.values.find(v => typeof v === 'string' ? v === raw : v.value === raw);
-            if (opt !== undefined)
-                return typeof opt === 'string' ? opt : opt.label;
-        }
-        if (col.formatter)
-            return col.formatter(raw);
-        if (col.type === 'date' || looksLikeDate(raw)) {
-            return formatDateValue(raw, this.locale(), col.type === 'date');
-        }
-        return String(raw ?? '');
+        return this.displayValueOverride()
+            ?? getDisplayForField(this.col(), this.value(), this.locale());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     /**
      * Index of the currently selected option in `valueOptions`.
@@ -493,16 +677,20 @@ class AgridCellComponent {
                 const initialValue = isDate
                     ? dateInitial
                     : seed !== '' ? seed : this.value();
-                this.draft.set(initialValue);
+                const mask = this.resolvedInputMask();
+                const acceptedInitialValue = seed !== '' && mask && !matchesInputMask(initialValue, mask)
+                    ? this.value()
+                    : initialValue;
+                this.draft.set(acceptedInitialValue);
                 setTimeout(() => {
                     const input = this.inputEl()?.nativeElement;
                     if (input) {
                         const displaySeed = isDate
                             ? dateInitial
-                            : seed !== '' ? seed : String(this.value() ?? '');
+                            : String(acceptedInitialValue ?? '');
                         input.value = displaySeed;
                         input.focus();
-                        if (input.type === 'text' && !seed)
+                        if (input.type === 'text' && !seed && this.selectTextOnEdit())
                             input.select();
                         else if (input.type === 'text') {
                             const len = displaySeed.length;
@@ -540,9 +728,22 @@ class AgridCellComponent {
         event.stopPropagation();
         this.treeToggle.emit();
     }
+    /** Emits the information action without activating or editing the cell. */
+    onInfoClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.infoClick.emit();
+    }
     /** Forward `<input>` changes to the grid. */
     onInput(event) {
-        const val = event.target.value;
+        const input = event.target;
+        const val = input.value;
+        const mask = this.resolvedInputMask();
+        if (mask && !matchesInputMask(val, mask)) {
+            input.value = String(this.draft() ?? '');
+            input.setSelectionRange(input.value.length, input.value.length);
+            return;
+        }
         const draft = this.col().type === 'date'
             ? coerceDateInputValue(val, this.value())
             : val;
@@ -560,8 +761,8 @@ class AgridCellComponent {
         this.draft.set(rawValue);
         this.draftChange.emit(rawValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridCellComponent, isStandalone: true, selector: "agrid-cell", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, treeCell: { classPropertyName: "treeCell", publicName: "treeCell", isSignal: true, isRequired: false, transformFunction: null }, treeLevel: { classPropertyName: "treeLevel", publicName: "treeLevel", isSignal: true, isRequired: false, transformFunction: null }, treeExpandable: { classPropertyName: "treeExpandable", publicName: "treeExpandable", isSignal: true, isRequired: false, transformFunction: null }, treeExpanded: { classPropertyName: "treeExpanded", publicName: "treeExpanded", isSignal: true, isRequired: false, transformFunction: null }, seedChar: { classPropertyName: "seedChar", publicName: "seedChar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeToggle: "treeToggle", activate: "activate", startEdit: "startEdit", booleanToggle: "booleanToggle", draftChange: "draftChange" }, host: { attributes: { "role": "gridcell", "tabindex": "-1" }, listeners: { "click": "activate.emit($event)", "dblclick": "startEdit.emit()" }, properties: { "class.selected": "selected()", "class.editing": "editing()", "class.ag-cell--tree": "treeCell()", "attr.aria-readonly": "col().editable === false ? \"true\" : null" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "selectEl", first: true, predicate: ["editSelect"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridCellComponent, isStandalone: true, selector: "agrid-cell", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, displayValueOverride: { classPropertyName: "displayValueOverride", publicName: "displayValueOverride", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, showInfoIcon: { classPropertyName: "showInfoIcon", publicName: "showInfoIcon", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, treeCell: { classPropertyName: "treeCell", publicName: "treeCell", isSignal: true, isRequired: false, transformFunction: null }, treeLevel: { classPropertyName: "treeLevel", publicName: "treeLevel", isSignal: true, isRequired: false, transformFunction: null }, treeExpandable: { classPropertyName: "treeExpandable", publicName: "treeExpandable", isSignal: true, isRequired: false, transformFunction: null }, treeExpanded: { classPropertyName: "treeExpanded", publicName: "treeExpanded", isSignal: true, isRequired: false, transformFunction: null }, seedChar: { classPropertyName: "seedChar", publicName: "seedChar", isSignal: true, isRequired: false, transformFunction: null }, selectTextOnEdit: { classPropertyName: "selectTextOnEdit", publicName: "selectTextOnEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeToggle: "treeToggle", activate: "activate", startEdit: "startEdit", booleanToggle: "booleanToggle", infoClick: "infoClick", draftChange: "draftChange" }, host: { attributes: { "role": "gridcell", "tabindex": "-1" }, listeners: { "click": "activate.emit($event)", "dblclick": "startEdit.emit()" }, properties: { "class.selected": "selected()", "class.editing": "editing()", "class.ag-cell--tree": "treeCell()", "class.ag-cell--with-info": "showInfoIcon() && !editing()", "attr.aria-readonly": "!editable() ? \"true\" : null", "attr.title": "displayValue()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "selectEl", first: true, predicate: ["editSelect"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (booleanCell()) {
       <input
         type="checkbox"
@@ -618,16 +819,29 @@ class AgridCellComponent {
         <span class="ag-cell-value">{{ displayValue() }}</span>
       }
     }
-  `, isInline: true, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}:host(.ag-cell--tree){display:flex;align-items:center}:host(.ag-cell--tree) .ag-cell-value{flex:1 1 auto;min-width:0}.ag-tree-prefix{flex:0 0 auto;display:inline-flex;align-items:center;height:100%}.ag-tree-twisty,.ag-tree-twisty-spacer{width:16px;flex:0 0 16px}.ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;border:none;background:transparent;color:var(--agrid-color-text-muted);font-size:9px;line-height:1;cursor:pointer;transition:transform .15s ease}.ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent;user-select:text;-webkit-user-select:text}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}.ag-cell-checkbox{display:block;margin:9px auto;cursor:pointer;accent-color:var(--agrid-color-accent)}.ag-cell-checkbox:disabled{cursor:not-allowed;opacity:.6}.ag-cell-input--invalid{outline:2px solid var(--agrid-color-danger);outline-offset:-2px}.ag-cell-error{position:absolute;left:0;top:100%;z-index:5;max-width:240px;padding:3px 8px;font-size:12px;line-height:1.4;white-space:normal;color:#fff;background:var(--agrid-color-danger);border-radius:0 0 4px 4px;box-shadow:0 2px 6px #0000002e;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    @if (showInfoIcon() && !editing()) {
+      <button
+        type="button"
+        class="ag-cell-info"
+        aria-label="More information"
+        title="More information"
+        (pointerdown)="$event.stopPropagation()"
+        (click)="onInfoClick($event)"
+        (dblclick)="$event.stopPropagation()"
+      >?</button>
+    }
+  `, isInline: true, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}:host(.ag-cell--tree){display:flex;align-items:center}:host(.ag-cell--tree) .ag-cell-value{flex:1 1 auto;min-width:0}:host(.ag-cell--with-info) .ag-cell-value{padding-right:22px}.ag-cell-info{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:1px solid var(--agrid-color-border);border-radius:50%;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);font:600 11px/1 sans-serif;cursor:pointer}.ag-cell-info:hover,.ag-cell-info:focus-visible{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent);outline:none}.ag-tree-prefix{flex:0 0 auto;display:inline-flex;align-items:center;height:100%}.ag-tree-twisty,.ag-tree-twisty-spacer{width:16px;flex:0 0 16px}.ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;border:none;background:transparent;color:var(--agrid-color-text-muted);font-size:9px;line-height:1;cursor:pointer;transition:transform .15s ease}.ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent;user-select:text;-webkit-user-select:text}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}.ag-cell-checkbox{display:block;margin:9px auto;cursor:pointer;accent-color:var(--agrid-color-accent)}.ag-cell-checkbox:disabled{cursor:not-allowed;opacity:.6}.ag-cell-input--invalid{outline:2px solid var(--agrid-color-danger);outline-offset:-2px}.ag-cell-error{position:absolute;left:0;top:100%;z-index:5;max-width:240px;padding:3px 8px;font-size:12px;line-height:1.4;white-space:normal;color:#fff;background:var(--agrid-color-danger);border-radius:0 0 4px 4px;box-shadow:0 2px 6px #0000002e;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid-cell', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'gridcell',
                         '[class.selected]': 'selected()',
                         '[class.editing]': 'editing()',
                         '[class.ag-cell--tree]': 'treeCell()',
-                        '[attr.aria-readonly]': 'col().editable === false ? "true" : null',
+                        '[class.ag-cell--with-info]': 'showInfoIcon() && !editing()',
+                        '[attr.aria-readonly]': '!editable() ? "true" : null',
+                        '[attr.title]': 'displayValue()',
                         '(click)': 'activate.emit($event)',
                         '(dblclick)': 'startEdit.emit()',
                         tabindex: '-1',
@@ -688,8 +902,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <span class="ag-cell-value">{{ displayValue() }}</span>
       }
     }
-  `, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}:host(.ag-cell--tree){display:flex;align-items:center}:host(.ag-cell--tree) .ag-cell-value{flex:1 1 auto;min-width:0}.ag-tree-prefix{flex:0 0 auto;display:inline-flex;align-items:center;height:100%}.ag-tree-twisty,.ag-tree-twisty-spacer{width:16px;flex:0 0 16px}.ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;border:none;background:transparent;color:var(--agrid-color-text-muted);font-size:9px;line-height:1;cursor:pointer;transition:transform .15s ease}.ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent;user-select:text;-webkit-user-select:text}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}.ag-cell-checkbox{display:block;margin:9px auto;cursor:pointer;accent-color:var(--agrid-color-accent)}.ag-cell-checkbox:disabled{cursor:not-allowed;opacity:.6}.ag-cell-input--invalid{outline:2px solid var(--agrid-color-danger);outline-offset:-2px}.ag-cell-error{position:absolute;left:0;top:100%;z-index:5;max-width:240px;padding:3px 8px;font-size:12px;line-height:1.4;white-space:normal;color:#fff;background:var(--agrid-color-danger);border-radius:0 0 4px 4px;box-shadow:0 2px 6px #0000002e;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], treeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeCell", required: false }] }], treeLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeLevel", required: false }] }], treeExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeExpandable", required: false }] }], treeExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeExpanded", required: false }] }], treeToggle: [{ type: i0.Output, args: ["treeToggle"] }], seedChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "seedChar", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], startEdit: [{ type: i0.Output, args: ["startEdit"] }], booleanToggle: [{ type: i0.Output, args: ["booleanToggle"] }], draftChange: [{ type: i0.Output, args: ["draftChange"] }], inputEl: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], selectEl: [{ type: i0.ViewChild, args: ['editSelect', { isSignal: true }] }] } });
+    @if (showInfoIcon() && !editing()) {
+      <button
+        type="button"
+        class="ag-cell-info"
+        aria-label="More information"
+        title="More information"
+        (pointerdown)="$event.stopPropagation()"
+        (click)="onInfoClick($event)"
+        (dblclick)="$event.stopPropagation()"
+      >?</button>
+    }
+  `, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}:host(.ag-cell--tree){display:flex;align-items:center}:host(.ag-cell--tree) .ag-cell-value{flex:1 1 auto;min-width:0}:host(.ag-cell--with-info) .ag-cell-value{padding-right:22px}.ag-cell-info{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:1px solid var(--agrid-color-border);border-radius:50%;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);font:600 11px/1 sans-serif;cursor:pointer}.ag-cell-info:hover,.ag-cell-info:focus-visible{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent);outline:none}.ag-tree-prefix{flex:0 0 auto;display:inline-flex;align-items:center;height:100%}.ag-tree-twisty,.ag-tree-twisty-spacer{width:16px;flex:0 0 16px}.ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;border:none;background:transparent;color:var(--agrid-color-text-muted);font-size:9px;line-height:1;cursor:pointer;transition:transform .15s ease}.ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent;user-select:text;-webkit-user-select:text}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}.ag-cell-checkbox{display:block;margin:9px auto;cursor:pointer;accent-color:var(--agrid-color-accent)}.ag-cell-checkbox:disabled{cursor:not-allowed;opacity:.6}.ag-cell-input--invalid{outline:2px solid var(--agrid-color-danger);outline-offset:-2px}.ag-cell-error{position:absolute;left:0;top:100%;z-index:5;max-width:240px;padding:3px 8px;font-size:12px;line-height:1.4;white-space:normal;color:#fff;background:var(--agrid-color-danger);border-radius:0 0 4px 4px;box-shadow:0 2px 6px #0000002e;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], displayValueOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValueOverride", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], showInfoIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfoIcon", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], treeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeCell", required: false }] }], treeLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeLevel", required: false }] }], treeExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeExpandable", required: false }] }], treeExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeExpanded", required: false }] }], treeToggle: [{ type: i0.Output, args: ["treeToggle"] }], seedChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "seedChar", required: false }] }], selectTextOnEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectTextOnEdit", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], startEdit: [{ type: i0.Output, args: ["startEdit"] }], booleanToggle: [{ type: i0.Output, args: ["booleanToggle"] }], infoClick: [{ type: i0.Output, args: ["infoClick"] }], draftChange: [{ type: i0.Output, args: ["draftChange"] }], inputEl: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], selectEl: [{ type: i0.ViewChild, args: ['editSelect', { isSignal: true }] }] } });
 
 /** Guarded access to browser-only APIs used by the grid. @internal */
 class AgridBrowserAdapter {
@@ -734,6 +959,10 @@ class AgridBrowserAdapter {
     viewportWidth() {
         return this.win?.innerWidth ?? Number.POSITIVE_INFINITY;
     }
+    /** Returns the viewport height or infinity during server rendering. */
+    viewportHeight() {
+        return this.win?.innerHeight ?? Number.POSITIVE_INFINITY;
+    }
     /** Returns computed styles when a window is available. */
     computedStyle(element) {
         return this.win?.getComputedStyle?.(element) ?? null;
@@ -877,7 +1106,7 @@ class AgridClipboardHandler {
             for (let colOffset = 0; colOffset < rows[rowOffset].length; colOffset++) {
                 const colIndex = start.colIndex + colOffset;
                 const col = cols[colIndex];
-                if (!col || !this.opts.isCellEditable(col))
+                if (!col || !this.opts.isCellEditable(col, item.originalIndex))
                     continue;
                 const oldValue = dataSource.getRow(item.originalIndex)[col.field];
                 const newValue = this.coercePastedValue(rows[rowOffset][colOffset], col);
@@ -1155,8 +1384,11 @@ const AGRID_LOCALE_TEXT = {
         columnMenu: 'Column menu',
         columns: 'Columns',
         detail: 'Detail',
+        toggleDetail: 'Toggle detail panel',
         hiddenColumn: '(hidden)',
         filterCondition: 'Condition',
+        filterConditionMenu: 'Filter condition',
+        filterValue: 'Value',
         filterNoCondition: 'No condition',
         filterOpEquals: 'Equals',
         filterOpNotEquals: 'Not equal',
@@ -1168,6 +1400,11 @@ const AGRID_LOCALE_TEXT = {
         filterOpBefore: 'Before',
         filterOpAfter: 'After',
         filterOpOn: 'On',
+        filterOpLike: 'Like (% and _ wildcards)',
+        filterOpStartsWith: 'Starts with',
+        filterOpEndsWith: 'Ends with',
+        filterOpIncludes: 'Includes',
+        filterOpNotIncludes: 'Does not include',
         copyCellValue: 'Copy cell',
         copyRow: 'Copy row',
         confirmDeleteRow: 'Sure to delete?',
@@ -1191,6 +1428,9 @@ const AGRID_LOCALE_TEXT = {
         pinColumn: 'Pin left',
         pinColumnRight: 'Pin right',
         unpinColumnRight: 'Unpin right',
+        pinRowTop: 'Pin row to top',
+        pinRowBottom: 'Pin row to bottom',
+        unpinRow: 'Unpin row',
         previous: 'Previous',
         resizeColumn: 'Resize column',
         rows: count => `${count} ${count === 1 ? 'row' : 'rows'}`,
@@ -1222,8 +1462,11 @@ const AGRID_LOCALE_TEXT = {
         columnMenu: 'Spaltenmenü',
         columns: 'Spalten',
         detail: 'Details',
+        toggleDetail: 'Detailbereich umschalten',
         hiddenColumn: '(ausgeblendet)',
         filterCondition: 'Bedingung',
+        filterConditionMenu: 'Filterbedingung',
+        filterValue: 'Wert',
         filterNoCondition: 'Keine Bedingung',
         filterOpEquals: 'Gleich',
         filterOpNotEquals: 'Ungleich',
@@ -1235,6 +1478,11 @@ const AGRID_LOCALE_TEXT = {
         filterOpBefore: 'Vor',
         filterOpAfter: 'Nach',
         filterOpOn: 'Am',
+        filterOpLike: 'Wie (% und _ Platzhalter)',
+        filterOpStartsWith: 'Beginnt mit',
+        filterOpEndsWith: 'Endet mit',
+        filterOpIncludes: 'Enthält',
+        filterOpNotIncludes: 'Enthält nicht',
         copyCellValue: 'Zelle kopieren',
         copyRow: 'Zeile kopieren',
         confirmDeleteRow: 'Wirklich löschen?',
@@ -1258,6 +1506,9 @@ const AGRID_LOCALE_TEXT = {
         pinColumn: 'Links fixieren',
         pinColumnRight: 'Rechts fixieren',
         unpinColumnRight: 'Rechts lösen',
+        pinRowTop: 'Zeile oben fixieren',
+        pinRowBottom: 'Zeile unten fixieren',
+        unpinRow: 'Zeilenfixierung lösen',
         previous: 'Zurück',
         resizeColumn: 'Spaltenbreite ändern',
         rows: count => `${count} ${count === 1 ? 'Zeile' : 'Zeilen'}`,
@@ -1303,14 +1554,27 @@ function resolveAgridLocaleText(locale, localizations) {
     return { ...base, ...overrides };
 }
 
+/** Clamp a floating menu so it remains inside the browser viewport. @internal */
+function fitColumnMenuToViewport(x, y, width, height, viewportWidth, viewportHeight, margin = 8) {
+    return {
+        x: Math.max(margin, Math.min(x, viewportWidth - width - margin)),
+        y: Math.max(margin, Math.min(y, viewportHeight - height - margin)),
+    };
+}
 /** Floating column menu for sort, column actions, grouping, and value filters. */
 class AgridColumnMenuComponent {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    browser = new AgridBrowserAdapter();
+    resizeObserver = null;
     /** Localized labels used in the menu. */
     localeText = input(AGRID_LOCALE_TEXT.en, ...(ngDevMode ? [{ debugName: "localeText" }] : /* istanbul ignore next */ []));
     /** Fixed viewport x-position for the menu. */
     x = input.required(...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
     /** Fixed viewport y-position for the menu. */
     y = input.required(...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+    /** Viewport-fitted coordinates used by the rendered menu. */
+    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     /** Header label for the active column. */
     header = input.required(...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     /** Current sort direction for the active column. */
@@ -1329,19 +1593,19 @@ class AgridColumnMenuComponent {
     filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
     /** Whether to show the Excel-style distinct-value picker. */
     showValueFilter = input(true, ...(ngDevMode ? [{ debugName: "showValueFilter" }] : /* istanbul ignore next */ []));
-    /** Range-filter input type for the active column, or `null` to hide the condition UI. */
+    /** Condition-filter input type for the active column, or `null` to hide the condition UI. */
     filterType = input(null, ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
-    /** Current range-filter operator, or `null` when none is selected. */
+    /** Current condition operator, or `null` when none is selected. */
     operator = input(null, ...(ngDevMode ? [{ debugName: "operator" }] : /* istanbul ignore next */ []));
-    /** Current primary range-filter operand. */
+    /** Current primary condition operand. */
     operand = input('', ...(ngDevMode ? [{ debugName: "operand" }] : /* istanbul ignore next */ []));
-    /** Current secondary range-filter operand (used by `between`). */
+    /** Current secondary condition operand (used by `between`). */
     operand2 = input('', ...(ngDevMode ? [{ debugName: "operand2" }] : /* istanbul ignore next */ []));
-    /** Emits the selected range-filter operator, or `null` to clear the condition. */
+    /** Emits the selected condition operator, or `null` to clear it. */
     operatorChange = output();
-    /** Emits the primary range-filter operand text. */
+    /** Emits the primary condition operand text. */
     operandChange = output();
-    /** Emits the secondary range-filter operand text (used by `between`). */
+    /** Emits the secondary condition operand text (used by `between`). */
     operand2Change = output();
     /** Current search text for the value-filter option list. */
     search = input('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
@@ -1394,7 +1658,7 @@ class AgridColumnMenuComponent {
             { value: 'count', symbol: '#', label: t.aggregateCount },
         ];
     }, ...(ngDevMode ? [{ debugName: "aggregateOptions" }] : /* istanbul ignore next */ []));
-    /** Range-filter operators offered for the active column, labeled per column type. */
+    /** Condition operators offered for the active column, labeled per column type. */
     operatorOptions = computed(() => {
         const t = this.localeText();
         if (this.filterType() === 'date') {
@@ -1405,6 +1669,17 @@ class AgridColumnMenuComponent {
                 { value: 'between', label: t.filterOpBetween },
             ];
         }
+        if (this.filterType() === 'text') {
+            return [
+                { value: 'eq', label: t.filterOpEquals },
+                { value: 'neq', label: t.filterOpNotEquals },
+                { value: 'like', label: t.filterOpLike },
+                { value: 'startsWith', label: t.filterOpStartsWith },
+                { value: 'endsWith', label: t.filterOpEndsWith },
+                { value: 'includes', label: t.filterOpIncludes },
+                { value: 'notIncludes', label: t.filterOpNotIncludes },
+            ];
+        }
         return [
             { value: 'eq', label: t.filterOpEquals },
             { value: 'neq', label: t.filterOpNotEquals },
@@ -1416,14 +1691,42 @@ class AgridColumnMenuComponent {
         ];
     }, ...(ngDevMode ? [{ debugName: "operatorOptions" }] : /* istanbul ignore next */ []));
     /** Native input type for operand fields (date columns use a date picker). */
-    operandInputType = computed(() => (this.filterType() === 'date' ? 'date' : 'number'), ...(ngDevMode ? [{ debugName: "operandInputType" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridColumnMenuComponent, isStandalone: true, selector: "agrid-column-menu", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, showColumnActions: { classPropertyName: "showColumnActions", publicName: "showColumnActions", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showValueFilter: { classPropertyName: "showValueFilter", publicName: "showValueFilter", isSignal: true, isRequired: false, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, operand: { classPropertyName: "operand", publicName: "operand", isSignal: true, isRequired: false, transformFunction: null }, operand2: { classPropertyName: "operand2", publicName: "operand2", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null }, sortPriority: { classPropertyName: "sortPriority", publicName: "sortPriority", isSignal: true, isRequired: false, transformFunction: null }, hasMultiSort: { classPropertyName: "hasMultiSort", publicName: "hasMultiSort", isSignal: true, isRequired: false, transformFunction: null }, aggregate: { classPropertyName: "aggregate", publicName: "aggregate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operatorChange: "operatorChange", operandChange: "operandChange", operand2Change: "operand2Change", sort: "sort", resetSort: "resetSort", autosize: "autosize", togglePin: "togglePin", togglePinRight: "togglePinRight", hide: "hide", toggleGroup: "toggleGroup", clearFilter: "clearFilter", clearAll: "clearAll", searchChange: "searchChange", toggleAll: "toggleAll", toggleValue: "toggleValue", setAggregate: "setAggregate" }, ngImport: i0, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"x()\"\n  [style.top.px]=\"y()\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <select\n          class=\"ag-filter-menu-operator\"\n          (change)=\"operatorChange.emit($any($event.target).value || null)\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <option value=\"\" [selected]=\"!operator()\">{{ localeText().filterNoCondition }}</option>\n          @for (op of operatorOptions(); track op.value) {\n            <option [value]=\"op.value\" [selected]=\"op.value === operator()\">{{ op.label }}</option>\n          }\n        </select>\n        @if (operator()) {\n          <input\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;font-size:13px;overflow:hidden}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:200px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operator,.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operator:focus,.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    operandInputType = computed(() => this.filterType() === 'date' ? 'date' : this.filterType() === 'number' ? 'number' : 'text', ...(ngDevMode ? [{ debugName: "operandInputType" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.position.set({ x: this.x(), y: this.y() });
+            this.scheduleViewportFit();
+        });
+        afterNextRender(() => {
+            const menu = this.menuElement();
+            this.fitToViewport();
+            if (menu && typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver(() => this.fitToViewport());
+                this.resizeObserver.observe(menu);
+            }
+        });
+        this.destroyRef.onDestroy(() => this.resizeObserver?.disconnect());
+    }
+    scheduleViewportFit() {
+        setTimeout(() => this.fitToViewport());
+    }
+    fitToViewport() {
+        const menu = this.menuElement();
+        if (!menu || !this.browser.available)
+            return;
+        const rect = menu.getBoundingClientRect();
+        this.position.set(fitColumnMenuToViewport(this.x(), this.y(), rect.width, rect.height, this.browser.viewportWidth(), this.browser.viewportHeight()));
+    }
+    menuElement() {
+        return this.elementRef.nativeElement.querySelector('.ag-filter-menu');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridColumnMenuComponent, isStandalone: true, selector: "agrid-column-menu", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, showColumnActions: { classPropertyName: "showColumnActions", publicName: "showColumnActions", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showValueFilter: { classPropertyName: "showValueFilter", publicName: "showValueFilter", isSignal: true, isRequired: false, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, operand: { classPropertyName: "operand", publicName: "operand", isSignal: true, isRequired: false, transformFunction: null }, operand2: { classPropertyName: "operand2", publicName: "operand2", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null }, sortPriority: { classPropertyName: "sortPriority", publicName: "sortPriority", isSignal: true, isRequired: false, transformFunction: null }, hasMultiSort: { classPropertyName: "hasMultiSort", publicName: "hasMultiSort", isSignal: true, isRequired: false, transformFunction: null }, aggregate: { classPropertyName: "aggregate", publicName: "aggregate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operatorChange: "operatorChange", operandChange: "operandChange", operand2Change: "operand2Change", sort: "sort", resetSort: "resetSort", autosize: "autosize", togglePin: "togglePin", togglePinRight: "togglePinRight", hide: "hide", toggleGroup: "toggleGroup", clearFilter: "clearFilter", clearAll: "clearAll", searchChange: "searchChange", toggleAll: "toggleAll", toggleValue: "toggleValue", setAggregate: "setAggregate" }, ngImport: i0, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"position().x\"\n  [style.top.px]=\"position().y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <div class=\"ag-filter-menu-operators\">\n          <button\n            type=\"button\"\n            class=\"ag-filter-menu-operator-btn ag-filter-menu-operator-btn--clear\"\n            [class.ag-filter-menu-operator-btn--active]=\"!operator()\"\n            (click)=\"operatorChange.emit(null)\"\n          >{{ localeText().filterNoCondition }}</button>\n          @for (op of operatorOptions(); track op.value) {\n            <button\n              type=\"button\"\n              class=\"ag-filter-menu-operator-btn\"\n              [class.ag-filter-menu-operator-btn--active]=\"op.value === operator()\"\n              (click)=\"operatorChange.emit(op.value)\"\n            >{{ op.label }}</button>\n          }\n        </div>\n        @if (operator()) {\n          <label class=\"ag-filter-menu-operand-label\" for=\"agrid-filter-operand\">\n            {{ localeText().filterValue }}\n          </label>\n          <input\n            id=\"agrid-filter-operand\"\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;max-height:calc(100vh - 16px);font-size:13px;overflow-y:auto}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:120px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}.ag-filter-menu-operators{display:grid;grid-template-columns:1fr 1fr;gap:4px}.ag-filter-menu-operator-btn{min-height:26px;padding:3px 6px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:11px;line-height:1.15;text-align:left;cursor:pointer}.ag-filter-menu-operator-btn:hover,.ag-filter-menu-operator-btn:focus-visible{border-color:var(--agrid-color-accent-border);outline:none}.ag-filter-menu-operator-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-menu-operator-btn--clear{grid-column:1 / -1}.ag-filter-menu-operand-label{font-size:11px;color:var(--agrid-color-text-muted)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridColumnMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridColumnMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'agrid-column-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"x()\"\n  [style.top.px]=\"y()\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <select\n          class=\"ag-filter-menu-operator\"\n          (change)=\"operatorChange.emit($any($event.target).value || null)\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <option value=\"\" [selected]=\"!operator()\">{{ localeText().filterNoCondition }}</option>\n          @for (op of operatorOptions(); track op.value) {\n            <option [value]=\"op.value\" [selected]=\"op.value === operator()\">{{ op.label }}</option>\n          }\n        </select>\n        @if (operator()) {\n          <input\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;font-size:13px;overflow:hidden}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:200px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operator,.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operator:focus,.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"] }]
-        }], propDecorators: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], showColumnActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnActions", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], showValueFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueFilter", required: false }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], operator: [{ type: i0.Input, args: [{ isSignal: true, alias: "operator", required: false }] }], operand: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand", required: false }] }], operand2: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand2", required: false }] }], operatorChange: [{ type: i0.Output, args: ["operatorChange"] }], operandChange: [{ type: i0.Output, args: ["operandChange"] }], operand2Change: [{ type: i0.Output, args: ["operand2Change"] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], sortPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortPriority", required: false }] }], hasMultiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMultiSort", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], resetSort: [{ type: i0.Output, args: ["resetSort"] }], autosize: [{ type: i0.Output, args: ["autosize"] }], togglePin: [{ type: i0.Output, args: ["togglePin"] }], togglePinRight: [{ type: i0.Output, args: ["togglePinRight"] }], hide: [{ type: i0.Output, args: ["hide"] }], toggleGroup: [{ type: i0.Output, args: ["toggleGroup"] }], clearFilter: [{ type: i0.Output, args: ["clearFilter"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], toggleAll: [{ type: i0.Output, args: ["toggleAll"] }], toggleValue: [{ type: i0.Output, args: ["toggleValue"] }], aggregate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregate", required: false }] }], setAggregate: [{ type: i0.Output, args: ["setAggregate"] }] } });
+            args: [{ selector: 'agrid-column-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"position().x\"\n  [style.top.px]=\"position().y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <div class=\"ag-filter-menu-operators\">\n          <button\n            type=\"button\"\n            class=\"ag-filter-menu-operator-btn ag-filter-menu-operator-btn--clear\"\n            [class.ag-filter-menu-operator-btn--active]=\"!operator()\"\n            (click)=\"operatorChange.emit(null)\"\n          >{{ localeText().filterNoCondition }}</button>\n          @for (op of operatorOptions(); track op.value) {\n            <button\n              type=\"button\"\n              class=\"ag-filter-menu-operator-btn\"\n              [class.ag-filter-menu-operator-btn--active]=\"op.value === operator()\"\n              (click)=\"operatorChange.emit(op.value)\"\n            >{{ op.label }}</button>\n          }\n        </div>\n        @if (operator()) {\n          <label class=\"ag-filter-menu-operand-label\" for=\"agrid-filter-operand\">\n            {{ localeText().filterValue }}\n          </label>\n          <input\n            id=\"agrid-filter-operand\"\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;max-height:calc(100vh - 16px);font-size:13px;overflow-y:auto}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:120px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}.ag-filter-menu-operators{display:grid;grid-template-columns:1fr 1fr;gap:4px}.ag-filter-menu-operator-btn{min-height:26px;padding:3px 6px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:11px;line-height:1.15;text-align:left;cursor:pointer}.ag-filter-menu-operator-btn:hover,.ag-filter-menu-operator-btn:focus-visible{border-color:var(--agrid-color-accent-border);outline:none}.ag-filter-menu-operator-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-menu-operator-btn--clear{grid-column:1 / -1}.ag-filter-menu-operand-label{font-size:11px;color:var(--agrid-color-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], showColumnActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnActions", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], showValueFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueFilter", required: false }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], operator: [{ type: i0.Input, args: [{ isSignal: true, alias: "operator", required: false }] }], operand: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand", required: false }] }], operand2: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand2", required: false }] }], operatorChange: [{ type: i0.Output, args: ["operatorChange"] }], operandChange: [{ type: i0.Output, args: ["operandChange"] }], operand2Change: [{ type: i0.Output, args: ["operand2Change"] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], sortPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortPriority", required: false }] }], hasMultiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMultiSort", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], resetSort: [{ type: i0.Output, args: ["resetSort"] }], autosize: [{ type: i0.Output, args: ["autosize"] }], togglePin: [{ type: i0.Output, args: ["togglePin"] }], togglePinRight: [{ type: i0.Output, args: ["togglePinRight"] }], hide: [{ type: i0.Output, args: ["hide"] }], toggleGroup: [{ type: i0.Output, args: ["toggleGroup"] }], clearFilter: [{ type: i0.Output, args: ["clearFilter"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], toggleAll: [{ type: i0.Output, args: ["toggleAll"] }], toggleValue: [{ type: i0.Output, args: ["toggleValue"] }], aggregate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregate", required: false }] }], setAggregate: [{ type: i0.Output, args: ["setAggregate"] }] } });
 
 /** Owns column-menu state, filters, sorting, and menu-triggered column mutations. @internal */
 class AgridColumnMenuController {
@@ -1481,6 +1784,10 @@ class AgridColumnMenuController {
                     const allowed = new Set(filter.selectedValues);
                     indices = indices.filter(index => allowed.has(String(rows[index][field] ?? '')));
                 }
+                if (filter.operator && filter.operand != null && filter.operand !== '') {
+                    const filterCol = this.getColDef(field);
+                    indices = indices.filter(index => passesConditionFilter(filterCol, rows[index][field], filter));
+                }
             }
         }
         return new Set(indices.map(index => String(rows[index][menu.field] ?? '')));
@@ -1509,24 +1816,26 @@ class AgridColumnMenuController {
     getTextFilter(field) {
         return this.opts.control()?.getFilter(field).text ?? '';
     }
-    /** Returns the range-filter input type for a field, or `null` when not range-filterable. */
+    /** Returns the condition-filter input type for a filterable field. */
     getFilterType(field) {
-        const type = this.getColDef(field)?.type;
-        return type === 'number' || type === 'date' ? type : null;
+        const col = this.getColDef(field);
+        if (!col?.filterable || col.type === 'boolean')
+            return null;
+        return col.type === 'number' || col.type === 'date' ? col.type : 'text';
     }
-    /** Returns the typed range-filter operator for a field, or `null`. */
+    /** Returns the condition operator for a field, or `null`. */
     getFilterOperator(field) {
         return this.opts.control()?.getFilter(field).operator ?? null;
     }
-    /** Returns the primary range-filter operand for a field. */
+    /** Returns the primary condition operand for a field. */
     getFilterOperand(field) {
         return this.opts.control()?.getFilter(field).operand ?? '';
     }
-    /** Returns the secondary range-filter operand (used by `between`). */
+    /** Returns the secondary condition operand (used by `between`). */
     getFilterOperand2(field) {
         return this.opts.control()?.getFilter(field).operand2 ?? '';
     }
-    /** Sets the range-filter operator; clearing it (`null`) also drops the operands. */
+    /** Sets the condition operator; clearing it (`null`) also drops the operands. */
     setFilterOperator(field, operator) {
         const control = this.opts.control();
         if (!control)
@@ -1540,7 +1849,7 @@ class AgridColumnMenuController {
         }
         this.emitRangeServer(field, false);
     }
-    /** Sets the primary range-filter operand. */
+    /** Sets the primary condition operand. */
     setFilterOperand(field, value) {
         const control = this.opts.control();
         if (!control)
@@ -1549,7 +1858,7 @@ class AgridColumnMenuController {
         control.setRangeFilter(field, current.operator ?? 'eq', value, current.operand2 ?? '');
         this.emitRangeServer(field, true);
     }
-    /** Sets the secondary range-filter operand (used by `between`). */
+    /** Sets the secondary condition operand (used by `between`). */
     setFilterOperand2(field, value) {
         const control = this.opts.control();
         if (!control)
@@ -1559,7 +1868,7 @@ class AgridColumnMenuController {
         this.emitRangeServer(field, true);
     }
     /**
-     * In server-side filtering mode, emit a {@link FilterChangeEvent} carrying the current range
+     * In server-side filtering mode, emit a {@link FilterChangeEvent} carrying the current
      * condition so the host can refetch. Operand edits are debounced; operator changes are immediate.
      * No-op in client mode (the projection layer filters locally).
      */
@@ -1666,6 +1975,9 @@ class AgridColumnMenuController {
             if (previous.selectedValues !== null) {
                 control.setSelectedValues(field, previous.selectedValues);
             }
+            if (previous.operator) {
+                control.setRangeFilter(field, previous.operator, previous.operand ?? null, previous.operand2 ?? null);
+            }
             if (this.opts.serverSideFiltering()) {
                 this.opts.onSortChange({ field, direction: null });
             }
@@ -1982,7 +2294,7 @@ class AgridColumnReorderController {
         const root = header?.closest('.ag-wrapper') ?? header?.ownerDocument;
         if (!root)
             return [];
-        return [...root.querySelectorAll('.ag-header-cell[data-col-field]')]
+        return Array.from(root.querySelectorAll('.ag-header-cell[data-col-field]'))
             .map(element => {
             const field = element.dataset['colField'];
             const rect = element.getBoundingClientRect();
@@ -2155,13 +2467,15 @@ class AgridColumnStateService {
     constructor(opts) {
         this.opts = opts;
     }
+    columnsByField = computed(() => new Map(this.opts.colDefs().map(col => [col.field, col])), ...(ngDevMode ? [{ debugName: "columnsByField" }] : /* istanbul ignore next */ []));
+    visibleIndexByField = computed(() => new Map(this.opts.visibleColDefs().map((col, index) => [col.field, index])), ...(ngDevMode ? [{ debugName: "visibleIndexByField" }] : /* istanbul ignore next */ []));
     /** Finds a column definition by field name. */
     getColDef(field) {
-        return this.opts.colDefs().find(col => col.field === field);
+        return this.columnsByField().get(field);
     }
     /** Returns a field's zero-based index among visible columns. */
     getVisibleColIndex(field) {
-        return this.opts.visibleColDefs().findIndex(col => col.field === field);
+        return this.visibleIndexByField().get(field) ?? -1;
     }
     /** Converts a visible data-column index to a one-based ARIA index. */
     getAriaColIndex(colIndex) {
@@ -2376,23 +2690,37 @@ class AgridEditController {
     editingCell = signal(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
     currentDraft = signal(null, ...(ngDevMode ? [{ debugName: "currentDraft" }] : /* istanbul ignore next */ []));
     editSeedChar = signal('', ...(ngDevMode ? [{ debugName: "editSeedChar" }] : /* istanbul ignore next */ []));
+    /** Whether a newly focused text editor should select all text. */
+    selectTextOnEdit = signal(true, ...(ngDevMode ? [{ debugName: "selectTextOnEdit" }] : /* istanbul ignore next */ []));
     /** The active cell validation error, or `null` when the last commit was accepted. */
     validationError = signal(null, ...(ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []));
     constructor(opts) {
         this.opts = opts;
     }
-    /** Returns whether a column can be edited in the current grid state. */
-    isCellEditable(col) {
-        return !!col && !this.opts.readonlyGrid() && col.editable !== false;
+    /** Returns whether a cell can be edited in the current grid state. */
+    isCellEditable(col, originalIndex) {
+        if (!col || this.opts.readonlyGrid() || col.editable === false)
+            return false;
+        if (originalIndex === undefined || !col.cellReadonly)
+            return true;
+        const row = this.opts.dataSource().getRow(originalIndex);
+        if (!row)
+            return false;
+        return !col.cellReadonly({
+            row,
+            value: row[col.field],
+            column: col,
+            originalIndex,
+        });
     }
     /** Replaces the value currently staged by the active editor. */
     setDraft(value) {
         this.currentDraft.set(value);
     }
     /** Starts editing a cell, optionally seeded by a typed character. */
-    start(originalIndex, colIndex, seedChar) {
+    start(originalIndex, colIndex, seedChar, selectText = true) {
         const col = this.opts.visibleColDefs()[colIndex];
-        if (!this.isCellEditable(col))
+        if (!this.isCellEditable(col, originalIndex))
             return;
         this.validationError.set(null);
         const currentValue = this.opts.dataSource().getRow(originalIndex)[col.field];
@@ -2410,6 +2738,7 @@ class AgridEditController {
         }
         this.currentDraft.set(initialDraft);
         this.editSeedChar.set(seedChar);
+        this.selectTextOnEdit.set(selectText);
         this.editingCell.set({ rowIndex: originalIndex, colIndex });
         const displayIndex = this.opts.findDisplayIndex(originalIndex);
         if (displayIndex >= 0)
@@ -2430,6 +2759,10 @@ class AgridEditController {
             return true;
         }
         const row = this.opts.dataSource().getRow(position.rowIndex);
+        if (!this.isCellEditable(col, position.rowIndex)) {
+            this.cancel();
+            return true;
+        }
         const oldValue = row[col.field];
         const newValue = this.currentDraft();
         if (oldValue !== newValue) {
@@ -2459,7 +2792,7 @@ class AgridEditController {
      */
     setCellValue(rowIndex, colIndex, newValue) {
         const col = this.opts.visibleColDefs()[colIndex];
-        if (!this.isCellEditable(col))
+        if (!this.isCellEditable(col, rowIndex))
             return false;
         const row = this.opts.dataSource().getRow(rowIndex);
         const oldValue = row[col.field];
@@ -2529,6 +2862,7 @@ class AgridEditController {
     clearEditState() {
         this.editingCell.set(null);
         this.editSeedChar.set('');
+        this.selectTextOnEdit.set(true);
     }
 }
 
@@ -2543,15 +2877,17 @@ class AgridFindController {
         if (!query)
             return [];
         const cols = this.opts.visibleColDefs();
+        const rows = this.opts.dataSource().rows();
         const matches = [];
-        this.opts.filteredItems().forEach((item, displayIndex) => {
-            if (!isDataRowItem(item))
+        this.opts.filteredSortedIndices().forEach(rowIndex => {
+            const row = rows[rowIndex];
+            if (!row)
                 return;
             for (let colIndex = 0; colIndex < cols.length; colIndex++) {
                 const col = cols[colIndex];
-                const value = getDisplayForField(col, item.row[col.field], this.opts.locale()).toLowerCase();
+                const value = getDisplayForField(col, row[col.field], this.opts.locale()).toLowerCase();
                 if (value.includes(query)) {
-                    matches.push({ rowIndex: item.originalIndex, displayIndex, colIndex });
+                    matches.push({ rowIndex, colIndex });
                 }
             }
         });
@@ -2562,6 +2898,9 @@ class AgridFindController {
     }
     /** Opens the find panel. */
     show() {
+        this.opts.selectedCell.set(null);
+        this.opts.selectedRange.set(null);
+        this.activeIndex.set(-1);
         this.open.set(true);
     }
     /** Closes the find panel and returns focus to the grid. */
@@ -2569,11 +2908,10 @@ class AgridFindController {
         this.open.set(false);
         this.opts.focusGrid();
     }
-    /** Replaces the search query and selects its first match. */
+    /** Replaces the search query without moving focus away from the find input. */
     setQuery(value) {
         this.query.set(value);
         this.activeIndex.set(-1);
-        this.goToMatch(1);
     }
     /** Selects the next or previous match, wrapping at either end. */
     goToMatch(direction) {
@@ -2590,7 +2928,7 @@ class AgridFindController {
         const match = matches[next];
         this.opts.selectedRange.set(null);
         this.opts.selectedCell.set({ rowIndex: match.rowIndex, colIndex: match.colIndex });
-        this.opts.scrollToCell(match.displayIndex, match.colIndex);
+        this.opts.revealMatch(match.rowIndex, match.colIndex);
     }
     /** Returns whether a cell matches the current query. */
     isMatchCell(originalIndex, colIndex) {
@@ -2647,10 +2985,10 @@ class AgridFindPanelComponent {
             this.close.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridFindPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: AgridFindPanelComponent, isStandalone: true, selector: "agrid-find-panel", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, matchCount: { classPropertyName: "matchCount", publicName: "matchCount", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "queryChange", next: "next", previous: "previous", close: "close" }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ag-find-panel\" role=\"search\" (click)=\"$event.stopPropagation()\">\n  <input\n    #findInput\n    class=\"ag-find-input\"\n    [value]=\"query()\"\n    (input)=\"queryChange.emit($any($event.target).value)\"\n    (keydown)=\"onKeyDown($event)\"\n    [placeholder]=\"localeText().findPlaceholder\"\n    [attr.aria-label]=\"localeText().findPlaceholder\"\n  />\n  <span class=\"ag-find-count\" aria-live=\"polite\">{{ countLabel() }}</span>\n  <button class=\"ag-find-btn\" [title]=\"localeText().previous\" [attr.aria-label]=\"localeText().previous\"\n    (click)=\"previous.emit()\">\u2191</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().next\" [attr.aria-label]=\"localeText().next\"\n    (click)=\"next.emit()\">\u2193</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().close\" [attr.aria-label]=\"localeText().close\"\n    (click)=\"close.emit()\">\u2715</button>\n</div>\n", styles: [".ag-find-panel{position:absolute;top:8px;right:8px;z-index:1100;display:flex;align-items:center;gap:4px;padding:5px;background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:4px;box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-find-input{width:160px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px;box-sizing:border-box}.ag-find-input:focus{border-color:var(--agrid-color-accent)}.ag-find-count{min-width:46px;text-align:center;font-size:11px;color:var(--agrid-color-text-muted)}.ag-find-btn{width:24px;height:24px;border:1px solid transparent;border-radius:3px;background:none;color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:0}.ag-find-btn:hover{background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-border);color:var(--agrid-color-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridFindPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: AgridFindPanelComponent, isStandalone: true, selector: "agrid-find-panel", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, matchCount: { classPropertyName: "matchCount", publicName: "matchCount", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "queryChange", next: "next", previous: "previous", close: "close" }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ag-find-panel\" role=\"search\" (click)=\"$event.stopPropagation()\">\n  <input\n    #findInput\n    class=\"ag-find-input\"\n    [value]=\"query()\"\n    (input)=\"queryChange.emit($any($event.target).value)\"\n    (keydown)=\"onKeyDown($event)\"\n    [placeholder]=\"localeText().findPlaceholder\"\n    [attr.aria-label]=\"localeText().findPlaceholder\"\n  />\n  <span class=\"ag-find-count\" aria-live=\"polite\">{{ countLabel() }}</span>\n  <button class=\"ag-find-btn\" [title]=\"localeText().previous\" [attr.aria-label]=\"localeText().previous\"\n    (click)=\"previous.emit()\">\u2191</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().next\" [attr.aria-label]=\"localeText().next\"\n    (click)=\"next.emit()\">\u2193</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().close\" [attr.aria-label]=\"localeText().close\"\n    (click)=\"close.emit()\">\u2715</button>\n</div>\n", styles: [".ag-find-panel{position:absolute;top:8px;right:8px;z-index:1100;display:flex;align-items:center;gap:4px;padding:5px;background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:4px;box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-find-input{width:160px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px;box-sizing:border-box}.ag-find-input:focus{border-color:var(--agrid-color-accent)}.ag-find-count{min-width:46px;text-align:center;font-size:11px;color:var(--agrid-color-text-muted)}.ag-find-btn{width:24px;height:24px;border:1px solid transparent;border-radius:3px;background:none;color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:0}.ag-find-btn:hover{background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-border);color:var(--agrid-color-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridFindPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridFindPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid-find-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-find-panel\" role=\"search\" (click)=\"$event.stopPropagation()\">\n  <input\n    #findInput\n    class=\"ag-find-input\"\n    [value]=\"query()\"\n    (input)=\"queryChange.emit($any($event.target).value)\"\n    (keydown)=\"onKeyDown($event)\"\n    [placeholder]=\"localeText().findPlaceholder\"\n    [attr.aria-label]=\"localeText().findPlaceholder\"\n  />\n  <span class=\"ag-find-count\" aria-live=\"polite\">{{ countLabel() }}</span>\n  <button class=\"ag-find-btn\" [title]=\"localeText().previous\" [attr.aria-label]=\"localeText().previous\"\n    (click)=\"previous.emit()\">\u2191</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().next\" [attr.aria-label]=\"localeText().next\"\n    (click)=\"next.emit()\">\u2193</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().close\" [attr.aria-label]=\"localeText().close\"\n    (click)=\"close.emit()\">\u2715</button>\n</div>\n", styles: [".ag-find-panel{position:absolute;top:8px;right:8px;z-index:1100;display:flex;align-items:center;gap:4px;padding:5px;background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:4px;box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-find-input{width:160px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px;box-sizing:border-box}.ag-find-input:focus{border-color:var(--agrid-color-accent)}.ag-find-count{min-width:46px;text-align:center;font-size:11px;color:var(--agrid-color-text-muted)}.ag-find-btn{width:24px;height:24px;border:1px solid transparent;border-radius:3px;background:none;color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:0}.ag-find-btn:hover{background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-border);color:var(--agrid-color-text)}\n"] }]
         }], propDecorators: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], matchCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchCount", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], next: [{ type: i0.Output, args: ["next"] }], previous: [{ type: i0.Output, args: ["previous"] }], close: [{ type: i0.Output, args: ["close"] }], findInput: [{ type: i0.ViewChild, args: ['findInput', { isSignal: true }] }] } });
@@ -2814,7 +3152,7 @@ class AgridNavigationController {
     }
     /** Handles grid-level navigation, editing, history, find, and add-row shortcuts. */
     handleKeyDown(event) {
-        if (event.target?.closest('.ag-sidebar, .ag-filter-input, .ag-filter-menu'))
+        if (event.target?.closest('.ag-sidebar, .ag-filter-input, .ag-filter-menu, .ag-menu-bar'))
             return;
         if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === 'f') {
             event.preventDefault();
@@ -2833,6 +3171,16 @@ class AgridNavigationController {
                 return;
             }
         }
+        const sel = this.opts.selectedCell();
+        if (event.key === 'Enter'
+            && (event.ctrlKey || event.metaKey)
+            && !event.altKey
+            && !event.shiftKey
+            && sel
+            && this.opts.toggleTreeCell(sel.rowIndex, sel.colIndex)) {
+            event.preventDefault();
+            return;
+        }
         if (this.opts.editingCell()) {
             switch (event.key) {
                 case 'Tab':
@@ -2843,7 +3191,7 @@ class AgridNavigationController {
                 case 'Enter':
                     event.preventDefault();
                     if (this.opts.commitEdit())
-                        this.moveSelection(1, 0);
+                        this.applyEnterEditAction(event.shiftKey);
                     break;
                 case 'Escape':
                     event.preventDefault();
@@ -2853,7 +3201,6 @@ class AgridNavigationController {
             }
             return;
         }
-        const sel = this.opts.selectedCell();
         const isOnAddRow = this.opts.allowAddRows()
             && !this.opts.autoAddRows()
             && sel?.rowIndex === this.opts.dataSource().length;
@@ -2879,6 +3226,14 @@ class AgridNavigationController {
                 this.moveSelection(0, event.shiftKey ? -1 : 1);
                 break;
             case 'Enter':
+                event.preventDefault();
+                if (sel) {
+                    if (isOnAddRow)
+                        this.addRowAndSelect();
+                    else
+                        this.opts.startEdit(sel.rowIndex, sel.colIndex, '');
+                }
+                break;
             case 'F2':
                 event.preventDefault();
                 if (sel) {
@@ -2897,6 +3252,63 @@ class AgridNavigationController {
                 }
         }
     }
+    applyEnterEditAction(reverse) {
+        switch (this.opts.enterEditAction()) {
+            case 'nextColumn':
+                this.moveToNextEditableColumn(reverse ? -1 : 1);
+                break;
+            case 'nextRow':
+                this.moveSelection(reverse ? -1 : 1, 0);
+                break;
+            case 'nothing':
+                this.opts.focusGrid();
+                break;
+        }
+    }
+    moveToNextEditableColumn(direction) {
+        const items = this.opts.filteredItems();
+        const cols = this.opts.visibleColDefs();
+        const selected = this.opts.selectedCell();
+        if (!selected || items.length === 0 || cols.length === 0) {
+            this.opts.focusGrid();
+            return;
+        }
+        const currentDisplayIndex = this.selectedDisplayIndex();
+        if (currentDisplayIndex < 0) {
+            this.opts.focusGrid();
+            return;
+        }
+        let displayIndex = currentDisplayIndex;
+        let colIndex = selected.colIndex + direction;
+        while (displayIndex >= 0 && displayIndex < items.length) {
+            while (colIndex >= 0 && colIndex < cols.length) {
+                const item = items[displayIndex];
+                const col = cols[colIndex];
+                if (isDataRowItem(item) && this.opts.isCellEditable(col, item.originalIndex)) {
+                    this.opts.selectedRange.set(null);
+                    this.opts.selectedCell.set({ rowIndex: item.originalIndex, colIndex });
+                    this.scrollToKeepVisible(displayIndex, colIndex);
+                    if (this.isTextColumn(col))
+                        this.opts.startEdit(item.originalIndex, colIndex, '', false);
+                    else
+                        this.opts.focusGrid();
+                    return;
+                }
+                colIndex += direction;
+            }
+            displayIndex += direction;
+            colIndex = direction > 0 ? 0 : cols.length - 1;
+            while (displayIndex >= 0
+                && displayIndex < items.length
+                && isGroupHeaderItem(items[displayIndex])) {
+                displayIndex += direction;
+            }
+        }
+        this.opts.focusGrid();
+    }
+    isTextColumn(col) {
+        return !col.values?.length && (col.type === undefined || col.type === 'text');
+    }
     /** Finds a data row's current index in the projected display items. */
     findDisplayIndex(originalIndex) {
         return this.opts.filteredItems().findIndex(item => isDataRowItem(item) && item.originalIndex === originalIndex);
@@ -3046,6 +3458,10 @@ class AgridPresentationService {
     getCellClass(col, value, row) {
         return col.cellClass?.({ value, row }) ?? '';
     }
+    /** Resolves dynamic CSS classes configured for a whole data row. */
+    getRowClass(row, index) {
+        return this.opts.getRowClass?.()?.({ row, index }) ?? '';
+    }
     /** Returns the compact label for a built-in aggregate. */
     getAggregateLabel(col) {
         const aggregate = this.opts.control()?.aggregates()[col.field] ?? col.aggregate;
@@ -3085,6 +3501,91 @@ class AgridPresentationService {
     }
 }
 
+/** Internal renderer for provider-configured grid commands and dropdown items. */
+class AgridMenuBarComponent {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    context = input.required(...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    label = input('Actions', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    openItemId = input(null, ...(ngDevMode ? [{ debugName: "openItemId" }] : /* istanbul ignore next */ []));
+    action = output();
+    openItemIdChange = output();
+    resolveState(state, fallback) {
+        if (typeof state === 'function')
+            return state(this.context());
+        return state ?? fallback;
+    }
+    isActive(item) {
+        return this.resolveState(item.active, false);
+    }
+    isDisabled(item) {
+        return this.resolveState(item.disabled, false);
+    }
+    visibleChildren(item) {
+        return (item.items ?? []).filter(child => this.resolveState(child.visible, true));
+    }
+    runAction(event, item) {
+        event.stopPropagation();
+        if (!this.resolveState(item.visible, true) || this.isDisabled(item))
+            return;
+        this.action.emit(item.id);
+        this.openItemIdChange.emit(null);
+    }
+    toggleMenu(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDisabled(item) || this.visibleChildren(item).length === 0)
+            return;
+        this.openItemIdChange.emit(this.openItemId() === item.id ? null : item.id);
+    }
+    onTriggerKeydown(event, item) {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDisabled(item) || this.visibleChildren(item).length === 0)
+            return;
+        this.openItemIdChange.emit(item.id);
+        const group = event.currentTarget.closest('.ag-menu-bar-group');
+        setTimeout(() => {
+            const enabled = group?.querySelectorAll('.ag-menu-bar-dropdown [role="menuitem"]:not(:disabled)');
+            const target = event.key === 'ArrowUp' ? enabled?.[enabled.length - 1] : enabled?.[0];
+            target?.focus();
+        });
+    }
+    onMenuKeydown(event) {
+        const menu = event.currentTarget;
+        const items = Array.from(menu.querySelectorAll('[role="menuitem"]:not(:disabled)'));
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.openItemIdChange.emit(null);
+            menu.closest('.ag-menu-bar-group')
+                ?.querySelector('.ag-menu-bar-trigger')
+                ?.focus();
+            return;
+        }
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || items.length === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const current = items.indexOf(event.target);
+        const next = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? items.length - 1
+                : event.key === 'ArrowDown'
+                    ? (current + 1 + items.length) % items.length
+                    : (current - 1 + items.length) % items.length;
+        items[next].focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridMenuBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridMenuBarComponent, isStandalone: true, selector: "agrid-menu-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, openItemId: { classPropertyName: "openItemId", publicName: "openItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", openItemIdChange: "openItemIdChange" }, ngImport: i0, template: "<div class=\"ag-menu-bar\" role=\"toolbar\" [attr.aria-label]=\"label()\">\n  @for (item of items(); track item.id) {\n    @let children = visibleChildren(item);\n    <div class=\"ag-menu-bar-group\" [attr.data-menu-id]=\"item.id\">\n      <button type=\"button\" class=\"ag-menu-bar-button\"\n        [class.ag-menu-bar-button--active]=\"isActive(item)\"\n        [class.ag-menu-bar-button--split]=\"children.length > 0\"\n        [disabled]=\"isDisabled(item)\"\n        [attr.aria-pressed]=\"item.active !== undefined ? isActive(item) : null\"\n        (click)=\"runAction($event, item)\">\n        @if (item.icon) {\n          <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n        }\n        <span class=\"ag-menu-bar-label\">{{ item.label }}</span>\n      </button>\n      @if (children.length > 0) {\n        <button type=\"button\" class=\"ag-menu-bar-trigger\"\n          [class.ag-menu-bar-trigger--open]=\"openItemId() === item.id\"\n          [attr.aria-label]=\"item.label + ': ' + label()\"\n          [attr.aria-expanded]=\"openItemId() === item.id\" aria-haspopup=\"menu\"\n          [disabled]=\"isDisabled(item)\"\n          (click)=\"toggleMenu($event, item)\"\n          (keydown)=\"onTriggerKeydown($event, item)\">&#9662;</button>\n        @if (openItemId() === item.id) {\n          <div class=\"ag-menu-bar-dropdown\" role=\"menu\" [attr.aria-label]=\"item.label\"\n            (click)=\"$event.stopPropagation()\" (keydown)=\"onMenuKeydown($event)\">\n            @for (child of children; track child.id) {\n              <button type=\"button\" class=\"ag-menu-bar-dropdown-item\" role=\"menuitem\"\n                [class.ag-menu-bar-dropdown-item--active]=\"isActive(child)\"\n                [disabled]=\"isDisabled(child)\"\n                [attr.aria-current]=\"isActive(child) ? 'true' : null\"\n                (click)=\"runAction($event, child)\">\n                <span class=\"ag-menu-bar-dropdown-check\" aria-hidden=\"true\">{{ isActive(child) ? '&#10003;' : '' }}</span>\n                @if (child.icon) {\n                  <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ child.icon }}</span>\n                }\n                <span class=\"ag-menu-bar-label\">{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0}.ag-menu-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.ag-menu-bar-group{position:relative;display:inline-flex;align-items:stretch}.ag-menu-bar-button,.ag-menu-bar-trigger{display:inline-flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-button{gap:6px;min-width:0;padding:0 10px;border-radius:4px;font-weight:500;white-space:nowrap}.ag-menu-bar-button--split{border-radius:4px 0 0 4px}.ag-menu-bar-trigger{width:28px;padding:0;margin-left:-1px;border-radius:0 4px 4px 0;color:var(--agrid-color-text-muted);font-size:10px}.ag-menu-bar-button--active,.ag-menu-bar-trigger--open{position:relative;z-index:1;border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-button:focus-visible,.ag-menu-bar-trigger:focus-visible,.ag-menu-bar-dropdown-item:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-menu-bar-button:active:not(:disabled),.ag-menu-bar-trigger:active:not(:disabled),.ag-menu-bar-dropdown-item:active:not(:disabled){transform:scale(.97)}.ag-menu-bar-button:disabled,.ag-menu-bar-trigger:disabled,.ag-menu-bar-dropdown-item:disabled{opacity:.48;cursor:not-allowed}.ag-menu-bar-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:14px;line-height:1}.ag-menu-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-menu-bar-dropdown{position:absolute;z-index:12;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;min-width:184px;max-width:min(280px,calc(100vw - 24px));padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top left}.ag-menu-bar-group:last-child .ag-menu-bar-dropdown{right:0;left:auto;transform-origin:top right}.ag-menu-bar-dropdown-item{display:flex;align-items:center;gap:7px;width:100%;min-height:30px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-dropdown-item--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-dropdown-check{flex:0 0 12px;color:var(--agrid-color-accent);font-size:11px;font-weight:700;text-align:center}@media(hover:hover)and (pointer:fine){.ag-menu-bar-button:hover:not(:disabled),.ag-menu-bar-trigger:hover:not(:disabled),.ag-menu-bar-dropdown-item:hover:not(:disabled){background:var(--agrid-color-bg-muted)}.ag-menu-bar-button--active:hover:not(:disabled),.ag-menu-bar-trigger--open:hover:not(:disabled),.ag-menu-bar-dropdown-item--active:hover:not(:disabled){background:var(--agrid-color-accent-subtle)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridMenuBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'agrid-menu-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-menu-bar\" role=\"toolbar\" [attr.aria-label]=\"label()\">\n  @for (item of items(); track item.id) {\n    @let children = visibleChildren(item);\n    <div class=\"ag-menu-bar-group\" [attr.data-menu-id]=\"item.id\">\n      <button type=\"button\" class=\"ag-menu-bar-button\"\n        [class.ag-menu-bar-button--active]=\"isActive(item)\"\n        [class.ag-menu-bar-button--split]=\"children.length > 0\"\n        [disabled]=\"isDisabled(item)\"\n        [attr.aria-pressed]=\"item.active !== undefined ? isActive(item) : null\"\n        (click)=\"runAction($event, item)\">\n        @if (item.icon) {\n          <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n        }\n        <span class=\"ag-menu-bar-label\">{{ item.label }}</span>\n      </button>\n      @if (children.length > 0) {\n        <button type=\"button\" class=\"ag-menu-bar-trigger\"\n          [class.ag-menu-bar-trigger--open]=\"openItemId() === item.id\"\n          [attr.aria-label]=\"item.label + ': ' + label()\"\n          [attr.aria-expanded]=\"openItemId() === item.id\" aria-haspopup=\"menu\"\n          [disabled]=\"isDisabled(item)\"\n          (click)=\"toggleMenu($event, item)\"\n          (keydown)=\"onTriggerKeydown($event, item)\">&#9662;</button>\n        @if (openItemId() === item.id) {\n          <div class=\"ag-menu-bar-dropdown\" role=\"menu\" [attr.aria-label]=\"item.label\"\n            (click)=\"$event.stopPropagation()\" (keydown)=\"onMenuKeydown($event)\">\n            @for (child of children; track child.id) {\n              <button type=\"button\" class=\"ag-menu-bar-dropdown-item\" role=\"menuitem\"\n                [class.ag-menu-bar-dropdown-item--active]=\"isActive(child)\"\n                [disabled]=\"isDisabled(child)\"\n                [attr.aria-current]=\"isActive(child) ? 'true' : null\"\n                (click)=\"runAction($event, child)\">\n                <span class=\"ag-menu-bar-dropdown-check\" aria-hidden=\"true\">{{ isActive(child) ? '&#10003;' : '' }}</span>\n                @if (child.icon) {\n                  <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ child.icon }}</span>\n                }\n                <span class=\"ag-menu-bar-label\">{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0}.ag-menu-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.ag-menu-bar-group{position:relative;display:inline-flex;align-items:stretch}.ag-menu-bar-button,.ag-menu-bar-trigger{display:inline-flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-button{gap:6px;min-width:0;padding:0 10px;border-radius:4px;font-weight:500;white-space:nowrap}.ag-menu-bar-button--split{border-radius:4px 0 0 4px}.ag-menu-bar-trigger{width:28px;padding:0;margin-left:-1px;border-radius:0 4px 4px 0;color:var(--agrid-color-text-muted);font-size:10px}.ag-menu-bar-button--active,.ag-menu-bar-trigger--open{position:relative;z-index:1;border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-button:focus-visible,.ag-menu-bar-trigger:focus-visible,.ag-menu-bar-dropdown-item:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-menu-bar-button:active:not(:disabled),.ag-menu-bar-trigger:active:not(:disabled),.ag-menu-bar-dropdown-item:active:not(:disabled){transform:scale(.97)}.ag-menu-bar-button:disabled,.ag-menu-bar-trigger:disabled,.ag-menu-bar-dropdown-item:disabled{opacity:.48;cursor:not-allowed}.ag-menu-bar-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:14px;line-height:1}.ag-menu-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-menu-bar-dropdown{position:absolute;z-index:12;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;min-width:184px;max-width:min(280px,calc(100vw - 24px));padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top left}.ag-menu-bar-group:last-child .ag-menu-bar-dropdown{right:0;left:auto;transform-origin:top right}.ag-menu-bar-dropdown-item{display:flex;align-items:center;gap:7px;width:100%;min-height:30px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-dropdown-item--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-dropdown-check{flex:0 0 12px;color:var(--agrid-color-accent);font-size:11px;font-weight:700;text-align:center}@media(hover:hover)and (pointer:fine){.ag-menu-bar-button:hover:not(:disabled),.ag-menu-bar-trigger:hover:not(:disabled),.ag-menu-bar-dropdown-item:hover:not(:disabled){background:var(--agrid-color-bg-muted)}.ag-menu-bar-button--active:hover:not(:disabled),.ag-menu-bar-trigger--open:hover:not(:disabled),.ag-menu-bar-dropdown-item--active:hover:not(:disabled){background:var(--agrid-color-accent-subtle)}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], openItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemId", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], openItemIdChange: [{ type: i0.Output, args: ["openItemIdChange"] }] } });
+
 /**
  * Signal-based container for mutable grid UI state such as column widths and active filters.
  *
@@ -3452,7 +3953,8 @@ class AgridControl {
         }));
     }
     /**
-     * Set the typed range filter for a `number` / `date` column.
+     * Set a column condition filter. Text columns support string operators while number/date
+     * columns support comparison operators.
      * Pass `operator: null` (or an empty `operand`) to clear it. `operand2` is only used
      * by the `'between'` operator.
      */
@@ -3755,12 +4257,16 @@ class AgridProvider {
     filterDebounceMs;
     /** Whether the global quick-filter box is shown above the grid. */
     enableQuickFilter;
+    /** Commands rendered in the optional menu bar above the column headers. */
+    menuBarItems;
     /** Enabled sorting mode. */
     sortOption;
     /** Toggle auto-add-rows without recreating the provider. @default signal(false) */
     autoAddRows;
     /** Enabled row-selection mode. */
     rowSelection;
+    /** Behavior after pressing Enter while an inline cell editor is active. */
+    enterEditAction;
     /** Optional description shown beside each group heading. */
     groupDescription;
     /** Actions available from group headers. */
@@ -3777,6 +4283,16 @@ class AgridProvider {
     emptyText;
     /** Whether edits are restricted to the sidebar editor. */
     useSidebarEditor;
+    /** Optional callback returning CSS classes for a whole data row. */
+    getRowClass;
+    /** Optional callback designating rows pinned to the top or bottom of the body. */
+    pinRow;
+    /** Whether master/detail expandable detail rows are enabled. */
+    masterDetail;
+    /** Returns the sanitized HTML rendered inside an expanded detail panel. */
+    detailRenderer;
+    /** Fixed height in pixels of an expanded detail panel row. */
+    detailRowHeight;
     /** Toggle the loading overlay without recreating the provider. @default signal(false) */
     loading;
     /** Toggle readonly mode without recreating the provider. @default signal(false) */
@@ -3801,8 +4317,10 @@ class AgridProvider {
         this.serverSideFiltering = config.serverSideFiltering ?? false;
         this.filterDebounceMs = Math.max(0, config.filterDebounceMs ?? 300);
         this.enableQuickFilter = config.enableQuickFilter ?? false;
+        this.menuBarItems = config.menuBarItems ?? [];
         this.sortOption = config.sortOption ?? 'multi';
         this.rowSelection = config.rowSelection ?? 'none';
+        this.enterEditAction = config.enterEditAction ?? 'nextRow';
         this.groupDescription = config.groupDescription ?? null;
         this.groupActions = config.groupActions ?? [];
         this.cellMenuItems = config.cellMenuItems ?? [];
@@ -3813,6 +4331,11 @@ class AgridProvider {
         this.loading = signal(config.loading ?? false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.readonlyGrid = signal(config.readonly ?? false, ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
         this.useSidebarEditor = config.useSidebarEditor ?? false;
+        this.getRowClass = config.getRowClass;
+        this.pinRow = config.pinRow;
+        this.masterDetail = config.masterDetail ?? false;
+        this.detailRenderer = config.detailRenderer;
+        this.detailRowHeight = config.detailRowHeight ?? 200;
     }
     /** Returns the current reactive row array. */
     getGridData() {
@@ -3852,6 +4375,41 @@ class AgridProjectionModel {
     }, ...(ngDevMode ? [{ debugName: "filteredSortedIndices" }] : /* istanbul ignore next */ []));
     /** Total filtered row count, unaffected by client-side pagination. */
     filteredRowCount = computed(() => this.filteredSortedIndices().length, ...(ngDevMode ? [{ debugName: "filteredRowCount" }] : /* istanbul ignore next */ []));
+    /** Whether row pinning is active: a `pinRow` callback is supplied and not in tree mode. */
+    pinningActive = computed(() => !!this.opts.pinRow?.() && !this.opts.treeConfig(), ...(ngDevMode ? [{ debugName: "pinningActive" }] : /* istanbul ignore next */ []));
+    /**
+     * Partitions the filtered+sorted indices into top-pinned, bottom-pinned, and a body set.
+     * Pinned rows keep their real source index, so editing/selection over them is unchanged.
+     */
+    partitionPinned = computed(() => {
+        if (!this.pinningActive())
+            return { top: [], bottom: [], bodySet: new Set() };
+        const rows = this.opts.dataSource().rows();
+        const pinRow = this.opts.pinRow();
+        const top = [];
+        const bottom = [];
+        const bodySet = new Set();
+        for (const index of this.filteredSortedIndices()) {
+            const where = pinRow(rows[index], index);
+            if (where === 'top')
+                top.push(index);
+            else if (where === 'bottom')
+                bottom.push(index);
+            else
+                bodySet.add(index);
+        }
+        return { top, bottom, bodySet };
+    }, ...(ngDevMode ? [{ debugName: "partitionPinned" }] : /* istanbul ignore next */ []));
+    /** Top-pinned rows as data-row items, in filtered+sorted order. */
+    pinnedTopItems = computed(() => {
+        const rows = this.opts.dataSource().rows();
+        return this.partitionPinned().top.map(originalIndex => ({ row: rows[originalIndex], originalIndex }));
+    }, ...(ngDevMode ? [{ debugName: "pinnedTopItems" }] : /* istanbul ignore next */ []));
+    /** Bottom-pinned rows as data-row items, in filtered+sorted order. */
+    pinnedBottomItems = computed(() => {
+        const rows = this.opts.dataSource().rows();
+        return this.partitionPinned().bottom.map(originalIndex => ({ row: rows[originalIndex], originalIndex }));
+    }, ...(ngDevMode ? [{ debugName: "pinnedBottomItems" }] : /* istanbul ignore next */ []));
     /** All source indices in active sort order, ignoring filters. Used for tree ancestor ordering. */
     allSortedIndices = computed(() => {
         const rows = this.opts.dataSource().rows();
@@ -3904,6 +4462,11 @@ class AgridProjectionModel {
             const filters = control?.filters() ?? {};
             const filterActive = !this.opts.serverSideFiltering()
                 && Object.values(filters).some(f => f.text || f.selectedValues !== null);
+            if (isPathTreeConfig(treeConfig)) {
+                const items = this.appendTreeDetailItems(buildPathTreeItems(rows, indices, treeConfig, expandedIds, filterActive && treeConfig.keepAncestorsOnFilter !== false), rows, treeConfig);
+                this.appendAddRow(items);
+                return items;
+            }
             if (filterActive && treeConfig.keepAncestorsOnFilter !== false) {
                 const { getId, getParentId } = treeConfig;
                 const idToIndex = new Map();
@@ -3922,14 +4485,19 @@ class AgridProjectionModel {
                     }
                 }
                 const ordered = this.allSortedIndices().filter(index => visible.has(index));
-                const items = buildTreeItems(rows, ordered, treeConfig, expandedIds, forced);
+                const items = this.appendTreeDetailItems(buildTreeItems(rows, ordered, treeConfig, expandedIds, forced), rows, treeConfig);
                 this.appendAddRow(items);
                 return items;
             }
-            const items = buildTreeItems(rows, indices, treeConfig, expandedIds);
+            const items = this.appendTreeDetailItems(buildTreeItems(rows, indices, treeConfig, expandedIds), rows, treeConfig);
             this.appendAddRow(items);
             return items;
         }
+        // Pull pinned rows out of the body; they render in fixed top/bottom containers instead.
+        if (this.pinningActive()) {
+            const bodySet = this.partitionPinned().bodySet;
+            indices = indices.filter(index => bodySet.has(index));
+        }
         if (control) {
             const groupField = control.groupByField();
             const pageSize = control.pageSize();
@@ -3952,10 +4520,15 @@ class AgridProjectionModel {
                 return items;
             }
         }
-        const items = indices.map(originalIndex => ({
-            row: rows[originalIndex],
-            originalIndex,
-        }));
+        // Flat mode: optionally interleave a master/detail panel item after each expanded row.
+        const expandedDetail = this.opts.masterDetail?.() ? this.opts.expandedDetailIds?.() : null;
+        const items = [];
+        for (const originalIndex of indices) {
+            const row = rows[originalIndex];
+            items.push({ row, originalIndex });
+            if (expandedDetail?.has(originalIndex))
+                items.push({ detailFor: originalIndex, row });
+        }
         this.appendAddRow(items);
         return items;
     }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
@@ -3975,6 +4548,29 @@ class AgridProjectionModel {
             .map(field => [field, filters[field]])
             .filter(([, filter]) => !!filter?.sort);
     }
+    appendTreeDetailItems(items, rows, treeConfig) {
+        const expandedDetail = this.opts.masterDetail?.() ? this.opts.expandedDetailIds?.() : null;
+        if (!expandedDetail?.size)
+            return items;
+        const parentIds = !isPathTreeConfig(treeConfig)
+            ? new Set(rows
+                .map(row => treeConfig.getParentId(row))
+                .filter((id) => id !== null && id !== undefined))
+            : new Set();
+        const result = [];
+        for (const item of items) {
+            result.push(item);
+            if (item
+                && typeof item === 'object'
+                && 'originalIndex' in item
+                && (isPathTreeConfig(treeConfig)
+                    || !parentIds.has(treeConfig.getId(item.row)))
+                && expandedDetail.has(item.originalIndex)) {
+                result.push({ detailFor: item.originalIndex, row: item.row });
+            }
+        }
+        return result;
+    }
     appendAddRow(items) {
         if (this.opts.allowAddRows() && !this.opts.autoAddRows())
             items.push(null);
@@ -4109,7 +4705,7 @@ class AgridRangeController {
                 if (insideSource)
                     continue;
                 const col = cols[colIndex];
-                if (!col || !this.opts.isCellEditable(col))
+                if (!col || !this.opts.isCellEditable(col, item.originalIndex))
                     continue;
                 const sourceRowIndex = rowOffset % sourceValues.length;
                 const sourceRowValues = sourceValues[sourceRowIndex];
@@ -4492,6 +5088,8 @@ class AgridSidebarController {
         const index = this.opts.selectedRowIndex();
         if (index === null)
             return;
+        if (!this.opts.isCellEditable(col, index))
+            return;
         let newValue = stringValue;
         if (col.type === 'number') {
             newValue = stringValue === '' ? null : Number(stringValue);
@@ -4541,11 +5139,13 @@ class AgridSidebarComponent {
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     headerGroups = input([], ...(ngDevMode ? [{ debugName: "headerGroups" }] : /* istanbul ignore next */ []));
     row = input(null, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    rowIndex = input(null, ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
     hiddenColumns = input(new Set(), ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
     locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     localeText = input(AGRID_LOCALE_TEXT.en, ...(ngDevMode ? [{ debugName: "localeText" }] : /* istanbul ignore next */ []));
     readonlyGrid = input(false, ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
     useSidebarEditor = input(false, ...(ngDevMode ? [{ debugName: "useSidebarEditor" }] : /* istanbul ignore next */ []));
+    isCellEditable = input(col => col.editable !== false, ...(ngDevMode ? [{ debugName: "isCellEditable" }] : /* istanbul ignore next */ []));
     /** Per-field validation messages (`field → message`) for rejected detail edits. */
     errors = input({}, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     close = output();
@@ -4593,6 +5193,32 @@ class AgridSidebarComponent {
             visible: event.target.checked,
         });
     }
+    /** Apply the row-aware input mask while preserving the sidebar's change-to-commit behavior. */
+    onDetailMaskInput(field, event) {
+        const input = event.target;
+        const row = this.row();
+        if (row && field.col.inputMask && field.col.type !== 'number' && field.col.type !== 'date') {
+            const mask = field.col.inputMask({
+                row,
+                value: field.rawValue,
+                column: field.col,
+            });
+            if (mask && !matchesInputMask(input.value, mask)) {
+                input.value = input.dataset['agridMaskValue'] ?? field.inputValue;
+                return;
+            }
+            input.dataset['agridMaskValue'] = input.value;
+        }
+    }
+    /** Forward the final sidebar value after native change/blur. */
+    onDetailChange(field, event) {
+        this.onDetailMaskInput(field, event);
+        this.detailEdit.emit({
+            field: field.col.field,
+            col: field.col,
+            value: event.target.value,
+        });
+    }
     detailFields = computed(() => {
         const row = this.row();
         if (!row)
@@ -4600,6 +5226,7 @@ class AgridSidebarComponent {
         const locale = this.locale();
         const readonlyGrid = this.readonlyGrid();
         const hiddenColumns = this.hiddenColumns();
+        const rowIndex = this.rowIndex();
         return this.columns().map(col => {
             const rawValue = row[col.field];
             let inputValue = String(rawValue ?? '');
@@ -4612,18 +5239,160 @@ class AgridSidebarComponent {
                 rawValue,
                 inputValue,
                 hidden: hiddenColumns.has(col.field),
-                editable: !readonlyGrid && col.editable !== false,
+                editable: !readonlyGrid && rowIndex !== null && this.isCellEditable()(col, rowIndex),
                 col,
             };
         });
     }, ...(ngDevMode ? [{ debugName: "detailFields" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridSidebarComponent, isStandalone: true, selector: "agrid-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, readonlyGrid: { classPropertyName: "readonlyGrid", publicName: "readonlyGrid", isSignal: true, isRequired: false, transformFunction: null }, useSidebarEditor: { classPropertyName: "useSidebarEditor", publicName: "useSidebarEditor", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", tabChange: "tabChange", toggleColumn: "toggleColumn", toggleColumnGroup: "toggleColumnGroup", detailEdit: "detailEdit", save: "save" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if ((field.editable || useSidebarEditor()) && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable || useSidebarEditor()) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridSidebarComponent, isStandalone: true, selector: "agrid-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, readonlyGrid: { classPropertyName: "readonlyGrid", publicName: "readonlyGrid", isSignal: true, isRequired: false, transformFunction: null }, useSidebarEditor: { classPropertyName: "useSidebarEditor", publicName: "useSidebarEditor", isSignal: true, isRequired: false, transformFunction: null }, isCellEditable: { classPropertyName: "isCellEditable", publicName: "isCellEditable", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", tabChange: "tabChange", toggleColumn: "toggleColumn", toggleColumnGroup: "toggleColumnGroup", detailEdit: "detailEdit", save: "save" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if (field.editable && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (input)=\"onDetailMaskInput(field, $event)\"\n                (change)=\"onDetailChange(field, $event)\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'agrid-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if ((field.editable || useSidebarEditor()) && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable || useSidebarEditor()) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"] }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], readonlyGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyGrid", required: false }] }], useSidebarEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSidebarEditor", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], toggleColumn: [{ type: i0.Output, args: ["toggleColumn"] }], toggleColumnGroup: [{ type: i0.Output, args: ["toggleColumnGroup"] }], detailEdit: [{ type: i0.Output, args: ["detailEdit"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+            args: [{ selector: 'agrid-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if (field.editable && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (input)=\"onDetailMaskInput(field, $event)\"\n                (change)=\"onDetailChange(field, $event)\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], readonlyGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyGrid", required: false }] }], useSidebarEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSidebarEditor", required: false }] }], isCellEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCellEditable", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], toggleColumn: [{ type: i0.Output, args: ["toggleColumn"] }], toggleColumnGroup: [{ type: i0.Output, args: ["toggleColumnGroup"] }], detailEdit: [{ type: i0.Output, args: ["detailEdit"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+
+/** Pixels rendered above and below the viewport so scrolling does not reveal blank rows. */
+const BUFFER_PX = 200;
+/**
+ * A {@link VirtualScrollStrategy} that supports a different height per item instead of the single
+ * fixed `itemSize` used by CDK's {@link FixedSizeVirtualScrollStrategy}.
+ *
+ * Item heights are supplied as a flat array (one entry per virtual item) and converted into a
+ * prefix-sum offset table, so any row — a normal data row or a tall master/detail panel — can have
+ * its own height while scroll position math stays O(log n) via binary search.
+ *
+ * When every item shares the same height (the common case with no detail rows open) the behavior
+ * is equivalent to the fixed-size strategy, so the default code path is regression-safe.
+ * @internal
+ */
+class AgridVariableRowSizeStrategy {
+    viewport = null;
+    sizes = [];
+    /** Cumulative offsets; `offsets[i]` is the top of item `i`, `offsets[n]` is the total size. */
+    offsets = [0];
+    indexChange = new Subject();
+    scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
+    attach(viewport) {
+        this.viewport = viewport;
+        this.updateTotalContentSize();
+        this.updateRenderedRange();
+    }
+    detach() {
+        this.indexChange.complete();
+        this.viewport = null;
+    }
+    /** Replace the per-item heights and re-measure. Called by the directive when inputs change. */
+    updateItemSizes(sizes) {
+        this.sizes = sizes;
+        const offsets = new Array(sizes.length + 1);
+        offsets[0] = 0;
+        for (let i = 0; i < sizes.length; i++)
+            offsets[i + 1] = offsets[i] + sizes[i];
+        this.offsets = offsets;
+        if (this.viewport) {
+            this.updateTotalContentSize();
+            this.updateRenderedRange();
+        }
+    }
+    onContentScrolled() {
+        this.updateRenderedRange();
+    }
+    onDataLengthChanged() {
+        this.updateTotalContentSize();
+        this.updateRenderedRange();
+    }
+    onContentRendered() {
+        /* no-op: heights are supplied, not measured from the DOM */
+    }
+    onRenderedOffsetChanged() {
+        /* no-op */
+    }
+    scrollToIndex(index, behavior) {
+        if (!this.viewport)
+            return;
+        const clamped = Math.max(0, Math.min(index, this.sizes.length));
+        this.viewport.scrollToOffset(this.offsets[clamped] ?? 0, behavior);
+    }
+    get totalSize() {
+        return this.offsets[this.offsets.length - 1] ?? 0;
+    }
+    updateTotalContentSize() {
+        this.viewport?.setTotalContentSize(this.totalSize);
+    }
+    /** Largest item index whose top offset is `<= offset` (binary search over the prefix sums). */
+    indexAt(offset) {
+        const o = this.offsets;
+        let lo = 0;
+        let hi = o.length - 1;
+        while (lo < hi) {
+            const mid = (lo + hi + 1) >> 1;
+            if (o[mid] <= offset)
+                lo = mid;
+            else
+                hi = mid - 1;
+        }
+        return lo;
+    }
+    updateRenderedRange() {
+        const viewport = this.viewport;
+        if (!viewport)
+            return;
+        const dataLength = viewport.getDataLength();
+        const n = Math.min(this.sizes.length, dataLength);
+        if (n === 0) {
+            viewport.setRenderedRange({ start: 0, end: 0 });
+            viewport.setRenderedContentOffset(0);
+            this.indexChange.next(0);
+            return;
+        }
+        const scrollOffset = viewport.measureScrollOffset();
+        const viewportSize = viewport.getViewportSize();
+        const start = Math.max(0, this.indexAt(scrollOffset - BUFFER_PX));
+        const end = Math.min(n, this.indexAt(scrollOffset + viewportSize + BUFFER_PX) + 1);
+        const range = { start, end };
+        viewport.setRenderedRange(range);
+        viewport.setRenderedContentOffset(this.offsets[start] ?? 0);
+        this.indexChange.next(this.indexAt(scrollOffset));
+    }
+}
+/**
+ * Wires {@link AgridVariableRowSizeStrategy} into a `cdk-virtual-scroll-viewport`.
+ *
+ * Apply alongside an `agridVariableRowSize` binding carrying the per-item height array. Replaces
+ * the viewport's `[itemSize]` binding. The same height array is fed to every (left/body/right)
+ * viewport so the panes stay row-aligned.
+ * @internal
+ */
+class AgridVariableRowSizeDirective {
+    /** Per-item heights in pixels, one entry per virtual-scroll item. */
+    itemSizes = input([], { ...(ngDevMode ? { debugName: "itemSizes" } : /* istanbul ignore next */ {}), alias: 'agridVariableRowSize' });
+    strategy = new AgridVariableRowSizeStrategy();
+    ngOnChanges() {
+        this.strategy.updateItemSizes(this.itemSizes());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridVariableRowSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: AgridVariableRowSizeDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport[agridVariableRowSize]", inputs: { itemSizes: { classPropertyName: "itemSizes", publicName: "agridVariableRowSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: VIRTUAL_SCROLL_STRATEGY,
+                useFactory: (d) => d.strategy,
+                deps: [forwardRef(() => AgridVariableRowSizeDirective)],
+            },
+        ], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridVariableRowSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cdk-virtual-scroll-viewport[agridVariableRowSize]',
+                    providers: [
+                        {
+                            provide: VIRTUAL_SCROLL_STRATEGY,
+                            useFactory: (d) => d.strategy,
+                            deps: [forwardRef(() => AgridVariableRowSizeDirective)],
+                        },
+                    ],
+                }]
+        }], propDecorators: { itemSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "agridVariableRowSize", required: false }] }] } });
 
 /**
  * Excel-like data grid for Angular 21.
@@ -4638,10 +5407,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * |-----|--------|
  * | Arrow keys | Move selection |
  * | Tab / Shift+Tab | Move right / left (wraps rows) |
- * | Enter / F2 | Enter edit mode |
+ * | Enter | Enter edit mode |
+ * | Ctrl/Cmd+Enter | Toggle an expandable tree node |
+ * | F2 | Enter edit mode |
  * | Printable key | Enter edit mode with seeded character |
- * | Escape | Cancel edit |
- * | Tab / Enter (while editing) | Commit and move right / down |
+ * | Escape | Close any open menu or cancel edit |
+ * | Tab / Enter (while editing) | Commit and move according to navigation settings |
  */
 class AgridComponent {
     // ── Inputs ───────────────────────────────────────────────────────────────────
@@ -4654,16 +5425,18 @@ class AgridComponent {
     allowAddRows = computed(() => this.provider().allowAddRows, ...(ngDevMode ? [{ debugName: "allowAddRows" }] : /* istanbul ignore next */ []));
     autoAddRows = computed(() => this.provider().autoAddRows(), ...(ngDevMode ? [{ debugName: "autoAddRows" }] : /* istanbul ignore next */ []));
     enableRowMarking = computed(() => this.provider().enableRowMarking, ...(ngDevMode ? [{ debugName: "enableRowMarking" }] : /* istanbul ignore next */ []));
-    showControlColumn = computed(() => this.provider().showControlColumn || this.enableRowMarking(), ...(ngDevMode ? [{ debugName: "showControlColumn" }] : /* istanbul ignore next */ []));
+    showControlColumn = computed(() => this.provider().showControlColumn || this.enableRowMarking() || this.masterDetail(), ...(ngDevMode ? [{ debugName: "showControlColumn" }] : /* istanbul ignore next */ []));
     controlColumnWidth = computed(() => this.enableRowMarking() ? 48 : 24, ...(ngDevMode ? [{ debugName: "controlColumnWidth" }] : /* istanbul ignore next */ []));
     showSidebar = computed(() => this.provider().showSidebar, ...(ngDevMode ? [{ debugName: "showSidebar" }] : /* istanbul ignore next */ []));
     autoOpenDetail = computed(() => this.provider().autoOpenDetail, ...(ngDevMode ? [{ debugName: "autoOpenDetail" }] : /* istanbul ignore next */ []));
     serverSideFiltering = computed(() => this.provider().serverSideFiltering, ...(ngDevMode ? [{ debugName: "serverSideFiltering" }] : /* istanbul ignore next */ []));
     filterDebounceMs = computed(() => this.provider().filterDebounceMs, ...(ngDevMode ? [{ debugName: "filterDebounceMs" }] : /* istanbul ignore next */ []));
     enableQuickFilter = computed(() => this.provider().enableQuickFilter, ...(ngDevMode ? [{ debugName: "enableQuickFilter" }] : /* istanbul ignore next */ []));
+    menuBarItems = computed(() => this.provider().menuBarItems, ...(ngDevMode ? [{ debugName: "menuBarItems" }] : /* istanbul ignore next */ []));
     quickFilterValue = computed(() => this.control()?.quickFilter() ?? '', ...(ngDevMode ? [{ debugName: "quickFilterValue" }] : /* istanbul ignore next */ []));
     sortOption = computed(() => this.provider().sortOption, ...(ngDevMode ? [{ debugName: "sortOption" }] : /* istanbul ignore next */ []));
     rowSelection = computed(() => this.provider().rowSelection, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+    enterEditAction = computed(() => this.provider().enterEditAction, ...(ngDevMode ? [{ debugName: "enterEditAction" }] : /* istanbul ignore next */ []));
     groupDescription = computed(() => this.provider().groupDescription, ...(ngDevMode ? [{ debugName: "groupDescription" }] : /* istanbul ignore next */ []));
     groupActions = computed(() => this.provider().groupActions, ...(ngDevMode ? [{ debugName: "groupActions" }] : /* istanbul ignore next */ []));
     cellMenuItems = computed(() => this.provider().cellMenuItems, ...(ngDevMode ? [{ debugName: "cellMenuItems" }] : /* istanbul ignore next */ []));
@@ -4676,10 +5449,48 @@ class AgridComponent {
     loading = computed(() => this.provider().loading(), ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     emptyText = computed(() => this.provider().emptyText, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     useSidebarEditor = computed(() => this.provider().useSidebarEditor, ...(ngDevMode ? [{ debugName: "useSidebarEditor" }] : /* istanbul ignore next */ []));
+    /** Host callback for per-row CSS classes, or `undefined`. */
+    rowClassFn = computed(() => this.provider().getRowClass, ...(ngDevMode ? [{ debugName: "rowClassFn" }] : /* istanbul ignore next */ []));
+    /** Host callback designating pinned rows, or `undefined`. */
+    pinRowFn = computed(() => this.provider().pinRow, ...(ngDevMode ? [{ debugName: "pinRowFn" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective pin resolver fed to the projection: a runtime UI override wins (including an explicit
+     * `null` unpin), otherwise the provider `pinRow` predicate decides. Returns `undefined` when
+     * neither pinning source is active, so the projection's pinning path stays off.
+     */
+    effectivePinRow = computed(() => {
+        const predicate = this.pinRowFn();
+        const overrides = this._pinnedRows();
+        if (!predicate && overrides.size === 0)
+            return undefined;
+        return (row, index) => {
+            const override = overrides.get(index);
+            if (override !== undefined)
+                return override ?? undefined;
+            return predicate?.(row, index);
+        };
+    }, ...(ngDevMode ? [{ debugName: "effectivePinRow" }] : /* istanbul ignore next */ []));
+    /** Whether master/detail is enabled and applicable (flat rows or tree leaves; not grouped). */
+    masterDetail = computed(() => this.provider().masterDetail && !!this.provider().detailRenderer
+        && !this.control()?.groupByField(), ...(ngDevMode ? [{ debugName: "masterDetail" }] : /* istanbul ignore next */ []));
+    /** Fixed detail-panel height in pixels. */
+    detailRowHeight = computed(() => this.provider().detailRowHeight, ...(ngDevMode ? [{ debugName: "detailRowHeight" }] : /* istanbul ignore next */ []));
     /** Column definitions from the active provider. */
     colDefs = computed(() => this.provider().columns(), ...(ngDevMode ? [{ debugName: "colDefs" }] : /* istanbul ignore next */ []));
     /** Signal-based data container from the active provider. */
     dataSource = computed(() => this.provider().datasource, ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    treeParentIds = computed(() => {
+        const config = this.treeConfig();
+        if (!config || isPathTreeConfig(config))
+            return new Set();
+        const ids = new Set();
+        for (const row of this.dataSource().rows()) {
+            const parentId = config.getParentId(row);
+            if (parentId !== null && parentId !== undefined)
+                ids.add(parentId);
+        }
+        return ids;
+    }, ...(ngDevMode ? [{ debugName: "treeParentIds" }] : /* istanbul ignore next */ []));
     /** Grid UI state container from the active provider. */
     control = computed(() => this.provider().control, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     /** Resolved locale code used for date formatting and built-in localization lookup. 'auto' is replaced with navigator.language. */
@@ -4707,6 +5518,10 @@ class AgridComponent {
     rowDoubleClicked = output();
     /** Emitted when the user single-clicks a data row. */
     rowClick = output();
+    /** Emitted when the user single-clicks a generated path-tree branch node. */
+    treeNodeClick = output();
+    /** Emitted when the user double-clicks a generated path-tree branch node. */
+    treeNodeDoubleClicked = output();
     /**
      * Emitted once after a changed row is left during inline editing, or when the sidebar editor
      * save button is used.
@@ -4730,11 +5545,23 @@ class AgridComponent {
     quickFilterChange = output();
     /** Emitted when a `ColDef.validate` hook rejects a committed value (inline or sidebar). */
     validationFailed = output();
+    /** Emitted when a column's optional cell information button is clicked. */
+    cellInfo = output();
+    /** Emitted for every enabled menu-bar button or dropdown item, carrying its configured id. */
+    menuBarAction = output();
     // ── Public state ─────────────────────────────────────────────────────────────
     /** Currently focused cell, or `null`. */
     selectedCell = signal(null, ...(ngDevMode ? [{ debugName: "selectedCell" }] : /* istanbul ignore next */ []));
     /** Original index of the row awaiting delete confirmation, or `null`. */
     pendingDeleteRow = signal(null, ...(ngDevMode ? [{ debugName: "pendingDeleteRow" }] : /* istanbul ignore next */ []));
+    /** Original indices of rows whose master/detail panel is currently expanded. */
+    _expandedDetailIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expandedDetailIds" }] : /* istanbul ignore next */ []));
+    /**
+     * Runtime per-row pin overrides set through the UI (keyed by original index). A `null` value
+     * explicitly unpins a row that the `pinRow` predicate would otherwise pin. Merged with the
+     * provider predicate by {@link effectivePinRow}.
+     */
+    _pinnedRows = signal(new Map(), ...(ngDevMode ? [{ debugName: "_pinnedRows" }] : /* istanbul ignore next */ []));
     markedIndices = signal(new Set(), ...(ngDevMode ? [{ debugName: "markedIndices" }] : /* istanbul ignore next */ []));
     /** Original datasource indices marked for inclusion in copy operations. */
     markedRowIndices = this.markedIndices.asReadonly();
@@ -4744,6 +5571,8 @@ class AgridComponent {
     deleteConfirmationWidth = signal(0, ...(ngDevMode ? [{ debugName: "deleteConfirmationWidth" }] : /* istanbul ignore next */ []));
     /** Rectangular cell range selected by Shift+arrow or Shift+click. */
     selectedRange = signal(null, ...(ngDevMode ? [{ debugName: "selectedRange" }] : /* istanbul ignore next */ []));
+    /** @internal Stable callback passed to child components for row-aware editability checks. */
+    isCellEditableForRow = (col, originalIndex) => this.isCellEditable(col, originalIndex);
     /** Fill-handle drag preview bounds, in visible row/column coordinates. */
     get fillPreviewBounds() { return this.rangeController.fillPreviewBounds; }
     /** Position of the cell in edit mode, or `null`. */
@@ -4752,6 +5581,8 @@ class AgridComponent {
     get currentDraft() { return this.editController.currentDraft; }
     /** Seed character typed to enter edit mode (e.g. pressing 'A'). */
     get editSeedChar() { return this.editController.editSeedChar; }
+    /** Whether the active text editor should select all text when it opens. */
+    get selectTextOnEdit() { return this.editController.selectTextOnEdit; }
     /** Toggle the sidebar open/closed. */
     toggleSidebar() { this.sidebarController.toggle(); }
     /** @internal */
@@ -4898,6 +5729,9 @@ class AgridComponent {
         expandedGroups: this.groupController.expandedGroups,
         treeConfig: this.treeConfig,
         expandedTreeIds: this.treeController.expandedIds,
+        pinRow: this.effectivePinRow,
+        masterDetail: this.masterDetail,
+        expandedDetailIds: this._expandedDetailIds,
     });
     editController = new AgridEditController({
         control: this.control,
@@ -4919,8 +5753,9 @@ class AgridComponent {
     showPagination = this.projection.showPagination;
     /** Number of semantic header rows currently rendered. */
     headerRowCount = computed(() => this.hasHeaderGroups() ? 2 : 1, ...(ngDevMode ? [{ debugName: "headerRowCount" }] : /* istanbul ignore next */ []));
-    /** Number of rendered semantic rows, including header rows. */
-    ariaRowCount = computed(() => this.displayItems().length + this.headerRowCount() + (this.showFooter() ? 1 : 0), ...(ngDevMode ? [{ debugName: "ariaRowCount" }] : /* istanbul ignore next */ []));
+    /** Number of rendered semantic rows, including header and pinned rows. */
+    ariaRowCount = computed(() => this.displayItems().length + this.headerRowCount() + (this.showFooter() ? 1 : 0)
+        + this.pinnedTopItems().length + this.pinnedBottomItems().length, ...(ngDevMode ? [{ debugName: "ariaRowCount" }] : /* istanbul ignore next */ []));
     /** Number of visible semantic columns, including the optional control column. */
     ariaColCount = computed(() => this.visibleColDefs().length + (this.showControlColumn() ? 1 : 0), ...(ngDevMode ? [{ debugName: "ariaColCount" }] : /* istanbul ignore next */ []));
     /** True when no rows or group headers are visible (ignores add-row sentinel and ghost). */
@@ -4982,6 +5817,24 @@ class AgridComponent {
         result.splice(insertAt, 0, 'ghost');
         return result;
     }, ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
+    /** Rows pinned to the top of the body (rendered in a fixed container, outside virtual scroll). */
+    pinnedTopItems = this.projection.pinnedTopItems;
+    /** Rows pinned to the bottom of the body (rendered in a fixed container, outside virtual scroll). */
+    pinnedBottomItems = this.projection.pinnedBottomItems;
+    /** Whether any top-pinned rows are present. */
+    hasPinnedTopRows = computed(() => this.pinnedTopItems().length > 0, ...(ngDevMode ? [{ debugName: "hasPinnedTopRows" }] : /* istanbul ignore next */ []));
+    /** Whether any bottom-pinned rows are present. */
+    hasPinnedBottomRows = computed(() => this.pinnedBottomItems().length > 0, ...(ngDevMode ? [{ debugName: "hasPinnedBottomRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-item heights fed to the variable-size virtual-scroll strategy: a detail panel uses the
+     * configured detail height, every other row uses the standard row height. With no detail rows
+     * open the array is uniform, so scrolling matches the fixed-size strategy.
+     */
+    itemSizes = computed(() => {
+        const h = this.rowHeight();
+        const dh = this.detailRowHeight();
+        return this.displayItems().map(item => (isDetailRowItem(item) ? dh : h));
+    }, ...(ngDevMode ? [{ debugName: "itemSizes" }] : /* istanbul ignore next */ []));
     // ── Menu signals ─────────────────────────────────────────────────────────────
     groupActionsMenu = this.groupController.actionsMenu;
     // ── Infrastructure ────────────────────────────────────────────────────────────
@@ -5000,7 +5853,7 @@ class AgridComponent {
         visibleColDefs: this.visibleColDefs,
         selectedCell: this.selectedCell,
         selectedRange: this.selectedRange,
-        isCellEditable: col => this.isCellEditable(col),
+        isCellEditable: (col, originalIndex) => this.isCellEditable(col, originalIndex),
         cancelEdit: () => this.cancelCurrent(),
         findDisplayIndex: originalIndex => this.findDisplayIndex(originalIndex),
         scrollToCell: (displayIndex, colIndex) => this.scrollToKeepVisible(displayIndex, colIndex),
@@ -5039,14 +5892,16 @@ class AgridComponent {
         visibleColDefs: this.visibleColDefs,
         filteredItems: this.filteredItems,
         locale: this.locale,
+        getRowClass: this.rowClassFn,
     });
     findController = new AgridFindController({
-        filteredItems: this.filteredItems,
+        dataSource: this.dataSource,
+        filteredSortedIndices: this.projection.filteredSortedIndices,
         visibleColDefs: this.visibleColDefs,
         locale: this.locale,
         selectedCell: this.selectedCell,
         selectedRange: this.selectedRange,
-        scrollToCell: (displayIndex, colIndex) => this.navigationController.scrollToKeepVisible(displayIndex, colIndex),
+        revealMatch: (originalIndex, colIndex) => this.revealFindMatch(originalIndex, colIndex),
         focusGrid: () => this.wrapperEl().nativeElement.focus(),
     });
     findOpen = this.findController.open;
@@ -5063,11 +5918,14 @@ class AgridComponent {
         rowHeight: this.rowHeight,
         allowAddRows: this.allowAddRows,
         autoAddRows: this.autoAddRows,
+        enterEditAction: this.enterEditAction,
         selectedCell: this.selectedCell,
         selectedRange: this.selectedRange,
         editingCell: this.editController.editingCell,
         isEditing: (originalIndex, colIndex) => this.isEditing(originalIndex, colIndex),
-        startEdit: (originalIndex, colIndex, seedChar) => this.editController.start(originalIndex, colIndex, seedChar),
+        isCellEditable: (col, originalIndex) => this.editController.isCellEditable(col, originalIndex),
+        toggleTreeCell: (originalIndex, colIndex) => this.toggleTreeCell(originalIndex, colIndex),
+        startEdit: (originalIndex, colIndex, seedChar, selectText) => this.editController.start(originalIndex, colIndex, seedChar, selectText),
         commitEdit: () => this.editController.commit(),
         cancelEdit: () => this.editController.cancel(),
         undoEdit: () => this.editController.undo(),
@@ -5112,6 +5970,26 @@ class AgridComponent {
     selectedRowIndex = this.rowController.selectedRowIndex;
     contextMenu = this.rowController.contextMenu;
     cellContextMenuState = this.rowController.cellContextMenu;
+    /** Id of the menu-bar button whose dropdown is open, or `null`. */
+    openMenuBarItemId = signal(null, ...(ngDevMode ? [{ debugName: "openMenuBarItemId" }] : /* istanbul ignore next */ []));
+    /** Runtime state passed to menu-bar visibility, active, and disabled resolvers. */
+    menuBarContext = computed(() => {
+        const datasource = this.dataSource();
+        const rows = datasource.rows();
+        const selectedRows = [...this.selectedRowIndices()]
+            .sort((a, b) => a - b)
+            .map(originalIndex => ({ row: rows[originalIndex], originalIndex }))
+            .filter((entry) => !!entry.row);
+        return {
+            rows,
+            selectedRows,
+            selectedCell: this.selectedCell(),
+            provider: this.provider(),
+            datasource,
+        };
+    }, ...(ngDevMode ? [{ debugName: "menuBarContext" }] : /* istanbul ignore next */ []));
+    /** Menu-bar buttons currently allowed by their visibility resolvers. */
+    visibleMenuBarItems = computed(() => this.menuBarItems().filter(item => this.isMenuBarItemVisible(item)), ...(ngDevMode ? [{ debugName: "visibleMenuBarItems" }] : /* istanbul ignore next */ []));
     sidebarController = new AgridSidebarController({
         control: this.control,
         dataSource: this.dataSource,
@@ -5120,6 +5998,7 @@ class AgridComponent {
         selectedRowIndex: this.selectedRowIndex,
         autoOpenDetail: this.autoOpenDetail,
         useSidebarEditor: this.useSidebarEditor,
+        isCellEditable: (col, originalIndex) => this.isCellEditable(col, originalIndex),
         onFieldChange: event => this.markCellChanged(event),
         onCellEdit: event => this.emitSidebarEditEvents(event),
         onValidationFailed: event => this.validationFailed.emit({ ...event, source: 'sidebar' }),
@@ -5139,7 +6018,7 @@ class AgridComponent {
         selectedCell: this.selectedCell,
         selectedRange: this.selectedRange,
         markedRowIndices: this.markedRowIndices,
-        isCellEditable: col => this.isCellEditable(col),
+        isCellEditable: (col, originalIndex) => this.isCellEditable(col, originalIndex),
         onCellEdit: event => this.emitEditEvents(event),
         scrollToCell: (displayIndex, colIndex) => this.scrollToKeepVisible(displayIndex, colIndex),
     });
@@ -5188,6 +6067,10 @@ class AgridComponent {
     getColReorderOffset(field) {
         return this.columnReorder.getHeaderOffset(field);
     }
+    hasContextMenuEntries() {
+        const hme = (!this.readonlyGrid() && !this.treeConfig());
+        return hme;
+    }
     // ── Setup ─────────────────────────────────────────────────────────────────────
     _seededControls = new WeakSet();
     dirtyInlineRows = new Set();
@@ -5312,6 +6195,15 @@ class AgridComponent {
             wrapper.addEventListener('keydown', onKeyDown, { capture: true });
             this.destroyRef.onDestroy(() => wrapper.removeEventListener('keydown', onKeyDown, { capture: true }));
         });
+        const onDocumentKeyDown = (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented)
+                return;
+            if (this.closeOpenMenus()) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.browser.addDocumentListener('keydown', onDocumentKeyDown);
         // Emit pageChange whenever page or pageSize changes in server-side pagination mode.
         effect(() => {
             const ctrl = this.control();
@@ -5332,19 +6224,22 @@ class AgridComponent {
         });
         // Deselect when clicking outside the grid.
         const onOutsidePointerDown = (e) => {
-            if (!this._hostEl.nativeElement.contains(e.target)) {
+            const isInsideGrid = this._hostEl.nativeElement.contains(e.target);
+            if (!isInsideGrid) {
+                this.closeOpenMenus();
                 queueMicrotask(() => this.flushDirtyInlineRows());
             }
             if (this.rowSelection() === 'none')
                 return;
             if (this.selectedRowIndices().size === 0)
                 return;
-            if (this._hostEl.nativeElement.contains(e.target))
+            if (isInsideGrid)
                 return;
             this.rowController.clearSelection();
         };
         this.browser.addDocumentListener('pointerdown', onOutsidePointerDown);
         this.destroyRef.onDestroy(() => {
+            this.browser.removeDocumentListener('keydown', onDocumentKeyDown);
             this.browser.removeDocumentListener('pointerdown', onOutsidePointerDown);
             if (this.quickFilterTimer !== null)
                 clearTimeout(this.quickFilterTimer);
@@ -5391,9 +6286,94 @@ class AgridComponent {
         return isGroupHeaderItem(item);
     }
     /** @internal */
+    isPathTreeNodeItem(item) {
+        return isPathTreeNodeItem(item);
+    }
+    /** @internal */
     getItemOriginalIndex(item) {
         return isDataRowItem(item) ? item.originalIndex : null;
     }
+    /** @internal True when the item is a master/detail panel row. */
+    isDetailRowItem(item) {
+        return isDetailRowItem(item);
+    }
+    /** @internal Rendered pixel height of a virtual-scroll item (detail panels are taller). */
+    rowPx(item) {
+        return isDetailRowItem(item) ? this.detailRowHeight() : this.rowHeight();
+    }
+    /** @internal Resolved HTML for an expanded detail panel (auto-sanitized by `[innerHTML]`). */
+    detailHtml(item) {
+        if (!isDetailRowItem(item))
+            return '';
+        return this.provider().detailRenderer?.({ row: item.row }) ?? '';
+    }
+    /** @internal Resolved per-row CSS classes from the host `getRowClass` callback. */
+    getRowClass(row, index) {
+        return this.presentation.getRowClass(row, index);
+    }
+    /** Whether the master/detail panel for `originalIndex` is currently expanded. */
+    isDetailExpanded(originalIndex) {
+        return this._expandedDetailIds().has(originalIndex);
+    }
+    /** @internal Whether a data row may show a master/detail panel. */
+    canToggleDetail(item) {
+        if (!this.masterDetail() || !isDataRowItem(item))
+            return false;
+        const config = this.treeConfig();
+        return !config
+            || isPathTreeConfig(config)
+            || !this.treeParentIds().has(config.getId(item.row));
+    }
+    /** Toggle the master/detail panel for a row by its original (data-source) index. */
+    toggleDetail(originalIndex) {
+        const row = this.dataSource().getRow(originalIndex);
+        const config = this.treeConfig();
+        if (!row
+            || (config
+                && !isPathTreeConfig(config)
+                && this.treeParentIds().has(config.getId(row))))
+            return;
+        this._expandedDetailIds.update(ids => {
+            const next = new Set(ids);
+            if (next.has(originalIndex))
+                next.delete(originalIndex);
+            else
+                next.add(originalIndex);
+            return next;
+        });
+    }
+    /** @internal Template handler for the detail expander chevron. */
+    onDetailToggle(originalIndex) {
+        this.toggleDetail(originalIndex);
+    }
+    /** Effective pin position of a row (`'top'`, `'bottom'`, or `undefined`). */
+    rowPinState(originalIndex) {
+        const resolver = this.effectivePinRow();
+        if (!resolver)
+            return undefined;
+        return resolver(this.dataSource().rows()[originalIndex], originalIndex);
+    }
+    /**
+     * Pin a row to the top or bottom of the body, or unpin it with `null`.
+     * Keyed by the row's original (data-source) index; the pinned row stays fully interactive.
+     */
+    pinRowTo(originalIndex, position) {
+        this._pinnedRows.update(map => {
+            const next = new Map(map);
+            // When no predicate could re-pin the row, an unpin can simply drop the override.
+            if (position === null && !this.pinRowFn())
+                next.delete(originalIndex);
+            else
+                next.set(originalIndex, position);
+            return next;
+        });
+    }
+    /** @internal Template handler for the pin/unpin context-menu items; closes the open menus. */
+    onPinRow(originalIndex, position) {
+        this.pinRowTo(originalIndex, position);
+        this.rowController.closeContextMenu();
+        this.rowController.closeCellContextMenu();
+    }
     // ── Template helpers — tree ───────────────────────────────────────────────────
     /** @internal True when `col` is the configured tree column. */
     isTreeCell(col) {
@@ -5401,28 +6381,101 @@ class AgridComponent {
     }
     /** @internal Tree depth of a row item (0 when not a tree row). */
     treeRowLevel(item) {
-        return isTreeRowItem(item) ? item.level : 0;
+        return isTreeRowItem(item) || isPathTreeNodeItem(item) ? item.level : 0;
     }
     /** @internal Whether a tree row has children and can be expanded. */
     treeRowExpandable(item) {
-        return isTreeRowItem(item) && item.expandable;
+        return (isTreeRowItem(item) || isPathTreeNodeItem(item)) && item.expandable;
     }
     /** @internal Whether a tree row is currently expanded. */
     treeRowExpanded(item) {
-        return isTreeRowItem(item) && item.expanded;
+        return (isTreeRowItem(item) || isPathTreeNodeItem(item)) && item.expanded;
+    }
+    /** @internal Display-only final path segment for a datasource-backed path-tree leaf. */
+    treeCellDisplayOverride(item, col) {
+        return isTreeRowItem(item) && this.isTreeCell(col) ? item.treeLabel ?? null : null;
+    }
+    /** @internal Whether the configured info action is visible for this cell. */
+    showCellInfoIcon(col, row) {
+        return typeof col.infoIcon === 'function'
+            ? col.infoIcon({ value: row[col.field], row })
+            : col.infoIcon === true;
+    }
+    /** @internal Emits the typed cell information action. */
+    onCellInfo(originalIndex, col, row) {
+        this.cellInfo.emit({
+            row: row,
+            field: col.field,
+            value: row[col.field],
+            originalIndex,
+            column: col,
+        });
+    }
+    /** @internal Label of a generated path-tree branch. */
+    pathTreeLabel(item) {
+        return isPathTreeNodeItem(item) ? item.pathLabel : '';
     }
     /** @internal Toggle the expand/collapse state of a tree row from its twisty. */
     onTreeToggle(item) {
         const config = this.treeConfig();
-        if (!config || !isTreeRowItem(item))
+        if (!config)
+            return;
+        if (isPathTreeNodeItem(item)) {
+            this.treeController.toggle(item.pathNodeId);
+        }
+        else if (isTreeRowItem(item) && !isPathTreeConfig(config)) {
+            this.treeController.toggle(config.getId(item.row));
+        }
+    }
+    /** @internal Emits the generated path-tree branch click event. */
+    onTreeNodeClick(item) {
+        if (!isPathTreeNodeItem(item))
             return;
+        this.treeNodeClick.emit(this.toTreeNodeClickEvent(item));
+    }
+    /** @internal Emits the generated path-tree branch double-click event. */
+    onTreeNodeDoubleClick(item) {
+        if (!isPathTreeNodeItem(item))
+            return;
+        this.treeNodeDoubleClicked.emit(this.toTreeNodeClickEvent(item));
+    }
+    toTreeNodeClickEvent(item) {
+        return {
+            uuid: item.uuid,
+            pathNodeId: item.pathNodeId,
+            pathLabel: item.pathLabel,
+            level: item.level,
+            expanded: item.expanded,
+            node: { ...item },
+        };
+    }
+    toggleTreeCell(originalIndex, colIndex) {
+        const config = this.treeConfig();
+        const col = this.visibleColDefs()[colIndex];
+        if (!config || !col || config.treeField !== col.field)
+            return false;
+        const item = this.displayItems().find(candidate => isDataRowItem(candidate) && candidate.originalIndex === originalIndex);
+        if (!item || !isTreeRowItem(item) || !item.expandable || isPathTreeConfig(config))
+            return false;
         this.treeController.toggle(config.getId(item.row));
+        return true;
     }
     /** Expand every expandable node in the tree. No-op when not in tree mode. */
     expandAllNodes() {
         const config = this.treeConfig();
         if (!config)
             return;
+        if (isPathTreeConfig(config)) {
+            const ids = new Set();
+            for (const row of this.dataSource().rows()) {
+                const path = config.getPath(row).map(String).filter(Boolean);
+                for (let length = 1; length < path.length; length++) {
+                    ids.add(pathTreeNodeId(path.slice(0, length)));
+                }
+            }
+            this.treeController.expandAll(ids);
+            return;
+        }
         const expandable = new Set();
         for (const row of this.dataSource().rows()) {
             const parentId = config.getParentId(row);
@@ -5443,6 +6496,10 @@ class AgridComponent {
             return -1;
         if (isGroupHeaderItem(item))
             return `__group__${item.groupLabel}`;
+        if (isDetailRowItem(item))
+            return `__detail__${item.detailFor}`;
+        if (isPathTreeNodeItem(item))
+            return item.pathNodeId;
         return item.originalIndex;
     };
     // ── Template helpers — cell/selection state ───────────────────────────────────
@@ -5482,10 +6539,28 @@ class AgridComponent {
         return this.columnMenuController.hasMultiSort();
     }
     getTextFilter(field) { return this.columnMenuController.getTextFilter(field); }
-    /** @internal Range-filter input type for a column, or `null` when not range-filterable. */
+    /** @internal Condition input type for a column, or `null` when unsupported. */
     getMenuFilterType(field) {
         return this.columnMenuController.getFilterType(field);
     }
+    /** @internal Short label for an active header condition. */
+    getConditionButtonLabel(field) {
+        switch (this.getMenuOperator(field)) {
+            case 'eq': return '=';
+            case 'neq': return '≠';
+            case 'gt': return '>';
+            case 'gte': return '≥';
+            case 'lt': return '<';
+            case 'lte': return '≤';
+            case 'between': return '↔';
+            case 'like': return '~';
+            case 'startsWith': return 'A…';
+            case 'endsWith': return '…Z';
+            case 'includes': return '⊃';
+            case 'notIncludes': return '⊅';
+            default: return '⋯';
+        }
+    }
     /** @internal */
     getMenuOperator(field) {
         return this.columnMenuController.getFilterOperator(field);
@@ -5611,7 +6686,9 @@ class AgridComponent {
         }, delay);
     }
     /** @internal Whether a column is editable in the current grid state (drives boolean checkboxes). */
-    isColEditable(col) { return this.editController.isCellEditable(col); }
+    isColEditable(col, originalIndex) {
+        return this.editController.isCellEditable(col, originalIndex);
+    }
     /** @internal Inline validation message for a cell, or `null` when the cell has no active error. */
     cellValidationError(originalIndex, ci) {
         const error = this.editController.validationError();
@@ -5627,6 +6704,11 @@ class AgridComponent {
     }
     /** @internal Main keyboard handler delegated from the wrapper div. */
     onKeyDown(event) {
+        if (event.key === 'Escape' && this.closeOpenMenus()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
         if (event.key === 'Escape' && this.pendingDeleteRow() !== null) {
             event.preventDefault();
             event.stopPropagation();
@@ -5657,6 +6739,47 @@ class AgridComponent {
     goToFindMatch(direction) {
         this.findController.goToMatch(direction);
     }
+    revealFindMatch(originalIndex, colIndex) {
+        const config = this.treeConfig();
+        if (config) {
+            const rows = this.dataSource().rows();
+            const expanded = new Set(this.treeController.expandedIds());
+            if (isPathTreeConfig(config)) {
+                const path = config.getPath(rows[originalIndex]).map(String).filter(Boolean);
+                for (let length = 1; length < path.length; length++) {
+                    expanded.add(pathTreeNodeId(path.slice(0, length)));
+                }
+            }
+            else {
+                const idToRow = new Map(rows.map(row => [config.getId(row), row]));
+                const visited = new Set();
+                let parentId = config.getParentId(rows[originalIndex]);
+                while (parentId !== null && parentId !== undefined && !visited.has(parentId)) {
+                    visited.add(parentId);
+                    expanded.add(parentId);
+                    const parent = idToRow.get(parentId);
+                    if (!parent)
+                        break;
+                    parentId = config.getParentId(parent);
+                }
+            }
+            this.treeController.expandAll(expanded);
+        }
+        else {
+            const control = this.control();
+            const pageSize = control?.pageSize() ?? 0;
+            const filteredIndex = this.projection.filteredSortedIndices().indexOf(originalIndex);
+            if (control && pageSize > 0 && control.totalRows() === 0 && filteredIndex >= 0) {
+                control.setPage(Math.floor(filteredIndex / pageSize) + 1);
+            }
+        }
+        setTimeout(() => {
+            const displayIndex = this.navigationController.findDisplayIndex(originalIndex);
+            if (displayIndex >= 0) {
+                this.navigationController.scrollToKeepVisible(displayIndex, colIndex);
+            }
+        });
+    }
     // ── Row reorder ───────────────────────────────────────────────────────────────
     /** @internal Ghost cell display during a reorder drag. */
     getGhostCellDisplay(col) { return this.dragHandler.getGhostDisplay(col); }
@@ -5669,7 +6792,7 @@ class AgridComponent {
     /** @internal Handles the control column without letting the row receive a second pointer event. */
     onControlPointerDown(event, originalIndex) {
         event.stopPropagation();
-        if (this.allowRowReorder()) {
+        if (this.allowRowReorder() && event.pointerType === 'mouse' && event.button === 0) {
             this.onHandlePointerDown(event, originalIndex);
             return;
         }
@@ -5737,6 +6860,121 @@ class AgridComponent {
     }
     /** @internal */
     closeCellContextMenu() { this.rowController.closeCellContextMenu(); }
+    /** @internal Closes any row, cell, menu-bar, group-action, or column menu owned by this grid. */
+    closeOpenMenus() {
+        const hadOpenMenu = this.contextMenu() !== null
+            || this.cellContextMenuState() !== null
+            || this.openMenuBarItemId() !== null
+            || this.groupActionsMenu() !== null
+            || this.filterMenu() !== null;
+        if (!hadOpenMenu)
+            return false;
+        this.rowController.closeContextMenu();
+        this.rowController.closeCellContextMenu();
+        this.closeMenuBarMenu();
+        this.groupController.closeActionsMenu();
+        this.columnMenuController.close();
+        return true;
+    }
+    /** @internal Resolves a menu-bar state callback against the current grid state. */
+    resolveMenuBarState(state, fallback) {
+        if (typeof state === 'function')
+            return state(this.menuBarContext());
+        return state ?? fallback;
+    }
+    /** @internal Whether a menu-bar button or dropdown item should be rendered. */
+    isMenuBarItemVisible(item) {
+        return this.resolveMenuBarState(item.visible, true);
+    }
+    /** @internal Whether a menu-bar button or dropdown item is active. */
+    isMenuBarItemActive(item) {
+        return this.resolveMenuBarState(item.active, false);
+    }
+    /** @internal Whether a menu-bar button or dropdown item is disabled. */
+    isMenuBarItemDisabled(item) {
+        return this.resolveMenuBarState(item.disabled, false);
+    }
+    /** @internal Visible dropdown entries for a menu-bar button. */
+    visibleMenuBarChildren(item) {
+        return (item.items ?? []).filter(child => this.isMenuBarItemVisible(child));
+    }
+    /** @internal Emits one menu-bar action and closes its dropdown. */
+    runMenuBarAction(event, item) {
+        event.stopPropagation();
+        if (!this.isMenuBarItemVisible(item) || this.isMenuBarItemDisabled(item))
+            return;
+        this.menuBarAction.emit(item.id);
+        this.closeMenuBarMenu();
+    }
+    /** @internal Opens or closes a split button's additional command menu. */
+    toggleMenuBarMenu(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.visibleMenuBarChildren(item).length === 0)
+            return;
+        this.rowController.closeContextMenu();
+        this.rowController.closeCellContextMenu();
+        this.groupController.closeActionsMenu();
+        this.columnMenuController.close();
+        this.openMenuBarItemId.update(id => id === item.id ? null : item.id);
+    }
+    /** @internal Opens a dropdown from the keyboard and focuses its first/last enabled item. */
+    onMenuBarTriggerKeydown(event, item) {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.visibleMenuBarChildren(item).length === 0)
+            return;
+        this.openMenuBarItemId.set(item.id);
+        const group = event.currentTarget.closest('.ag-menu-bar-group');
+        setTimeout(() => {
+            const enabled = group?.querySelectorAll('.ag-menu-bar-dropdown [role="menuitem"]:not(:disabled)');
+            const target = event.key === 'ArrowUp' ? enabled?.[enabled.length - 1] : enabled?.[0];
+            target?.focus();
+        });
+    }
+    /** @internal Provides standard keyboard navigation within an open menu-bar dropdown. */
+    onMenuBarMenuKeydown(event) {
+        const menu = event.currentTarget;
+        const items = Array.from(menu.querySelectorAll('[role="menuitem"]:not(:disabled)'));
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeMenuBarMenu();
+            menu.closest('.ag-menu-bar-group')
+                ?.querySelector('.ag-menu-bar-trigger')
+                ?.focus();
+            return;
+        }
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || items.length === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const current = items.indexOf(event.target);
+        const next = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? items.length - 1
+                : event.key === 'ArrowDown'
+                    ? (current + 1 + items.length) % items.length
+                    : (current - 1 + items.length) % items.length;
+        items[next].focus();
+    }
+    /** @internal Closes the currently open menu-bar dropdown. */
+    closeMenuBarMenu() {
+        this.openMenuBarItemId.set(null);
+    }
+    /** @internal Synchronizes dropdown state and closes competing grid menus when one opens. */
+    onMenuBarOpenItemChange(id) {
+        if (id !== null) {
+            this.rowController.closeContextMenu();
+            this.rowController.closeCellContextMenu();
+            this.groupController.closeActionsMenu();
+            this.columnMenuController.close();
+        }
+        this.openMenuBarItemId.set(id);
+    }
     /** @internal Runs a typed provider context-menu action against erased controller state. */
     runCellMenuItem(item, menu) {
         item.action({
@@ -5950,11 +7188,11 @@ class AgridComponent {
             return index;
         })));
     }
-    isCellEditable(col) {
-        return this.editController.isCellEditable(col);
+    isCellEditable(col, originalIndex) {
+        return this.editController.isCellEditable(col, originalIndex);
     }
-    enterEdit(originalIndex, ci, seedChar) {
-        this.editController.start(originalIndex, ci, seedChar);
+    enterEdit(originalIndex, ci, seedChar, selectText = true) {
+        this.editController.start(originalIndex, ci, seedChar, selectText);
     }
     cancelCurrent() {
         this.editController.cancel();
@@ -5989,14 +7227,17 @@ class AgridComponent {
     getColumnWidthToken(col) {
         return this.columnSizing.getWidthToken(col);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridComponent, isStandalone: true, selector: "agrid", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", recordEdit: "recordEdit", rowRemoved: "rowRemoved", prepareAddRecord: "prepareAddRecord", rowReorder: "rowReorder", rowSelect: "rowSelect", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange", quickFilterChange: "quickFilterChange", validationFailed: "validationFailed" }, host: { properties: { "class.ag-zebra": "zebraStripes()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "pinnedViewport", first: true, predicate: ["pinnedViewport"], descendants: true, isSignal: true }, { propertyName: "rightPinnedViewport", first: true, predicate: ["rightPinnedViewport"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "horizontalScrollerEl", first: true, predicate: ["horizontalScroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\" (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\"\n  (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu()\">\n  @if (enableQuickFilter()) {\n    <div class=\"ag-toolbar\">\n      <input\n        class=\"ag-quick-filter\"\n        type=\"search\"\n        [value]=\"quickFilterValue()\"\n        (input)=\"onQuickFilterInput($event)\"\n        [placeholder]=\"localeText().quickFilterPlaceholder\"\n        [attr.aria-label]=\"localeText().quickFilterPlaceholder\"\n      />\n    </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [itemSize]=\"rowHeight()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\"\n              [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\"\n                (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [itemSize]=\"rowHeight()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n              [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n                [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n                [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n                (treeToggle)=\"onTreeToggle(item)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                      @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                      <span class=\"ag-group-aggregate\">\n                        <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                        <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                        {{ getFooterDisplay(col, aggs[col.field]) }}\n                      </span>\n                      }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\"\n                [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\"\n                [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\"\n                  type=\"button\" (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\"\n            [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [itemSize]=\"rowHeight()\" [style.width.px]=\"rightPinnedPaneWidth()\" (scroll)=\"onRightPinnedBodyScroll()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar\n      [open]=\"sidebarOpen()\"\n      [activeTab]=\"sidebarTab()\"\n      [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\"\n      [locale]=\"locale()\"\n      [localeText]=\"localeText()\"\n      [readonlyGrid]=\"readonlyGrid()\"\n      [useSidebarEditor]=\"useSidebarEditor()\"\n      [errors]=\"sidebarValidationErrors()\"\n      (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\"\n    />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\"\n      (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\"\n      (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n  </div>\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow }}</button>\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{ localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\"\n      (click)=\"deleteRow(menu.rowIndex)\">{{ localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\" [disabled]=\"item.disabled\"\n      (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\"\n    [showColumnActions]=\"!!control()\" [pinned]=\"getColumnPinState(menu.field)\"\n    [groupable]=\"!!getColDef(menu.field)?.groupable\" [grouped]=\"isGroupedByField(menu.field)\"\n    [filterable]=\"!!getColDef(menu.field)?.filterable\" [showValueFilter]=\"!serverSideFiltering()\"\n    [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\"\n    [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\"\n    [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\" (sort)=\"onMenuSort(menu.field, $event)\"\n    (resetSort)=\"onMenuResetSort(menu.field, $event)\" (autosize)=\"onMenuAutosizeColumn(menu.field)\"\n    (togglePin)=\"onMenuTogglePin(menu.field)\" (togglePinRight)=\"onMenuTogglePinRight(menu.field)\"\n    (hide)=\"onMenuHideColumn(menu.field)\" (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\"\n    (clearFilter)=\"onMenuClearFilter(menu.field)\" (clearAll)=\"onMenuClearAll()\"\n    (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\"\n    [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;box-sizing:border-box}.ag-quick-filter:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: AgridCellComponent, selector: "agrid-cell", inputs: ["col", "rowIndex", "colIndex", "value", "row", "locale", "selected", "editing", "editable", "error", "treeCell", "treeLevel", "treeExpandable", "treeExpanded", "seedChar"], outputs: ["treeToggle", "activate", "startEdit", "booleanToggle", "draftChange"] }, { kind: "component", type: AgridColumnMenuComponent, selector: "agrid-column-menu", inputs: ["localeText", "x", "y", "header", "sortDir", "sortable", "showColumnActions", "pinned", "groupable", "grouped", "filterable", "showValueFilter", "filterType", "operator", "operand", "operand2", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["operatorChange", "operandChange", "operand2Change", "sort", "resetSort", "autosize", "togglePin", "togglePinRight", "hide", "toggleGroup", "clearFilter", "clearAll", "searchChange", "toggleAll", "toggleValue", "setAggregate"] }, { kind: "component", type: AgridFindPanelComponent, selector: "agrid-find-panel", inputs: ["localeText", "query", "matchCount", "activeIndex"], outputs: ["queryChange", "next", "previous", "close"] }, { kind: "component", type: AgridSidebarComponent, selector: "agrid-sidebar", inputs: ["open", "activeTab", "columns", "headerGroups", "row", "hiddenColumns", "locale", "localeText", "readonlyGrid", "useSidebarEditor", "errors"], outputs: ["close", "tabChange", "toggleColumn", "toggleColumnGroup", "detailEdit", "save"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridComponent, isStandalone: true, selector: "agrid", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", recordEdit: "recordEdit", rowRemoved: "rowRemoved", prepareAddRecord: "prepareAddRecord", rowReorder: "rowReorder", rowSelect: "rowSelect", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", treeNodeClick: "treeNodeClick", treeNodeDoubleClicked: "treeNodeDoubleClicked", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange", quickFilterChange: "quickFilterChange", validationFailed: "validationFailed", cellInfo: "cellInfo", menuBarAction: "menuBarAction" }, host: { properties: { "class.ag-zebra": "zebraStripes()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "pinnedViewport", first: true, predicate: ["pinnedViewport"], descendants: true, isSignal: true }, { propertyName: "rightPinnedViewport", first: true, predicate: ["rightPinnedViewport"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "horizontalScrollerEl", first: true, predicate: ["horizontalScroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\" [attr.aria-busy]=\"loading() ? 'true' : null\"\n  (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu(); closeMenuBarMenu()\">\n  @if (visibleMenuBarItems().length > 0 || enableQuickFilter()) {\n  <div class=\"ag-toolbar\">\n    @if (visibleMenuBarItems().length > 0) {\n    <agrid-menu-bar [items]=\"visibleMenuBarItems()\" [context]=\"menuBarContext()\"\n      [label]=\"localeText().actions\" [openItemId]=\"openMenuBarItemId()\"\n      (openItemIdChange)=\"onMenuBarOpenItemChange($event)\" (action)=\"menuBarAction.emit($event)\" />\n    }\n    @if (enableQuickFilter()) {\n    <input class=\"ag-quick-filter\" type=\"search\" [value]=\"quickFilterValue()\" (input)=\"onQuickFilterInput($event)\"\n      [placeholder]=\"localeText().quickFilterPlaceholder\" [attr.aria-label]=\"localeText().quickFilterPlaceholder\" />\n    }\n  </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.data-control]=\"true\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (canToggleDetail(item)) {\n              <button class=\"ag-detail-toggle\" type=\"button\"\n                [class.ag-detail-toggle--expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().toggleDetail\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"onDetailToggle(item.originalIndex); $event.stopPropagation()\">\u25B6</button>\n              }\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"$event.stopPropagation()\" (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [agridVariableRowSize]=\"itemSizes()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"leftRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                @if (getMenuFilterType(col.field)) {\n                <button type=\"button\" class=\"ag-filter-condition-btn\"\n                  [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                  [title]=\"localeText().filterConditionMenu\"\n                  [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n                }\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n                (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <ng-template #bodyRow let-item let-ariaIndex=\"ariaIndex\">\n            <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\"\n                [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n                [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\"\n                (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n                (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\" [innerHTML]=\"detailHtml(item)\"></div>\n              } @else if (isPathTreeNodeItem(item)) {\n              <div class=\"ag-path-tree-content\" [style.min-width.px]=\"scrollableTotalWidth()\"\n                [style.padding-left.px]=\"treeRowLevel(item) * 16 + 8\"\n                (click)=\"onTreeNodeClick(item); $event.stopPropagation()\"\n                (dblclick)=\"onTreeNodeDoubleClick(item); $event.stopPropagation()\">\n                <button type=\"button\" class=\"ag-tree-twisty\"\n                  [class.ag-tree-twisty--expanded]=\"treeRowExpanded(item)\"\n                  [attr.aria-expanded]=\"treeRowExpanded(item)\"\n                  (click)=\"onTreeToggle(item); $event.stopPropagation()\">\u25B6</button>\n                <span>{{ pathTreeLabel(item) }}</span>\n              </div>\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                    @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                    <span class=\"ag-group-aggregate\">\n                      <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                      <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                      {{ getFooterDisplay(col, aggs[col.field]) }}\n                    </span>\n                    }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\" [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\" [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\" type=\"button\"\n                  (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </ng-template>\n\n          @if (hasPinnedTopRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--top\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedTopItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n            }\n          </div>\n          }\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [agridVariableRowSize]=\"itemSizes()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n              <ng-container [ngTemplateOutlet]=\"bodyRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n\n          @if (hasPinnedBottomRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--bottom\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedBottomItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n            }\n          </div>\n          }\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #rightRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\" [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [agridVariableRowSize]=\"itemSizes()\" [style.width.px]=\"rightPinnedPaneWidth()\"\n          (scroll)=\"onRightPinnedBodyScroll()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"rightRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar [open]=\"sidebarOpen()\" [activeTab]=\"sidebarTab()\" [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\" [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\"\n      [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\" (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\" (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\" (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\" (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  @if(hasContextMenuEntries()) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @if (!treeConfig()) {\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    }\n    @if (!readonlyGrid()) {\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n    }\n  </div>\n  }\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{\n      localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow\n      }}</button>\n    @if (!treeConfig()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    }\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{\n      localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">{{\n      localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\"\n      [disabled]=\"item.disabled\" (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\" [showColumnActions]=\"!!control()\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"!!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showValueFilter]=\"!serverSideFiltering()\" [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\" (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\" [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\"\n    (sort)=\"onMenuSort(menu.field, $event)\" (resetSort)=\"onMenuResetSort(menu.field, $event)\"\n    (autosize)=\"onMenuAutosizeColumn(menu.field)\" (togglePin)=\"onMenuTogglePin(menu.field)\"\n    (togglePinRight)=\"onMenuTogglePinRight(menu.field)\" (hide)=\"onMenuHideColumn(menu.field)\"\n    (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\" (clearFilter)=\"onMenuClearFilter(menu.field)\"\n    (clearAll)=\"onMenuClearAll()\" (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\" [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-condition-btn{flex:0 0 24px;height:20px;padding:0;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);cursor:pointer}.ag-filter-condition-btn:hover,.ag-filter-condition-btn:focus-visible{border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg)}.ag-filter-condition-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-path-tree-content{display:flex;align-items:center;gap:4px;height:100%;box-sizing:border-box;color:var(--agrid-color-text);font-weight:600;border-bottom:1px solid var(--agrid-color-border)}.ag-path-tree-content .ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;font-size:10px;transition:transform .12s ease}.ag-path-tree-content .ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{margin-left:auto;width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-quick-filter:focus{border-color:var(--agrid-color-accent-border)}.ag-detail-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;font-size:9px;line-height:1;color:var(--agrid-color-text-muted);transition:transform .12s ease,color .12s ease}.ag-detail-toggle:hover{color:var(--agrid-color-text)}.ag-detail-toggle--expanded{transform:rotate(90deg)}.ag-detail-row{display:block;position:relative;box-sizing:border-box}.ag-detail-panel{box-sizing:border-box;height:100%;overflow:auto;padding:8px 12px;background:var(--agrid-color-bg-subtle);border-bottom:1px solid var(--agrid-color-border)}.ag-pinned-rows{position:relative;z-index:3;flex:none;background:var(--agrid-color-bg)}.ag-pinned-rows--top{box-shadow:0 2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows--bottom{box-shadow:0 -2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows .ag-row{background:var(--agrid-color-bg-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AgridVariableRowSizeDirective, selector: "cdk-virtual-scroll-viewport[agridVariableRowSize]", inputs: ["agridVariableRowSize"] }, { kind: "component", type: AgridCellComponent, selector: "agrid-cell", inputs: ["col", "rowIndex", "colIndex", "value", "displayValueOverride", "row", "locale", "selected", "editing", "editable", "showInfoIcon", "error", "treeCell", "treeLevel", "treeExpandable", "treeExpanded", "seedChar", "selectTextOnEdit"], outputs: ["treeToggle", "activate", "startEdit", "booleanToggle", "infoClick", "draftChange"] }, { kind: "component", type: AgridMenuBarComponent, selector: "agrid-menu-bar", inputs: ["items", "context", "label", "openItemId"], outputs: ["action", "openItemIdChange"] }, { kind: "component", type: AgridColumnMenuComponent, selector: "agrid-column-menu", inputs: ["localeText", "x", "y", "header", "sortDir", "sortable", "showColumnActions", "pinned", "groupable", "grouped", "filterable", "showValueFilter", "filterType", "operator", "operand", "operand2", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["operatorChange", "operandChange", "operand2Change", "sort", "resetSort", "autosize", "togglePin", "togglePinRight", "hide", "toggleGroup", "clearFilter", "clearAll", "searchChange", "toggleAll", "toggleValue", "setAggregate"] }, { kind: "component", type: AgridFindPanelComponent, selector: "agrid-find-panel", inputs: ["localeText", "query", "matchCount", "activeIndex"], outputs: ["queryChange", "next", "previous", "close"] }, { kind: "component", type: AgridSidebarComponent, selector: "agrid-sidebar", inputs: ["open", "activeTab", "columns", "headerGroups", "row", "rowIndex", "hiddenColumns", "locale", "localeText", "readonlyGrid", "useSidebarEditor", "isCellEditable", "errors"], outputs: ["close", "tabChange", "toggleColumn", "toggleColumnGroup", "detailEdit", "save"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ScrollingModule,
+                        NgTemplateOutlet,
+                        AgridVariableRowSizeDirective,
                         AgridCellComponent,
+                        AgridMenuBarComponent,
                         AgridColumnMenuComponent,
                         AgridFindPanelComponent,
                         AgridSidebarComponent,
@@ -6004,8 +7245,411 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         '[class.ag-zebra]': 'zebraStripes()',
                         '[style.min-height]': 'minHeight()',
                         '[style.max-height]': 'maxHeight()',
-                    }, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\" (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\"\n  (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu()\">\n  @if (enableQuickFilter()) {\n    <div class=\"ag-toolbar\">\n      <input\n        class=\"ag-quick-filter\"\n        type=\"search\"\n        [value]=\"quickFilterValue()\"\n        (input)=\"onQuickFilterInput($event)\"\n        [placeholder]=\"localeText().quickFilterPlaceholder\"\n        [attr.aria-label]=\"localeText().quickFilterPlaceholder\"\n      />\n    </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [itemSize]=\"rowHeight()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\"\n              [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\"\n                (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [itemSize]=\"rowHeight()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n              [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n                [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n                [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n                (treeToggle)=\"onTreeToggle(item)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                      @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                      <span class=\"ag-group-aggregate\">\n                        <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                        <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                        {{ getFooterDisplay(col, aggs[col.field]) }}\n                      </span>\n                      }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\"\n                [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\"\n                [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\"\n                  type=\"button\" (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\"\n            [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [itemSize]=\"rowHeight()\" [style.width.px]=\"rightPinnedPaneWidth()\" (scroll)=\"onRightPinnedBodyScroll()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar\n      [open]=\"sidebarOpen()\"\n      [activeTab]=\"sidebarTab()\"\n      [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\"\n      [locale]=\"locale()\"\n      [localeText]=\"localeText()\"\n      [readonlyGrid]=\"readonlyGrid()\"\n      [useSidebarEditor]=\"useSidebarEditor()\"\n      [errors]=\"sidebarValidationErrors()\"\n      (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\"\n    />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\"\n      (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\"\n      (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n  </div>\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow }}</button>\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{ localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\"\n      (click)=\"deleteRow(menu.rowIndex)\">{{ localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\" [disabled]=\"item.disabled\"\n      (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\"\n    [showColumnActions]=\"!!control()\" [pinned]=\"getColumnPinState(menu.field)\"\n    [groupable]=\"!!getColDef(menu.field)?.groupable\" [grouped]=\"isGroupedByField(menu.field)\"\n    [filterable]=\"!!getColDef(menu.field)?.filterable\" [showValueFilter]=\"!serverSideFiltering()\"\n    [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\"\n    [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\"\n    [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\" (sort)=\"onMenuSort(menu.field, $event)\"\n    (resetSort)=\"onMenuResetSort(menu.field, $event)\" (autosize)=\"onMenuAutosizeColumn(menu.field)\"\n    (togglePin)=\"onMenuTogglePin(menu.field)\" (togglePinRight)=\"onMenuTogglePinRight(menu.field)\"\n    (hide)=\"onMenuHideColumn(menu.field)\" (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\"\n    (clearFilter)=\"onMenuClearFilter(menu.field)\" (clearAll)=\"onMenuClearAll()\"\n    (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\"\n    [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;box-sizing:border-box}.ag-quick-filter:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], recordEdit: [{ type: i0.Output, args: ["recordEdit"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], prepareAddRecord: [{ type: i0.Output, args: ["prepareAddRecord"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowChanged: [{ type: i0.Output, args: ["rowChanged"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], quickFilterChange: [{ type: i0.Output, args: ["quickFilterChange"] }], validationFailed: [{ type: i0.Output, args: ["validationFailed"] }], viewport: [{ type: i0.ViewChild, args: ['scrollViewport', { isSignal: true }] }], pinnedViewport: [{ type: i0.ViewChild, args: ['pinnedViewport', { isSignal: true }] }], rightPinnedViewport: [{ type: i0.ViewChild, args: ['rightPinnedViewport', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], horizontalScrollerEl: [{ type: i0.ViewChild, args: ['horizontalScroller', { isSignal: true }] }] } });
+                    }, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\" [attr.aria-busy]=\"loading() ? 'true' : null\"\n  (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu(); closeMenuBarMenu()\">\n  @if (visibleMenuBarItems().length > 0 || enableQuickFilter()) {\n  <div class=\"ag-toolbar\">\n    @if (visibleMenuBarItems().length > 0) {\n    <agrid-menu-bar [items]=\"visibleMenuBarItems()\" [context]=\"menuBarContext()\"\n      [label]=\"localeText().actions\" [openItemId]=\"openMenuBarItemId()\"\n      (openItemIdChange)=\"onMenuBarOpenItemChange($event)\" (action)=\"menuBarAction.emit($event)\" />\n    }\n    @if (enableQuickFilter()) {\n    <input class=\"ag-quick-filter\" type=\"search\" [value]=\"quickFilterValue()\" (input)=\"onQuickFilterInput($event)\"\n      [placeholder]=\"localeText().quickFilterPlaceholder\" [attr.aria-label]=\"localeText().quickFilterPlaceholder\" />\n    }\n  </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.data-control]=\"true\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (canToggleDetail(item)) {\n              <button class=\"ag-detail-toggle\" type=\"button\"\n                [class.ag-detail-toggle--expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().toggleDetail\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"onDetailToggle(item.originalIndex); $event.stopPropagation()\">\u25B6</button>\n              }\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"$event.stopPropagation()\" (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [agridVariableRowSize]=\"itemSizes()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"leftRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                @if (getMenuFilterType(col.field)) {\n                <button type=\"button\" class=\"ag-filter-condition-btn\"\n                  [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                  [title]=\"localeText().filterConditionMenu\"\n                  [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n                }\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n                (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <ng-template #bodyRow let-item let-ariaIndex=\"ariaIndex\">\n            <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\"\n                [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n                [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\"\n                (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n                (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\" [innerHTML]=\"detailHtml(item)\"></div>\n              } @else if (isPathTreeNodeItem(item)) {\n              <div class=\"ag-path-tree-content\" [style.min-width.px]=\"scrollableTotalWidth()\"\n                [style.padding-left.px]=\"treeRowLevel(item) * 16 + 8\"\n                (click)=\"onTreeNodeClick(item); $event.stopPropagation()\"\n                (dblclick)=\"onTreeNodeDoubleClick(item); $event.stopPropagation()\">\n                <button type=\"button\" class=\"ag-tree-twisty\"\n                  [class.ag-tree-twisty--expanded]=\"treeRowExpanded(item)\"\n                  [attr.aria-expanded]=\"treeRowExpanded(item)\"\n                  (click)=\"onTreeToggle(item); $event.stopPropagation()\">\u25B6</button>\n                <span>{{ pathTreeLabel(item) }}</span>\n              </div>\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                    @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                    <span class=\"ag-group-aggregate\">\n                      <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                      <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                      {{ getFooterDisplay(col, aggs[col.field]) }}\n                    </span>\n                    }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\" [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\" [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\" type=\"button\"\n                  (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </ng-template>\n\n          @if (hasPinnedTopRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--top\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedTopItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n            }\n          </div>\n          }\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [agridVariableRowSize]=\"itemSizes()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n              <ng-container [ngTemplateOutlet]=\"bodyRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n\n          @if (hasPinnedBottomRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--bottom\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedBottomItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n            }\n          </div>\n          }\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #rightRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\" [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [agridVariableRowSize]=\"itemSizes()\" [style.width.px]=\"rightPinnedPaneWidth()\"\n          (scroll)=\"onRightPinnedBodyScroll()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"rightRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar [open]=\"sidebarOpen()\" [activeTab]=\"sidebarTab()\" [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\" [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\"\n      [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\" (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\" (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\" (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\" (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  @if(hasContextMenuEntries()) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @if (!treeConfig()) {\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    }\n    @if (!readonlyGrid()) {\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n    }\n  </div>\n  }\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{\n      localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow\n      }}</button>\n    @if (!treeConfig()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    }\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{\n      localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">{{\n      localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\"\n      [disabled]=\"item.disabled\" (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\" [showColumnActions]=\"!!control()\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"!!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showValueFilter]=\"!serverSideFiltering()\" [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\" (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\" [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\"\n    (sort)=\"onMenuSort(menu.field, $event)\" (resetSort)=\"onMenuResetSort(menu.field, $event)\"\n    (autosize)=\"onMenuAutosizeColumn(menu.field)\" (togglePin)=\"onMenuTogglePin(menu.field)\"\n    (togglePinRight)=\"onMenuTogglePinRight(menu.field)\" (hide)=\"onMenuHideColumn(menu.field)\"\n    (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\" (clearFilter)=\"onMenuClearFilter(menu.field)\"\n    (clearAll)=\"onMenuClearAll()\" (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\" [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-condition-btn{flex:0 0 24px;height:20px;padding:0;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);cursor:pointer}.ag-filter-condition-btn:hover,.ag-filter-condition-btn:focus-visible{border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg)}.ag-filter-condition-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-path-tree-content{display:flex;align-items:center;gap:4px;height:100%;box-sizing:border-box;color:var(--agrid-color-text);font-weight:600;border-bottom:1px solid var(--agrid-color-border)}.ag-path-tree-content .ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;font-size:10px;transition:transform .12s ease}.ag-path-tree-content .ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{margin-left:auto;width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-quick-filter:focus{border-color:var(--agrid-color-accent-border)}.ag-detail-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;font-size:9px;line-height:1;color:var(--agrid-color-text-muted);transition:transform .12s ease,color .12s ease}.ag-detail-toggle:hover{color:var(--agrid-color-text)}.ag-detail-toggle--expanded{transform:rotate(90deg)}.ag-detail-row{display:block;position:relative;box-sizing:border-box}.ag-detail-panel{box-sizing:border-box;height:100%;overflow:auto;padding:8px 12px;background:var(--agrid-color-bg-subtle);border-bottom:1px solid var(--agrid-color-border)}.ag-pinned-rows{position:relative;z-index:3;flex:none;background:var(--agrid-color-bg)}.ag-pinned-rows--top{box-shadow:0 2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows--bottom{box-shadow:0 -2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows .ag-row{background:var(--agrid-color-bg-subtle)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], recordEdit: [{ type: i0.Output, args: ["recordEdit"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], prepareAddRecord: [{ type: i0.Output, args: ["prepareAddRecord"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], treeNodeClick: [{ type: i0.Output, args: ["treeNodeClick"] }], treeNodeDoubleClicked: [{ type: i0.Output, args: ["treeNodeDoubleClicked"] }], rowChanged: [{ type: i0.Output, args: ["rowChanged"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], quickFilterChange: [{ type: i0.Output, args: ["quickFilterChange"] }], validationFailed: [{ type: i0.Output, args: ["validationFailed"] }], cellInfo: [{ type: i0.Output, args: ["cellInfo"] }], menuBarAction: [{ type: i0.Output, args: ["menuBarAction"] }], viewport: [{ type: i0.ViewChild, args: ['scrollViewport', { isSignal: true }] }], pinnedViewport: [{ type: i0.ViewChild, args: ['pinnedViewport', { isSignal: true }] }], rightPinnedViewport: [{ type: i0.ViewChild, args: ['rightPinnedViewport', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], horizontalScrollerEl: [{ type: i0.ViewChild, args: ['horizontalScroller', { isSignal: true }] }] } });
+
+let nextPageSelectorId = 0;
+/** Compact previous/input/dropdown/next control for navigating a labeled page list. */
+class AgridPageSelectorComponent {
+    elementRef = inject(ElementRef);
+    listboxId = `agrid-page-options-${nextPageSelectorId++}`;
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    selectedId = input(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+    selectedPageNumber = input(null, ...(ngDevMode ? [{ debugName: "selectedPageNumber" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    previousLabel = input('Previous page', ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
+    nextLabel = input('Next page', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    inputLabel = input('Page ID', ...(ngDevMode ? [{ debugName: "inputLabel" }] : /* istanbul ignore next */ []));
+    menuLabel = input('Choose a page', ...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
+    emptyText = input('No pages', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    selectPage = output();
+    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    invalid = signal(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : /* istanbul ignore next */ []));
+    activeIndex = computed(() => this.items().findIndex(item => this.idsEqual(item.id, this.activeId())), ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    hasPrevious = computed(() => !this.disabled() && this.activeIndex() > 0, ...(ngDevMode ? [{ debugName: "hasPrevious" }] : /* istanbul ignore next */ []));
+    hasNext = computed(() => {
+        const index = this.activeIndex();
+        return !this.disabled() && index >= 0 && index < this.items().length - 1;
+    }, ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const id = this.selectedId();
+            this.activeId.set(id);
+            const item = this.items().find(i => i.id === id);
+            this.draft.set(item?.pageNumber == null ? '' : String(item?.pageNumber));
+            this.draft.set(id == null ? '' : String(id));
+            this.invalid.set(false);
+        });
+        effect(() => {
+            const nr = this.selectedPageNumber();
+            // fetch the page 
+            const item = this.items().find(i => i.pageNumber === nr);
+            this.activeId.set(item?.id ?? null);
+            this.draft.set(item?.pageNumber == null ? '' : String(item?.pageNumber));
+            this.invalid.set(false);
+        });
+    }
+    previous() {
+        if (!this.hasPrevious())
+            return;
+        this.choose(this.items()[this.activeIndex() - 1]);
+    }
+    next() {
+        if (!this.hasNext())
+            return;
+        this.choose(this.items()[this.activeIndex() + 1]);
+    }
+    toggleMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled() || this.items().length === 0)
+            return;
+        this.menuOpen() ? this.closeMenu() : this.openMenu();
+    }
+    openMenu() {
+        if (this.disabled() || this.items().length === 0)
+            return;
+        const current = this.activeIndex();
+        this.focusedOptionIndex.set(current >= 0 ? current : 0);
+        this.menuOpen.set(true);
+        this.scrollFocusedOptionIntoView();
+    }
+    closeMenu() {
+        this.menuOpen.set(false);
+        this.focusedOptionIndex.set(-1);
+    }
+    onInput(event) {
+        this.draft.set(event.target.value);
+        this.invalid.set(false);
+        this.closeMenu();
+    }
+    onInputKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeMenu();
+            this.resetDraft();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!this.menuOpen())
+                this.openMenu();
+            else
+                this.moveOption(event.key === 'ArrowDown' ? 1 : -1);
+            return;
+        }
+        if (event.key === 'Home' && this.menuOpen()) {
+            event.preventDefault();
+            this.focusedOptionIndex.set(0);
+            this.scrollFocusedOptionIntoView();
+            return;
+        }
+        if (event.key === 'End' && this.menuOpen()) {
+            event.preventDefault();
+            this.focusedOptionIndex.set(this.items().length - 1);
+            this.scrollFocusedOptionIntoView();
+            return;
+        }
+        if (event.key !== 'Enter')
+            return;
+        event.preventDefault();
+        const focused = this.menuOpen() ? this.items()[this.focusedOptionIndex()] : undefined;
+        if (focused)
+            this.choose(focused);
+        else
+            this.selectDraft();
+    }
+    choose(item) {
+        if (this.disabled())
+            return;
+        this.activeId.set(item.id);
+        this.draft.set(String(item.id));
+        this.invalid.set(false);
+        this.closeMenu();
+        this.selectPage.emit(item);
+    }
+    optionId(index) {
+        return `${this.listboxId}-option-${index}`;
+    }
+    isSelected(item) {
+        return this.idsEqual(item.id, this.activeId());
+    }
+    onDocumentPointerDown(event) {
+        if (!this.menuOpen())
+            return;
+        if (!this.elementRef.nativeElement.contains(event.target))
+            this.closeMenu();
+    }
+    selectDraft() {
+        const value = this.draft().trim();
+        const item = this.items().find(candidate => String(candidate.id) === value);
+        if (item)
+            this.choose(item);
+        else
+            this.invalid.set(true);
+    }
+    resetDraft() {
+        const id = this.activeId();
+        this.draft.set(id == null ? '' : String(id));
+        this.invalid.set(false);
+    }
+    moveOption(direction) {
+        const count = this.items().length;
+        if (count === 0)
+            return;
+        const current = this.focusedOptionIndex();
+        this.focusedOptionIndex.set((current + direction + count) % count);
+        this.scrollFocusedOptionIntoView();
+    }
+    scrollFocusedOptionIntoView() {
+        queueMicrotask(() => this.elementRef.nativeElement
+            .querySelector(`#${this.optionId(this.focusedOptionIndex())}`)
+            ?.scrollIntoView?.({ block: 'nearest' }));
+    }
+    idsEqual(left, right) {
+        return right !== null && left === right;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridPageSelectorComponent, isStandalone: true, selector: "agrid-page-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, selectedPageNumber: { classPropertyName: "selectedPageNumber", publicName: "selectedPageNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectPage: "selectPage" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, ngImport: i0, template: "<div class=\"ag-page-selector\" [class.ag-page-selector--disabled]=\"disabled()\">\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasPrevious()\"\n    [attr.aria-label]=\"previousLabel()\" [title]=\"previousLabel()\" (click)=\"previous()\">\n    <span aria-hidden=\"true\">&#8249;</span>\n  </button>\n\n  <div class=\"ag-page-combo\">\n    <div class=\"ag-page-input-group\" [class.ag-page-input-group--open]=\"menuOpen()\"\n      [class.ag-page-input-group--invalid]=\"invalid()\">\n      <input class=\"ag-page-input\" type=\"text\" inputmode=\"text\" autocomplete=\"off\"\n        role=\"combobox\" [value]=\"draft()\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"inputLabel()\" [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"menuOpen() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"menuOpen() && focusedOptionIndex() >= 0 ? optionId(focusedOptionIndex()) : null\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (input)=\"onInput($event)\" (keydown)=\"onInputKeydown($event)\" />\n      <button type=\"button\" class=\"ag-page-trigger\" [disabled]=\"disabled() || items().length === 0\"\n        [attr.aria-label]=\"menuLabel()\" [title]=\"menuLabel()\"\n        [attr.aria-expanded]=\"menuOpen()\" aria-haspopup=\"listbox\"\n        (click)=\"toggleMenu($event)\">\n        <span aria-hidden=\"true\">&#9662;</span>\n      </button>\n    </div>\n\n    @if (menuOpen()) {\n      <div [id]=\"listboxId\" class=\"ag-page-options\" role=\"listbox\"\n        [attr.aria-label]=\"menuLabel()\" (pointerdown)=\"$event.stopPropagation()\">\n        @for (item of items(); track item.id; let index = $index) {\n          <button type=\"button\" class=\"ag-page-option\" role=\"option\" [id]=\"optionId(index)\"\n            [class.ag-page-option--selected]=\"isSelected(item)\"\n            [class.ag-page-option--focused]=\"focusedOptionIndex() === index\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            (mouseenter)=\"focusedOptionIndex.set(index)\" (click)=\"choose(item)\">\n            <span class=\"ag-page-option-id\">{{ item.pageNumber }}</span>\n            <span class=\"ag-page-option-label\">{{ item.label }}</span>\n          </button>\n        } @empty {\n          <div class=\"ag-page-empty\">{{ emptyText() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasNext()\"\n    [attr.aria-label]=\"nextLabel()\" [title]=\"nextLabel()\" (click)=\"next()\">\n    <span aria-hidden=\"true\">&#8250;</span>\n  </button>\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2)}}:host{display:inline-block;color:var(--agrid-color-text);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-page-selector{display:inline-flex;align-items:center;gap:4px}.ag-page-nav,.ag-page-trigger{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-nav{width:32px;border-radius:4px;font-size:20px}.ag-page-trigger{width:30px;border-width:0 0 0 1px;font-size:10px}.ag-page-nav:active:not(:disabled),.ag-page-trigger:active:not(:disabled),.ag-page-option:active{transform:scale(.97)}.ag-page-nav:disabled,.ag-page-trigger:disabled,.ag-page-input:disabled{opacity:.48;cursor:not-allowed}.ag-page-nav:focus-visible,.ag-page-trigger:focus-visible,.ag-page-input:focus-visible,.ag-page-option:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-page-combo{position:relative;width:clamp(150px,24vw,230px)}.ag-page-input-group{display:flex;height:32px;overflow:hidden;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg)}.ag-page-input-group:focus-within,.ag-page-input-group--open{border-color:var(--agrid-color-accent)}.ag-page-input-group--invalid{border-color:var(--agrid-color-danger, #d1242f)}.ag-page-input{min-width:0;flex:1;padding:0 9px;border:0;outline:0;background:transparent;color:var(--agrid-color-text);font:inherit}.ag-page-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;width:max(100%,220px);max-width:min(320px,calc(100vw - 24px));max-height:280px;overflow-y:auto;padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top right}.ag-page-option{display:grid;grid-template-columns:minmax(32px,auto) minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:34px;padding:5px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-option--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-page-option-id{color:var(--agrid-color-text-muted);font-variant-numeric:tabular-nums}.ag-page-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-page-empty{padding:12px 8px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-page-nav:hover:not(:disabled),.ag-page-trigger:hover:not(:disabled),.ag-page-option--focused:not(.ag-page-option--selected){background:var(--agrid-color-bg-muted)}}@media(max-width:420px){.ag-page-combo{width:min(210px,calc(100vw - 92px))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridPageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'agrid-page-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-page-selector\" [class.ag-page-selector--disabled]=\"disabled()\">\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasPrevious()\"\n    [attr.aria-label]=\"previousLabel()\" [title]=\"previousLabel()\" (click)=\"previous()\">\n    <span aria-hidden=\"true\">&#8249;</span>\n  </button>\n\n  <div class=\"ag-page-combo\">\n    <div class=\"ag-page-input-group\" [class.ag-page-input-group--open]=\"menuOpen()\"\n      [class.ag-page-input-group--invalid]=\"invalid()\">\n      <input class=\"ag-page-input\" type=\"text\" inputmode=\"text\" autocomplete=\"off\"\n        role=\"combobox\" [value]=\"draft()\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"inputLabel()\" [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"menuOpen() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"menuOpen() && focusedOptionIndex() >= 0 ? optionId(focusedOptionIndex()) : null\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (input)=\"onInput($event)\" (keydown)=\"onInputKeydown($event)\" />\n      <button type=\"button\" class=\"ag-page-trigger\" [disabled]=\"disabled() || items().length === 0\"\n        [attr.aria-label]=\"menuLabel()\" [title]=\"menuLabel()\"\n        [attr.aria-expanded]=\"menuOpen()\" aria-haspopup=\"listbox\"\n        (click)=\"toggleMenu($event)\">\n        <span aria-hidden=\"true\">&#9662;</span>\n      </button>\n    </div>\n\n    @if (menuOpen()) {\n      <div [id]=\"listboxId\" class=\"ag-page-options\" role=\"listbox\"\n        [attr.aria-label]=\"menuLabel()\" (pointerdown)=\"$event.stopPropagation()\">\n        @for (item of items(); track item.id; let index = $index) {\n          <button type=\"button\" class=\"ag-page-option\" role=\"option\" [id]=\"optionId(index)\"\n            [class.ag-page-option--selected]=\"isSelected(item)\"\n            [class.ag-page-option--focused]=\"focusedOptionIndex() === index\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            (mouseenter)=\"focusedOptionIndex.set(index)\" (click)=\"choose(item)\">\n            <span class=\"ag-page-option-id\">{{ item.pageNumber }}</span>\n            <span class=\"ag-page-option-label\">{{ item.label }}</span>\n          </button>\n        } @empty {\n          <div class=\"ag-page-empty\">{{ emptyText() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasNext()\"\n    [attr.aria-label]=\"nextLabel()\" [title]=\"nextLabel()\" (click)=\"next()\">\n    <span aria-hidden=\"true\">&#8250;</span>\n  </button>\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2)}}:host{display:inline-block;color:var(--agrid-color-text);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-page-selector{display:inline-flex;align-items:center;gap:4px}.ag-page-nav,.ag-page-trigger{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-nav{width:32px;border-radius:4px;font-size:20px}.ag-page-trigger{width:30px;border-width:0 0 0 1px;font-size:10px}.ag-page-nav:active:not(:disabled),.ag-page-trigger:active:not(:disabled),.ag-page-option:active{transform:scale(.97)}.ag-page-nav:disabled,.ag-page-trigger:disabled,.ag-page-input:disabled{opacity:.48;cursor:not-allowed}.ag-page-nav:focus-visible,.ag-page-trigger:focus-visible,.ag-page-input:focus-visible,.ag-page-option:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-page-combo{position:relative;width:clamp(150px,24vw,230px)}.ag-page-input-group{display:flex;height:32px;overflow:hidden;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg)}.ag-page-input-group:focus-within,.ag-page-input-group--open{border-color:var(--agrid-color-accent)}.ag-page-input-group--invalid{border-color:var(--agrid-color-danger, #d1242f)}.ag-page-input{min-width:0;flex:1;padding:0 9px;border:0;outline:0;background:transparent;color:var(--agrid-color-text);font:inherit}.ag-page-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;width:max(100%,220px);max-width:min(320px,calc(100vw - 24px));max-height:280px;overflow-y:auto;padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top right}.ag-page-option{display:grid;grid-template-columns:minmax(32px,auto) minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:34px;padding:5px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-option--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-page-option-id{color:var(--agrid-color-text-muted);font-variant-numeric:tabular-nums}.ag-page-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-page-empty{padding:12px 8px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-page-nav:hover:not(:disabled),.ag-page-trigger:hover:not(:disabled),.ag-page-option--focused:not(.ag-page-option--selected){background:var(--agrid-color-bg-muted)}}@media(max-width:420px){.ag-page-combo{width:min(210px,calc(100vw - 92px))}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], selectedPageNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPageNumber", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], inputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabel", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], selectPage: [{ type: i0.Output, args: ["selectPage"] }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ['document:pointerdown', ['$event']]
+            }] } });
+
+function isPathNode(item) {
+    return 'pathNodeId' in item;
+}
+/** Standalone accessible tree control backed by the same projection logic as `AgridComponent`. */
+class AgridTreeComponent {
+    provider = input.required(...(ngDevMode ? [{ debugName: "provider" }] : /* istanbul ignore next */ []));
+    nodeClick = output();
+    nodeDoubleClicked = output();
+    selectionChange = output();
+    treeController = new AgridTreeController();
+    treeElement = viewChild('tree', ...(ngDevMode ? [{ debugName: "treeElement" }] : /* istanbul ignore next */ []));
+    initializedProvider = null;
+    focusedIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    selectedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    expandedIds = this.treeController.expandedIds;
+    items = computed(() => {
+        const provider = this.provider();
+        const rows = provider.datasource.rows();
+        const indices = rows.map((_, index) => index);
+        const config = provider.treeConfig;
+        const projected = isPathTreeConfig(config)
+            ? buildPathTreeItems(rows, indices, config, this.expandedIds())
+            : buildTreeItems(rows, indices, config, this.expandedIds());
+        return projected.filter((item) => item !== null && typeof item === 'object' && 'level' in item
+            && ('pathNodeId' in item || 'row' in item));
+    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const provider = this.provider();
+            if (provider === this.initializedProvider)
+                return;
+            this.initializedProvider = provider;
+            this.selectedKeys.set(new Set());
+            this.focusedIndex.set(0);
+            provider.treeConfig.defaultExpanded ? this.expandAllNodes() : this.collapseAllNodes();
+        });
+    }
+    /** Expands every branch currently represented by the datasource. */
+    expandAllNodes() {
+        const provider = this.provider();
+        const config = provider.treeConfig;
+        const rows = provider.datasource.rows();
+        if (isPathTreeConfig(config)) {
+            const ids = new Set();
+            for (const row of rows) {
+                const path = config.getPath(row).map(String).filter(Boolean);
+                for (let length = 1; length < path.length; length++) {
+                    ids.add(pathTreeNodeId(path.slice(0, length)));
+                }
+            }
+            this.treeController.expandAll(ids);
+            return;
+        }
+        const ids = new Set();
+        for (const row of rows) {
+            const parentId = config.getParentId(row);
+            if (parentId != null)
+                ids.add(parentId);
+        }
+        this.treeController.expandAll(ids);
+    }
+    /** Collapses every branch. */
+    collapseAllNodes() {
+        this.treeController.collapseAll();
+    }
+    /** Toggles one expandable node. */
+    toggleNode(item) {
+        if (!item.expandable)
+            return;
+        this.treeController.toggle(this.expansionId(item));
+    }
+    /** @internal */
+    label(item) {
+        if (isPathNode(item))
+            return item.pathLabel;
+        if (item.treeLabel !== undefined)
+            return item.treeLabel;
+        const provider = this.provider();
+        return provider.getLabel?.(item.row) ?? String(item.row[provider.treeConfig.treeField] ?? '');
+    }
+    /** @internal */
+    description(item) {
+        return isPathNode(item) ? undefined : this.provider().getDescription?.(item.row);
+    }
+    /** @internal */
+    isSelected(item) {
+        return this.selectedKeys().has(this.selectionKey(item));
+    }
+    /** @internal */
+    onNodeClick(event, item, index) {
+        event.stopPropagation();
+        this.focusedIndex.set(index);
+        this.select(item, event.metaKey || event.ctrlKey);
+        this.nodeClick.emit(this.toEvent(item));
+    }
+    /** @internal */
+    onNodeDoubleClick(event, item) {
+        event.stopPropagation();
+        this.nodeDoubleClicked.emit(this.toEvent(item));
+    }
+    /** @internal */
+    onKeydown(event, item, index) {
+        const items = this.items();
+        if (event.key === 'ArrowDown')
+            return this.moveFocus(event, Math.min(index + 1, items.length - 1));
+        if (event.key === 'ArrowUp')
+            return this.moveFocus(event, Math.max(index - 1, 0));
+        if (event.key === 'Home')
+            return this.moveFocus(event, 0);
+        if (event.key === 'End')
+            return this.moveFocus(event, items.length - 1);
+        if (event.key === 'ArrowRight' && item.expandable) {
+            event.preventDefault();
+            if (!item.expanded)
+                this.toggleNode(item);
+            else
+                this.moveFocus(event, Math.min(index + 1, items.length - 1));
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            if (item.expandable && item.expanded)
+                this.toggleNode(item);
+            else {
+                const parent = this.findParentIndex(index, item.level);
+                if (parent >= 0)
+                    this.focusNode(parent);
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.select(item, event.metaKey || event.ctrlKey);
+            this.nodeClick.emit(this.toEvent(item));
+        }
+    }
+    /** @internal */
+    trackItem(_index, item) {
+        return this.selectionKey(item);
+    }
+    select(item, additive) {
+        const mode = this.provider().selection;
+        if (mode === 'none')
+            return;
+        const key = this.selectionKey(item);
+        this.selectedKeys.update(current => {
+            const next = mode === 'multi' && additive ? new Set(current) : new Set();
+            if (mode === 'multi' && additive && next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+        const selected = this.items().filter(candidate => this.selectedKeys().has(this.selectionKey(candidate)));
+        this.selectionChange.emit({ nodes: selected.map(candidate => this.toEvent(candidate)) });
+    }
+    toEvent(item) {
+        if (isPathNode(item)) {
+            return {
+                kind: 'branch', id: item.pathNodeId, uuid: item.uuid, label: item.pathLabel,
+                level: item.level, expandable: true, expanded: item.expanded,
+            };
+        }
+        const config = this.provider().treeConfig;
+        const id = isPathTreeConfig(config) ? item.originalIndex : config.getId(item.row);
+        return {
+            kind: 'row', id, label: this.label(item), level: item.level,
+            expandable: item.expandable, expanded: item.expanded,
+            row: item.row, originalIndex: item.originalIndex,
+        };
+    }
+    expansionId(item) {
+        if (isPathNode(item))
+            return item.pathNodeId;
+        const config = this.provider().treeConfig;
+        return isPathTreeConfig(config) ? item.originalIndex : config.getId(item.row);
+    }
+    selectionKey(item) {
+        return isPathNode(item)
+            ? `branch:${item.pathNodeId}`
+            : `row:${this.expansionId(item)}`;
+    }
+    moveFocus(event, index) {
+        event.preventDefault();
+        this.focusNode(index);
+    }
+    focusNode(index) {
+        this.focusedIndex.set(index);
+        queueMicrotask(() => this.treeElement()?.nativeElement
+            .querySelector(`[data-tree-index="${index}"]`)?.focus());
+    }
+    findParentIndex(index, level) {
+        for (let candidate = index - 1; candidate >= 0; candidate--) {
+            if (this.items()[candidate].level < level)
+                return candidate;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridTreeComponent, isStandalone: true, selector: "agrid-tree", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeDoubleClicked: "nodeDoubleClicked", selectionChange: "selectionChange" }, host: { properties: { "style.--agrid-tree-row-height.px": "provider().rowHeight" } }, viewQueries: [{ propertyName: "treeElement", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #tree class=\"ag-tree\" role=\"tree\" [attr.aria-label]=\"provider().ariaLabel\"\n  [attr.aria-multiselectable]=\"provider().selection === 'multi' ? 'true' : null\">\n  @for (item of items(); track trackItem($index, item); let index = $index) {\n    <div class=\"ag-tree-node\" role=\"treeitem\" [attr.data-tree-index]=\"index\"\n      [attr.tabindex]=\"focusedIndex() === index ? 0 : -1\"\n      [attr.aria-level]=\"item.level + 1\"\n      [attr.aria-expanded]=\"item.expandable ? item.expanded : null\"\n      [attr.aria-selected]=\"provider().selection !== 'none' ? isSelected(item) : null\"\n      [class.ag-tree-node--selected]=\"isSelected(item)\"\n      [style.padding-left.px]=\"8 + item.level * 20\"\n      (click)=\"onNodeClick($event, item, index)\"\n      (dblclick)=\"onNodeDoubleClick($event, item)\"\n      (keydown)=\"onKeydown($event, item, index)\">\n      <button class=\"ag-tree-toggle\" type=\"button\" tabindex=\"-1\"\n        [class.ag-tree-toggle--expanded]=\"item.expanded\"\n        [class.ag-tree-toggle--hidden]=\"!item.expandable\"\n        [attr.aria-label]=\"(item.expanded ? 'Collapse ' : 'Expand ') + label(item)\"\n        (click)=\"toggleNode(item); $event.stopPropagation()\">&#9656;</button>\n      <span class=\"ag-tree-content\">\n        <span class=\"ag-tree-label\">{{ label(item) }}</span>\n        @if (description(item); as detail) {\n          <span class=\"ag-tree-description\">{{ detail }}</span>\n        }\n      </span>\n    </div>\n  } @empty {\n    <div class=\"ag-tree-empty\">{{ provider().emptyText }}</div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa}}:host{display:block;min-width:180px;min-height:0;overflow:auto;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-tree{min-width:max-content;padding:4px}.ag-tree-node{display:flex;align-items:center;min-width:100%;height:var(--agrid-tree-row-height);padding-right:10px;border-radius:4px;box-sizing:border-box;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.ag-tree-node--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-tree-node:focus-visible{box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-tree-toggle{display:inline-flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;color:var(--agrid-color-text-muted);background:transparent;font:inherit;cursor:pointer;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-tree-toggle--expanded{transform:rotate(90deg)}.ag-tree-toggle--hidden{visibility:hidden}.ag-tree-toggle:active{scale:.92}.ag-tree-content{display:flex;min-width:0;flex-direction:column;justify-content:center}.ag-tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ag-tree-description{overflow:hidden;color:var(--agrid-color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px}.ag-tree-empty{padding:16px 12px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-tree-node:hover:not(.ag-tree-node--selected),.ag-tree-toggle:hover{background:var(--agrid-color-bg-muted)}}@media(prefers-reduced-motion:reduce){.ag-tree-toggle{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'agrid-tree', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.--agrid-tree-row-height.px]': 'provider().rowHeight' }, template: "<div #tree class=\"ag-tree\" role=\"tree\" [attr.aria-label]=\"provider().ariaLabel\"\n  [attr.aria-multiselectable]=\"provider().selection === 'multi' ? 'true' : null\">\n  @for (item of items(); track trackItem($index, item); let index = $index) {\n    <div class=\"ag-tree-node\" role=\"treeitem\" [attr.data-tree-index]=\"index\"\n      [attr.tabindex]=\"focusedIndex() === index ? 0 : -1\"\n      [attr.aria-level]=\"item.level + 1\"\n      [attr.aria-expanded]=\"item.expandable ? item.expanded : null\"\n      [attr.aria-selected]=\"provider().selection !== 'none' ? isSelected(item) : null\"\n      [class.ag-tree-node--selected]=\"isSelected(item)\"\n      [style.padding-left.px]=\"8 + item.level * 20\"\n      (click)=\"onNodeClick($event, item, index)\"\n      (dblclick)=\"onNodeDoubleClick($event, item)\"\n      (keydown)=\"onKeydown($event, item, index)\">\n      <button class=\"ag-tree-toggle\" type=\"button\" tabindex=\"-1\"\n        [class.ag-tree-toggle--expanded]=\"item.expanded\"\n        [class.ag-tree-toggle--hidden]=\"!item.expandable\"\n        [attr.aria-label]=\"(item.expanded ? 'Collapse ' : 'Expand ') + label(item)\"\n        (click)=\"toggleNode(item); $event.stopPropagation()\">&#9656;</button>\n      <span class=\"ag-tree-content\">\n        <span class=\"ag-tree-label\">{{ label(item) }}</span>\n        @if (description(item); as detail) {\n          <span class=\"ag-tree-description\">{{ detail }}</span>\n        }\n      </span>\n    </div>\n  } @empty {\n    <div class=\"ag-tree-empty\">{{ provider().emptyText }}</div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa}}:host{display:block;min-width:180px;min-height:0;overflow:auto;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-tree{min-width:max-content;padding:4px}.ag-tree-node{display:flex;align-items:center;min-width:100%;height:var(--agrid-tree-row-height);padding-right:10px;border-radius:4px;box-sizing:border-box;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.ag-tree-node--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-tree-node:focus-visible{box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-tree-toggle{display:inline-flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;color:var(--agrid-color-text-muted);background:transparent;font:inherit;cursor:pointer;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-tree-toggle--expanded{transform:rotate(90deg)}.ag-tree-toggle--hidden{visibility:hidden}.ag-tree-toggle:active{scale:.92}.ag-tree-content{display:flex;min-width:0;flex-direction:column;justify-content:center}.ag-tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ag-tree-description{overflow:hidden;color:var(--agrid-color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px}.ag-tree-empty{padding:16px 12px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-tree-node:hover:not(.ag-tree-node--selected),.ag-tree-toggle:hover{background:var(--agrid-color-bg-muted)}}@media(prefers-reduced-motion:reduce){.ag-tree-toggle{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: true }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeDoubleClicked: [{ type: i0.Output, args: ["nodeDoubleClicked"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], treeElement: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
+
+/** Provider-style configuration and datasource container for `<agrid-tree>`. */
+class AgridTreeProvider {
+    datasource;
+    treeConfig;
+    getLabel;
+    getDescription;
+    selection;
+    rowHeight;
+    ariaLabel;
+    emptyText;
+    constructor(config) {
+        this.datasource = config.datasource;
+        this.treeConfig = config.treeConfig;
+        this.getLabel = config.getLabel;
+        this.getDescription = config.getDescription;
+        this.selection = config.selection ?? 'single';
+        this.rowHeight = config.rowHeight ?? 36;
+        this.ariaLabel = config.ariaLabel ?? 'Tree';
+        this.emptyText = config.emptyText ?? 'No items';
+    }
+}
 
 /** Width sentinel that makes a column fill the remaining horizontal space. */
 const ColDefAutoSize = -1;
@@ -6014,5 +7658,5 @@ const ColDefAutoSize = -1;
  * Generated bundle index. Do not edit.
  */
 
-export { AGRID_LOCALE_TEXT, AgridComponent, AgridControl, AgridDataSource, AgridProvider, ColDefAutoSize };
+export { AGRID_LOCALE_TEXT, AgridComponent, AgridControl, AgridDataSource, AgridPageSelectorComponent, AgridProvider, AgridTreeComponent, AgridTreeProvider, ColDefAutoSize };
 //# sourceMappingURL=thkl-agrid.mjs.map