@thkl/agrid 0.1.12 → 0.1.14

package/fesm2022/thkl-agrid.mjs

@@ -299,10 +299,16 @@ function coerceNumberInputValue(value) {
     const numeric = Number(trimmed.includes('.') ? trimmed : trimmed.replace(',', '.'));
     return Number.isNaN(numeric) ? value : numeric;
 }
-/** Resolve the display string for a raw cell value via ValueOption label, formatter, or coercion. */
-function getDisplayForField(col, raw, locale) {
+/** Resolve the display string for a raw cell value via formula, ValueOption label, formatter, or coercion. */
+function getDisplayForField(col, raw, locale, row) {
     if (!col)
         return String(raw ?? '');
+    if (col.formula && typeof raw === 'string' && raw.trim().startsWith('=')) {
+        const result = evaluateFormula(raw, row ?? {});
+        if (!result.ok)
+            return '#ERR';
+        return col.formatter ? col.formatter(result.value) : formatFormulaResult(result.value);
+    }
     if (col.values?.length) {
         const opt = col.values.find(v => typeof v === 'string' ? v === raw : v.value === raw);
         if (opt !== undefined)
@@ -315,6 +321,129 @@ function getDisplayForField(col, raw, locale) {
     }
     return String(raw ?? '');
 }
+/** Evaluate a safe row-local arithmetic formula without using `eval`. */
+function evaluateFormula(formula, row) {
+    const source = formula.trim().startsWith('=') ? formula.trim().slice(1) : formula.trim();
+    if (!source)
+        return { ok: false, error: 'empty formula' };
+    const parser = new FormulaParser(source, row);
+    try {
+        const value = parser.parse();
+        return Number.isFinite(value) ? { ok: true, value } : { ok: false, error: 'non-finite result' };
+    }
+    catch (error) {
+        return { ok: false, error: error instanceof Error ? error.message : 'invalid formula' };
+    }
+}
+function formatFormulaResult(value) {
+    return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(6)));
+}
+class FormulaParser {
+    source;
+    row;
+    index = 0;
+    constructor(source, row) {
+        this.source = source;
+        this.row = row;
+    }
+    parse() {
+        const value = this.expression();
+        this.skipWhitespace();
+        if (this.index < this.source.length)
+            throw new Error('unexpected token');
+        return value;
+    }
+    expression() {
+        let value = this.term();
+        while (true) {
+            this.skipWhitespace();
+            if (this.match('+'))
+                value += this.term();
+            else if (this.match('-'))
+                value -= this.term();
+            else
+                return value;
+        }
+    }
+    term() {
+        let value = this.factor();
+        while (true) {
+            this.skipWhitespace();
+            if (this.match('*'))
+                value *= this.factor();
+            else if (this.match('/'))
+                value /= this.factor();
+            else
+                return value;
+        }
+    }
+    factor() {
+        this.skipWhitespace();
+        if (this.match('+'))
+            return this.factor();
+        if (this.match('-'))
+            return -this.factor();
+        if (this.match('(')) {
+            const value = this.expression();
+            this.expect(')');
+            return value;
+        }
+        if (this.peek() === '[')
+            return this.bracketReference();
+        if (/[A-Za-z_]/.test(this.peek()))
+            return this.identifier();
+        return this.number();
+    }
+    number() {
+        const start = this.index;
+        while (/[0-9.]/.test(this.peek()))
+            this.index++;
+        if (start === this.index)
+            throw new Error('expected number');
+        const value = Number(this.source.slice(start, this.index));
+        if (Number.isNaN(value))
+            throw new Error('invalid number');
+        return value;
+    }
+    identifier() {
+        const start = this.index;
+        while (/[A-Za-z0-9_]/.test(this.peek()))
+            this.index++;
+        return this.referenceValue(this.source.slice(start, this.index));
+    }
+    bracketReference() {
+        this.expect('[');
+        const start = this.index;
+        while (this.peek() && this.peek() !== ']')
+            this.index++;
+        const field = this.source.slice(start, this.index);
+        this.expect(']');
+        return this.referenceValue(field);
+    }
+    referenceValue(field) {
+        const value = Number(this.row[field]);
+        if (Number.isNaN(value))
+            throw new Error(`invalid reference ${field}`);
+        return value;
+    }
+    match(char) {
+        if (this.source[this.index] !== char)
+            return false;
+        this.index++;
+        return true;
+    }
+    expect(char) {
+        if (!this.match(char))
+            throw new Error(`expected ${char}`);
+    }
+    peek() {
+        return this.source[this.index] ?? '';
+    }
+    skipWhitespace() {
+        while (/\s/.test(this.peek()))
+            this.index++;
+    }
+}
 /** Returns whether a virtual-scroll item represents a data row. */
 function isDataRowItem(item) {
     return typeof item === 'object' && item !== null && 'row' in item && !('detailFor' in item);
@@ -352,14 +481,14 @@ function applyTextAndValueFilters(rows, indices, filters, colMap, locale) {
         const col = colMap.get(field);
         if (filter.text) {
             const lc = filter.text.toLowerCase();
-            result = result.filter(i => getDisplayForField(col, rows[i][field], locale).toLowerCase().includes(lc));
+            result = result.filter(i => getDisplayForField(col, rows[i][field], locale, rows[i]).toLowerCase().includes(lc));
         }
         if (filter.selectedValues !== null) {
             const allowed = new Set(filter.selectedValues);
             result = result.filter(i => allowed.has(String(rows[i][field] ?? '')));
         }
         if (filter.operator && filter.operand != null && filter.operand !== '') {
-            result = result.filter(i => passesConditionFilter(col, rows[i][field], filter, locale));
+            result = result.filter(i => passesConditionFilter(col, rows[i][field], filter, locale, rows[i]));
         }
     }
     return result;
@@ -367,9 +496,9 @@ function applyTextAndValueFilters(rows, indices, filters, colMap, locale) {
 /**
  * Evaluate a text, number, or date condition for one cell value.
  */
-function passesConditionFilter(col, raw, filter, locale) {
+function passesConditionFilter(col, raw, filter, locale, row) {
     if (col?.type !== 'number' && col?.type !== 'date') {
-        const value = getDisplayForField(col, raw, locale).toLocaleLowerCase(locale);
+        const value = getDisplayForField(col, raw, locale, row).toLocaleLowerCase(locale);
         const operand = String(filter.operand ?? '').toLocaleLowerCase(locale);
         switch (filter.operator) {
             case 'eq': return value === operand;
@@ -420,7 +549,7 @@ function applyQuickFilter(rows, indices, text, cols, locale) {
     const q = text.trim().toLowerCase();
     if (!q)
         return indices;
-    return indices.filter(i => cols.some(col => getDisplayForField(col, rows[i][col.field], locale).toLowerCase().includes(q)));
+    return indices.filter(i => cols.some(col => getDisplayForField(col, rows[i][col.field], locale, rows[i]).toLowerCase().includes(q)));
 }
 // Sorting
 /**
@@ -456,7 +585,7 @@ function applySortToIndices(rows, indices, sortEntries, colMap, locale) {
             dateLike[position] = isDateLike ? 1 : 0;
             dateValues[position] = Number.isNaN(dateValue) ? -1 : dateValue;
             numericValues[position] = numericValue;
-            displayValues[position] = isDateLike ? '' : getDisplayForField(col, raw, locale);
+            displayValues[position] = isDateLike ? '' : getDisplayForField(col, raw, locale, rows[index]);
         }
         return {
             direction: filter.sort === 'desc' ? -1 : 1,
@@ -911,6 +1040,8 @@ function resolveCellSpanAnchor(columns, columnIndex, row, originalIndex) {
     return { anchorIndex: columnIndex, span: 1 };
 }
 
+const DEFAULT_CELL_SPAN_LAYOUT = { covered: false, span: 1 };
+const EMPTY_CELL_FORMAT = {};
 /**
  * Individual cell component used inside `AgridComponent`.
  *
@@ -925,6 +1056,8 @@ class AgridCellComponent {
     col = input.required(...(ngDevMode ? [{ debugName: "col" }] : /* istanbul ignore next */ []));
     /** Visible columns in this cell's pane, used to clamp spans at pane boundaries. */
     paneColumns = input([], ...(ngDevMode ? [{ debugName: "paneColumns" }] : /* istanbul ignore next */ []));
+    /** Whether any visible column in this pane can span cells. */
+    paneHasSpans = input(false, ...(ngDevMode ? [{ debugName: "paneHasSpans" }] : /* istanbul ignore next */ []));
     /** Absolute row index within the data source. */
     rowIndex = input.required(...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
     /** Column index within `colDefs`. */
@@ -936,16 +1069,23 @@ class AgridCellComponent {
     /** Full row data — passed to `cellRenderer` when set. */
     row = input({}, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     /** Horizontal span and coverage state for this row. */
-    cellSpanLayout = computed(() => resolveCellSpanLayout(this.paneColumns(), this.paneColumns().indexOf(this.col()), this.row(), this.rowIndex()), ...(ngDevMode ? [{ debugName: "cellSpanLayout" }] : /* istanbul ignore next */ []));
+    cellSpanLayout = computed(() => {
+        if (!this.paneHasSpans())
+            return DEFAULT_CELL_SPAN_LAYOUT;
+        const paneColumns = this.paneColumns();
+        return resolveCellSpanLayout(paneColumns, paneColumns.indexOf(this.col()), this.row(), this.rowIndex());
+    }, ...(ngDevMode ? [{ debugName: "cellSpanLayout" }] : /* istanbul ignore next */ []));
     /** Runtime formatting resolved from the column definition and current cell context. */
     resolvedCellFormat = computed(() => {
         const col = this.col();
+        if (!col.cellFormat)
+            return EMPTY_CELL_FORMAT;
         return col.cellFormat?.({
             row: this.row(),
             value: this.value(),
             column: col,
             originalIndex: this.rowIndex(),
-        }) ?? {};
+        }) ?? EMPTY_CELL_FORMAT;
     }, ...(ngDevMode ? [{ debugName: "resolvedCellFormat" }] : /* istanbul ignore next */ []));
     /** Per-cell formatting wins over the column's default text alignment. */
     resolvedTextAlign = computed(() => {
@@ -1006,6 +1146,10 @@ class AgridCellComponent {
     editorCancel = output();
     /** Live draft value managed by the cell during an active edit. */
     draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    asyncValueOptions = signal([], ...(ngDevMode ? [{ debugName: "asyncValueOptions" }] : /* istanbul ignore next */ []));
+    asyncValueLoading = signal(false, ...(ngDevMode ? [{ debugName: "asyncValueLoading" }] : /* istanbul ignore next */ []));
+    richSelectSearch = signal('', ...(ngDevMode ? [{ debugName: "richSelectSearch" }] : /* istanbul ignore next */ []));
+    asyncValueLoadId = 0;
     /**
      * Context exposed to a {@link ColDef.cellEditor} component via {@link AGRID_EDITOR_CONTEXT}.
      * The signals are the cell's own inputs, so the editor stays reactive to value/row changes.
@@ -1082,17 +1226,24 @@ class AgridCellComponent {
      */
     valueOptions = computed(() => {
         const vals = this.col().values ?? [];
-        return vals.map(v => typeof v === 'string'
+        const sync = vals.map(v => typeof v === 'string'
             ? { label: v, rawValue: v }
             : { label: v.label, rawValue: v.value });
+        return sync.length ? sync : this.asyncValueOptions();
     }, ...(ngDevMode ? [{ debugName: "valueOptions" }] : /* istanbul ignore next */ []));
+    filteredValueOptions = computed(() => {
+        const search = this.richSelectSearch().toLowerCase();
+        return this.valueOptions()
+            .filter(item => !search || item.label.toLowerCase().includes(search))
+            .slice(0, Math.max(1, Math.floor(this.col().filterValueLimit ?? 100)));
+    }, ...(ngDevMode ? [{ debugName: "filteredValueOptions" }] : /* istanbul ignore next */ []));
     /**
      * The string shown in the cell when not editing.
      * Priority: ValueOption label → `ColDef.formatter` → raw string.
      */
     displayValue = computed(() => {
         return this.displayValueOverride()
-            ?? getDisplayForField(this.col(), this.value(), this.locale());
+            ?? getDisplayForField(this.col(), this.value(), this.locale(), this.row());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     /**
      * Index of the currently selected option in `valueOptions`.
@@ -1105,9 +1256,16 @@ class AgridCellComponent {
     }, ...(ngDevMode ? [{ debugName: "selectedOptionIndex" }] : /* istanbul ignore next */ []));
     inputEl = viewChild('editInput', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     selectEl = viewChild('editSelect', ...(ngDevMode ? [{ debugName: "selectEl" }] : /* istanbul ignore next */ []));
+    largeTextEl = viewChild('largeTextInput', ...(ngDevMode ? [{ debugName: "largeTextEl" }] : /* istanbul ignore next */ []));
+    richSelectEl = viewChild('richSelectInput', ...(ngDevMode ? [{ debugName: "richSelectEl" }] : /* istanbul ignore next */ []));
+    richSelectEditor = computed(() => this.col().editor === 'richSelect'
+        || (!!this.col().asyncValues && this.editing()), ...(ngDevMode ? [{ debugName: "richSelectEditor" }] : /* istanbul ignore next */ []));
+    largeTextEditor = computed(() => this.col().editor === 'largeText', ...(ngDevMode ? [{ debugName: "largeTextEditor" }] : /* istanbul ignore next */ []));
+    formulaEditor = computed(() => this.col().editor === 'formula' || !!this.col().formula, ...(ngDevMode ? [{ debugName: "formulaEditor" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             if (this.editing()) {
+                this.loadAsyncValues();
                 const seed = this.seedChar();
                 const isDate = this.col().type === 'date';
                 const existingDate = isDate ? getDateInputValue(this.value()) : '';
@@ -1136,6 +1294,23 @@ class AgridCellComponent {
                         }
                         return;
                     }
+                    const largeText = this.largeTextEl()?.nativeElement;
+                    if (largeText) {
+                        largeText.value = String(acceptedInitialValue ?? '');
+                        largeText.focus();
+                        if (!seed && this.selectTextOnEdit())
+                            largeText.select();
+                        return;
+                    }
+                    const richSelect = this.richSelectEl()?.nativeElement;
+                    if (richSelect) {
+                        const current = this.valueOptions().find(option => option.rawValue === acceptedInitialValue);
+                        this.richSelectSearch.set(seed || current?.label || String(acceptedInitialValue ?? ''));
+                        richSelect.focus();
+                        if (!seed)
+                            richSelect.select();
+                        return;
+                    }
                     const sel = this.selectEl()?.nativeElement;
                     if (sel) {
                         const idx = this.selectedOptionIndex();
@@ -1199,8 +1374,43 @@ class AgridCellComponent {
         this.draft.set(rawValue);
         this.draftChange.emit(rawValue);
     }
+    onRichSelectSearch(event) {
+        this.richSelectSearch.set(event.target.value);
+    }
+    pickRichSelectOption(rawValue) {
+        this.draft.set(rawValue);
+        this.draftChange.emit(rawValue);
+        const selected = this.valueOptions().find(option => option.rawValue === rawValue);
+        this.richSelectSearch.set(selected?.label ?? String(rawValue ?? ''));
+        this.editorCommit.emit();
+    }
+    loadAsyncValues() {
+        const provider = this.col().asyncValues;
+        if (!provider || this.col().values?.length)
+            return;
+        const loadId = ++this.asyncValueLoadId;
+        this.asyncValueLoading.set(true);
+        Promise.resolve(provider({
+            row: this.row(),
+            value: this.value(),
+            column: this.col(),
+            originalIndex: this.rowIndex(),
+        })).then(values => {
+            if (loadId !== this.asyncValueLoadId)
+                return;
+            this.asyncValueOptions.set(values.map(value => typeof value === 'string'
+                ? { label: value, rawValue: value }
+                : { label: value.label, rawValue: value.value }));
+        }).catch(() => {
+            if (loadId === this.asyncValueLoadId)
+                this.asyncValueOptions.set([]);
+        }).finally(() => {
+            if (loadId === this.asyncValueLoadId)
+                this.asyncValueLoading.set(false);
+        });
+    }
     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: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, paneColumns: { classPropertyName: "paneColumns", publicName: "paneColumns", isSignal: true, isRequired: false, 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", editorCommit: "editorCommit", editorCancel: "editorCancel" }, 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.aria-colspan": "cellSpanLayout().span > 1 ? cellSpanLayout().span : null", "style.display": "cellSpanLayout().covered ? \"none\" : null", "style.grid-column": "cellSpanLayout().span > 1 ? \"span \" + cellSpanLayout().span : null", "attr.title": "displayValue()", "style.background-color": "resolvedCellFormat().backgroundColor ?? null", "style.border-color": "resolvedCellFormat().borderColor ?? null", "style.color": "resolvedCellFormat().color ?? null", "style.font": "resolvedCellFormat().font ?? null", "style.font-family": "resolvedCellFormat().fontFamily ?? null", "style.font-size": "resolvedCellFormat().fontSize ?? null", "style.font-style": "resolvedCellFormat().fontStyle ?? null", "style.font-weight": "resolvedCellFormat().fontWeight ?? null", "style.text-decoration": "resolvedCellFormat().textDecoration ?? null", "style.text-align": "resolvedTextAlign()" } }, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridCellComponent, isStandalone: true, selector: "agrid-cell", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, paneColumns: { classPropertyName: "paneColumns", publicName: "paneColumns", isSignal: true, isRequired: false, transformFunction: null }, paneHasSpans: { classPropertyName: "paneHasSpans", publicName: "paneHasSpans", isSignal: true, isRequired: false, 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", editorCommit: "editorCommit", editorCancel: "editorCancel" }, 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.aria-colspan": "cellSpanLayout().span > 1 ? cellSpanLayout().span : null", "style.display": "cellSpanLayout().covered ? \"none\" : null", "style.grid-column": "cellSpanLayout().span > 1 ? \"span \" + cellSpanLayout().span : null", "attr.title": "displayValue()", "style.background-color": "resolvedCellFormat().backgroundColor ?? null", "style.border-color": "resolvedCellFormat().borderColor ?? null", "style.color": "resolvedCellFormat().color ?? null", "style.font": "resolvedCellFormat().font ?? null", "style.font-family": "resolvedCellFormat().fontFamily ?? null", "style.font-size": "resolvedCellFormat().fontSize ?? null", "style.font-style": "resolvedCellFormat().fontStyle ?? null", "style.font-weight": "resolvedCellFormat().fontWeight ?? null", "style.text-decoration": "resolvedCellFormat().textDecoration ?? null", "style.text-align": "resolvedTextAlign()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "selectEl", first: true, predicate: ["editSelect"], descendants: true, isSignal: true }, { propertyName: "largeTextEl", first: true, predicate: ["largeTextInput"], descendants: true, isSignal: true }, { propertyName: "richSelectEl", first: true, predicate: ["richSelectInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (booleanCell()) {
       <input
         type="checkbox"
@@ -1221,6 +1431,40 @@ class AgridCellComponent {
         >
           <ng-container [ngComponentOutlet]="editor" [ngComponentOutletInjector]="editorInjector" />
         </div>
+      } @else if (richSelectEditor()) {
+        <div class="ag-rich-select-editor" (keydown)="$event.stopPropagation()">
+          <input
+            #richSelectInput
+            class="ag-cell-input ag-rich-select-input"
+            [value]="richSelectSearch()"
+            (input)="onRichSelectSearch($event)"
+            [attr.placeholder]="asyncValueLoading() ? 'Loading...' : ''"
+          />
+          <div class="ag-rich-select-panel" role="listbox">
+            @if (asyncValueLoading()) {
+              <div class="ag-rich-select-empty">Loading...</div>
+            } @else {
+              @for (opt of filteredValueOptions(); track opt.label; let idx = $index) {
+                <button
+                  type="button"
+                  class="ag-rich-select-option"
+                  [class.ag-rich-select-option--active]="opt.rawValue === draft()"
+                  (click)="pickRichSelectOption(opt.rawValue)"
+                >{{ opt.label }}</button>
+              } @empty {
+                <div class="ag-rich-select-empty">No matches</div>
+              }
+            }
+          </div>
+        </div>
+      } @else if (largeTextEditor()) {
+        <textarea
+          #largeTextInput
+          class="ag-cell-large-text"
+          [class.ag-cell-input--invalid]="!!error()"
+          [value]="editorValue()"
+          (input)="onInput($event)"
+        ></textarea>
       } @else if (col().values?.length) {
         <select
           #editSelect
@@ -1235,6 +1479,7 @@ class AgridCellComponent {
         <input
           #editInput
           class="ag-cell-input"
+          [class.ag-cell-input--formula]="formulaEditor()"
           [class.ag-cell-input--invalid]="!!error()"
           [type]="col().type === 'date' ? 'date' : 'text'"
           [attr.inputmode]="col().type === 'number' ? 'decimal' : null"
@@ -1280,7 +1525,7 @@ class AgridCellComponent {
         (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}.ag-cell-editor{display:flex;align-items:center;width:100%;height:100%;min-width:0}: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"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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);overflow:visible;z-index:6}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}.ag-cell-editor{display:flex;align-items:center;width:100%;height:100%;min-width:0}: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-large-text{position:absolute;z-index:8;top:0;left:0;width:min(360px,max(100%,280px));min-height:116px;border:1px solid var(--agrid-color-accent);outline:none;resize:both;font:inherit;line-height:1.4;padding:6px 8px;box-sizing:border-box;color:var(--agrid-color-text);background:var(--agrid-color-bg);box-shadow:0 8px 24px var(--agrid-color-shadow);user-select:text;-webkit-user-select:text}.ag-cell-input--formula{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-rich-select-editor{position:absolute;z-index:8;top:0;left:0;width:min(320px,max(100%,240px));color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-accent);box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-rich-select-input{height:32px;border-bottom:1px solid var(--agrid-color-border)}.ag-rich-select-panel{max-height:180px;overflow:auto;padding:3px;background:var(--agrid-color-bg)}.ag-rich-select-option{display:block;width:100%;min-height:26px;border:0;border-radius:3px;background:transparent;color:var(--agrid-color-text);font:inherit;line-height:1.2;text-align:left;padding:4px 7px;cursor:pointer}.ag-rich-select-option:hover,.ag-rich-select-option--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-rich-select-empty{padding:7px;color:var(--agrid-color-text-muted);font-size:12px;line-height:1.3}.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"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridCellComponent, decorators: [{
             type: Component,
@@ -1329,6 +1574,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         >
           <ng-container [ngComponentOutlet]="editor" [ngComponentOutletInjector]="editorInjector" />
         </div>
+      } @else if (richSelectEditor()) {
+        <div class="ag-rich-select-editor" (keydown)="$event.stopPropagation()">
+          <input
+            #richSelectInput
+            class="ag-cell-input ag-rich-select-input"
+            [value]="richSelectSearch()"
+            (input)="onRichSelectSearch($event)"
+            [attr.placeholder]="asyncValueLoading() ? 'Loading...' : ''"
+          />
+          <div class="ag-rich-select-panel" role="listbox">
+            @if (asyncValueLoading()) {
+              <div class="ag-rich-select-empty">Loading...</div>
+            } @else {
+              @for (opt of filteredValueOptions(); track opt.label; let idx = $index) {
+                <button
+                  type="button"
+                  class="ag-rich-select-option"
+                  [class.ag-rich-select-option--active]="opt.rawValue === draft()"
+                  (click)="pickRichSelectOption(opt.rawValue)"
+                >{{ opt.label }}</button>
+              } @empty {
+                <div class="ag-rich-select-empty">No matches</div>
+              }
+            }
+          </div>
+        </div>
+      } @else if (largeTextEditor()) {
+        <textarea
+          #largeTextInput
+          class="ag-cell-large-text"
+          [class.ag-cell-input--invalid]="!!error()"
+          [value]="editorValue()"
+          (input)="onInput($event)"
+        ></textarea>
       } @else if (col().values?.length) {
         <select
           #editSelect
@@ -1343,6 +1622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         <input
           #editInput
           class="ag-cell-input"
+          [class.ag-cell-input--formula]="formulaEditor()"
           [class.ag-cell-input--invalid]="!!error()"
           [type]="col().type === 'date' ? 'date' : 'text'"
           [attr.inputmode]="col().type === 'number' ? 'decimal' : null"
@@ -1388,8 +1668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         (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}.ag-cell-editor{display:flex;align-items:center;width:100%;height:100%;min-width:0}: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: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], paneColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneColumns", required: false }] }], 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"] }], editorCommit: [{ type: i0.Output, args: ["editorCommit"] }], editorCancel: [{ type: i0.Output, args: ["editorCancel"] }], inputEl: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], selectEl: [{ type: i0.ViewChild, args: ['editSelect', { isSignal: 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);overflow:visible;z-index:6}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}.ag-cell-editor{display:flex;align-items:center;width:100%;height:100%;min-width:0}: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-large-text{position:absolute;z-index:8;top:0;left:0;width:min(360px,max(100%,280px));min-height:116px;border:1px solid var(--agrid-color-accent);outline:none;resize:both;font:inherit;line-height:1.4;padding:6px 8px;box-sizing:border-box;color:var(--agrid-color-text);background:var(--agrid-color-bg);box-shadow:0 8px 24px var(--agrid-color-shadow);user-select:text;-webkit-user-select:text}.ag-cell-input--formula{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-rich-select-editor{position:absolute;z-index:8;top:0;left:0;width:min(320px,max(100%,240px));color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-accent);box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-rich-select-input{height:32px;border-bottom:1px solid var(--agrid-color-border)}.ag-rich-select-panel{max-height:180px;overflow:auto;padding:3px;background:var(--agrid-color-bg)}.ag-rich-select-option{display:block;width:100%;min-height:26px;border:0;border-radius:3px;background:transparent;color:var(--agrid-color-text);font:inherit;line-height:1.2;text-align:left;padding:4px 7px;cursor:pointer}.ag-rich-select-option:hover,.ag-rich-select-option--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-rich-select-empty{padding:7px;color:var(--agrid-color-text-muted);font-size:12px;line-height:1.3}.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: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], paneColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneColumns", required: false }] }], paneHasSpans: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneHasSpans", required: false }] }], 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"] }], editorCommit: [{ type: i0.Output, args: ["editorCommit"] }], editorCancel: [{ type: i0.Output, args: ["editorCancel"] }], inputEl: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], selectEl: [{ type: i0.ViewChild, args: ['editSelect', { isSignal: true }] }], largeTextEl: [{ type: i0.ViewChild, args: ['largeTextInput', { isSignal: true }] }], richSelectEl: [{ type: i0.ViewChild, args: ['richSelectInput', { isSignal: true }] }] } });
 
 /**
  * Renders the grouped-header row, header-cell row, and inline filter row for a single grid pane.
@@ -1622,7 +1902,7 @@ class AgridClipboardHandler {
             const col = cols[colIndex];
             if (!col)
                 continue;
-            cells.push(this.escapeTsvValue(getDisplayForField(col, row[col.field], this.opts.locale())));
+            cells.push(this.escapeTsvValue(getDisplayForField(col, row[col.field], this.opts.locale(), row)));
         }
         return cells.join('\t');
     }
@@ -1926,8 +2206,7 @@ class AgridColumnVirtualizationController {
     window = computed(() => {
         const widths = this.opts.columnWidths();
         const count = widths.length;
-        const viewportWidth = this.opts.viewportWidth();
-        if (count <= this.opts.minColumns() || viewportWidth <= 0) {
+        if (count <= this.opts.minColumns()) {
             return { start: 0, end: count, leftWidth: 0, rightWidth: 0 };
         }
         // prefix[i] is the left edge of column i; prefix[count] is the total width.
@@ -1937,6 +2216,9 @@ class AgridColumnVirtualizationController {
             prefix[i + 1] = prefix[i] + widths[i];
         const total = prefix[count];
         const scrollLeft = this.opts.scrollLeft();
+        const viewportWidth = this.opts.viewportWidth() > 0
+            ? this.opts.viewportWidth()
+            : this.overscanPx * 4;
         const min = scrollLeft - this.overscanPx;
         const max = scrollLeft + viewportWidth + this.overscanPx;
         // First column whose right edge crosses the (overscanned) left boundary.
@@ -1955,6 +2237,13 @@ class AgridColumnVirtualizationController {
     }, ...(ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []));
 }
 
+/**
+ * DI token a custom {@link ColDef.filterComponent} injects to control column filtering.
+ *
+ * The token is only available while the component is rendered inside an aGrid column menu.
+ */
+const AGRID_FILTER_CONTEXT = new InjectionToken('AGRID_FILTER_CONTEXT');
+
 /** Clamp a floating menu so it remains inside the browser viewport. @internal */
 function fitColumnMenuToViewport(x, y, width, height, viewportWidth, viewportHeight, margin = 8) {
     return {
@@ -1966,6 +2255,7 @@ function fitColumnMenuToViewport(x, y, width, height, viewportWidth, viewportHei
 class AgridColumnMenuComponent {
     elementRef = inject(ElementRef);
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
     browser = new AgridBrowserAdapter();
     resizeObserver = null;
     /** Localized labels used in the menu. */
@@ -1998,6 +2288,14 @@ class AgridColumnMenuComponent {
     grouped = input(false, ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
     /** Whether the active column supports value-filter controls. */
     filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    /** Column definition for custom filter components. */
+    column = input(null, ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    /** Shared control that owns the active filter state. */
+    control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    /** Current filter snapshot for the active column. */
+    filter = input({ text: '', selectedValues: null, sort: null }, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /** Emits a complete filter replacement from a custom filter component. */
+    filterReplace = output();
     /** Whether clear-filter commands are shown above the condition controls. */
     showFilterActions = input(true, ...(ngDevMode ? [{ debugName: "showFilterActions" }] : /* istanbul ignore next */ []));
     /** Whether to show the Excel-style distinct-value picker. */
@@ -2101,6 +2399,26 @@ 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' : this.filterType() === 'number' ? 'number' : 'text', ...(ngDevMode ? [{ debugName: "operandInputType" }] : /* istanbul ignore next */ []));
+    customFilterInjector = computed(() => {
+        const column = this.column();
+        if (!column?.filterComponent)
+            return null;
+        const context = {
+            field: column.field,
+            column,
+            control: this.control(),
+            filter: computed(() => this.filter()),
+            setFilter: filter => this.filterReplace.emit(filter),
+            clear: () => this.clearFilter.emit(),
+            close: () => this.close.emit(),
+        };
+        return Injector.create({
+            providers: [{ provide: AGRID_FILTER_CONTEXT, useValue: context }],
+            parent: this.injector,
+        });
+    }, ...(ngDevMode ? [{ debugName: "customFilterInjector" }] : /* istanbul ignore next */ []));
+    /** Requests closing the menu after a custom filter action. */
+    close = output();
     constructor() {
         effect(() => {
             this.position.set({ x: this.x(), y: this.y() });
@@ -2130,12 +2448,12 @@ class AgridColumnMenuComponent {
         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 }, showAggregationActions: { classPropertyName: "showAggregationActions", publicName: "showAggregationActions", isSignal: true, isRequired: false, transformFunction: null }, customItems: { classPropertyName: "customItems", publicName: "customItems", 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 }, showFilterActions: { classPropertyName: "showFilterActions", publicName: "showFilterActions", 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: { customAction: "customAction", 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() && showAggregationActions()) {\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 (customItems().length > 0) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-custom\">\n      @for (item of customItems(); track item.key) {\n        <button type=\"button\"  [class]=\"[... item.itemClasses??[], ...['ag-filter-menu-item'] ].join(' ')\" [disabled]=\"item.disabled\"\n          [attr.data-command-key]=\"item.key\" (click)=\"customAction.emit(item.key)\">\n          @if (item.icon) { <span [class]=\"[...item.iconClasses??[] , ... ['ag-filter-menu-item-icon']].join(' ')\" >{{ item.icon }}</span> }\n          {{ item.label }}\n        </button>\n      }\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    @if (showFilterActions()) {\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\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 });
+    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 }, showAggregationActions: { classPropertyName: "showAggregationActions", publicName: "showAggregationActions", isSignal: true, isRequired: false, transformFunction: null }, customItems: { classPropertyName: "customItems", publicName: "customItems", 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 }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, showFilterActions: { classPropertyName: "showFilterActions", publicName: "showFilterActions", 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: { customAction: "customAction", filterReplace: "filterReplace", 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", close: "close" }, 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() && showAggregationActions()) {\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 (customItems().length > 0) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-custom\">\n      @for (item of customItems(); track item.key) {\n        <button type=\"button\"  [class]=\"[... item.itemClasses??[], ...['ag-filter-menu-item'] ].join(' ')\" [disabled]=\"item.disabled\"\n          [attr.data-command-key]=\"item.key\" (click)=\"customAction.emit(item.key)\">\n          @if (item.icon) { <span [class]=\"[...item.iconClasses??[] , ... ['ag-filter-menu-item-icon']].join(' ')\" >{{ item.icon }}</span> }\n          {{ item.label }}\n        </button>\n      }\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    @if (showFilterActions()) {\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\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 (column()?.filterComponent && customFilterInjector(); as customInjector) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-custom-filter\">\n        <ng-container *ngComponentOutlet=\"column()!.filterComponent ?? null; injector: customInjector\" />\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"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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]=\"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() && showAggregationActions()) {\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 (customItems().length > 0) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-custom\">\n      @for (item of customItems(); track item.key) {\n        <button type=\"button\"  [class]=\"[... item.itemClasses??[], ...['ag-filter-menu-item'] ].join(' ')\" [disabled]=\"item.disabled\"\n          [attr.data-command-key]=\"item.key\" (click)=\"customAction.emit(item.key)\">\n          @if (item.icon) { <span [class]=\"[...item.iconClasses??[] , ... ['ag-filter-menu-item-icon']].join(' ')\" >{{ item.icon }}</span> }\n          {{ item.label }}\n        </button>\n      }\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    @if (showFilterActions()) {\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\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 }] }], showAggregationActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAggregationActions", required: false }] }], customItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "customItems", required: false }] }], customAction: [{ type: i0.Output, args: ["customAction"] }], 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 }] }], showFilterActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilterActions", 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, imports: [NgComponentOutlet], 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() && showAggregationActions()) {\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 (customItems().length > 0) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-custom\">\n      @for (item of customItems(); track item.key) {\n        <button type=\"button\"  [class]=\"[... item.itemClasses??[], ...['ag-filter-menu-item'] ].join(' ')\" [disabled]=\"item.disabled\"\n          [attr.data-command-key]=\"item.key\" (click)=\"customAction.emit(item.key)\">\n          @if (item.icon) { <span [class]=\"[...item.iconClasses??[] , ... ['ag-filter-menu-item-icon']].join(' ')\" >{{ item.icon }}</span> }\n          {{ item.label }}\n        </button>\n      }\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    @if (showFilterActions()) {\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\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 (column()?.filterComponent && customFilterInjector(); as customInjector) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-custom-filter\">\n        <ng-container *ngComponentOutlet=\"column()!.filterComponent ?? null; injector: customInjector\" />\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 }] }], showAggregationActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAggregationActions", required: false }] }], customItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "customItems", required: false }] }], customAction: [{ type: i0.Output, args: ["customAction"] }], 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 }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterReplace: [{ type: i0.Output, args: ["filterReplace"] }], showFilterActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilterActions", 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"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
 /** Owns column-menu state, filters, sorting, and menu-triggered column mutations. @internal */
 class AgridColumnMenuController {
@@ -2171,8 +2489,13 @@ class AgridColumnMenuController {
             .sort((a, b) => a.label.localeCompare(b.label, undefined, { numeric: true, sensitivity: 'base' }));
     }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     visibleItems = computed(() => {
+        const menu = this.menu();
+        const col = menu ? this.getColDef(menu.field) : undefined;
         const search = this.search().toLowerCase();
-        return this.items().filter(item => !search || item.label.toLowerCase().includes(search));
+        const limit = Math.max(1, Math.floor(col?.filterValueLimit ?? 250));
+        return this.items()
+            .filter(item => !search || item.label.toLowerCase().includes(search))
+            .slice(0, limit);
     }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
     activeValues = computed(() => {
         const menu = this.menu();
@@ -2380,6 +2703,25 @@ class AgridColumnMenuController {
     setSearch(value) {
         this.search.set(value);
     }
+    /** Replaces one field's filter state from a custom filter component. */
+    replaceFilter(field, filter) {
+        const control = this.opts.control();
+        if (!control)
+            return;
+        control.setFilter(field, filter);
+        if (!this.opts.serverSideFiltering())
+            return;
+        this.opts.onFilterChange({
+            field,
+            value: filter.text,
+            selectedValues: filter.selectedValues,
+            operator: filter.operator ?? null,
+            operand: filter.operand ?? null,
+            operand2: filter.operand2 ?? null,
+        });
+        if (filter.sort)
+            this.opts.onSortChange({ field, direction: filter.sort });
+    }
     /** Applies or clears a sort according to the configured sorting mode. */
     sort(field, direction) {
         const control = this.opts.control();
@@ -2429,6 +2771,9 @@ class AgridColumnMenuController {
         if (this.opts.serverSideFiltering()) {
             if (previous.text)
                 this.opts.onFilterChange({ field, value: '' });
+            if (previous.selectedValues !== null) {
+                this.opts.onFilterChange({ field, value: '', selectedValues: null });
+            }
             if (previous.operator) {
                 this.opts.onFilterChange({ field, value: '', operator: null, operand: null, operand2: null });
             }
@@ -2473,6 +2818,9 @@ class AgridColumnMenuController {
             for (const [field, filter] of Object.entries(previous)) {
                 if (filter.text)
                     this.opts.onFilterChange({ field, value: '' });
+                if (filter.selectedValues !== null) {
+                    this.opts.onFilterChange({ field, value: '', selectedValues: null });
+                }
                 if (filter.operator) {
                     this.opts.onFilterChange({ field, value: '', operator: null, operand: null, operand2: null });
                 }
@@ -2487,7 +2835,9 @@ class AgridColumnMenuController {
         const control = this.opts.control();
         if (!control)
             return;
-        control.setSelectedValues(field, control.getFilter(field).selectedValues === null ? [] : null);
+        const next = control.getFilter(field).selectedValues === null ? [] : null;
+        control.setSelectedValues(field, next);
+        this.emitValueServer(field, next);
     }
     /** Toggles one raw value in a field's value filter. */
     toggleValue(field, rawStr) {
@@ -2499,7 +2849,9 @@ class AgridColumnMenuController {
         const next = current.includes(rawStr)
             ? current.filter(value => value !== rawStr)
             : [...current, rawStr];
-        control.setSelectedValues(field, next.length === allValues.length ? null : next);
+        const selectedValues = next.length === allValues.length ? null : next;
+        control.setSelectedValues(field, selectedValues);
+        this.emitValueServer(field, selectedValues);
     }
     /** Toggles left pinning for a field. */
     togglePin(field) {
@@ -2552,6 +2904,11 @@ class AgridColumnMenuController {
         clearTimeout(timer);
         this.filterDebounces.delete(field);
     }
+    emitValueServer(field, selectedValues) {
+        if (!this.opts.serverSideFiltering())
+            return;
+        this.opts.onFilterChange({ field, value: '', selectedValues });
+    }
 }
 
 /** Owns column header drag/drop state and column reordering. @internal */
@@ -2863,7 +3220,7 @@ class AgridColumnSizingController {
         for (const item of this.opts.filteredItems()) {
             if (!isDataRowItem(item))
                 continue;
-            values.push(getDisplayForField(col, item.row[col.field], this.opts.locale()));
+            values.push(getDisplayForField(col, item.row[col.field], this.opts.locale(), item.row));
         }
         const measured = values.reduce((max, value) => Math.max(max, context.measureText(value).width), 0);
         return Math.max(40, Math.min(500, Math.ceil(measured + 42)));
@@ -2956,6 +3313,7 @@ class AgridDataSource {
     _rows = linkedSignal(() => this._linkedRows()?.() ?? [], ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
     _writableLinkedRows = null;
     _rowAdded = signal(null, ...(ngDevMode ? [{ debugName: "_rowAdded" }] : /* istanbul ignore next */ []));
+    _unfilteredAddedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "_unfilteredAddedRows" }] : /* istanbul ignore next */ []));
     _changeSequence = 0;
     /**
      * @param initialData Rows to seed the data source with.
@@ -2971,6 +3329,12 @@ class AgridDataSource {
     rows = this._rows.asReadonly();
     /** Latest row insertion, used by attached grids to reveal the inserted row. */
     rowAdded = this._rowAdded.asReadonly();
+    /**
+     * Rows inserted since filters were last explicitly reapplied.
+     * Attached grids include these rows even when they do not match active filters.
+     * @internal
+     */
+    ɵunfilteredAddedRows = this._unfilteredAddedRows.asReadonly();
     /**
      * Link an external row signal to this data source.
      *
@@ -2990,6 +3354,7 @@ class AgridDataSource {
      */
     setData(rows) {
         this.setRows([...rows]);
+        this.ɵreapplyFiltersToAddedRows();
     }
     /**
      * Overwrite the row at `index` with a new row object.
@@ -3032,6 +3397,13 @@ class AgridDataSource {
             next.splice(atIndex, 0, row);
             return next;
         });
+        this._unfilteredAddedRows.update(current => {
+            const next = new Set();
+            for (const index of current)
+                next.add(index >= insertedAt ? index + 1 : index);
+            next.add(insertedAt);
+            return next;
+        });
         this._rowAdded.set({ index: insertedAt, sequence: ++this._changeSequence });
         return insertedAt;
     }
@@ -3042,6 +3414,16 @@ class AgridDataSource {
      */
     removeRow(index) {
         this.updateRows(rows => rows.filter((_, i) => i !== index));
+        this._unfilteredAddedRows.update(current => {
+            const next = new Set();
+            for (const addedIndex of current) {
+                if (addedIndex < index)
+                    next.add(addedIndex);
+                else if (addedIndex > index)
+                    next.add(addedIndex - 1);
+            }
+            return next;
+        });
     }
     /**
      * Move the row at `from` to position `to` (insert-before semantics).
@@ -3053,12 +3435,30 @@ class AgridDataSource {
     moveRow(from, to) {
         if (from === to)
             return;
+        let insertedAt = from;
         this.updateRows(rows => {
             const arr = [...rows];
             const [item] = arr.splice(from, 1);
-            arr.splice(to > from ? to - 1 : to, 0, item);
+            insertedAt = to > from ? to - 1 : to;
+            arr.splice(insertedAt, 0, item);
             return arr;
         });
+        this._unfilteredAddedRows.update(current => {
+            const next = new Set();
+            for (const index of current) {
+                if (index === from) {
+                    next.add(insertedAt);
+                    continue;
+                }
+                let moved = index;
+                if (moved > from)
+                    moved -= 1;
+                if (moved >= insertedAt)
+                    moved += 1;
+                next.add(moved);
+            }
+            return next;
+        });
     }
     /** Return the current row at `index` (non-reactive snapshot). */
     getRow(index) {
@@ -3076,6 +3476,10 @@ class AgridDataSource {
         this._writableLinkedRows?.set(rows);
         this._rows.set(rows);
     }
+    /** @internal Clears the transient filter bypass applied to newly inserted rows. */
+    ɵreapplyFiltersToAddedRows() {
+        this._unfilteredAddedRows.set(new Set());
+    }
 }
 
 /**
@@ -3138,7 +3542,8 @@ class AgridDragHandler {
         const idx = this.reorderOriginalIndex();
         if (idx === null)
             return '';
-        return getDisplayForField(col, this.opts.dataSource().rows()[idx]?.[col.field], this.opts.locale());
+        const row = this.opts.dataSource().rows()[idx];
+        return getDisplayForField(col, row?.[col.field], this.opts.locale(), row);
     }
     _reorderMove = (e) => {
         if (this._overlayEl) {
@@ -3283,7 +3688,7 @@ class AgridDetailController {
     /** Formatted value shown while a configured detail field is not being edited. */
     detailFieldDisplay(item) {
         const col = this.opts.detailColumn();
-        return col ? getDisplayForField(col, item.row[col.field], this.opts.locale()) : '';
+        return col ? getDisplayForField(col, item.row[col.field], this.opts.locale(), item.row) : '';
     }
     /** Whether the configured detail field can be edited for this row. */
     isDetailFieldEditable(item) {
@@ -3590,21 +3995,24 @@ class AgridEditController {
             return false;
         const row = this.opts.dataSource().getRow(rowIndex);
         const oldValue = row[col.field];
-        if (oldValue === newValue)
+        const storedValue = col.type === 'number'
+            ? coerceNumberInputValue(newValue)
+            : newValue;
+        if (oldValue === storedValue)
             return true;
-        const message = col.validate?.(newValue, row) ?? null;
+        const message = col.validate?.(storedValue, row) ?? null;
         if (message) {
             this.validationError.set({ rowIndex, colIndex, field: col.field, message });
-            this.opts.onValidationFailed({ rowIndex, field: col.field, value: newValue, message });
+            this.opts.onValidationFailed({ rowIndex, field: col.field, value: storedValue, message });
             return false;
         }
-        this.opts.dataSource().patchRow(rowIndex, { [col.field]: newValue });
-        this.opts.control()?.pushEdit({ rowIndex, field: col.field, oldValue, newValue });
+        this.opts.dataSource().patchRow(rowIndex, { [col.field]: storedValue });
+        this.opts.control()?.pushEdit({ rowIndex, field: col.field, oldValue, newValue: storedValue });
         this.opts.onCellEdit({
             position: { rowIndex, colIndex },
             field: col.field,
             oldValue,
-            newValue,
+            newValue: storedValue,
         });
         this.validationError.set(null);
         return true;
@@ -3679,7 +4087,7 @@ class AgridFindController {
                 return;
             for (let colIndex = 0; colIndex < cols.length; colIndex++) {
                 const col = cols[colIndex];
-                const value = getDisplayForField(col, row[col.field], this.opts.locale()).toLowerCase();
+                const value = getDisplayForField(col, row[col.field], this.opts.locale(), row).toLowerCase();
                 if (value.includes(query)) {
                     matches.push({ rowIndex, colIndex });
                 }
@@ -4640,7 +5048,7 @@ class AgridPresentationService {
         const locale = this.opts.locale();
         const body = rows
             .map(row => cols
-            .map(col => escape(getDisplayForField(col, row[col.field], locale)))
+            .map(col => escape(getDisplayForField(col, row[col.field], locale, row)))
             .join(','))
             .join('\n');
         this.browser.downloadText(filename, `${header}\n${body}`, 'text/csv;charset=utf-8;');
@@ -4662,7 +5070,7 @@ class AgridPresentationService {
         return {
             name,
             header: cols.map(col => col.header),
-            rows: rows.map(row => ({ cells: cols.map(col => this.toXlsxCell(col, row[col.field], locale)) })),
+            rows: rows.map(row => ({ cells: cols.map(col => this.toXlsxCell(col, row[col.field], locale, row)) })),
         };
     }
     buildGroupedSheet(name, cols, groups, locale) {
@@ -4681,7 +5089,7 @@ class AgridPresentationService {
             });
             rows.push({ cells: summary, level: 0, emphasized: true });
             for (const row of group.rows) {
-                rows.push({ cells: cols.map(col => this.toXlsxCell(col, row[col.field], locale)), level: 1 });
+                rows.push({ cells: cols.map(col => this.toXlsxCell(col, row[col.field], locale, row)), level: 1 });
             }
         }
         return { name, header: cols.map(col => col.header), rows, outline: true };
@@ -4690,11 +5098,12 @@ class AgridPresentationService {
      * Maps a raw cell value to a typed spreadsheet cell so Excel keeps numbers and dates native
      * (sortable, summable). Mapped value lists and custom formatters fall back to display text.
      */
-    toXlsxCell(col, raw, locale) {
+    toXlsxCell(col, raw, locale, row) {
         if (raw == null || raw === '')
             return { kind: 'empty' };
-        if (col.values?.length)
-            return { kind: 'string', value: getDisplayForField(col, raw, locale) };
+        if (col.values?.length || col.formula) {
+            return { kind: 'string', value: getDisplayForField(col, raw, locale, row) };
+        }
         if (col.type === 'number' && typeof raw === 'number' && Number.isFinite(raw)) {
             return { kind: 'number', value: raw };
         }
@@ -4705,7 +5114,7 @@ class AgridPresentationService {
             if (!Number.isNaN(date.getTime()))
                 return { kind: 'date', value: date };
         }
-        return { kind: 'string', value: getDisplayForField(col, raw, locale) };
+        return { kind: 'string', value: getDisplayForField(col, raw, locale, row) };
     }
 }
 
@@ -4930,6 +5339,8 @@ class AgridControl {
     _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
     _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : /* istanbul ignore next */ []));
     _autoAddRows = signal(false, ...(ngDevMode ? [{ debugName: "_autoAddRows" }] : /* istanbul ignore next */ []));
+    _filterReapplyRevision = signal(0, ...(ngDevMode ? [{ debugName: "_filterReapplyRevision" }] : /* istanbul ignore next */ []));
+    _filterReapplyNeeded = signal(false, ...(ngDevMode ? [{ debugName: "_filterReapplyNeeded" }] : /* istanbul ignore next */ []));
     _rowIndications = signal(new Map(), ...(ngDevMode ? [{ debugName: "_rowIndications" }] : /* istanbul ignore next */ []));
     _changedCells = signal(new Set(), ...(ngDevMode ? [{ debugName: "_changedCells" }] : /* istanbul ignore next */ []));
     rowIndicationTimers = new Map();
@@ -5048,6 +5459,25 @@ class AgridControl {
     setAutoAddRows(value) {
         this._autoAddRows.set(value);
     }
+    /**
+     * Reapply active filters to rows that were inserted while filters were already active.
+     * By default, newly inserted rows stay visible until this method is called.
+     */
+    reapplyFilters() {
+        this._filterReapplyNeeded.set(false);
+        this._filterReapplyRevision.update(revision => revision + 1);
+    }
+    /**
+     * `true` when inserted rows are currently bypassing active filters or sorts.
+     * Bind this to visual feedback for a "Reapply filters" action.
+     */
+    filterReapplyNeeded = this._filterReapplyNeeded.asReadonly();
+    /** @internal Updates {@link filterReapplyNeeded} from the rendered grid projection. */
+    ɵsetFilterReapplyNeeded(value) {
+        this._filterReapplyNeeded.set(value);
+    }
+    /** @internal Emits whenever {@link reapplyFilters} is called. */
+    ɵfilterReapplyRevision = this._filterReapplyRevision.asReadonly();
     /**
      * When `true`, the control column shows a drag handle and rows can be
      * reordered by dragging. Requires `showControlColumn` to be enabled on the grid.
@@ -5331,6 +5761,44 @@ class AgridControl {
     getFilter(field) {
         return this._filters()[field] ?? { text: '', selectedValues: null, sort: null };
     }
+    /** Replace the complete filter/sort state for one field. */
+    setFilter(field, filter) {
+        const nextFilter = this.cloneFilters({ [field]: filter })[field];
+        this._filters.update(filters => ({
+            ...filters,
+            [field]: nextFilter,
+        }));
+        this._sortOrder.update(order => {
+            const withoutField = order.filter(item => item !== field);
+            return nextFilter.sort ? [...withoutField, field] : withoutField;
+        });
+    }
+    /** Return a detached JSON-safe snapshot of active column filters, quick filter, and sort order. */
+    getFilterModel() {
+        return {
+            filters: this.cloneFilters(this._filters()),
+            quickFilter: this._quickFilter() || undefined,
+            sortOrder: [...this._sortOrder()],
+        };
+    }
+    /**
+     * Replace active column filters, quick filter, and sort order from a filter model.
+     * Pass `null` to clear all filters and sorts.
+     */
+    setFilterModel(model) {
+        if (!model) {
+            this.clearAllFilters();
+            return;
+        }
+        const filters = this.cloneFilters(model.filters ?? {});
+        this._filters.set(filters);
+        this._quickFilter.set(model.quickFilter ?? '');
+        const ordered = (model.sortOrder ?? []).filter(field => !!filters[field]?.sort);
+        const missingSortedFields = Object.entries(filters)
+            .filter(([field, filter]) => !!filter.sort && !ordered.includes(field))
+            .map(([field]) => field);
+        this._sortOrder.set([...ordered, ...missingSortedFields]);
+    }
     /**
      * Set the free-text filter for a column.
      * An empty string removes the text filter for that column.
@@ -5475,6 +5943,15 @@ class AgridControl {
     static fromJSON(state) {
         return new AgridControl(state);
     }
+    cloneFilters(filters) {
+        return Object.fromEntries(Object.entries(filters).map(([field, filter]) => [
+            field,
+            {
+                ...filter,
+                selectedValues: filter.selectedValues ? [...filter.selectedValues] : filter.selectedValues,
+            },
+        ]));
+    }
 }
 /** @internal Bridge for deprecated writable signals on AgridProvider. */
 function ɵgetAgridControlRuntimeState(control) {
@@ -5510,12 +5987,19 @@ class AgridProvider {
     _localizations = new Map();
     exportBridge = null;
     _visibleRows = signal(null, ...(ngDevMode ? [{ debugName: "_visibleRows" }] : /* istanbul ignore next */ []));
+    _serverQuery = signal(null, ...(ngDevMode ? [{ debugName: "_serverQuery" }] : /* istanbul ignore next */ []));
     /**
      * The grid's currently filtered and sorted rows, as published by the rendered grid component.
      * Falls back to every datasource row when no grid is attached. Link a chart to this signal to
      * keep it in sync with the grid's filters and sorting.
      */
     visibleRows = computed(() => this._visibleRows() ?? this.datasource.rows(), ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Complete server-side filter/sort/page query published by the rendered grid.
+     * Useful for signal-backed stores that fetch data from an API. `null` means the grid is not in
+     * server-side filtering or pagination mode.
+     */
+    serverQuery = this._serverQuery.asReadonly();
     /**
      * @internal Published by the rendered grid whenever its filtered/sorted projection changes.
      * Pass `null` on teardown so {@link visibleRows} falls back to the raw datasource. The grid works
@@ -5524,6 +6008,10 @@ class AgridProvider {
     ɵsetVisibleRows(rows) {
         this._visibleRows.set(rows);
     }
+    /** @internal Published by the rendered grid whenever the server-side query state changes. */
+    ɵsetServerQuery(query) {
+        this._serverQuery.set(query);
+    }
     /** Read-only view of registered per-locale text overrides. Used by the grid to resolve locale text. */
     get localizations() {
         return this._localizations;
@@ -5550,6 +6038,8 @@ class AgridProvider {
     allowAddRows;
     /** Whether the control column is rendered. */
     showControlColumn;
+    /** Whether the control column displays automatic row numbers. */
+    showRowNumbers;
     /** Whether rows can be marked for inclusion in clipboard copies. */
     enableRowMarking;
     /** Whether complete columns can be marked from their headers. */
@@ -5564,6 +6054,8 @@ class AgridProvider {
     filterDebounceMs;
     /** Whether the global quick-filter box is shown above the grid. */
     enableQuickFilter;
+    /** Whether the formula/input bar is shown above the grid body. */
+    showFormulaBar;
     /** Commands rendered in the optional menu bar above the column headers. */
     menuBarItems;
     /** Enabled sorting mode. */
@@ -5594,6 +6086,8 @@ class AgridProvider {
     useSidebarEditor;
     /** Optional callback returning CSS classes for a whole data row. */
     getRowClass;
+    /** Optional application-owned row predicate applied by the client-side projection. */
+    externalFilter;
     /** Optional callback designating rows pinned to the top or bottom of the body. */
     pinRow;
     /** Whether master/detail expandable detail rows are enabled. */
@@ -5641,6 +6135,7 @@ class AgridProvider {
             this.control.setAutoAddRows(config.autoAddRows);
         this.autoAddRows = runtimeState.autoAddRows;
         this.showControlColumn = config.showControlColumn ?? false;
+        this.showRowNumbers = config.showRowNumbers ?? false;
         this.enableRowMarking = config.enableRowMarking ?? false;
         this.enableColumnMarking = config.enableColumnMarking ?? false;
         this.showSidebar = config.showSidebar ?? false;
@@ -5648,6 +6143,7 @@ class AgridProvider {
         this.serverSideFiltering = this.serverSideRowModel ? true : config.serverSideFiltering ?? false;
         this.filterDebounceMs = Math.max(0, config.filterDebounceMs ?? 300);
         this.enableQuickFilter = config.enableQuickFilter ?? false;
+        this.showFormulaBar = config.showFormulaBar ?? false;
         this.menuBarItems = config.menuBarItems ?? [];
         this.sortOption = config.sortOption ?? 'multi';
         this.rowSelection = config.rowSelection ?? 'none';
@@ -5668,6 +6164,7 @@ class AgridProvider {
         this.readonlyGrid = runtimeState.readonly;
         this.useSidebarEditor = config.useSidebarEditor ?? false;
         this.getRowClass = config.getRowClass;
+        this.externalFilter = config.externalFilter;
         this.pinRow = config.pinRow;
         this.masterDetail = config.masterDetail ?? false;
         this.detailRenderer = config.detailRenderer;
@@ -5872,6 +6369,7 @@ class AgridServerSideRowModel extends AgridDataSource {
     slots = [];
     loadedBlocks = new Map();
     loadingBlocks = new Set();
+    failedBlocks = new Set();
     query = { filters: {}, sort: [], quickFilter: '' };
     queryKey = '';
     generation = 0;
@@ -5911,9 +6409,39 @@ class AgridServerSideRowModel extends AgridDataSource {
         this.reset();
         return true;
     }
-    /** Invalidate all cached blocks while preserving a known total row count. */
-    refresh() {
-        this.reset();
+    /** Invalidate cached blocks while preserving the current query and known total row count. */
+    refresh(options = {}) {
+        const purge = options.purge ?? true;
+        this.generation++;
+        this.loadingBlocks.clear();
+        this.failedBlocks.clear();
+        this._loading.set(false);
+        this._error.set(null);
+        if (purge) {
+            this.loadedBlocks.clear();
+            const length = this.knownRowCount ? this._rowCount() : this.blockSize;
+            this.replaceSlots(this.createPlaceholders(length));
+        }
+        else {
+            this.loadedBlocks.clear();
+        }
+    }
+    /** Clear the block cache and show placeholders until requested blocks are reloaded. */
+    purgeCache() {
+        this.refresh({ purge: true });
+    }
+    /** Retry the most recently failed block, or a specific block index when supplied. */
+    retryFailedBlock(block) {
+        const target = block ?? [...this.failedBlocks].at(-1);
+        if (target === undefined)
+            return;
+        this.failedBlocks.delete(target);
+        this.loadedBlocks.delete(target);
+        void this.loadBlock(target);
+    }
+    /** Failed block indices that can be passed to {@link retryFailedBlock}. */
+    failedBlockIndices() {
+        return [...this.failedBlocks].sort((left, right) => left - right);
     }
     /** Ensure every block intersecting the requested half-open range is loaded. */
     ensureRange(startRow, endRow) {
@@ -5935,6 +6463,7 @@ class AgridServerSideRowModel extends AgridDataSource {
         this.generation++;
         this.loadedBlocks.clear();
         this.loadingBlocks.clear();
+        this.failedBlocks.clear();
         this._loading.set(false);
         this._error.set(null);
         const length = this.knownRowCount ? this._rowCount() : this.blockSize;
@@ -5964,11 +6493,14 @@ class AgridServerSideRowModel extends AgridDataSource {
             if (generation !== this.generation)
                 return;
             this.applyBlock(block, startRow, result);
+            this.failedBlocks.delete(block);
             this._error.set(null);
         }
         catch (error) {
-            if (generation === this.generation)
+            if (generation === this.generation) {
+                this.failedBlocks.add(block);
                 this._error.set(error);
+            }
         }
         finally {
             if (generation === this.generation) {
@@ -6065,17 +6597,33 @@ class AgridProjectionModel {
         if (!control || this.opts.serverSideFiltering())
             return indices;
         const filters = control.filters();
+        const hasRowFilter = this.hasActiveRowFilter(filters, control.quickFilter());
         indices = applyTextAndValueFilters(rows, indices, filters, colMap, this.opts.locale());
         const quick = control.quickFilter();
         if (quick) {
             indices = applyQuickFilter(rows, indices, quick, this.opts.visibleColDefs(), this.opts.locale());
         }
+        const externalFilter = this.opts.externalFilter?.();
+        if (externalFilter) {
+            indices = indices.filter(index => externalFilter({ row: rows[index], index }));
+        }
+        if (hasRowFilter)
+            indices = this.includeUnfilteredAddedRows(indices, rows.length);
         if (control.groupByField() && !this.opts.pivotMode?.())
             return indices;
         const sortEntries = this.sortEntries(filters);
-        return sortEntries.length
-            ? applySortToIndices(rows, indices, sortEntries, colMap, this.opts.locale())
-            : indices;
+        if (!sortEntries.length)
+            return indices;
+        const addedRows = this.opts.dataSource().ɵunfilteredAddedRows();
+        if (addedRows.size === 0) {
+            return applySortToIndices(rows, indices, sortEntries, colMap, this.opts.locale());
+        }
+        const added = indices.filter(index => addedRows.has(index));
+        const regular = indices.filter(index => !addedRows.has(index));
+        return [
+            ...applySortToIndices(rows, regular, sortEntries, colMap, this.opts.locale()),
+            ...added,
+        ];
     }, ...(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 */ []));
@@ -6280,6 +6828,25 @@ class AgridProjectionModel {
             .map(field => [field, filters[field]])
             .filter(([, filter]) => !!filter?.sort);
     }
+    hasActiveRowFilter(filters, quickFilter) {
+        return !!quickFilter || Object.values(filters).some(filter => !!filter.text
+            || filter.selectedValues !== null
+            || (!!filter.operator && filter.operand != null && filter.operand !== ''));
+    }
+    includeUnfilteredAddedRows(indices, rowCount) {
+        const addedRows = this.opts.dataSource().ɵunfilteredAddedRows();
+        if (addedRows.size === 0)
+            return indices;
+        const visible = new Set(indices);
+        const next = [...indices];
+        for (const index of addedRows) {
+            if (index >= 0 && index < rowCount && !visible.has(index)) {
+                visible.add(index);
+                next.push(index);
+            }
+        }
+        return next;
+    }
     appendTreeDetailItems(items, rows, treeConfig) {
         const expandedDetail = this.opts.masterDetail?.() ? this.opts.expandedDetailIds?.() : null;
         if (!expandedDetail?.size)
@@ -6821,7 +7388,7 @@ class AgridRowController {
     copyCellToClipboard(originalIndex, col) {
         const rows = this.opts.dataSource().rows();
         const text = this.copyIndices(originalIndex)
-            .map(index => getDisplayForField(col, rows[index]?.[col.field], this.opts.locale()))
+            .map(index => getDisplayForField(col, rows[index]?.[col.field], this.opts.locale(), rows[index]))
             .join('\n');
         void this.browser.writeClipboard(text);
         this.closeCellContextMenu();
@@ -6832,7 +7399,7 @@ class AgridRowController {
         const cols = this.opts.visibleColDefs();
         const text = this.copyIndices(originalIndex)
             .map(index => cols
-            .map(col => getDisplayForField(col, rows[index]?.[col.field], this.opts.locale()))
+            .map(col => getDisplayForField(col, rows[index]?.[col.field], this.opts.locale(), rows[index]))
             .join('\t'))
             .join('\n');
         void this.browser.writeClipboard(text);
@@ -7183,7 +7750,7 @@ class AgridSidebarComponent {
             }
             return {
                 label: col.header,
-                value: getDisplayForField(col, rawValue, locale),
+                value: getDisplayForField(col, rawValue, locale, row),
                 rawValue,
                 inputValue,
                 hidden: hiddenColumns.has(col.field),
@@ -7343,7 +7910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], propDecorators: { itemSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "agridVariableRowSize", required: false }] }] } });
 
 /**
- * Excel-like data grid for Angular 21.
+ * Excel-like data grid for Angular 21 and 22.
  *
  * ## Minimal setup
  * ```html
@@ -7378,13 +7945,23 @@ class AgridComponent {
     autoAddRows = computed(() => !this.provider().pivotConfig && (this.control()?.autoAddRows() ?? false), ...(ngDevMode ? [{ debugName: "autoAddRows" }] : /* istanbul ignore next */ []));
     enableRowMarking = computed(() => this.provider().enableRowMarking, ...(ngDevMode ? [{ debugName: "enableRowMarking" }] : /* istanbul ignore next */ []));
     enableColumnMarking = computed(() => this.provider().enableColumnMarking, ...(ngDevMode ? [{ debugName: "enableColumnMarking" }] : /* 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 */ []));
+    showRowNumbers = computed(() => this.provider().showRowNumbers, ...(ngDevMode ? [{ debugName: "showRowNumbers" }] : /* istanbul ignore next */ []));
+    showControlColumn = computed(() => this.provider().showControlColumn
+        || this.showRowNumbers()
+        || this.enableRowMarking()
+        || this.masterDetail(), ...(ngDevMode ? [{ debugName: "showControlColumn" }] : /* istanbul ignore next */ []));
+    controlColumnWidth = computed(() => {
+        if (!this.showRowNumbers())
+            return this.enableRowMarking() ? 48 : 24;
+        const numberWidth = this.rowNumberColumnWidth();
+        return this.enableRowMarking() ? numberWidth + 20 : numberWidth;
+    }, ...(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 */ []));
+    showFormulaBar = computed(() => this.provider().showFormulaBar, ...(ngDevMode ? [{ debugName: "showFormulaBar" }] : /* 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 */ []));
@@ -7407,6 +7984,7 @@ class AgridComponent {
     hideGridStatusBar = computed(() => this.provider().hideGridStatusBar, ...(ngDevMode ? [{ debugName: "hideGridStatusBar" }] : /* istanbul ignore next */ []));
     /** Host callback for per-row CSS classes, or `undefined`. */
     rowClassFn = computed(() => this.provider().getRowClass, ...(ngDevMode ? [{ debugName: "rowClassFn" }] : /* istanbul ignore next */ []));
+    externalFilterFn = computed(() => this.provider().externalFilter, ...(ngDevMode ? [{ debugName: "externalFilterFn" }] : /* istanbul ignore next */ []));
     /** Host callback designating pinned rows, or `undefined`. */
     pinRowFn = computed(() => this.provider().pinRow, ...(ngDevMode ? [{ debugName: "pinRowFn" }] : /* istanbul ignore next */ []));
     pivotRowColumnField = computed(() => {
@@ -7550,6 +8128,8 @@ class AgridComponent {
     filterChange = output();
     /** Emitted when a column sort changes in server-side filtering mode. */
     sortChange = output();
+    /** Emitted with the complete server-side filter/sort/page query snapshot. */
+    serverQueryChange = output();
     /**
      * Emitted (debounced) when the global quick-filter text changes in server-side filtering mode.
      * The host should refetch rows matching the text. Not emitted in client mode, where the grid
@@ -7560,6 +8140,8 @@ class AgridComponent {
     validationFailed = output();
     /** Emitted when a column's optional cell information button is clicked. */
     cellInfo = output();
+    /** Emitted when the selected cell changes. `null` = cell selection cleared. */
+    cellSelect = output();
     /** Emitted for every enabled menu-bar button or dropdown item, carrying its configured id. */
     menuBarAction = output();
     /** Emitted if there is a Detail pane Action without text property */
@@ -7567,6 +8149,7 @@ class AgridComponent {
     // ── Public state ─────────────────────────────────────────────────────────────
     /** Currently focused cell, or `null`. */
     selectedCell = signal(null, ...(ngDevMode ? [{ debugName: "selectedCell" }] : /* istanbul ignore next */ []));
+    lastEmittedCell = undefined;
     /** Original indices of rows whose master/detail panel is currently expanded. */
     _expandedDetailIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expandedDetailIds" }] : /* istanbul ignore next */ []));
     /**
@@ -7575,9 +8158,13 @@ class AgridComponent {
      * provider predicate by {@link effectivePinRow}.
      */
     _pinnedRows = signal(new Map(), ...(ngDevMode ? [{ debugName: "_pinnedRows" }] : /* istanbul ignore next */ []));
+    formulaBarDraft = signal('', ...(ngDevMode ? [{ debugName: "formulaBarDraft" }] : /* istanbul ignore next */ []));
+    formulaBarFocused = signal(false, ...(ngDevMode ? [{ debugName: "formulaBarFocused" }] : /* istanbul ignore next */ []));
+    formulaBarEditCell = null;
     markedIndices = signal(new Set(), ...(ngDevMode ? [{ debugName: "markedIndices" }] : /* istanbul ignore next */ []));
     markedFields = signal(new Set(), ...(ngDevMode ? [{ debugName: "markedFields" }] : /* istanbul ignore next */ []));
     firstDataRenderedEmitted = false;
+    serverQueryProvider = null;
     /** Original datasource indices marked for inclusion in copy operations. */
     markedRowIndices = this.markedIndices.asReadonly();
     /** Fields currently marked as complete columns. */
@@ -7596,6 +8183,44 @@ class AgridComponent {
     get editSeedChar() { return this.editController.editSeedChar; }
     /** Whether the active text editor should select all text when it opens. */
     get selectTextOnEdit() { return this.editController.selectTextOnEdit; }
+    /** Return the first currently selected row, or `null` when no row is selected. */
+    getCurrentRow() {
+        const originalIndex = this.selectedRowIndex();
+        if (originalIndex === null)
+            return null;
+        const row = this.dataSource().rows()[originalIndex];
+        return row ? { row, originalIndex } : null;
+    }
+    /** Return the currently selected cell with row, field, value, and column metadata. */
+    getCurrentCell() {
+        return this.resolveCurrentCell(this.selectedCell());
+    }
+    formulaBarLabel = computed(() => {
+        const cell = this.selectedCell();
+        const col = cell ? this.visibleColDefs()[cell.colIndex] : null;
+        if (!cell || !col)
+            return '';
+        return `${col.field}${cell.rowIndex + 1}`;
+    }, ...(ngDevMode ? [{ debugName: "formulaBarLabel" }] : /* istanbul ignore next */ []));
+    resolveCurrentCell(position) {
+        if (!position)
+            return null;
+        const row = this.dataSource().rows()[position.rowIndex];
+        const column = this.visibleColDefs()[position.colIndex];
+        if (!row || !column)
+            return null;
+        return {
+            position: { ...position },
+            row,
+            originalIndex: position.rowIndex,
+            field: column.field,
+            value: row[column.field],
+            column,
+        };
+    }
+    sameCell(a, b) {
+        return a?.rowIndex === b?.rowIndex && a?.colIndex === b?.colIndex;
+    }
     /** Toggle the sidebar open/closed. */
     toggleSidebar() { this.sidebarController.toggle(); }
     /** @internal */
@@ -7816,6 +8441,10 @@ class AgridComponent {
     pinnedBodyColumns = computed(() => this.buildBodyColumns(this.pinnedColDefs()), ...(ngDevMode ? [{ debugName: "pinnedBodyColumns" }] : /* istanbul ignore next */ []));
     scrollableBodyColumns = computed(() => this.buildBodyColumns(this.scrollableColDefs()), ...(ngDevMode ? [{ debugName: "scrollableBodyColumns" }] : /* istanbul ignore next */ []));
     rightBodyColumns = computed(() => this.buildBodyColumns(this.rightPinnedColDefs()), ...(ngDevMode ? [{ debugName: "rightBodyColumns" }] : /* istanbul ignore next */ []));
+    /** @internal Whether a pane needs per-cell span resolution. */
+    pinnedPaneHasSpans = computed(() => this.pinnedColDefs().some(col => col.colSpan), ...(ngDevMode ? [{ debugName: "pinnedPaneHasSpans" }] : /* istanbul ignore next */ []));
+    scrollablePaneHasSpans = computed(() => this.scrollableColDefs().some(col => col.colSpan), ...(ngDevMode ? [{ debugName: "scrollablePaneHasSpans" }] : /* istanbul ignore next */ []));
+    rightPaneHasSpans = computed(() => this.rightPinnedColDefs().some(col => col.colSpan), ...(ngDevMode ? [{ debugName: "rightPaneHasSpans" }] : /* istanbul ignore next */ []));
     /**
      * Resolves the per-column bindings shared by every data, footer, and ghost cell. Reads only
      * layout/drag/pinning signals, so the result is reused across all rows and recomputes only
@@ -7860,6 +8489,7 @@ class AgridComponent {
         pivotMode: this.pivotMode,
         expandedTreeIds: this.treeController.expandedIds,
         pinRow: this.effectivePinRow,
+        externalFilter: this.externalFilterFn,
         masterDetail: this.masterDetail,
         expandedDetailIds: this._expandedDetailIds,
     });
@@ -7958,6 +8588,24 @@ class AgridComponent {
         }
         return map;
     }, ...(ngDevMode ? [{ debugName: "dataRowIsOdd" }] : /* istanbul ignore next */ []));
+    /** Maps originalIndex → 1-based filtered/sorted row number for the control column. */
+    rowNumbers = computed(() => {
+        const map = new Map();
+        this.projection.filteredSortedIndices().forEach((originalIndex, index) => {
+            map.set(originalIndex, index + 1);
+        });
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "rowNumbers" }] : /* istanbul ignore next */ []));
+    /** Width needed for the largest currently rendered row number. */
+    rowNumberColumnWidth = computed(() => {
+        const maxNumber = Math.max(1, ...[
+            ...this.pinnedTopItems(),
+            ...this.filteredItems(),
+            ...this.pinnedBottomItems(),
+        ].map(item => this.visibleRowNumber(item)).filter(number => number !== null));
+        const digits = String(maxNumber).length;
+        return Math.max(36, 20 + digits * 8);
+    }, ...(ngDevMode ? [{ debugName: "rowNumberColumnWidth" }] : /* istanbul ignore next */ []));
     displayItems = computed(() => {
         const items = this.filteredItems();
         const dragIdx = this.dragHandler.reorderOriginalIndex();
@@ -8359,6 +9007,8 @@ class AgridComponent {
     dirtyInlineRows = new Set();
     dirtyRowsDataSource = null;
     changedCellsDataSource = null;
+    dirtyInlineRowsIdleTimer = null;
+    dirtyInlineRowsIdleFlushMs = 2000;
     emitEditEvents(event) {
         this.cellEdit.emit(event);
         this.emitRecordEdit(event.position.rowIndex);
@@ -8381,6 +9031,7 @@ class AgridComponent {
             this.dirtyRowsDataSource = datasource;
         }
         this.dirtyInlineRows.add(index);
+        this.scheduleDirtyInlineRowsIdleFlush();
     }
     markCellChanged(event) {
         if (!this.showChangedCellIndicator())
@@ -8397,6 +9048,7 @@ class AgridComponent {
         if (this.dirtyRowsDataSource !== datasource) {
             this.dirtyInlineRows.clear();
             this.dirtyRowsDataSource = datasource;
+            this.clearDirtyInlineRowsIdleFlush();
             return;
         }
         for (const index of [...this.dirtyInlineRows].sort((a, b) => a - b)) {
@@ -8406,6 +9058,29 @@ class AgridComponent {
             if (index >= 0 && index < datasource.length)
                 this.emitRowChanged(index);
         }
+        if (this.dirtyInlineRows.size === 0)
+            this.clearDirtyInlineRowsIdleFlush();
+        else
+            this.scheduleDirtyInlineRowsIdleFlush();
+    }
+    scheduleDirtyInlineRowsIdleFlush() {
+        this.clearDirtyInlineRowsIdleFlush();
+        if (this.dirtyInlineRows.size === 0)
+            return;
+        this.dirtyInlineRowsIdleTimer = setTimeout(() => {
+            this.dirtyInlineRowsIdleTimer = null;
+            if (this.editingCell()) {
+                this.scheduleDirtyInlineRowsIdleFlush();
+                return;
+            }
+            this.flushDirtyInlineRows();
+        }, this.dirtyInlineRowsIdleFlushMs);
+    }
+    clearDirtyInlineRowsIdleFlush() {
+        if (this.dirtyInlineRowsIdleTimer === null)
+            return;
+        clearTimeout(this.dirtyInlineRowsIdleTimer);
+        this.dirtyInlineRowsIdleTimer = null;
     }
     reconcileDirtyInlineRowsAfterRemoval(removedIndex) {
         const shifted = new Set();
@@ -8435,6 +9110,37 @@ class AgridComponent {
             datasource,
         };
     }
+    buildServerQuery() {
+        const control = this.control();
+        if (!control)
+            return null;
+        const pageSize = control.pageSize();
+        const serverFiltering = this.serverSideFiltering();
+        const serverPagination = !serverFiltering && control.totalRows() > 0 && pageSize > 0;
+        if (!serverFiltering && !serverPagination)
+            return null;
+        const page = Math.max(1, control.currentPage());
+        const startRow = pageSize > 0 ? (page - 1) * pageSize : 0;
+        const endRow = pageSize > 0 ? startRow + pageSize - 1 : -1;
+        const filters = Object.fromEntries(Object.entries(control.filters()).map(([field, filter]) => [field, {
+                ...filter,
+                selectedValues: filter.selectedValues ? [...filter.selectedValues] : null,
+            }]));
+        const sort = this.projection.effectiveSortOrder()
+            .flatMap(field => {
+            const direction = filters[field]?.sort;
+            return direction ? [{ field, direction }] : [];
+        });
+        return {
+            filters,
+            sort,
+            quickFilter: control.quickFilter(),
+            page,
+            pageSize,
+            startRow,
+            endRow,
+        };
+    }
     constructor() {
         // Keep one datasource identity so selection/controllers are not reset whenever source data
         // causes the computed pivot rows to be regenerated.
@@ -8452,6 +9158,19 @@ class AgridComponent {
         // Publish the live filtered/sorted rows so charts (and other consumers) can react to filters.
         effect(() => this.provider().ɵsetVisibleRows(this.ɵvisibleRows()));
         this.destroyRef.onDestroy(() => this.provider().ɵsetVisibleRows(null));
+        // Publish one complete query object for signal-backed server data stores.
+        effect(() => {
+            const provider = this.provider();
+            if (this.serverQueryProvider && this.serverQueryProvider !== provider) {
+                this.serverQueryProvider.ɵsetServerQuery(null);
+            }
+            this.serverQueryProvider = provider;
+            const query = this.buildServerQuery();
+            provider.ɵsetServerQuery(query);
+            if (query)
+                this.serverQueryChange.emit(query);
+        });
+        this.destroyRef.onDestroy(() => this.serverQueryProvider?.ɵsetServerQuery(null));
         afterRenderEffect(() => {
             if (this.firstDataRenderedEmitted)
                 return;
@@ -8484,6 +9203,34 @@ class AgridComponent {
             const activeRowIndex = this.selectedCell()?.rowIndex ?? null;
             this.flushDirtyInlineRows(activeRowIndex);
         });
+        effect(() => {
+            const cell = this.selectedCell();
+            if (this.lastEmittedCell === undefined && cell === null) {
+                this.lastEmittedCell = null;
+                return;
+            }
+            if (this.sameCell(this.lastEmittedCell ?? null, cell))
+                return;
+            this.lastEmittedCell = cell ? { ...cell } : null;
+            this.cellSelect.emit(this.resolveCurrentCell(cell));
+        });
+        effect(() => {
+            if (this.formulaBarFocused())
+                return;
+            const cell = this.selectedCell();
+            const editing = this.editingCell();
+            if (!cell) {
+                this.formulaBarDraft.set('');
+                return;
+            }
+            if (editing?.rowIndex === cell.rowIndex && editing.colIndex === cell.colIndex) {
+                this.formulaBarDraft.set(String(this.currentDraft() ?? ''));
+                return;
+            }
+            const row = this.dataSource().rows()[cell.rowIndex];
+            const col = this.visibleColDefs()[cell.colIndex];
+            this.formulaBarDraft.set(row && col ? String(row[col.field] ?? '') : '');
+        });
         afterNextRender(() => {
             this.viewReady = true;
             this.syncColumnViewportMetrics();
@@ -8547,6 +9294,20 @@ class AgridComponent {
                 return;
             this.navigationController.revealRow(added.index);
         });
+        effect(() => {
+            const control = this.control();
+            if (!control)
+                return;
+            control.ɵfilterReapplyRevision();
+            this.dataSource().ɵreapplyFiltersToAddedRows();
+        });
+        effect(() => {
+            const control = this.control();
+            if (!control)
+                return;
+            const hasDeferredRows = this.dataSource().ɵunfilteredAddedRows().size > 0;
+            control.ɵsetFilterReapplyNeeded(hasDeferredRows && control.hasAnyActiveFilter());
+        });
         // Deselect when clicking outside the grid.
         const onOutsidePointerDown = (e) => {
             const isInsideGrid = this._hostEl.nativeElement.contains(e.target);
@@ -8566,6 +9327,7 @@ class AgridComponent {
         this.destroyRef.onDestroy(() => {
             this.browser.removeDocumentListener('keydown', onDocumentKeyDown);
             this.browser.removeDocumentListener('pointerdown', onOutsidePointerDown);
+            this.clearDirtyInlineRowsIdleFlush();
             if (this.quickFilterTimer !== null)
                 clearTimeout(this.quickFilterTimer);
         });
@@ -8622,6 +9384,10 @@ class AgridComponent {
     getItemOriginalIndex(item) {
         return isDataRowItem(item) ? item.originalIndex : null;
     }
+    /** @internal 1-based row number for visible data rows. */
+    visibleRowNumber(item) {
+        return isDataRowItem(item) ? this.rowNumbers().get(item.originalIndex) ?? null : null;
+    }
     /** @internal True when the item is a master/detail panel row. */
     isDetailRowItem(item) {
         return isDetailRowItem(item);
@@ -8924,6 +9690,10 @@ class AgridComponent {
         return this.columnMenuController.hasMultiSort();
     }
     getTextFilter(field) { return this.columnMenuController.getTextFilter(field); }
+    /** @internal Complete filter snapshot for custom filter components. */
+    getColumnFilter(field) {
+        return this.control()?.getFilter(field) ?? { text: '', selectedValues: null, sort: null };
+    }
     /** @internal Condition input type for a column, or `null` when unsupported. */
     getMenuFilterType(field) {
         return this.columnMenuController.getFilterType(field);
@@ -9050,6 +9820,70 @@ class AgridComponent {
     }
     /** @internal */
     onDraftChange(value) { this.editController.setDraft(value); }
+    /** @internal */
+    onFormulaBarFocus() {
+        this.formulaBarFocused.set(true);
+        this.formulaBarEditCell = this.selectedCell();
+    }
+    /** @internal */
+    onFormulaBarInput(event) {
+        const value = event.target.value;
+        this.formulaBarEditCell ??= this.selectedCell();
+        this.formulaBarDraft.set(value);
+        const cell = this.selectedCell();
+        const editing = this.editingCell();
+        if (cell && editing?.rowIndex === cell.rowIndex && editing.colIndex === cell.colIndex) {
+            this.editController.setDraft(value);
+        }
+    }
+    /** @internal */
+    onFormulaBarBlur() {
+        if (!this.formulaBarFocused())
+            return;
+        this.commitFormulaBar(this.formulaBarEditCell);
+        this.finishFormulaBarInteraction();
+    }
+    /** @internal */
+    onFormulaBarKeydown(event) {
+        event.stopPropagation();
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (this.commitFormulaBar()) {
+                this.finishFormulaBarInteraction();
+                this.wrapperEl().nativeElement.focus();
+            }
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.resetFormulaBarDraft();
+        }
+    }
+    /** @internal */
+    commitFormulaBar(targetCell = this.formulaBarEditCell ?? this.selectedCell()) {
+        const cell = targetCell;
+        if (!cell)
+            return true;
+        const editing = this.editingCell();
+        if (editing?.rowIndex === cell.rowIndex && editing.colIndex === cell.colIndex) {
+            return this.editController.commit();
+        }
+        return this.editController.setCellValue(cell.rowIndex, cell.colIndex, this.formulaBarDraft());
+    }
+    finishFormulaBarInteraction() {
+        this.formulaBarFocused.set(false);
+        this.formulaBarEditCell = null;
+        this.resetFormulaBarDraft();
+    }
+    resetFormulaBarDraft() {
+        const cell = this.selectedCell();
+        if (!cell) {
+            this.formulaBarDraft.set('');
+            return;
+        }
+        const row = this.dataSource().rows()[cell.rowIndex];
+        const col = this.visibleColDefs()[cell.colIndex];
+        this.formulaBarDraft.set(row && col ? String(row[col.field] ?? '') : '');
+    }
     /** @internal A custom cell editor requested a commit (e.g. picking a value). */
     onEditorCommit() { this.editController.commit(); }
     /** @internal A custom cell editor requested cancellation. */
@@ -9097,6 +9931,8 @@ class AgridComponent {
     }
     /** @internal Main keyboard handler delegated from the wrapper div. */
     onKeyDown(event) {
+        if (this.isToolbarInputEvent(event))
+            return;
         if (event.key === 'Escape' && this.closeOpenMenus()) {
             event.preventDefault();
             event.stopPropagation();
@@ -9112,6 +9948,12 @@ class AgridComponent {
             return;
         this.navigationController.handleKeyDown(event);
     }
+    isToolbarInputEvent(event) {
+        const target = event.target;
+        if (!target?.closest('.ag-toolbar'))
+            return false;
+        return target.matches('input, textarea, select, [contenteditable="true"]');
+    }
     /** @internal Clears cell navigation while a header filter control owns focus. */
     onGridFocusIn(event) {
         if (event.target?.closest('.ag-filter-input, .ag-filter-menu')) {
@@ -9437,6 +10279,10 @@ class AgridComponent {
         this.columnMenuController.toggleValue(field, rawStr);
     }
     /** @internal */
+    onMenuReplaceFilter(field, filter) {
+        this.columnMenuController.replaceFilter(field, filter);
+    }
+    /** @internal */
     onSidebarToggleColumn(field) {
         this.columnMenuController.toggleColumnVisibility(field);
         this.emitSettingsChange();
@@ -9462,6 +10308,16 @@ class AgridComponent {
         const end = Math.max(range.end, range.start + model.blockSize) + model.blockSize;
         model.ensureRange(start, end);
     }
+    /** Refresh the attached server-side row model and optionally reset vertical scroll to row zero. */
+    refreshServerSideRows(options = {}) {
+        const model = this.serverSideRowModel();
+        if (!model)
+            return;
+        model.refresh({ purge: options.purge });
+        if (options.resetScroll && this.viewReady)
+            this.viewport().scrollToIndex(0);
+        queueMicrotask(() => this.ensureServerRowsVisible());
+    }
     /** @internal Keeps the row-delete prompt visible while columns scroll horizontally. */
     onHorizontalScroll() {
         this.syncColumnViewportMetrics();
@@ -9574,7 +10430,7 @@ class AgridComponent {
         return this.columnSizing.getWidthToken(col);
     }
     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", rowMark: "rowMark", columnMark: "columnMark", columnHeaderAction: "columnHeaderAction", firstDataRendered: "firstDataRendered", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", treeNodeClick: "treeNodeClick", settingsChange: "settingsChange", treeNodeDoubleClicked: "treeNodeDoubleClicked", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange", quickFilterChange: "quickFilterChange", validationFailed: "validationFailed", cellInfo: "cellInfo", menuBarAction: "menuBarAction", detailAction: "detailAction" }, 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 }], usesOnChanges: 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()\" [label]=\"localeText().actions\"\n      [openItemId]=\"openMenuBarItemId()\" (openItemIdChange)=\"onMenuBarOpenItemChange($event)\"\n      (action)=\"onMenuBarAction($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        <agrid-pane-header\n          variant=\"left\"\n          [headerGroups]=\"pinnedHeaderGroups()\"\n          [columns]=\"pinnedHeaderColumns()\"\n          [gridTemplateColumns]=\"pinnedGridTemplateColumns()\"\n          [paneWidth]=\"pinnedPaneWidth()\"\n          [totalWidth]=\"pinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\" [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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              [class.ag-control-cell--marking]=\"enableRowMarking()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\"\n              (click)=\"onControlCellClick($event, item.originalIndex)\"\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 (bc of pinnedBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"pinnedColDefs()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of pinnedBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\">{{\n              getGhostCellDisplay(bc.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 (bc of pinnedBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-last]=\"bc.lastPinned\">\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          <agrid-pane-header\n            variant=\"center\"\n            [headerGroups]=\"scrollableHeaderGroups()\"\n            [columns]=\"scrollableHeaderColumns()\"\n            [gridTemplateColumns]=\"scrollableGridTemplateColumns()\"\n            [paneWidth]=\"scrollableTotalWidth()\"\n            [totalWidth]=\"scrollableTotalWidth()\"\n            [hasHeaderGroups]=\"hasHeaderGroups()\"\n            [hasFilterableColumns]=\"hasFilterableColumns()\"\n            [headerRowCount]=\"headerRowCount()\"\n            [showControlColumn]=\"showControlColumn()\"\n            [localeText]=\"localeText()\"\n            [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n            [pivotRowColumnField]=\"pivotRowColumnField()\"\n            [hasMultiSort]=\"hasMultiSort()\"\n            [filterMenuField]=\"filterMenu()?.field ?? null\"\n            [markedColumnFields]=\"markedColumnFields()\"\n            (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n            (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n            (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n            (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n            (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n            (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n            (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n            (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n            (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n          />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n              [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              @if (columnWindow().leftWidth > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'1 / span ' + columnWindow().start\"></div>\n              }\n              @for (bc of virtualScrollableBodyColumns(); track bc.field) {\n              @let col = bc.col;\n              @let ci = bc.visibleColIndex;\n              <agrid-cell [col]=\"col\" [paneColumns]=\"scrollableColDefs()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n                [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + '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                (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\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              @if (columnWindowRightSpan() > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'span ' + columnWindowRightSpan()\"></div>\n              }\n              } @else if (isLoadingRow(item)) {\n              <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of scrollableBodyColumns(); track bc.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\">{{\n                getGhostCellDisplay(bc.col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div [innerHTML]=\"detailHtml(item)\"></div>\n                @if (detailColumn(); as detailCol) {\n                <div class=\"ag-detail-column-field\">\n                  <span class=\"ag-detail-column-label\">{{ detailCol.header }}</span>\n                  @if (detailActions().length && isDetailFieldEditable(item)) {\n                  <div class=\"ag-detail-action-bar\" role=\"toolbar\" [attr.aria-label]=\"detailCol.header + localeText().templates\">\n                    @for (action of detailActions(); track action.id) {\n                    <button type=\"button\" class=\"ag-detail-action-btn\"\n                      (click)=\"applyDetailAction(item, action, $event)\">{{ action.label }}</button>\n                    }\n                  </div>\n                  }\n                  @if (detailEditingRow() === item.detailFor) {\n                  <textarea class=\"ag-detail-column-textarea\" [attr.data-detail-row]=\"item.detailFor\"\n                    [class.ag-detail-column-textarea--invalid]=\"!!detailValidationError()\"\n                    [value]=\"detailDraft()\" (input)=\"onDetailDraftInput($event)\"\n                    (pointerdown)=\"$event.stopPropagation()\"\n                    (keydown)=\"onDetailEditorKeydown(item, $event)\"\n                    (blur)=\"commitDetailFieldEdit(item)\"></textarea>\n                  @if (detailValidationError(); as message) {\n                  <span class=\"ag-detail-column-error\" role=\"alert\">{{ message }}</span>\n                  }\n                  } @else {\n                  <div class=\"ag-detail-column-value\" [class.ag-detail-column-value--editable]=\"isDetailFieldEditable(item)\"\n                    [attr.tabindex]=\"isDetailFieldEditable(item) ? 0 : null\"\n                    (click)=\"startDetailFieldEdit(item, $event)\"\n                    (keydown.enter)=\"startDetailFieldEdit(item, $event)\">{{ detailFieldDisplay(item) }}</div>\n                  }\n                </div>\n                }\n              </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\" [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                @if (item.aggregates; as aggregates) {\n                <span class=\"ag-group-aggregates\">\n                  @for (col of visibleColDefs(); track col.field) {\n                  @if (col.field !== treeConfig()!.treeField && aggregates[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, aggregates[col.field]) }}\n                  </span>\n                  }\n                  }\n                </span>\n                }\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 (bc of scrollableBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\">\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        <agrid-pane-header\n          variant=\"right\"\n          [headerGroups]=\"rightHeaderGroups()\"\n          [columns]=\"rightHeaderColumns()\"\n          [gridTemplateColumns]=\"rightGridTemplateColumns()\"\n          [paneWidth]=\"rightPinnedPaneWidth()\"\n          [totalWidth]=\"rightPinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"rightPinnedColDefs()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + '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]=\"bc.firstRightPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-first]=\"bc.firstRightPinned\">{{ getGhostCellDisplay(bc.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 (bc of rightBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-first]=\"bc.firstRightPinned\">\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      [pivotColumns]=\"sidebarPivotColumns()\" [pivotConfig]=\"provider().pivotConfig\" [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\" [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\" [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\" (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (pivotChange)=\"onSidebarPivotChange($event)\" (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (!hideGridStatusBar() && selectionSummaryDisplay(); as summary) {\n  <div class=\"ag-status-bar\" role=\"status\" aria-live=\"polite\">\n    <span><strong>{{ localeText().aggregateCount }}:</strong> {{ summary.count }}</span>\n    <span><strong>{{ localeText().aggregateSum }}:</strong> {{ summary.sum }}</span>\n    <span><strong>{{ localeText().aggregateAvg }}:</strong> {{ summary.average }}</span>\n    <span><strong>{{ localeText().aggregateMin }}:</strong> {{ summary.min }}</span>\n    <span><strong>{{ localeText().aggregateMax }}:</strong> {{ summary.max }}</span>\n  </div>\n  }\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]=\"menu.mode === 'column' && sortOption() !== 'none'\"\n    [showColumnActions]=\"menu.mode === 'column' && !!control()\"\n    [showAggregationActions]=\"menu.mode === 'column' && pivotRowColumnField()===null\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"menu.mode === 'column' && !!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showFilterActions]=\"menu.mode === 'column'\"\n    [showValueFilter]=\"menu.mode === 'column' && (!serverSideFiltering() || !!getColDef(menu.field)?.values?.length)\"\n    [filterType]=\"getMenuFilterType(menu.field)\" [operator]=\"getMenuOperator(menu.field)\"\n    [operand]=\"getMenuOperand(menu.field)\" [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\" [valueItems]=\"(serverSideFiltering() && !getColDef(menu.field)?.values?.length)\n      || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\" [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    [customItems]=\"menu.mode === 'column' ? getColDef(menu.field)?.headerMenuItems ?? [] : []\"\n    (customAction)=\"onColumnHeaderAction(menu.field, $event)\"\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;--agrid-color-column-marked: #e8f0fe;--agrid-color-menu-bg: #ffffff}}: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-status-bar{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:16px;min-height:28px;padding:3px 10px;box-sizing:border-box;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);font-size:12px;font-variant-numeric:tabular-nums}.ag-status-bar strong{color:var(--agrid-color-text);font-weight:600}@media(max-width:640px){.ag-status-bar{justify-content:flex-start;gap:10px;overflow-x:auto}.ag-status-bar span{white-space:nowrap}}.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-virtual-col-spacer{pointer-events:none}.ag-loading-row{grid-column:1 / -1;display:flex;align-items:center;padding:0 10px;box-sizing:border-box;border-bottom:1px solid var(--agrid-color-border)}.ag-loading-row span{width:min(220px,55%);height:8px;border-radius:999px;background:color-mix(in srgb,var(--agrid-color-text-muted) 18%,transparent)}.ag-column-reorder-item--dragging{opacity:.12}.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-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;--agrid-row-indication-duration: 1s}.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--indicating:after{content:\"\";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--agrid-row-indication-color);animation:ag-row-indication-fade var(--agrid-row-indication-duration) ease-out forwards}@keyframes ag-row-indication-fade{0%{opacity:.35}to{opacity:0}}.ag-row agrid-cell.ag-column--marked:not(.editing),.ag-footer-cell.ag-column--marked{background:var(--agrid-color-column-marked)}.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-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--marking:not(.ag-control-cell--reorder){cursor:pointer}.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-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-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-detail-column-field{display:grid;gap:4px;margin-top:10px}.ag-detail-column-label{color:var(--agrid-color-text-muted);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.ag-detail-action-bar{display:flex;flex-wrap:wrap;gap:6px}.ag-detail-action-btn{border:1px solid var(--agrid-color-border);border-radius:3px;padding:4px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:12px;line-height:1.3;cursor:pointer}.ag-detail-action-btn:hover,.ag-detail-action-btn:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-value,.ag-detail-column-textarea{min-height:54px;box-sizing:border-box;border:1px solid var(--agrid-color-border);border-radius:3px;padding:7px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;line-height:1.4;white-space:pre-wrap}.ag-detail-column-value--editable{cursor:text}.ag-detail-column-value--editable:hover,.ag-detail-column-value--editable:focus,.ag-detail-column-textarea:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-textarea{width:100%;height:120px;resize:vertical;user-select:text;-webkit-user-select:text;cursor:text}.ag-detail-column-textarea--invalid{border-color:var(--agrid-color-danger)}.ag-detail-column-error{color:var(--agrid-color-danger);font-size:12px}.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: ["localeText", "col", "paneColumns", "rowIndex", "colIndex", "value", "displayValueOverride", "row", "locale", "selected", "editing", "editable", "showInfoIcon", "error", "treeCell", "treeLevel", "treeExpandable", "treeExpanded", "seedChar", "selectTextOnEdit"], outputs: ["treeToggle", "activate", "startEdit", "booleanToggle", "infoClick", "draftChange", "editorCommit", "editorCancel"] }, { kind: "component", type: AgridPaneHeaderComponent, selector: "agrid-pane-header", inputs: ["variant", "headerGroups", "columns", "gridTemplateColumns", "paneWidth", "totalWidth", "hasHeaderGroups", "hasFilterableColumns", "headerRowCount", "showControlColumn", "localeText", "pivotHeaderLabel", "pivotRowColumnField", "hasMultiSort", "filterMenuField", "markedColumnFields"], outputs: ["headerGroupPointerDown", "colHeaderPointerDown", "colHeaderClick", "filterMenuOpen", "filterConditionMenuOpen", "textFilterChange", "resizeKeyDown", "resizeStart", "autosizeColumn"] }, { 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", "showAggregationActions", "customItems", "pinned", "groupable", "grouped", "filterable", "showFilterActions", "showValueFilter", "filterType", "operator", "operand", "operand2", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["customAction", "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", "pivotColumns", "pivotConfig", "headerGroups", "row", "rowIndex", "hiddenColumns", "locale", "localeText", "readonlyGrid", "useSidebarEditor", "isCellEditable", "errors"], outputs: ["close", "tabChange", "toggleColumn", "toggleColumnGroup", "detailEdit", "save", "pivotChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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", rowMark: "rowMark", columnMark: "columnMark", columnHeaderAction: "columnHeaderAction", firstDataRendered: "firstDataRendered", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", treeNodeClick: "treeNodeClick", settingsChange: "settingsChange", treeNodeDoubleClicked: "treeNodeDoubleClicked", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange", serverQueryChange: "serverQueryChange", quickFilterChange: "quickFilterChange", validationFailed: "validationFailed", cellInfo: "cellInfo", cellSelect: "cellSelect", menuBarAction: "menuBarAction", detailAction: "detailAction" }, 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 }], usesOnChanges: 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() || showFormulaBar()) {\n  <div class=\"ag-toolbar\">\n    @if (visibleMenuBarItems().length > 0) {\n    <agrid-menu-bar [items]=\"visibleMenuBarItems()\" [context]=\"menuBarContext()\" [label]=\"localeText().actions\"\n      [openItemId]=\"openMenuBarItemId()\" (openItemIdChange)=\"onMenuBarOpenItemChange($event)\"\n      (action)=\"onMenuBarAction($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    @if (showFormulaBar()) {\n    <div class=\"ag-formula-bar\" (click)=\"$event.stopPropagation()\">\n      <span class=\"ag-formula-bar-label\">{{ formulaBarLabel() || 'fx' }}</span>\n      <input\n        class=\"ag-formula-bar-input\"\n        type=\"text\"\n        [value]=\"formulaBarDraft()\"\n        [disabled]=\"!selectedCell() || readonlyGrid()\"\n        (focus)=\"onFormulaBarFocus()\"\n        (input)=\"onFormulaBarInput($event)\"\n        (change)=\"commitFormulaBar()\"\n        (blur)=\"onFormulaBarBlur()\"\n        (keydown)=\"onFormulaBarKeydown($event)\"\n        aria-label=\"Formula bar\"\n      />\n    </div>\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        <agrid-pane-header\n          variant=\"left\"\n          [headerGroups]=\"pinnedHeaderGroups()\"\n          [columns]=\"pinnedHeaderColumns()\"\n          [gridTemplateColumns]=\"pinnedGridTemplateColumns()\"\n          [paneWidth]=\"pinnedPaneWidth()\"\n          [totalWidth]=\"pinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\" [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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              [class.ag-control-cell--marking]=\"enableRowMarking()\"\n              [class.ag-control-cell--numbered]=\"showRowNumbers()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\"\n              (click)=\"onControlCellClick($event, item.originalIndex)\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (showRowNumbers()) {\n              <span class=\"ag-row-number\">{{ rowNumbers().get(item.originalIndex) }}</span>\n              }\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 (bc of pinnedBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"pinnedColDefs()\" [paneHasSpans]=\"pinnedPaneHasSpans()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of pinnedBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\">{{\n              getGhostCellDisplay(bc.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 (bc of pinnedBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-last]=\"bc.lastPinned\">\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          <agrid-pane-header\n            variant=\"center\"\n            [headerGroups]=\"scrollableHeaderGroups()\"\n            [columns]=\"scrollableHeaderColumns()\"\n            [gridTemplateColumns]=\"scrollableGridTemplateColumns()\"\n            [paneWidth]=\"scrollableTotalWidth()\"\n            [totalWidth]=\"scrollableTotalWidth()\"\n            [hasHeaderGroups]=\"hasHeaderGroups()\"\n            [hasFilterableColumns]=\"hasFilterableColumns()\"\n            [headerRowCount]=\"headerRowCount()\"\n            [showControlColumn]=\"showControlColumn()\"\n            [localeText]=\"localeText()\"\n            [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n            [pivotRowColumnField]=\"pivotRowColumnField()\"\n            [hasMultiSort]=\"hasMultiSort()\"\n            [filterMenuField]=\"filterMenu()?.field ?? null\"\n            [markedColumnFields]=\"markedColumnFields()\"\n            (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n            (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n            (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n            (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n            (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n            (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n            (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n            (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n            (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n          />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n              [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              @if (columnWindow().leftWidth > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'1 / span ' + columnWindow().start\"></div>\n              }\n              @for (bc of virtualScrollableBodyColumns(); track bc.field) {\n              @let col = bc.col;\n              @let ci = bc.visibleColIndex;\n              <agrid-cell [col]=\"col\" [paneColumns]=\"scrollableColDefs()\" [paneHasSpans]=\"scrollablePaneHasSpans()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n                [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + '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                (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\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              @if (columnWindowRightSpan() > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'span ' + columnWindowRightSpan()\"></div>\n              }\n              } @else if (isLoadingRow(item)) {\n              <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of scrollableBodyColumns(); track bc.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\">{{\n                getGhostCellDisplay(bc.col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div [innerHTML]=\"detailHtml(item)\"></div>\n                @if (detailColumn(); as detailCol) {\n                <div class=\"ag-detail-column-field\">\n                  <span class=\"ag-detail-column-label\">{{ detailCol.header }}</span>\n                  @if (detailActions().length && isDetailFieldEditable(item)) {\n                  <div class=\"ag-detail-action-bar\" role=\"toolbar\" [attr.aria-label]=\"detailCol.header + localeText().templates\">\n                    @for (action of detailActions(); track action.id) {\n                    <button type=\"button\" class=\"ag-detail-action-btn\"\n                      (click)=\"applyDetailAction(item, action, $event)\">{{ action.label }}</button>\n                    }\n                  </div>\n                  }\n                  @if (detailEditingRow() === item.detailFor) {\n                  <textarea class=\"ag-detail-column-textarea\" [attr.data-detail-row]=\"item.detailFor\"\n                    [class.ag-detail-column-textarea--invalid]=\"!!detailValidationError()\"\n                    [value]=\"detailDraft()\" (input)=\"onDetailDraftInput($event)\"\n                    (pointerdown)=\"$event.stopPropagation()\"\n                    (keydown)=\"onDetailEditorKeydown(item, $event)\"\n                    (blur)=\"commitDetailFieldEdit(item)\"></textarea>\n                  @if (detailValidationError(); as message) {\n                  <span class=\"ag-detail-column-error\" role=\"alert\">{{ message }}</span>\n                  }\n                  } @else {\n                  <div class=\"ag-detail-column-value\" [class.ag-detail-column-value--editable]=\"isDetailFieldEditable(item)\"\n                    [attr.tabindex]=\"isDetailFieldEditable(item) ? 0 : null\"\n                    (click)=\"startDetailFieldEdit(item, $event)\"\n                    (keydown.enter)=\"startDetailFieldEdit(item, $event)\">{{ detailFieldDisplay(item) }}</div>\n                  }\n                </div>\n                }\n              </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\" [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                @if (item.aggregates; as aggregates) {\n                <span class=\"ag-group-aggregates\">\n                  @for (col of visibleColDefs(); track col.field) {\n                  @if (col.field !== treeConfig()!.treeField && aggregates[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, aggregates[col.field]) }}\n                  </span>\n                  }\n                  }\n                </span>\n                }\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 (bc of scrollableBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\">\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        <agrid-pane-header\n          variant=\"right\"\n          [headerGroups]=\"rightHeaderGroups()\"\n          [columns]=\"rightHeaderColumns()\"\n          [gridTemplateColumns]=\"rightGridTemplateColumns()\"\n          [paneWidth]=\"rightPinnedPaneWidth()\"\n          [totalWidth]=\"rightPinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"rightPinnedColDefs()\" [paneHasSpans]=\"rightPaneHasSpans()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + '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]=\"bc.firstRightPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-first]=\"bc.firstRightPinned\">{{ getGhostCellDisplay(bc.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 (bc of rightBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-first]=\"bc.firstRightPinned\">\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      [pivotColumns]=\"sidebarPivotColumns()\" [pivotConfig]=\"provider().pivotConfig\" [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\" [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\" [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\" (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (pivotChange)=\"onSidebarPivotChange($event)\" (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (!hideGridStatusBar() && selectionSummaryDisplay(); as summary) {\n  <div class=\"ag-status-bar\" role=\"status\" aria-live=\"polite\">\n    <span><strong>{{ localeText().aggregateCount }}:</strong> {{ summary.count }}</span>\n    <span><strong>{{ localeText().aggregateSum }}:</strong> {{ summary.sum }}</span>\n    <span><strong>{{ localeText().aggregateAvg }}:</strong> {{ summary.average }}</span>\n    <span><strong>{{ localeText().aggregateMin }}:</strong> {{ summary.min }}</span>\n    <span><strong>{{ localeText().aggregateMax }}:</strong> {{ summary.max }}</span>\n  </div>\n  }\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]=\"menu.mode === 'column' && sortOption() !== 'none'\"\n    [showColumnActions]=\"menu.mode === 'column' && !!control()\"\n    [showAggregationActions]=\"menu.mode === 'column' && pivotRowColumnField()===null\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"menu.mode === 'column' && !!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [column]=\"getColDef(menu.field) ?? null\" [control]=\"control()\" [filter]=\"getColumnFilter(menu.field)\"\n    [showFilterActions]=\"menu.mode === 'column'\"\n    [showValueFilter]=\"menu.mode === 'column' && (!serverSideFiltering() || !!getColDef(menu.field)?.values?.length)\"\n    [filterType]=\"getMenuFilterType(menu.field)\" [operator]=\"getMenuOperator(menu.field)\"\n    [operand]=\"getMenuOperand(menu.field)\" [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\" [valueItems]=\"(serverSideFiltering() && !getColDef(menu.field)?.values?.length)\n      || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\" [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    (filterReplace)=\"onMenuReplaceFilter(menu.field, $event)\" (close)=\"closeOpenMenus()\"\n    [customItems]=\"menu.mode === 'column' ? getColDef(menu.field)?.headerMenuItems ?? [] : []\"\n    (customAction)=\"onColumnHeaderAction(menu.field, $event)\"\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;--agrid-color-column-marked: #e8f0fe;--agrid-color-menu-bg: #ffffff}}:host{display:flex;flex-direction:column;min-width:0;max-width:100%;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-width:0;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-status-bar{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:16px;min-height:28px;padding:3px 10px;box-sizing:border-box;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);font-size:12px;font-variant-numeric:tabular-nums}.ag-status-bar strong{color:var(--agrid-color-text);font-weight:600}@media(max-width:640px){.ag-status-bar{justify-content:flex-start;gap:10px;overflow-x:auto}.ag-status-bar span{white-space:nowrap}}.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-virtual-col-spacer{pointer-events:none}.ag-loading-row{grid-column:1 / -1;display:flex;align-items:center;padding:0 10px;box-sizing:border-box;border-bottom:1px solid var(--agrid-color-border)}.ag-loading-row span{width:min(220px,55%);height:8px;border-radius:999px;background:color-mix(in srgb,var(--agrid-color-text-muted) 18%,transparent)}.ag-column-reorder-item--dragging{opacity:.12}.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-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;--agrid-row-indication-duration: 1s}.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--indicating:after{content:\"\";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--agrid-row-indication-color);animation:ag-row-indication-fade var(--agrid-row-indication-duration) ease-out forwards}@keyframes ag-row-indication-fade{0%{opacity:.35}to{opacity:0}}.ag-row agrid-cell.ag-column--marked:not(.editing),.ag-footer-cell.ag-column--marked{background:var(--agrid-color-column-marked)}.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-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--marking:not(.ag-control-cell--reorder){cursor:pointer}.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--numbered:after{content:none}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-number{min-width:0;color:var(--agrid-color-text-muted);font-size:11px;font-variant-numeric:tabular-nums;line-height:1;overflow:hidden;text-align:center;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;white-space:nowrap}.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-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-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-formula-bar{display:flex;align-items:center;flex:1 1 360px;min-width:220px;height:30px;border:1px solid var(--agrid-color-border);border-radius:4px;overflow:hidden;background:var(--agrid-color-bg)}.ag-formula-bar-label{display:inline-flex;align-items:center;justify-content:center;flex:0 0 74px;height:100%;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);color:var(--agrid-color-text-muted);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}.ag-formula-bar-input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;padding:0 9px;box-sizing:border-box;background:transparent;color:var(--agrid-color-text);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.ag-formula-bar-input:disabled{color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-formula-bar:focus-within{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-detail-column-field{display:grid;gap:4px;margin-top:10px}.ag-detail-column-label{color:var(--agrid-color-text-muted);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.ag-detail-action-bar{display:flex;flex-wrap:wrap;gap:6px}.ag-detail-action-btn{border:1px solid var(--agrid-color-border);border-radius:3px;padding:4px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:12px;line-height:1.3;cursor:pointer}.ag-detail-action-btn:hover,.ag-detail-action-btn:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-value,.ag-detail-column-textarea{min-height:54px;box-sizing:border-box;border:1px solid var(--agrid-color-border);border-radius:3px;padding:7px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;line-height:1.4;white-space:pre-wrap}.ag-detail-column-value--editable{cursor:text}.ag-detail-column-value--editable:hover,.ag-detail-column-value--editable:focus,.ag-detail-column-textarea:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-textarea{width:100%;height:120px;resize:vertical;user-select:text;-webkit-user-select:text;cursor:text}.ag-detail-column-textarea--invalid{border-color:var(--agrid-color-danger)}.ag-detail-column-error{color:var(--agrid-color-danger);font-size:12px}.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: ["localeText", "col", "paneColumns", "paneHasSpans", "rowIndex", "colIndex", "value", "displayValueOverride", "row", "locale", "selected", "editing", "editable", "showInfoIcon", "error", "treeCell", "treeLevel", "treeExpandable", "treeExpanded", "seedChar", "selectTextOnEdit"], outputs: ["treeToggle", "activate", "startEdit", "booleanToggle", "infoClick", "draftChange", "editorCommit", "editorCancel"] }, { kind: "component", type: AgridPaneHeaderComponent, selector: "agrid-pane-header", inputs: ["variant", "headerGroups", "columns", "gridTemplateColumns", "paneWidth", "totalWidth", "hasHeaderGroups", "hasFilterableColumns", "headerRowCount", "showControlColumn", "localeText", "pivotHeaderLabel", "pivotRowColumnField", "hasMultiSort", "filterMenuField", "markedColumnFields"], outputs: ["headerGroupPointerDown", "colHeaderPointerDown", "colHeaderClick", "filterMenuOpen", "filterConditionMenuOpen", "textFilterChange", "resizeKeyDown", "resizeStart", "autosizeColumn"] }, { 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", "showAggregationActions", "customItems", "pinned", "groupable", "grouped", "filterable", "column", "control", "filter", "showFilterActions", "showValueFilter", "filterType", "operator", "operand", "operand2", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["customAction", "filterReplace", "operatorChange", "operandChange", "operand2Change", "sort", "resetSort", "autosize", "togglePin", "togglePinRight", "hide", "toggleGroup", "clearFilter", "clearAll", "searchChange", "toggleAll", "toggleValue", "setAggregate", "close"] }, { 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", "pivotColumns", "pivotConfig", "headerGroups", "row", "rowIndex", "hiddenColumns", "locale", "localeText", "readonlyGrid", "useSidebarEditor", "isCellEditable", "errors"], outputs: ["close", "tabChange", "toggleColumn", "toggleColumnGroup", "detailEdit", "save", "pivotChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridComponent, decorators: [{
             type: Component,
@@ -9592,8 +10448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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\" [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()\" [label]=\"localeText().actions\"\n      [openItemId]=\"openMenuBarItemId()\" (openItemIdChange)=\"onMenuBarOpenItemChange($event)\"\n      (action)=\"onMenuBarAction($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        <agrid-pane-header\n          variant=\"left\"\n          [headerGroups]=\"pinnedHeaderGroups()\"\n          [columns]=\"pinnedHeaderColumns()\"\n          [gridTemplateColumns]=\"pinnedGridTemplateColumns()\"\n          [paneWidth]=\"pinnedPaneWidth()\"\n          [totalWidth]=\"pinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\" [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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              [class.ag-control-cell--marking]=\"enableRowMarking()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\"\n              (click)=\"onControlCellClick($event, item.originalIndex)\"\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 (bc of pinnedBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"pinnedColDefs()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of pinnedBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\">{{\n              getGhostCellDisplay(bc.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 (bc of pinnedBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-last]=\"bc.lastPinned\">\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          <agrid-pane-header\n            variant=\"center\"\n            [headerGroups]=\"scrollableHeaderGroups()\"\n            [columns]=\"scrollableHeaderColumns()\"\n            [gridTemplateColumns]=\"scrollableGridTemplateColumns()\"\n            [paneWidth]=\"scrollableTotalWidth()\"\n            [totalWidth]=\"scrollableTotalWidth()\"\n            [hasHeaderGroups]=\"hasHeaderGroups()\"\n            [hasFilterableColumns]=\"hasFilterableColumns()\"\n            [headerRowCount]=\"headerRowCount()\"\n            [showControlColumn]=\"showControlColumn()\"\n            [localeText]=\"localeText()\"\n            [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n            [pivotRowColumnField]=\"pivotRowColumnField()\"\n            [hasMultiSort]=\"hasMultiSort()\"\n            [filterMenuField]=\"filterMenu()?.field ?? null\"\n            [markedColumnFields]=\"markedColumnFields()\"\n            (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n            (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n            (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n            (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n            (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n            (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n            (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n            (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n            (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n          />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n              [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              @if (columnWindow().leftWidth > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'1 / span ' + columnWindow().start\"></div>\n              }\n              @for (bc of virtualScrollableBodyColumns(); track bc.field) {\n              @let col = bc.col;\n              @let ci = bc.visibleColIndex;\n              <agrid-cell [col]=\"col\" [paneColumns]=\"scrollableColDefs()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n                [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + '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                (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\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              @if (columnWindowRightSpan() > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'span ' + columnWindowRightSpan()\"></div>\n              }\n              } @else if (isLoadingRow(item)) {\n              <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of scrollableBodyColumns(); track bc.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\">{{\n                getGhostCellDisplay(bc.col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div [innerHTML]=\"detailHtml(item)\"></div>\n                @if (detailColumn(); as detailCol) {\n                <div class=\"ag-detail-column-field\">\n                  <span class=\"ag-detail-column-label\">{{ detailCol.header }}</span>\n                  @if (detailActions().length && isDetailFieldEditable(item)) {\n                  <div class=\"ag-detail-action-bar\" role=\"toolbar\" [attr.aria-label]=\"detailCol.header + localeText().templates\">\n                    @for (action of detailActions(); track action.id) {\n                    <button type=\"button\" class=\"ag-detail-action-btn\"\n                      (click)=\"applyDetailAction(item, action, $event)\">{{ action.label }}</button>\n                    }\n                  </div>\n                  }\n                  @if (detailEditingRow() === item.detailFor) {\n                  <textarea class=\"ag-detail-column-textarea\" [attr.data-detail-row]=\"item.detailFor\"\n                    [class.ag-detail-column-textarea--invalid]=\"!!detailValidationError()\"\n                    [value]=\"detailDraft()\" (input)=\"onDetailDraftInput($event)\"\n                    (pointerdown)=\"$event.stopPropagation()\"\n                    (keydown)=\"onDetailEditorKeydown(item, $event)\"\n                    (blur)=\"commitDetailFieldEdit(item)\"></textarea>\n                  @if (detailValidationError(); as message) {\n                  <span class=\"ag-detail-column-error\" role=\"alert\">{{ message }}</span>\n                  }\n                  } @else {\n                  <div class=\"ag-detail-column-value\" [class.ag-detail-column-value--editable]=\"isDetailFieldEditable(item)\"\n                    [attr.tabindex]=\"isDetailFieldEditable(item) ? 0 : null\"\n                    (click)=\"startDetailFieldEdit(item, $event)\"\n                    (keydown.enter)=\"startDetailFieldEdit(item, $event)\">{{ detailFieldDisplay(item) }}</div>\n                  }\n                </div>\n                }\n              </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\" [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                @if (item.aggregates; as aggregates) {\n                <span class=\"ag-group-aggregates\">\n                  @for (col of visibleColDefs(); track col.field) {\n                  @if (col.field !== treeConfig()!.treeField && aggregates[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, aggregates[col.field]) }}\n                  </span>\n                  }\n                  }\n                </span>\n                }\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 (bc of scrollableBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\">\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        <agrid-pane-header\n          variant=\"right\"\n          [headerGroups]=\"rightHeaderGroups()\"\n          [columns]=\"rightHeaderColumns()\"\n          [gridTemplateColumns]=\"rightGridTemplateColumns()\"\n          [paneWidth]=\"rightPinnedPaneWidth()\"\n          [totalWidth]=\"rightPinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"rightPinnedColDefs()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + '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]=\"bc.firstRightPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-first]=\"bc.firstRightPinned\">{{ getGhostCellDisplay(bc.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 (bc of rightBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-first]=\"bc.firstRightPinned\">\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      [pivotColumns]=\"sidebarPivotColumns()\" [pivotConfig]=\"provider().pivotConfig\" [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\" [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\" [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\" (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (pivotChange)=\"onSidebarPivotChange($event)\" (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (!hideGridStatusBar() && selectionSummaryDisplay(); as summary) {\n  <div class=\"ag-status-bar\" role=\"status\" aria-live=\"polite\">\n    <span><strong>{{ localeText().aggregateCount }}:</strong> {{ summary.count }}</span>\n    <span><strong>{{ localeText().aggregateSum }}:</strong> {{ summary.sum }}</span>\n    <span><strong>{{ localeText().aggregateAvg }}:</strong> {{ summary.average }}</span>\n    <span><strong>{{ localeText().aggregateMin }}:</strong> {{ summary.min }}</span>\n    <span><strong>{{ localeText().aggregateMax }}:</strong> {{ summary.max }}</span>\n  </div>\n  }\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]=\"menu.mode === 'column' && sortOption() !== 'none'\"\n    [showColumnActions]=\"menu.mode === 'column' && !!control()\"\n    [showAggregationActions]=\"menu.mode === 'column' && pivotRowColumnField()===null\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"menu.mode === 'column' && !!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showFilterActions]=\"menu.mode === 'column'\"\n    [showValueFilter]=\"menu.mode === 'column' && (!serverSideFiltering() || !!getColDef(menu.field)?.values?.length)\"\n    [filterType]=\"getMenuFilterType(menu.field)\" [operator]=\"getMenuOperator(menu.field)\"\n    [operand]=\"getMenuOperand(menu.field)\" [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\" [valueItems]=\"(serverSideFiltering() && !getColDef(menu.field)?.values?.length)\n      || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\" [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    [customItems]=\"menu.mode === 'column' ? getColDef(menu.field)?.headerMenuItems ?? [] : []\"\n    (customAction)=\"onColumnHeaderAction(menu.field, $event)\"\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;--agrid-color-column-marked: #e8f0fe;--agrid-color-menu-bg: #ffffff}}: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-status-bar{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:16px;min-height:28px;padding:3px 10px;box-sizing:border-box;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);font-size:12px;font-variant-numeric:tabular-nums}.ag-status-bar strong{color:var(--agrid-color-text);font-weight:600}@media(max-width:640px){.ag-status-bar{justify-content:flex-start;gap:10px;overflow-x:auto}.ag-status-bar span{white-space:nowrap}}.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-virtual-col-spacer{pointer-events:none}.ag-loading-row{grid-column:1 / -1;display:flex;align-items:center;padding:0 10px;box-sizing:border-box;border-bottom:1px solid var(--agrid-color-border)}.ag-loading-row span{width:min(220px,55%);height:8px;border-radius:999px;background:color-mix(in srgb,var(--agrid-color-text-muted) 18%,transparent)}.ag-column-reorder-item--dragging{opacity:.12}.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-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;--agrid-row-indication-duration: 1s}.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--indicating:after{content:\"\";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--agrid-row-indication-color);animation:ag-row-indication-fade var(--agrid-row-indication-duration) ease-out forwards}@keyframes ag-row-indication-fade{0%{opacity:.35}to{opacity:0}}.ag-row agrid-cell.ag-column--marked:not(.editing),.ag-footer-cell.ag-column--marked{background:var(--agrid-color-column-marked)}.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-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--marking:not(.ag-control-cell--reorder){cursor:pointer}.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-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-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-detail-column-field{display:grid;gap:4px;margin-top:10px}.ag-detail-column-label{color:var(--agrid-color-text-muted);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.ag-detail-action-bar{display:flex;flex-wrap:wrap;gap:6px}.ag-detail-action-btn{border:1px solid var(--agrid-color-border);border-radius:3px;padding:4px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:12px;line-height:1.3;cursor:pointer}.ag-detail-action-btn:hover,.ag-detail-action-btn:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-value,.ag-detail-column-textarea{min-height:54px;box-sizing:border-box;border:1px solid var(--agrid-color-border);border-radius:3px;padding:7px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;line-height:1.4;white-space:pre-wrap}.ag-detail-column-value--editable{cursor:text}.ag-detail-column-value--editable:hover,.ag-detail-column-value--editable:focus,.ag-detail-column-textarea:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-textarea{width:100%;height:120px;resize:vertical;user-select:text;-webkit-user-select:text;cursor:text}.ag-detail-column-textarea--invalid{border-color:var(--agrid-color-danger)}.ag-detail-column-error{color:var(--agrid-color-danger);font-size:12px}.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"] }], rowMark: [{ type: i0.Output, args: ["rowMark"] }], columnMark: [{ type: i0.Output, args: ["columnMark"] }], columnHeaderAction: [{ type: i0.Output, args: ["columnHeaderAction"] }], firstDataRendered: [{ type: i0.Output, args: ["firstDataRendered"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], treeNodeClick: [{ type: i0.Output, args: ["treeNodeClick"] }], settingsChange: [{ type: i0.Output, args: ["settingsChange"] }], 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"] }], detailAction: [{ type: i0.Output, args: ["detailAction"] }], 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() || showFormulaBar()) {\n  <div class=\"ag-toolbar\">\n    @if (visibleMenuBarItems().length > 0) {\n    <agrid-menu-bar [items]=\"visibleMenuBarItems()\" [context]=\"menuBarContext()\" [label]=\"localeText().actions\"\n      [openItemId]=\"openMenuBarItemId()\" (openItemIdChange)=\"onMenuBarOpenItemChange($event)\"\n      (action)=\"onMenuBarAction($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    @if (showFormulaBar()) {\n    <div class=\"ag-formula-bar\" (click)=\"$event.stopPropagation()\">\n      <span class=\"ag-formula-bar-label\">{{ formulaBarLabel() || 'fx' }}</span>\n      <input\n        class=\"ag-formula-bar-input\"\n        type=\"text\"\n        [value]=\"formulaBarDraft()\"\n        [disabled]=\"!selectedCell() || readonlyGrid()\"\n        (focus)=\"onFormulaBarFocus()\"\n        (input)=\"onFormulaBarInput($event)\"\n        (change)=\"commitFormulaBar()\"\n        (blur)=\"onFormulaBarBlur()\"\n        (keydown)=\"onFormulaBarKeydown($event)\"\n        aria-label=\"Formula bar\"\n      />\n    </div>\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        <agrid-pane-header\n          variant=\"left\"\n          [headerGroups]=\"pinnedHeaderGroups()\"\n          [columns]=\"pinnedHeaderColumns()\"\n          [gridTemplateColumns]=\"pinnedGridTemplateColumns()\"\n          [paneWidth]=\"pinnedPaneWidth()\"\n          [totalWidth]=\"pinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\" [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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              [class.ag-control-cell--marking]=\"enableRowMarking()\"\n              [class.ag-control-cell--numbered]=\"showRowNumbers()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\"\n              (click)=\"onControlCellClick($event, item.originalIndex)\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (showRowNumbers()) {\n              <span class=\"ag-row-number\">{{ rowNumbers().get(item.originalIndex) }}</span>\n              }\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 (bc of pinnedBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"pinnedColDefs()\" [paneHasSpans]=\"pinnedPaneHasSpans()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of pinnedBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-last]=\"bc.lastPinned\">{{\n              getGhostCellDisplay(bc.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 (bc of pinnedBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-last]=\"bc.lastPinned\">\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          <agrid-pane-header\n            variant=\"center\"\n            [headerGroups]=\"scrollableHeaderGroups()\"\n            [columns]=\"scrollableHeaderColumns()\"\n            [gridTemplateColumns]=\"scrollableGridTemplateColumns()\"\n            [paneWidth]=\"scrollableTotalWidth()\"\n            [totalWidth]=\"scrollableTotalWidth()\"\n            [hasHeaderGroups]=\"hasHeaderGroups()\"\n            [hasFilterableColumns]=\"hasFilterableColumns()\"\n            [headerRowCount]=\"headerRowCount()\"\n            [showControlColumn]=\"showControlColumn()\"\n            [localeText]=\"localeText()\"\n            [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n            [pivotRowColumnField]=\"pivotRowColumnField()\"\n            [hasMultiSort]=\"hasMultiSort()\"\n            [filterMenuField]=\"filterMenu()?.field ?? null\"\n            [markedColumnFields]=\"markedColumnFields()\"\n            (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n            (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n            (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n            (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n            (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n            (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n            (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n            (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n            (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n          />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(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.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n              [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(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              @if (columnWindow().leftWidth > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'1 / span ' + columnWindow().start\"></div>\n              }\n              @for (bc of virtualScrollableBodyColumns(); track bc.field) {\n              @let col = bc.col;\n              @let ci = bc.visibleColIndex;\n              <agrid-cell [col]=\"col\" [paneColumns]=\"scrollableColDefs()\" [paneHasSpans]=\"scrollablePaneHasSpans()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n                [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + '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                (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\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              @if (columnWindowRightSpan() > 0) {\n              <div class=\"ag-virtual-col-spacer\" aria-hidden=\"true\"\n                [style.grid-column]=\"'span ' + columnWindowRightSpan()\"></div>\n              }\n              } @else if (isLoadingRow(item)) {\n              <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\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 (bc of scrollableBodyColumns(); track bc.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n                [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\">{{\n                getGhostCellDisplay(bc.col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div [innerHTML]=\"detailHtml(item)\"></div>\n                @if (detailColumn(); as detailCol) {\n                <div class=\"ag-detail-column-field\">\n                  <span class=\"ag-detail-column-label\">{{ detailCol.header }}</span>\n                  @if (detailActions().length && isDetailFieldEditable(item)) {\n                  <div class=\"ag-detail-action-bar\" role=\"toolbar\" [attr.aria-label]=\"detailCol.header + localeText().templates\">\n                    @for (action of detailActions(); track action.id) {\n                    <button type=\"button\" class=\"ag-detail-action-btn\"\n                      (click)=\"applyDetailAction(item, action, $event)\">{{ action.label }}</button>\n                    }\n                  </div>\n                  }\n                  @if (detailEditingRow() === item.detailFor) {\n                  <textarea class=\"ag-detail-column-textarea\" [attr.data-detail-row]=\"item.detailFor\"\n                    [class.ag-detail-column-textarea--invalid]=\"!!detailValidationError()\"\n                    [value]=\"detailDraft()\" (input)=\"onDetailDraftInput($event)\"\n                    (pointerdown)=\"$event.stopPropagation()\"\n                    (keydown)=\"onDetailEditorKeydown(item, $event)\"\n                    (blur)=\"commitDetailFieldEdit(item)\"></textarea>\n                  @if (detailValidationError(); as message) {\n                  <span class=\"ag-detail-column-error\" role=\"alert\">{{ message }}</span>\n                  }\n                  } @else {\n                  <div class=\"ag-detail-column-value\" [class.ag-detail-column-value--editable]=\"isDetailFieldEditable(item)\"\n                    [attr.tabindex]=\"isDetailFieldEditable(item) ? 0 : null\"\n                    (click)=\"startDetailFieldEdit(item, $event)\"\n                    (keydown.enter)=\"startDetailFieldEdit(item, $event)\">{{ detailFieldDisplay(item) }}</div>\n                  }\n                </div>\n                }\n              </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\" [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                @if (item.aggregates; as aggregates) {\n                <span class=\"ag-group-aggregates\">\n                  @for (col of visibleColDefs(); track col.field) {\n                  @if (col.field !== treeConfig()!.treeField && aggregates[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, aggregates[col.field]) }}\n                  </span>\n                  }\n                  }\n                </span>\n                }\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 (bc of scrollableBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\">\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        <agrid-pane-header\n          variant=\"right\"\n          [headerGroups]=\"rightHeaderGroups()\"\n          [columns]=\"rightHeaderColumns()\"\n          [gridTemplateColumns]=\"rightGridTemplateColumns()\"\n          [paneWidth]=\"rightPinnedPaneWidth()\"\n          [totalWidth]=\"rightPinnedPaneWidth()\"\n          [hasHeaderGroups]=\"hasHeaderGroups()\"\n          [hasFilterableColumns]=\"hasFilterableColumns()\"\n          [headerRowCount]=\"headerRowCount()\"\n          [showControlColumn]=\"showControlColumn()\"\n          [localeText]=\"localeText()\"\n          [pivotHeaderLabel]=\"pivotHeaderLabel()\"\n          [pivotRowColumnField]=\"pivotRowColumnField()\"\n          [hasMultiSort]=\"hasMultiSort()\"\n          [filterMenuField]=\"filterMenu()?.field ?? null\"\n          [markedColumnFields]=\"markedColumnFields()\"\n          (headerGroupPointerDown)=\"onHeaderGroupPointerDown($event.event, $event.fields, $event.label)\"\n          (colHeaderPointerDown)=\"onColHeaderPointerDown($event.event, $event.field)\"\n          (colHeaderClick)=\"onColHeaderClick($event.event, $event.field)\"\n          (filterMenuOpen)=\"openFilterMenu($event.event, $event.field)\"\n          (filterConditionMenuOpen)=\"openFilterMenu($event.event, $event.field, 'condition')\"\n          (textFilterChange)=\"onTextFilterChange($event.event, $event.field)\"\n          (resizeKeyDown)=\"onResizeKeyDown($event.event, $event.col)\"\n          (resizeStart)=\"onResizeStart($event.event, $event.col)\"\n          (autosizeColumn)=\"onAutosizeColumn($event.event, $event.col)\"\n        />\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.ag-row--indicating]=\"isDataRowItem(item) && rowIndicationActive(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.--agrid-row-indication-color]=\"isDataRowItem(item) ? rowIndicationColor(item.originalIndex) : null\"\n            [style.--agrid-row-indication-duration.ms]=\"isDataRowItem(item) ? rowIndicationDuration(item.originalIndex) : null\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            @let col = bc.col;\n            @let ci = bc.visibleColIndex;\n            <agrid-cell [col]=\"col\" [paneColumns]=\"rightPinnedColDefs()\" [paneHasSpans]=\"rightPaneHasSpans()\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\" [localeText]=\"localeText()\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [row]=\"item.row\" [locale]=\"locale()\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\" [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"bc.ariaColIndex\"\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) && !isTreeAggregateCell(item, col)\"\n              [error]=\"cellValidationError(item.originalIndex, ci)\" [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\" [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--marked]=\"markedColumnFields().has(col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + '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]=\"bc.firstRightPinned\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (editorCommit)=\"onEditorCommit()\" (editorCancel)=\"onEditorCancel()\"\n              (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (isLoadingRow(item)) {\n            <div class=\"ag-loading-row\" aria-hidden=\"true\"><span></span></div>\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (bc of rightBodyColumns(); track bc.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n              [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n              [class.ag-cell--pinned-first]=\"bc.firstRightPinned\">{{ getGhostCellDisplay(bc.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 (bc of rightBodyColumns(); track bc.field) {\n          @let col = bc.col;\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column--marked]=\"markedColumnFields().has(col.field)\"\n            [class.ag-column-reorder-item--dragging]=\"bc.dragging\"\n            [style.transform]=\"'translateX(' + bc.reorderOffset + 'px)'\"\n            [attr.aria-colindex]=\"bc.ariaColIndex\"\n            [class.ag-footer-cell--pinned-first]=\"bc.firstRightPinned\">\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      [pivotColumns]=\"sidebarPivotColumns()\" [pivotConfig]=\"provider().pivotConfig\" [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\" [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\" [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\" (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (pivotChange)=\"onSidebarPivotChange($event)\" (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (!hideGridStatusBar() && selectionSummaryDisplay(); as summary) {\n  <div class=\"ag-status-bar\" role=\"status\" aria-live=\"polite\">\n    <span><strong>{{ localeText().aggregateCount }}:</strong> {{ summary.count }}</span>\n    <span><strong>{{ localeText().aggregateSum }}:</strong> {{ summary.sum }}</span>\n    <span><strong>{{ localeText().aggregateAvg }}:</strong> {{ summary.average }}</span>\n    <span><strong>{{ localeText().aggregateMin }}:</strong> {{ summary.min }}</span>\n    <span><strong>{{ localeText().aggregateMax }}:</strong> {{ summary.max }}</span>\n  </div>\n  }\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]=\"menu.mode === 'column' && sortOption() !== 'none'\"\n    [showColumnActions]=\"menu.mode === 'column' && !!control()\"\n    [showAggregationActions]=\"menu.mode === 'column' && pivotRowColumnField()===null\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"menu.mode === 'column' && !!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [column]=\"getColDef(menu.field) ?? null\" [control]=\"control()\" [filter]=\"getColumnFilter(menu.field)\"\n    [showFilterActions]=\"menu.mode === 'column'\"\n    [showValueFilter]=\"menu.mode === 'column' && (!serverSideFiltering() || !!getColDef(menu.field)?.values?.length)\"\n    [filterType]=\"getMenuFilterType(menu.field)\" [operator]=\"getMenuOperator(menu.field)\"\n    [operand]=\"getMenuOperand(menu.field)\" [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\" [valueItems]=\"(serverSideFiltering() && !getColDef(menu.field)?.values?.length)\n      || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\" [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    (filterReplace)=\"onMenuReplaceFilter(menu.field, $event)\" (close)=\"closeOpenMenus()\"\n    [customItems]=\"menu.mode === 'column' ? getColDef(menu.field)?.headerMenuItems ?? [] : []\"\n    (customAction)=\"onColumnHeaderAction(menu.field, $event)\"\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;--agrid-color-column-marked: #e8f0fe;--agrid-color-menu-bg: #ffffff}}:host{display:flex;flex-direction:column;min-width:0;max-width:100%;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-width:0;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-status-bar{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:16px;min-height:28px;padding:3px 10px;box-sizing:border-box;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);font-size:12px;font-variant-numeric:tabular-nums}.ag-status-bar strong{color:var(--agrid-color-text);font-weight:600}@media(max-width:640px){.ag-status-bar{justify-content:flex-start;gap:10px;overflow-x:auto}.ag-status-bar span{white-space:nowrap}}.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-virtual-col-spacer{pointer-events:none}.ag-loading-row{grid-column:1 / -1;display:flex;align-items:center;padding:0 10px;box-sizing:border-box;border-bottom:1px solid var(--agrid-color-border)}.ag-loading-row span{width:min(220px,55%);height:8px;border-radius:999px;background:color-mix(in srgb,var(--agrid-color-text-muted) 18%,transparent)}.ag-column-reorder-item--dragging{opacity:.12}.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-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;--agrid-row-indication-duration: 1s}.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--indicating:after{content:\"\";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--agrid-row-indication-color);animation:ag-row-indication-fade var(--agrid-row-indication-duration) ease-out forwards}@keyframes ag-row-indication-fade{0%{opacity:.35}to{opacity:0}}.ag-row agrid-cell.ag-column--marked:not(.editing),.ag-footer-cell.ag-column--marked{background:var(--agrid-color-column-marked)}.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-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--marking:not(.ag-control-cell--reorder){cursor:pointer}.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--numbered:after{content:none}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-number{min-width:0;color:var(--agrid-color-text-muted);font-size:11px;font-variant-numeric:tabular-nums;line-height:1;overflow:hidden;text-align:center;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;white-space:nowrap}.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-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-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-formula-bar{display:flex;align-items:center;flex:1 1 360px;min-width:220px;height:30px;border:1px solid var(--agrid-color-border);border-radius:4px;overflow:hidden;background:var(--agrid-color-bg)}.ag-formula-bar-label{display:inline-flex;align-items:center;justify-content:center;flex:0 0 74px;height:100%;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);color:var(--agrid-color-text-muted);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}.ag-formula-bar-input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;padding:0 9px;box-sizing:border-box;background:transparent;color:var(--agrid-color-text);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.ag-formula-bar-input:disabled{color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-formula-bar:focus-within{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-detail-column-field{display:grid;gap:4px;margin-top:10px}.ag-detail-column-label{color:var(--agrid-color-text-muted);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}.ag-detail-action-bar{display:flex;flex-wrap:wrap;gap:6px}.ag-detail-action-btn{border:1px solid var(--agrid-color-border);border-radius:3px;padding:4px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:12px;line-height:1.3;cursor:pointer}.ag-detail-action-btn:hover,.ag-detail-action-btn:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-value,.ag-detail-column-textarea{min-height:54px;box-sizing:border-box;border:1px solid var(--agrid-color-border);border-radius:3px;padding:7px 8px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;line-height:1.4;white-space:pre-wrap}.ag-detail-column-value--editable{cursor:text}.ag-detail-column-value--editable:hover,.ag-detail-column-value--editable:focus,.ag-detail-column-textarea:focus{border-color:var(--agrid-color-accent-border);outline:none}.ag-detail-column-textarea{width:100%;height:120px;resize:vertical;user-select:text;-webkit-user-select:text;cursor:text}.ag-detail-column-textarea--invalid{border-color:var(--agrid-color-danger)}.ag-detail-column-error{color:var(--agrid-color-danger);font-size:12px}.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"] }], rowMark: [{ type: i0.Output, args: ["rowMark"] }], columnMark: [{ type: i0.Output, args: ["columnMark"] }], columnHeaderAction: [{ type: i0.Output, args: ["columnHeaderAction"] }], firstDataRendered: [{ type: i0.Output, args: ["firstDataRendered"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], treeNodeClick: [{ type: i0.Output, args: ["treeNodeClick"] }], settingsChange: [{ type: i0.Output, args: ["settingsChange"] }], 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"] }], serverQueryChange: [{ type: i0.Output, args: ["serverQueryChange"] }], quickFilterChange: [{ type: i0.Output, args: ["quickFilterChange"] }], validationFailed: [{ type: i0.Output, args: ["validationFailed"] }], cellInfo: [{ type: i0.Output, args: ["cellInfo"] }], cellSelect: [{ type: i0.Output, args: ["cellSelect"] }], menuBarAction: [{ type: i0.Output, args: ["menuBarAction"] }], detailAction: [{ type: i0.Output, args: ["detailAction"] }], 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. */
@@ -10326,138 +11182,16 @@ class AgridChartComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridChartComponent, isStandalone: true, selector: "agrid-chart", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <svg
-      class="agrid-chart__svg"
-      role="img"
-      [attr.width]="width()"
-      [attr.height]="height()"
-    >
-      @for (g of layout().gridlines; track $index) {
-        <line class="agrid-chart__grid" [attr.x1]="g.x1" [attr.y1]="g.y1" [attr.x2]="g.x2" [attr.y2]="g.y2" />
-      }
-      @for (a of layout().areas; track $index) {
-        <path [attr.d]="a.d" [attr.fill]="a.color" fill-opacity="0.15" />
-      }
-      @for (l of layout().lines; track $index) {
-        <path
-          class="agrid-chart__line"
-          fill="none"
-          [attr.d]="l.d"
-          [attr.stroke]="l.color"
-        />
-      }
-      @for (p of layout().points; track $index) {
-        <circle [attr.cx]="p.x" [attr.cy]="p.y" r="2" [attr.fill]="p.color" />
-      }
-      @for (b of layout().bars; track $index) {
-        <rect rx="1" [attr.x]="b.x" [attr.y]="b.y" [attr.width]="b.width" [attr.height]="b.height" [attr.fill]="b.color" />
-      }
-      @for (s of layout().slices; track $index) {
-        <path class="agrid-chart__slice" [attr.d]="s.d" [attr.fill]="s.color" />
-      }
-      @for (lbl of layout().axisLabels; track $index) {
-        <text
-          class="agrid-chart__axis"
-          [attr.x]="lbl.x"
-          [attr.y]="lbl.y"
-          [attr.text-anchor]="lbl.anchor"
-          [attr.dominant-baseline]="lbl.baseline"
-        >{{ lbl.text }}</text>
-      }
-      @if (sliceLabels()) {
-        @for (s of layout().slices; track $index) {
-          <text
-            class="agrid-chart__slice-label"
-            [attr.x]="s.labelX"
-            [attr.y]="s.labelY"
-            text-anchor="middle"
-            dominant-baseline="middle"
-          >{{ s.percentText }}</text>
-        }
-      }
-    </svg>
-    @if (showLegend() && layout().legend.length) {
-      <ul class="agrid-chart__legend">
-        @for (item of layout().legend; track $index) {
-          <li>
-            <span class="agrid-chart__swatch" [style.background-color]="item.color"></span>
-            {{ item.name }}
-          </li>
-        }
-      </ul>
-    }
-  `, isInline: true, styles: [":host{display:block;width:100%;font-family:inherit}.agrid-chart__svg{display:block}.agrid-chart__grid{stroke:var(--agrid-chart-grid, #e5e7eb);stroke-width:1}.agrid-chart__line{stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}.agrid-chart__slice{stroke:var(--agrid-chart-slice-stroke, #fff);stroke-width:1}.agrid-chart__axis{fill:var(--agrid-chart-axis, #6b7280);font-size:10px}.agrid-chart__slice-label{fill:#fff;font-size:10px;font-weight:600}.agrid-chart__legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;list-style:none;font-size:12px;color:var(--agrid-chart-axis, #4b5563)}.agrid-chart__legend li{display:inline-flex;align-items:center;gap:5px}.agrid-chart__swatch{width:10px;height:10px;border-radius:2px;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridChartComponent, isStandalone: true, selector: "agrid-chart", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<svg class=\"agrid-chart__svg\" role=\"img\" [attr.width]=\"width()\" [attr.height]=\"height()\">\n    @for (g of layout().gridlines; track $index) {\n    <line class=\"agrid-chart__grid\" [attr.x1]=\"g.x1\" [attr.y1]=\"g.y1\" [attr.x2]=\"g.x2\" [attr.y2]=\"g.y2\" />\n    }\n    @for (a of layout().areas; track $index) {\n    <path [attr.d]=\"a.d\" [attr.fill]=\"a.color\" fill-opacity=\"0.15\" />\n    }\n    @for (l of layout().lines; track $index) {\n    <path class=\"agrid-chart__line\" fill=\"none\" [attr.d]=\"l.d\" [attr.stroke]=\"l.color\" />\n    }\n    @for (p of layout().points; track $index) {\n    <circle [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"2\" [attr.fill]=\"p.color\" />\n    }\n    @for (b of layout().bars; track $index) {\n    <rect rx=\"1\" [attr.x]=\"b.x\" [attr.y]=\"b.y\" [attr.width]=\"b.width\" [attr.height]=\"b.height\" [attr.fill]=\"b.color\" />\n    }\n    @for (s of layout().slices; track $index) {\n    <path class=\"agrid-chart__slice\" [attr.d]=\"s.d\" [attr.fill]=\"s.color\" />\n    }\n    @for (lbl of layout().axisLabels; track $index) {\n    <text class=\"agrid-chart__axis\" [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\"\n        [attr.dominant-baseline]=\"lbl.baseline\">{{ lbl.text }}</text>\n    }\n    @if (sliceLabels()) {\n    @for (s of layout().slices; track $index) {\n    <text class=\"agrid-chart__slice-label\" [attr.x]=\"s.labelX\" [attr.y]=\"s.labelY\" text-anchor=\"middle\"\n        dominant-baseline=\"middle\">{{ s.percentText }}</text>\n    }\n    }\n</svg>\n\n@if (showLegend() && layout().legend.length) {\n<ul class=\"agrid-chart__legend\">\n    @for (item of layout().legend; track $index) {\n    <li>\n        <span class=\"agrid-chart__swatch\" [style.background-color]=\"item.color\"></span>\n        {{ item.name }}\n    </li>\n    }\n</ul>\n}", styles: [":host{display:block;width:100%;font-family:inherit}.agrid-chart__svg{display:block}.agrid-chart__grid{stroke:var(--agrid-chart-grid, #e5e7eb);stroke-width:1}.agrid-chart__line{stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}.agrid-chart__slice{stroke:var(--agrid-chart-slice-stroke, #fff);stroke-width:1}.agrid-chart__axis{fill:var(--agrid-chart-axis, #6b7280);font-size:10px}.agrid-chart__slice-label{fill:#fff;font-size:10px;font-weight:600}.agrid-chart__legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;list-style:none;font-size:12px;color:var(--agrid-chart-axis, #4b5563)}.agrid-chart__legend li{display:inline-flex;align-items:center;gap:5px}.agrid-chart__swatch{width:10px;height:10px;border-radius:2px;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'agrid-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <svg
-      class="agrid-chart__svg"
-      role="img"
-      [attr.width]="width()"
-      [attr.height]="height()"
-    >
-      @for (g of layout().gridlines; track $index) {
-        <line class="agrid-chart__grid" [attr.x1]="g.x1" [attr.y1]="g.y1" [attr.x2]="g.x2" [attr.y2]="g.y2" />
-      }
-      @for (a of layout().areas; track $index) {
-        <path [attr.d]="a.d" [attr.fill]="a.color" fill-opacity="0.15" />
-      }
-      @for (l of layout().lines; track $index) {
-        <path
-          class="agrid-chart__line"
-          fill="none"
-          [attr.d]="l.d"
-          [attr.stroke]="l.color"
-        />
-      }
-      @for (p of layout().points; track $index) {
-        <circle [attr.cx]="p.x" [attr.cy]="p.y" r="2" [attr.fill]="p.color" />
-      }
-      @for (b of layout().bars; track $index) {
-        <rect rx="1" [attr.x]="b.x" [attr.y]="b.y" [attr.width]="b.width" [attr.height]="b.height" [attr.fill]="b.color" />
-      }
-      @for (s of layout().slices; track $index) {
-        <path class="agrid-chart__slice" [attr.d]="s.d" [attr.fill]="s.color" />
-      }
-      @for (lbl of layout().axisLabels; track $index) {
-        <text
-          class="agrid-chart__axis"
-          [attr.x]="lbl.x"
-          [attr.y]="lbl.y"
-          [attr.text-anchor]="lbl.anchor"
-          [attr.dominant-baseline]="lbl.baseline"
-        >{{ lbl.text }}</text>
-      }
-      @if (sliceLabels()) {
-        @for (s of layout().slices; track $index) {
-          <text
-            class="agrid-chart__slice-label"
-            [attr.x]="s.labelX"
-            [attr.y]="s.labelY"
-            text-anchor="middle"
-            dominant-baseline="middle"
-          >{{ s.percentText }}</text>
-        }
-      }
-    </svg>
-    @if (showLegend() && layout().legend.length) {
-      <ul class="agrid-chart__legend">
-        @for (item of layout().legend; track $index) {
-          <li>
-            <span class="agrid-chart__swatch" [style.background-color]="item.color"></span>
-            {{ item.name }}
-          </li>
-        }
-      </ul>
-    }
-  `, styles: [":host{display:block;width:100%;font-family:inherit}.agrid-chart__svg{display:block}.agrid-chart__grid{stroke:var(--agrid-chart-grid, #e5e7eb);stroke-width:1}.agrid-chart__line{stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}.agrid-chart__slice{stroke:var(--agrid-chart-slice-stroke, #fff);stroke-width:1}.agrid-chart__axis{fill:var(--agrid-chart-axis, #6b7280);font-size:10px}.agrid-chart__slice-label{fill:#fff;font-size:10px;font-weight:600}.agrid-chart__legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;list-style:none;font-size:12px;color:var(--agrid-chart-axis, #4b5563)}.agrid-chart__legend li{display:inline-flex;align-items:center;gap:5px}.agrid-chart__swatch{width:10px;height:10px;border-radius:2px;display:inline-block}\n"] }]
+            args: [{ selector: 'agrid-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"agrid-chart__svg\" role=\"img\" [attr.width]=\"width()\" [attr.height]=\"height()\">\n    @for (g of layout().gridlines; track $index) {\n    <line class=\"agrid-chart__grid\" [attr.x1]=\"g.x1\" [attr.y1]=\"g.y1\" [attr.x2]=\"g.x2\" [attr.y2]=\"g.y2\" />\n    }\n    @for (a of layout().areas; track $index) {\n    <path [attr.d]=\"a.d\" [attr.fill]=\"a.color\" fill-opacity=\"0.15\" />\n    }\n    @for (l of layout().lines; track $index) {\n    <path class=\"agrid-chart__line\" fill=\"none\" [attr.d]=\"l.d\" [attr.stroke]=\"l.color\" />\n    }\n    @for (p of layout().points; track $index) {\n    <circle [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"2\" [attr.fill]=\"p.color\" />\n    }\n    @for (b of layout().bars; track $index) {\n    <rect rx=\"1\" [attr.x]=\"b.x\" [attr.y]=\"b.y\" [attr.width]=\"b.width\" [attr.height]=\"b.height\" [attr.fill]=\"b.color\" />\n    }\n    @for (s of layout().slices; track $index) {\n    <path class=\"agrid-chart__slice\" [attr.d]=\"s.d\" [attr.fill]=\"s.color\" />\n    }\n    @for (lbl of layout().axisLabels; track $index) {\n    <text class=\"agrid-chart__axis\" [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\"\n        [attr.dominant-baseline]=\"lbl.baseline\">{{ lbl.text }}</text>\n    }\n    @if (sliceLabels()) {\n    @for (s of layout().slices; track $index) {\n    <text class=\"agrid-chart__slice-label\" [attr.x]=\"s.labelX\" [attr.y]=\"s.labelY\" text-anchor=\"middle\"\n        dominant-baseline=\"middle\">{{ s.percentText }}</text>\n    }\n    }\n</svg>\n\n@if (showLegend() && layout().legend.length) {\n<ul class=\"agrid-chart__legend\">\n    @for (item of layout().legend; track $index) {\n    <li>\n        <span class=\"agrid-chart__swatch\" [style.background-color]=\"item.color\"></span>\n        {{ item.name }}\n    </li>\n    }\n</ul>\n}", styles: [":host{display:block;width:100%;font-family:inherit}.agrid-chart__svg{display:block}.agrid-chart__grid{stroke:var(--agrid-chart-grid, #e5e7eb);stroke-width:1}.agrid-chart__line{stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}.agrid-chart__slice{stroke:var(--agrid-chart-slice-stroke, #fff);stroke-width:1}.agrid-chart__axis{fill:var(--agrid-chart-axis, #6b7280);font-size:10px}.agrid-chart__slice-label{fill:#fff;font-size:10px;font-weight:600}.agrid-chart__legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;list-style:none;font-size:12px;color:var(--agrid-chart-axis, #4b5563)}.agrid-chart__legend li{display:inline-flex;align-items:center;gap:5px}.agrid-chart__swatch{width:10px;height:10px;border-radius:2px;display:inline-block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AGRID_CHART_PALETTE, AGRID_EDITOR_CONTEXT, AGRID_LOCALE_TEXT, AGRID_RENDERER_CONTEXT, AgridBrowserAdapter, AgridChartComponent, AgridChartProvider, AgridComponent, AgridControl, AgridDataSource, AgridPageSelectorComponent, AgridProvider, AgridServerSideRowModel, AgridTreeComponent, AgridTreeProvider, ColDefAutoSize, buildChart };
+export { AGRID_CHART_PALETTE, AGRID_EDITOR_CONTEXT, AGRID_FILTER_CONTEXT, AGRID_LOCALE_TEXT, AGRID_RENDERER_CONTEXT, AgridBrowserAdapter, AgridChartComponent, AgridChartProvider, AgridComponent, AgridControl, AgridDataSource, AgridPageSelectorComponent, AgridProvider, AgridServerSideRowModel, AgridTreeComponent, AgridTreeProvider, ColDefAutoSize, buildChart };
 //# sourceMappingURL=thkl-agrid.mjs.map