@thkl/agrid 0.1.9 → 0.1.11

package/fesm2022/thkl-agrid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, viewChild, effect, ChangeDetectionStrategy, Component, inject, ElementRef, DestroyRef, afterNextRender, linkedSignal, isWritableSignal, forwardRef, Directive, HostListener } from '@angular/core';
+import { input, computed, output, signal, viewChild, effect, ChangeDetectionStrategy, Component, inject, ElementRef, DestroyRef, afterNextRender, linkedSignal, isWritableSignal, forwardRef, Directive, HostListener } from '@angular/core';
 import * as i1 from '@angular/cdk/scrolling';
 import { VIRTUAL_SCROLL_STRATEGY, ScrollingModule } from '@angular/cdk/scrolling';
 import { NgTemplateOutlet } from '@angular/common';
@@ -61,6 +61,20 @@ function coerceDateInputValue(value, originalValue) {
     }
     return value;
 }
+/**
+ * Converts a numeric editor draft to its storage value.
+ * Both dot and comma are accepted as decimal separators; invalid drafts are preserved so
+ * column validation can report them instead of silently changing the user's input.
+ */
+function coerceNumberInputValue(value) {
+    if (typeof value !== 'string')
+        return value;
+    const trimmed = value.trim();
+    if (trimmed === '')
+        return null;
+    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) {
     if (!col)
@@ -254,7 +268,17 @@ function applySortToIndices(rows, indices, sortEntries, colMap, locale) {
 /**
  * Compute aggregate values for the given rows across every column that has a static
  * (`ColDef.aggregate`) or control-configured aggregate. Returns a `field → value` map containing
- * only aggregated columns. Shared by the grid footer and per-group subtotals.
+ * only aggregated columns. Shared by the grid footer, per-group subtotals, and tree-node rollups.
+ *
+ * Numeric aggregates coerce values through `Number`; nonnumeric values are skipped. `count`
+ * counts non-null/non-empty values, while custom functions receive all raw values in index order.
+ * A control aggregate takes precedence over the static column definition.
+ *
+ * @param rows Complete datasource rows addressed by `indices`.
+ * @param indices Source indices included in this aggregate, in projection order.
+ * @param cols Columns inspected for static or runtime aggregate configuration.
+ * @param controlAggregates Runtime aggregate overrides keyed by field.
+ * @returns A field-to-result map containing only configured aggregate columns.
  */
 function computeAggregates(rows, indices, cols, controlAggregates) {
     const result = {};
@@ -354,8 +378,13 @@ function buildGroupedItems(rows, indices, groupField, colMap, sortEntries, expan
  * @param expandedIds     Ids whose children should be rendered.
  * @param forceExpandedIds Ids forced open regardless of `expandedIds` — used to reveal the
  *   ancestor path of filter matches. Optional.
+ * @param aggregateCols Columns whose configured aggregate should be attached to expandable nodes.
+ *   Pass an empty array to disable tree rollups.
+ * @param controlAggregates Runtime aggregate overrides. These take precedence over each column's
+ *   static aggregate function.
+ * @returns Visible tree rows. Expandable rows include `aggregates` when aggregation is enabled.
  */
-function buildTreeItems(rows, indices, accessors, expandedIds, forceExpandedIds) {
+function buildTreeItems(rows, indices, accessors, expandedIds, forceExpandedIds, aggregateCols = [], controlAggregates = {}) {
     const { getId, getParentId } = accessors;
     const includedIds = new Set();
     for (const i of indices)
@@ -377,6 +406,29 @@ function buildTreeItems(rows, indices, accessors, expandedIds, forceExpandedIds)
     }
     const items = [];
     const visited = new Set();
+    const hasAggregates = aggregateCols.some(col => controlAggregates[col.field] ?? col.aggregate);
+    // Cache each subtree's leaf indices. Besides preventing repeated traversal for nested visible
+    // parents, leaf-only aggregation avoids double-counting parent rows that store their own subtotal.
+    // This walk uses the complete filtered hierarchy and is intentionally independent of expansion.
+    const leafMemo = new Map();
+    const collectLeaves = (index, visiting = new Set()) => {
+        const id = getId(rows[index]);
+        const cached = leafMemo.get(id);
+        if (cached)
+            return cached;
+        // A cyclic edge cannot produce a valid leaf. Excluding that edge keeps aggregation finite and
+        // matches the renderer's existing policy of omitting duplicate/cyclic visits.
+        if (visiting.has(id))
+            return [];
+        visiting.add(id);
+        const children = childrenByParent.get(id);
+        const leaves = children?.length
+            ? children.flatMap(childIndex => collectLeaves(childIndex, visiting))
+            : [index];
+        visiting.delete(id);
+        leafMemo.set(id, leaves);
+        return leaves;
+    };
     const visit = (index, level) => {
         const row = rows[index];
         const id = getId(row);
@@ -386,7 +438,10 @@ function buildTreeItems(rows, indices, accessors, expandedIds, forceExpandedIds)
         const children = childrenByParent.get(id);
         const expandable = !!children?.length;
         const expanded = expandable && (expandedIds.has(id) || !!forceExpandedIds?.has(id));
-        items.push({ row, originalIndex: index, level, expandable, expanded });
+        const aggregates = expandable && hasAggregates
+            ? computeAggregates(rows, collectLeaves(index), aggregateCols, controlAggregates)
+            : undefined;
+        items.push({ row, originalIndex: index, level, expandable, expanded, aggregates });
         if (expanded && children) {
             for (const childIndex of children)
                 visit(childIndex, level + 1);
@@ -396,10 +451,20 @@ function buildTreeItems(rows, indices, accessors, expandedIds, forceExpandedIds)
         visit(rootIndex, 0);
     return items;
 }
-/** Stable expansion id for a generated path prefix. */
+/**
+ * Return the stable expansion key for a generated path prefix.
+ * String normalization makes numeric and string path segments share the same branch identity.
+ */
 function pathTreeNodeId(path) {
     return `__agrid_path__${JSON.stringify(path.map(String))}`;
 }
+/**
+ * Derive a deterministic UUID-shaped identifier for a generated path branch.
+ *
+ * This is an identity helper, not a cryptographic hash. Four independently mixed 32-bit lanes
+ * provide stable output, after which the version and variant nibbles are normalized to a
+ * v5-shaped UUID layout. It does not implement RFC 4122 namespace/SHA-1 UUID generation.
+ */
 function pathTreeNodeUuid(path) {
     const source = JSON.stringify(path.map(String));
     let a = 0x9e3779b9;
@@ -421,8 +486,24 @@ function pathTreeNodeUuid(path) {
     hex[16] = ((parseInt(hex[16], 16) & 0x3) | 0x8).toString(16);
     return `${hex.slice(0, 8).join('')}-${hex.slice(8, 12).join('')}-${hex.slice(12, 16).join('')}-${hex.slice(16, 20).join('')}-${hex.slice(20, 32).join('')}`;
 }
-/** Builds display-only branch nodes and datasource-backed leaves from path segments. */
-function buildPathTreeItems(rows, indices, config, expandedIds, forceExpanded = false) {
+/**
+ * Build a depth-first projection from datasource paths.
+ *
+ * Every non-final path segment becomes a display-only {@link PathTreeNodeItem}; the final segment
+ * remains a datasource-backed {@link TreeRowItem}. Shared prefixes are coalesced by their stable
+ * path id. When aggregate columns are supplied, each generated branch receives values computed
+ * over every datasource row sharing that prefix, regardless of expansion state.
+ *
+ * @param rows Complete datasource rows.
+ * @param indices Filtered and sorted datasource indices included in the tree.
+ * @param config Path extraction, labeling, and identity configuration.
+ * @param expandedIds Generated branch ids whose children should be emitted.
+ * @param forceExpanded Whether filtering should reveal every generated branch in the projection.
+ * @param aggregateCols Columns whose configured aggregates should be attached to branch nodes.
+ * @param controlAggregates Runtime aggregate overrides keyed by field.
+ * @returns Visible generated branches and datasource leaves in depth-first order.
+ */
+function buildPathTreeItems(rows, indices, config, expandedIds, forceExpanded = false, aggregateCols = [], controlAggregates = {}) {
     const roots = new Map();
     for (const originalIndex of indices) {
         const rawPath = config.getPath(rows[originalIndex]).filter(segment => String(segment).length > 0);
@@ -452,9 +533,11 @@ function buildPathTreeItems(rows, indices, config, expandedIds, forceExpanded =
                     level,
                     children: new Map(),
                     leaves: [],
+                    descendantIndices: [],
                 };
                 branches.set(id, branch);
             }
+            branch.descendantIndices.push(originalIndex);
             if (level === path.length - 2) {
                 branch.leaves.push({
                     originalIndex,
@@ -474,13 +557,16 @@ function buildPathTreeItems(rows, indices, config, expandedIds, forceExpanded =
                     level: -1,
                     children: new Map(),
                     leaves: [],
+                    descendantIndices: [],
                 };
                 roots.set(id, branch);
             }
             branch.leaves.push({ originalIndex, label: formatSegment(0, true) });
+            branch.descendantIndices.push(originalIndex);
         }
     }
     const items = [];
+    const hasAggregates = aggregateCols.some(col => controlAggregates[col.field] ?? col.aggregate);
     const visit = (branch) => {
         const isHiddenRoot = branch.level < 0;
         const expanded = forceExpanded || expandedIds.has(branch.id);
@@ -492,6 +578,9 @@ function buildPathTreeItems(rows, indices, config, expandedIds, forceExpanded =
                 level: branch.level,
                 expandable: true,
                 expanded,
+                aggregates: hasAggregates
+                    ? computeAggregates(rows, branch.descendantIndices, aggregateCols, controlAggregates)
+                    : undefined,
             });
         }
         if (!isHiddenRoot && !expanded)
@@ -556,6 +645,16 @@ class AgridCellComponent {
     displayValueOverride = input(null, ...(ngDevMode ? [{ debugName: "displayValueOverride" }] : /* istanbul ignore next */ []));
     /** Full row data — passed to `cellRenderer` when set. */
     row = input({}, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    /** Runtime formatting resolved from the column definition and current cell context. */
+    resolvedCellFormat = computed(() => {
+        const col = this.col();
+        return col.cellFormat?.({
+            row: this.row(),
+            value: this.value(),
+            column: col,
+            originalIndex: this.rowIndex(),
+        }) ?? {};
+    }, ...(ngDevMode ? [{ debugName: "resolvedCellFormat" }] : /* istanbul ignore next */ []));
     /** Locale used for built-in date formatting. */
     locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     /** Whether this cell has the active selection outline. */
@@ -761,8 +860,8 @@ class AgridCellComponent {
         this.draft.set(rawValue);
         this.draftChange.emit(rawValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridCellComponent, isStandalone: true, selector: "agrid-cell", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, displayValueOverride: { classPropertyName: "displayValueOverride", publicName: "displayValueOverride", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, showInfoIcon: { classPropertyName: "showInfoIcon", publicName: "showInfoIcon", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, treeCell: { classPropertyName: "treeCell", publicName: "treeCell", isSignal: true, isRequired: false, transformFunction: null }, treeLevel: { classPropertyName: "treeLevel", publicName: "treeLevel", isSignal: true, isRequired: false, transformFunction: null }, treeExpandable: { classPropertyName: "treeExpandable", publicName: "treeExpandable", isSignal: true, isRequired: false, transformFunction: null }, treeExpanded: { classPropertyName: "treeExpanded", publicName: "treeExpanded", isSignal: true, isRequired: false, transformFunction: null }, seedChar: { classPropertyName: "seedChar", publicName: "seedChar", isSignal: true, isRequired: false, transformFunction: null }, selectTextOnEdit: { classPropertyName: "selectTextOnEdit", publicName: "selectTextOnEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeToggle: "treeToggle", activate: "activate", startEdit: "startEdit", booleanToggle: "booleanToggle", infoClick: "infoClick", draftChange: "draftChange" }, host: { attributes: { "role": "gridcell", "tabindex": "-1" }, listeners: { "click": "activate.emit($event)", "dblclick": "startEdit.emit()" }, properties: { "class.selected": "selected()", "class.editing": "editing()", "class.ag-cell--tree": "treeCell()", "class.ag-cell--with-info": "showInfoIcon() && !editing()", "attr.aria-readonly": "!editable() ? \"true\" : null", "attr.title": "displayValue()" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "selectEl", first: true, predicate: ["editSelect"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridCellComponent, isStandalone: true, selector: "agrid-cell", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, displayValueOverride: { classPropertyName: "displayValueOverride", publicName: "displayValueOverride", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, showInfoIcon: { classPropertyName: "showInfoIcon", publicName: "showInfoIcon", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, treeCell: { classPropertyName: "treeCell", publicName: "treeCell", isSignal: true, isRequired: false, transformFunction: null }, treeLevel: { classPropertyName: "treeLevel", publicName: "treeLevel", isSignal: true, isRequired: false, transformFunction: null }, treeExpandable: { classPropertyName: "treeExpandable", publicName: "treeExpandable", isSignal: true, isRequired: false, transformFunction: null }, treeExpanded: { classPropertyName: "treeExpanded", publicName: "treeExpanded", isSignal: true, isRequired: false, transformFunction: null }, seedChar: { classPropertyName: "seedChar", publicName: "seedChar", isSignal: true, isRequired: false, transformFunction: null }, selectTextOnEdit: { classPropertyName: "selectTextOnEdit", publicName: "selectTextOnEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeToggle: "treeToggle", activate: "activate", startEdit: "startEdit", booleanToggle: "booleanToggle", infoClick: "infoClick", draftChange: "draftChange" }, host: { attributes: { "role": "gridcell", "tabindex": "-1" }, listeners: { "click": "activate.emit($event)", "dblclick": "startEdit.emit()" }, properties: { "class.selected": "selected()", "class.editing": "editing()", "class.ag-cell--tree": "treeCell()", "class.ag-cell--with-info": "showInfoIcon() && !editing()", "attr.aria-readonly": "!editable() ? \"true\" : null", "attr.title": "displayValue()", "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": "resolvedCellFormat().textAlign ?? null" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "selectEl", first: true, predicate: ["editSelect"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (booleanCell()) {
       <input
         type="checkbox"
@@ -789,7 +888,8 @@ class AgridCellComponent {
           #editInput
           class="ag-cell-input"
           [class.ag-cell-input--invalid]="!!error()"
-          [type]="col().type === 'date' ? 'date' : col().type === 'number' ? 'number' : 'text'"
+          [type]="col().type === 'date' ? 'date' : 'text'"
+          [attr.inputmode]="col().type === 'number' ? 'decimal' : null"
           [value]="editorValue()"
           (input)="onInput($event)"
         />
@@ -832,7 +932,7 @@ class AgridCellComponent {
     }
   `, isInline: true, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}:host(.ag-cell--tree){display:flex;align-items:center}:host(.ag-cell--tree) .ag-cell-value{flex:1 1 auto;min-width:0}:host(.ag-cell--with-info) .ag-cell-value{padding-right:22px}.ag-cell-info{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:1px solid var(--agrid-color-border);border-radius:50%;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);font:600 11px/1 sans-serif;cursor:pointer}.ag-cell-info:hover,.ag-cell-info:focus-visible{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent);outline:none}.ag-tree-prefix{flex:0 0 auto;display:inline-flex;align-items:center;height:100%}.ag-tree-twisty,.ag-tree-twisty-spacer{width:16px;flex:0 0 16px}.ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;border:none;background:transparent;color:var(--agrid-color-text-muted);font-size:9px;line-height:1;cursor:pointer;transition:transform .15s ease}.ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent;user-select:text;-webkit-user-select:text}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}.ag-cell-checkbox{display:block;margin:9px auto;cursor:pointer;accent-color:var(--agrid-color-accent)}.ag-cell-checkbox:disabled{cursor:not-allowed;opacity:.6}.ag-cell-input--invalid{outline:2px solid var(--agrid-color-danger);outline-offset:-2px}.ag-cell-error{position:absolute;left:0;top:100%;z-index:5;max-width:240px;padding:3px 8px;font-size:12px;line-height:1.4;white-space:normal;color:#fff;background:var(--agrid-color-danger);border-radius:0 0 4px 4px;box-shadow:0 2px 6px #0000002e;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid-cell', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'gridcell',
@@ -842,6 +942,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         '[class.ag-cell--with-info]': 'showInfoIcon() && !editing()',
                         '[attr.aria-readonly]': '!editable() ? "true" : 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]': 'resolvedCellFormat().textAlign ?? null',
                         '(click)': 'activate.emit($event)',
                         '(dblclick)': 'startEdit.emit()',
                         tabindex: '-1',
@@ -872,7 +982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           #editInput
           class="ag-cell-input"
           [class.ag-cell-input--invalid]="!!error()"
-          [type]="col().type === 'date' ? 'date' : col().type === 'number' ? 'number' : 'text'"
+          [type]="col().type === 'date' ? 'date' : 'text'"
+          [attr.inputmode]="col().type === 'number' ? 'decimal' : null"
           [value]="editorValue()"
           (input)="onInput($event)"
         />
@@ -1372,6 +1483,7 @@ const AGRID_LOCALE_TEXT = {
         aggregate: 'Aggregate',
         aggregateAvg: 'Average',
         aggregateCount: 'Count',
+        aggregateCustom: 'Custom function',
         aggregateMax: 'Maximum',
         aggregateMin: 'Minimum',
         aggregateSum: 'Sum',
@@ -1425,6 +1537,11 @@ const AGRID_LOCALE_TEXT = {
         next: 'Next',
         noRows: 'No rows to display',
         pagination: 'Pagination',
+        pivot: 'Pivot',
+        pivotDescription: 'Configure the fields used to build the pivot result.',
+        pivotRows: 'Rows',
+        pivotColumns: 'Columns',
+        pivotValues: 'Values',
         pinColumn: 'Pin left',
         pinColumnRight: 'Pin right',
         unpinColumnRight: 'Unpin right',
@@ -1450,6 +1567,7 @@ const AGRID_LOCALE_TEXT = {
         aggregate: 'Aggregat',
         aggregateAvg: 'Durchschnitt',
         aggregateCount: 'Anzahl',
+        aggregateCustom: 'Benutzerdefinierte Funktion',
         aggregateMax: 'Maximum',
         aggregateMin: 'Minimum',
         aggregateSum: 'Summe',
@@ -1503,6 +1621,11 @@ const AGRID_LOCALE_TEXT = {
         next: 'Weiter',
         noRows: 'Keine Zeilen vorhanden',
         pagination: 'Seitennavigation',
+        pivot: 'Pivot',
+        pivotDescription: 'Felder für das Pivot-Ergebnis konfigurieren.',
+        pivotRows: 'Zeilen',
+        pivotColumns: 'Spalten',
+        pivotValues: 'Werte',
         pinColumn: 'Links fixieren',
         pinColumnRight: 'Rechts fixieren',
         unpinColumnRight: 'Rechts lösen',
@@ -1720,10 +1843,10 @@ class AgridColumnMenuComponent {
     menuElement() {
         return this.elementRef.nativeElement.querySelector('.ag-filter-menu');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridColumnMenuComponent, isStandalone: true, selector: "agrid-column-menu", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, showColumnActions: { classPropertyName: "showColumnActions", publicName: "showColumnActions", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showValueFilter: { classPropertyName: "showValueFilter", publicName: "showValueFilter", isSignal: true, isRequired: false, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, operand: { classPropertyName: "operand", publicName: "operand", isSignal: true, isRequired: false, transformFunction: null }, operand2: { classPropertyName: "operand2", publicName: "operand2", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null }, sortPriority: { classPropertyName: "sortPriority", publicName: "sortPriority", isSignal: true, isRequired: false, transformFunction: null }, hasMultiSort: { classPropertyName: "hasMultiSort", publicName: "hasMultiSort", isSignal: true, isRequired: false, transformFunction: null }, aggregate: { classPropertyName: "aggregate", publicName: "aggregate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operatorChange: "operatorChange", operandChange: "operandChange", operand2Change: "operand2Change", sort: "sort", resetSort: "resetSort", autosize: "autosize", togglePin: "togglePin", togglePinRight: "togglePinRight", hide: "hide", toggleGroup: "toggleGroup", clearFilter: "clearFilter", clearAll: "clearAll", searchChange: "searchChange", toggleAll: "toggleAll", toggleValue: "toggleValue", setAggregate: "setAggregate" }, ngImport: i0, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"position().x\"\n  [style.top.px]=\"position().y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <div class=\"ag-filter-menu-operators\">\n          <button\n            type=\"button\"\n            class=\"ag-filter-menu-operator-btn ag-filter-menu-operator-btn--clear\"\n            [class.ag-filter-menu-operator-btn--active]=\"!operator()\"\n            (click)=\"operatorChange.emit(null)\"\n          >{{ localeText().filterNoCondition }}</button>\n          @for (op of operatorOptions(); track op.value) {\n            <button\n              type=\"button\"\n              class=\"ag-filter-menu-operator-btn\"\n              [class.ag-filter-menu-operator-btn--active]=\"op.value === operator()\"\n              (click)=\"operatorChange.emit(op.value)\"\n            >{{ op.label }}</button>\n          }\n        </div>\n        @if (operator()) {\n          <label class=\"ag-filter-menu-operand-label\" for=\"agrid-filter-operand\">\n            {{ localeText().filterValue }}\n          </label>\n          <input\n            id=\"agrid-filter-operand\"\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;max-height:calc(100vh - 16px);font-size:13px;overflow-y:auto}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:120px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}.ag-filter-menu-operators{display:grid;grid-template-columns:1fr 1fr;gap:4px}.ag-filter-menu-operator-btn{min-height:26px;padding:3px 6px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:11px;line-height:1.15;text-align:left;cursor:pointer}.ag-filter-menu-operator-btn:hover,.ag-filter-menu-operator-btn:focus-visible{border-color:var(--agrid-color-accent-border);outline:none}.ag-filter-menu-operator-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-menu-operator-btn--clear{grid-column:1 / -1}.ag-filter-menu-operand-label{font-size:11px;color:var(--agrid-color-text-muted)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridColumnMenuComponent, isStandalone: true, selector: "agrid-column-menu", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, showColumnActions: { classPropertyName: "showColumnActions", publicName: "showColumnActions", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showValueFilter: { classPropertyName: "showValueFilter", publicName: "showValueFilter", isSignal: true, isRequired: false, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, operand: { classPropertyName: "operand", publicName: "operand", isSignal: true, isRequired: false, transformFunction: null }, operand2: { classPropertyName: "operand2", publicName: "operand2", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null }, sortPriority: { classPropertyName: "sortPriority", publicName: "sortPriority", isSignal: true, isRequired: false, transformFunction: null }, hasMultiSort: { classPropertyName: "hasMultiSort", publicName: "hasMultiSort", isSignal: true, isRequired: false, transformFunction: null }, aggregate: { classPropertyName: "aggregate", publicName: "aggregate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operatorChange: "operatorChange", operandChange: "operandChange", operand2Change: "operand2Change", sort: "sort", resetSort: "resetSort", autosize: "autosize", togglePin: "togglePin", togglePinRight: "togglePinRight", hide: "hide", toggleGroup: "toggleGroup", clearFilter: "clearFilter", clearAll: "clearAll", searchChange: "searchChange", toggleAll: "toggleAll", toggleValue: "toggleValue", setAggregate: "setAggregate" }, ngImport: i0, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"position().x\"\n  [style.top.px]=\"position().y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <div class=\"ag-filter-menu-operators\">\n          <button\n            type=\"button\"\n            class=\"ag-filter-menu-operator-btn ag-filter-menu-operator-btn--clear\"\n            [class.ag-filter-menu-operator-btn--active]=\"!operator()\"\n            (click)=\"operatorChange.emit(null)\"\n          >{{ localeText().filterNoCondition }}</button>\n          @for (op of operatorOptions(); track op.value) {\n            <button\n              type=\"button\"\n              class=\"ag-filter-menu-operator-btn\"\n              [class.ag-filter-menu-operator-btn--active]=\"op.value === operator()\"\n              (click)=\"operatorChange.emit(op.value)\"\n            >{{ op.label }}</button>\n          }\n        </div>\n        @if (operator()) {\n          <label class=\"ag-filter-menu-operand-label\" for=\"agrid-filter-operand\">\n            {{ localeText().filterValue }}\n          </label>\n          <input\n            id=\"agrid-filter-operand\"\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;max-height:calc(100vh - 16px);font-size:13px;overflow-y:auto}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:120px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}.ag-filter-menu-operators{display:grid;grid-template-columns:1fr 1fr;gap:4px}.ag-filter-menu-operator-btn{min-height:26px;padding:3px 6px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:11px;line-height:1.15;text-align:left;cursor:pointer}.ag-filter-menu-operator-btn:hover,.ag-filter-menu-operator-btn:focus-visible{border-color:var(--agrid-color-accent-border);outline:none}.ag-filter-menu-operator-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-menu-operator-btn--clear{grid-column:1 / -1}.ag-filter-menu-operand-label{font-size:11px;color:var(--agrid-color-text-muted)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridColumnMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridColumnMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid-column-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"position().x\"\n  [style.top.px]=\"position().y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <div class=\"ag-filter-menu-operators\">\n          <button\n            type=\"button\"\n            class=\"ag-filter-menu-operator-btn ag-filter-menu-operator-btn--clear\"\n            [class.ag-filter-menu-operator-btn--active]=\"!operator()\"\n            (click)=\"operatorChange.emit(null)\"\n          >{{ localeText().filterNoCondition }}</button>\n          @for (op of operatorOptions(); track op.value) {\n            <button\n              type=\"button\"\n              class=\"ag-filter-menu-operator-btn\"\n              [class.ag-filter-menu-operator-btn--active]=\"op.value === operator()\"\n              (click)=\"operatorChange.emit(op.value)\"\n            >{{ op.label }}</button>\n          }\n        </div>\n        @if (operator()) {\n          <label class=\"ag-filter-menu-operand-label\" for=\"agrid-filter-operand\">\n            {{ localeText().filterValue }}\n          </label>\n          <input\n            id=\"agrid-filter-operand\"\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;max-height:calc(100vh - 16px);font-size:13px;overflow-y:auto}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:120px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}.ag-filter-menu-operators{display:grid;grid-template-columns:1fr 1fr;gap:4px}.ag-filter-menu-operator-btn{min-height:26px;padding:3px 6px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font:inherit;font-size:11px;line-height:1.15;text-align:left;cursor:pointer}.ag-filter-menu-operator-btn:hover,.ag-filter-menu-operator-btn:focus-visible{border-color:var(--agrid-color-accent-border);outline:none}.ag-filter-menu-operator-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-menu-operator-btn--clear{grid-column:1 / -1}.ag-filter-menu-operand-label{font-size:11px;color:var(--agrid-color-text-muted)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], showColumnActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnActions", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], showValueFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueFilter", required: false }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], operator: [{ type: i0.Input, args: [{ isSignal: true, alias: "operator", required: false }] }], operand: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand", required: false }] }], operand2: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand2", required: false }] }], operatorChange: [{ type: i0.Output, args: ["operatorChange"] }], operandChange: [{ type: i0.Output, args: ["operandChange"] }], operand2Change: [{ type: i0.Output, args: ["operand2Change"] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], sortPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortPriority", required: false }] }], hasMultiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMultiSort", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], resetSort: [{ type: i0.Output, args: ["resetSort"] }], autosize: [{ type: i0.Output, args: ["autosize"] }], togglePin: [{ type: i0.Output, args: ["togglePin"] }], togglePinRight: [{ type: i0.Output, args: ["togglePinRight"] }], hide: [{ type: i0.Output, args: ["hide"] }], toggleGroup: [{ type: i0.Output, args: ["toggleGroup"] }], clearFilter: [{ type: i0.Output, args: ["clearFilter"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], toggleAll: [{ type: i0.Output, args: ["toggleAll"] }], toggleValue: [{ type: i0.Output, args: ["toggleValue"] }], aggregate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregate", required: false }] }], setAggregate: [{ type: i0.Output, args: ["setAggregate"] }] } });
@@ -1769,6 +1892,10 @@ class AgridColumnMenuController {
         const menu = this.menu();
         if (!menu)
             return new Set();
+        const col = this.getColDef(menu.field);
+        if (this.opts.serverSideFiltering() && col?.values?.length) {
+            return new Set(this.items().map(item => item.rawStr));
+        }
         const rows = this.opts.dataSource().rows();
         const control = this.opts.control();
         let indices = rows.map((_, index) => index);
@@ -2517,6 +2644,149 @@ class AgridColumnStateService {
     }
 }
 
+/**
+ * Signal-based data container shared between the grid and the host component.
+ *
+ * Both the grid and the host component hold a reference to the same `AgridDataSource`
+ * instance. Mutations made by either side (e.g. the grid calling `patchRow` when a cell
+ * is committed, or the host calling `setData` to load fresh data) are immediately reflected
+ * in the grid because {@link rows} is a readonly Angular signal.
+ *
+ * @example
+ * ```ts
+ * readonly ds = new AgridDataSource(generateRows(1000));
+ *
+ * // Later — update one row from outside the grid:
+ * this.ds.patchRow(5, { salary: 99000 });
+ * ```
+ */
+class AgridDataSource {
+    _linkedRows = signal(null, ...(ngDevMode ? [{ debugName: "_linkedRows" }] : /* istanbul ignore next */ []));
+    _rows = linkedSignal(() => this._linkedRows()?.() ?? [], ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+    _writableLinkedRows = null;
+    _rowAdded = signal(null, ...(ngDevMode ? [{ debugName: "_rowAdded" }] : /* istanbul ignore next */ []));
+    _changeSequence = 0;
+    /**
+     * @param initialData Rows to seed the data source with.
+     *   The array is shallow-copied so external mutations do not affect the source.
+     */
+    constructor(initialData = []) {
+        this._rows.set([...initialData]);
+    }
+    /**
+     * Readonly signal of the current row array.
+     * Read it inside Angular templates or `computed()` to react to changes automatically.
+     */
+    rows = this._rows.asReadonly();
+    /** Latest row insertion, used by attached grids to reveal the inserted row. */
+    rowAdded = this._rowAdded.asReadonly();
+    /**
+     * Link an external row signal to this data source.
+     *
+     * Whenever `source` changes, its array becomes the current datasource value without an
+     * intermediate effect or array copy. If `source` is writable, datasource mutations are written
+     * back to it automatically. Mutations remain local when linking a readonly signal.
+    */
+    linkSignal(source) {
+        this._writableLinkedRows = isWritableSignal(source)
+            ? source
+            : null;
+        this._linkedRows.set(source);
+    }
+    /**
+     * Replace the entire row array.
+     * Triggers a full grid re-render via the signal.
+     */
+    setData(rows) {
+        this.setRows([...rows]);
+    }
+    /**
+     * Overwrite the row at `index` with a new row object.
+     * Use {@link patchRow} when you only want to change specific fields.
+     */
+    updateRow(index, row) {
+        this.updateRows(rows => {
+            const next = [...rows];
+            next[index] = row;
+            return next;
+        });
+    }
+    /**
+     * Merge `patch` into the existing row at `index`, leaving other fields untouched.
+     * The grid calls this internally when a cell edit is committed.
+     */
+    patchRow(index, patch) {
+        this.updateRows(rows => {
+            const next = [...rows];
+            next[index] = { ...next[index], ...patch };
+            return next;
+        });
+    }
+    /**
+     * Insert a row into the data source and return the index at which it was inserted.
+     *
+     * @param row The row object to insert.
+     * @param atIndex Optional insertion index. Defaults to the end of the array.
+     * @returns The index the row was inserted at.
+     */
+    addRow(row, atIndex) {
+        let insertedAt;
+        this.updateRows(rows => {
+            if (atIndex === undefined) {
+                insertedAt = rows.length;
+                return [...rows, row];
+            }
+            insertedAt = atIndex;
+            const next = [...rows];
+            next.splice(atIndex, 0, row);
+            return next;
+        });
+        this._rowAdded.set({ index: insertedAt, sequence: ++this._changeSequence });
+        return insertedAt;
+    }
+    /**
+     * Remove the row at `index`.
+     * The grid adjusts `selectedCell` and `editingCell` internally when a deletion occurs
+     * via the control column context menu.
+     */
+    removeRow(index) {
+        this.updateRows(rows => rows.filter((_, i) => i !== index));
+    }
+    /**
+     * Move the row at `from` to position `to` (insert-before semantics).
+     * Designed to be called directly from a `(rowReorder)` handler:
+     * ```ts
+     * onReorder(e: RowReorderEvent) { this.ds.moveRow(e.oldIndex, e.newIndex); }
+     * ```
+     */
+    moveRow(from, to) {
+        if (from === to)
+            return;
+        this.updateRows(rows => {
+            const arr = [...rows];
+            const [item] = arr.splice(from, 1);
+            arr.splice(to > from ? to - 1 : to, 0, item);
+            return arr;
+        });
+    }
+    /** Return the current row at `index` (non-reactive snapshot). */
+    getRow(index) {
+        return this._rows()[index];
+    }
+    /** Current number of rows (non-reactive snapshot). */
+    get length() {
+        return this._rows().length;
+    }
+    updateRows(update) {
+        this.setRows(update(this._rows()));
+    }
+    /** Replace the backing row array without copying. Intended for specialized datasource models. */
+    setRows(rows) {
+        this._writableLinkedRows?.set(rows);
+        this._rows.set(rows);
+    }
+}
+
 /**
  * Handles both row-reorder drag and drag-select. The two share `_getHoveredRow`
  * and the same pointer-event lifecycle pattern, so they live together.
@@ -2764,7 +3034,9 @@ class AgridEditController {
             return true;
         }
         const oldValue = row[col.field];
-        const newValue = this.currentDraft();
+        const newValue = col.type === 'number'
+            ? coerceNumberInputValue(this.currentDraft())
+            : this.currentDraft();
         if (oldValue !== newValue) {
             const message = col.validate?.(newValue, row) ?? null;
             if (message) {
@@ -2985,10 +3257,10 @@ class AgridFindPanelComponent {
             this.close.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridFindPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: AgridFindPanelComponent, isStandalone: true, selector: "agrid-find-panel", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, matchCount: { classPropertyName: "matchCount", publicName: "matchCount", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "queryChange", next: "next", previous: "previous", close: "close" }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ag-find-panel\" role=\"search\" (click)=\"$event.stopPropagation()\">\n  <input\n    #findInput\n    class=\"ag-find-input\"\n    [value]=\"query()\"\n    (input)=\"queryChange.emit($any($event.target).value)\"\n    (keydown)=\"onKeyDown($event)\"\n    [placeholder]=\"localeText().findPlaceholder\"\n    [attr.aria-label]=\"localeText().findPlaceholder\"\n  />\n  <span class=\"ag-find-count\" aria-live=\"polite\">{{ countLabel() }}</span>\n  <button class=\"ag-find-btn\" [title]=\"localeText().previous\" [attr.aria-label]=\"localeText().previous\"\n    (click)=\"previous.emit()\">\u2191</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().next\" [attr.aria-label]=\"localeText().next\"\n    (click)=\"next.emit()\">\u2193</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().close\" [attr.aria-label]=\"localeText().close\"\n    (click)=\"close.emit()\">\u2715</button>\n</div>\n", styles: [".ag-find-panel{position:absolute;top:8px;right:8px;z-index:1100;display:flex;align-items:center;gap:4px;padding:5px;background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:4px;box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-find-input{width:160px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px;box-sizing:border-box}.ag-find-input:focus{border-color:var(--agrid-color-accent)}.ag-find-count{min-width:46px;text-align:center;font-size:11px;color:var(--agrid-color-text-muted)}.ag-find-btn{width:24px;height:24px;border:1px solid transparent;border-radius:3px;background:none;color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:0}.ag-find-btn:hover{background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-border);color:var(--agrid-color-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridFindPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: AgridFindPanelComponent, isStandalone: true, selector: "agrid-find-panel", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, matchCount: { classPropertyName: "matchCount", publicName: "matchCount", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "queryChange", next: "next", previous: "previous", close: "close" }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ag-find-panel\" role=\"search\" (click)=\"$event.stopPropagation()\">\n  <input\n    #findInput\n    class=\"ag-find-input\"\n    [value]=\"query()\"\n    (input)=\"queryChange.emit($any($event.target).value)\"\n    (keydown)=\"onKeyDown($event)\"\n    [placeholder]=\"localeText().findPlaceholder\"\n    [attr.aria-label]=\"localeText().findPlaceholder\"\n  />\n  <span class=\"ag-find-count\" aria-live=\"polite\">{{ countLabel() }}</span>\n  <button class=\"ag-find-btn\" [title]=\"localeText().previous\" [attr.aria-label]=\"localeText().previous\"\n    (click)=\"previous.emit()\">\u2191</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().next\" [attr.aria-label]=\"localeText().next\"\n    (click)=\"next.emit()\">\u2193</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().close\" [attr.aria-label]=\"localeText().close\"\n    (click)=\"close.emit()\">\u2715</button>\n</div>\n", styles: [".ag-find-panel{position:absolute;top:8px;right:8px;z-index:1100;display:flex;align-items:center;gap:4px;padding:5px;background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:4px;box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-find-input{width:160px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px;box-sizing:border-box}.ag-find-input:focus{border-color:var(--agrid-color-accent)}.ag-find-count{min-width:46px;text-align:center;font-size:11px;color:var(--agrid-color-text-muted)}.ag-find-btn{width:24px;height:24px;border:1px solid transparent;border-radius:3px;background:none;color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:0}.ag-find-btn:hover{background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-border);color:var(--agrid-color-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridFindPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridFindPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid-find-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-find-panel\" role=\"search\" (click)=\"$event.stopPropagation()\">\n  <input\n    #findInput\n    class=\"ag-find-input\"\n    [value]=\"query()\"\n    (input)=\"queryChange.emit($any($event.target).value)\"\n    (keydown)=\"onKeyDown($event)\"\n    [placeholder]=\"localeText().findPlaceholder\"\n    [attr.aria-label]=\"localeText().findPlaceholder\"\n  />\n  <span class=\"ag-find-count\" aria-live=\"polite\">{{ countLabel() }}</span>\n  <button class=\"ag-find-btn\" [title]=\"localeText().previous\" [attr.aria-label]=\"localeText().previous\"\n    (click)=\"previous.emit()\">\u2191</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().next\" [attr.aria-label]=\"localeText().next\"\n    (click)=\"next.emit()\">\u2193</button>\n  <button class=\"ag-find-btn\" [title]=\"localeText().close\" [attr.aria-label]=\"localeText().close\"\n    (click)=\"close.emit()\">\u2715</button>\n</div>\n", styles: [".ag-find-panel{position:absolute;top:8px;right:8px;z-index:1100;display:flex;align-items:center;gap:4px;padding:5px;background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:4px;box-shadow:0 8px 24px var(--agrid-color-shadow)}.ag-find-input{width:160px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px;box-sizing:border-box}.ag-find-input:focus{border-color:var(--agrid-color-accent)}.ag-find-count{min-width:46px;text-align:center;font-size:11px;color:var(--agrid-color-text-muted)}.ag-find-btn{width:24px;height:24px;border:1px solid transparent;border-radius:3px;background:none;color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:0}.ag-find-btn:hover{background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-border);color:var(--agrid-color-text)}\n"] }]
         }], propDecorators: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], matchCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchCount", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], next: [{ type: i0.Output, args: ["next"] }], previous: [{ type: i0.Output, args: ["previous"] }], close: [{ type: i0.Output, args: ["close"] }], findInput: [{ type: i0.ViewChild, args: ['findInput', { isSignal: true }] }] } });
@@ -3221,6 +3493,22 @@ class AgridNavigationController {
                 event.preventDefault();
                 this.moveSelection(0, 1, event.shiftKey);
                 break;
+            case 'PageUp':
+                event.preventDefault();
+                this.moveSelectionByPage(-1, event.shiftKey);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.moveSelectionByPage(1, event.shiftKey);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.moveSelectionToBoundary('start', event.ctrlKey || event.metaKey, event.shiftKey);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.moveSelectionToBoundary('end', event.ctrlKey || event.metaKey, event.shiftKey);
+                break;
             case 'Tab':
                 event.preventDefault();
                 this.moveSelection(0, event.shiftKey ? -1 : 1);
@@ -3411,6 +3699,59 @@ class AgridNavigationController {
         this.scrollToKeepVisible(newDi, newCi);
         this.opts.focusGrid();
     }
+    /** Move by the number of complete data rows currently visible in the viewport. */
+    moveSelectionByPage(direction, extendRange) {
+        const items = this.opts.filteredItems();
+        const dataRows = items
+            .map((item, displayIndex) => ({ item, displayIndex }))
+            .filter((entry) => isDataRowItem(entry.item));
+        if (dataRows.length === 0)
+            return;
+        const selected = this.opts.selectedCell();
+        const current = selected
+            ? dataRows.findIndex(entry => entry.item.originalIndex === selected.rowIndex)
+            : -1;
+        const rowsPerPage = Math.max(1, Math.floor(this.opts.viewport().getViewportSize() / this.opts.rowHeight()));
+        const target = current < 0
+            ? direction > 0 ? 0 : dataRows.length - 1
+            : Math.max(0, Math.min(dataRows.length - 1, current + direction * rowsPerPage));
+        this.selectProjectedRow(dataRows[target].item.originalIndex, dataRows[target].displayIndex, selected?.colIndex ?? 0, extendRange);
+    }
+    /**
+     * Home/End move horizontally within the selected row; Ctrl/Cmd moves to the corresponding
+     * corner of the projected grid, matching common spreadsheet and ARIA-grid conventions.
+     */
+    moveSelectionToBoundary(edge, wholeGrid, extendRange) {
+        const items = this.opts.filteredItems();
+        const cols = this.opts.visibleColDefs();
+        if (items.length === 0 || cols.length === 0)
+            return;
+        const selected = this.opts.selectedCell();
+        let displayIndex = selected ? this.selectedDisplayIndex() : -1;
+        if (wholeGrid || displayIndex < 0 || !isDataRowItem(items[displayIndex])) {
+            const step = edge === 'start' ? 1 : -1;
+            displayIndex = edge === 'start' ? 0 : items.length - 1;
+            while (displayIndex >= 0 && displayIndex < items.length && !isDataRowItem(items[displayIndex])) {
+                displayIndex += step;
+            }
+        }
+        const item = items[displayIndex];
+        if (!isDataRowItem(item))
+            return;
+        this.selectProjectedRow(item.originalIndex, displayIndex, edge === 'start' ? 0 : cols.length - 1, extendRange);
+    }
+    /** Apply a projected keyboard destination and keep both axes visible. */
+    selectProjectedRow(originalIndex, displayIndex, colIndex, extendRange) {
+        if (extendRange && this.opts.selectedCell()) {
+            this.opts.extendRangeTo(originalIndex, colIndex);
+        }
+        else {
+            this.opts.selectedRange.set(null);
+            this.opts.selectedCell.set({ rowIndex: originalIndex, colIndex });
+        }
+        this.scrollToKeepVisible(displayIndex, colIndex);
+        this.opts.focusGrid();
+    }
     selectedDisplayIndex() {
         const sel = this.opts.selectedCell();
         if (!sel)
@@ -3501,6 +3842,18 @@ class AgridPresentationService {
     }
 }
 
+class AgridMenuBarIcon {
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridMenuBarIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: AgridMenuBarIcon, isStandalone: true, selector: "agrid-menu-icon", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class() || \"\"" } }, ngImport: i0, template: `<span aria-hidden="true"><ng-content></ng-content></span>`, isInline: true, styles: [":host{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:14px;line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridMenuBarIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'agrid-menu-icon', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], host: {
+                        '[class]': 'class() || ""'
+                    }, template: `<span aria-hidden="true"><ng-content></ng-content></span>`, styles: [":host{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:14px;line-height:1}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /** Internal renderer for provider-configured grid commands and dropdown items. */
 class AgridMenuBarComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -3578,14 +3931,15 @@ class AgridMenuBarComponent {
                     : (current - 1 + items.length) % items.length;
         items[next].focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridMenuBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridMenuBarComponent, isStandalone: true, selector: "agrid-menu-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, openItemId: { classPropertyName: "openItemId", publicName: "openItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", openItemIdChange: "openItemIdChange" }, ngImport: i0, template: "<div class=\"ag-menu-bar\" role=\"toolbar\" [attr.aria-label]=\"label()\">\n  @for (item of items(); track item.id) {\n    @let children = visibleChildren(item);\n    <div class=\"ag-menu-bar-group\" [attr.data-menu-id]=\"item.id\">\n      <button type=\"button\" class=\"ag-menu-bar-button\"\n        [class.ag-menu-bar-button--active]=\"isActive(item)\"\n        [class.ag-menu-bar-button--split]=\"children.length > 0\"\n        [disabled]=\"isDisabled(item)\"\n        [attr.aria-pressed]=\"item.active !== undefined ? isActive(item) : null\"\n        (click)=\"runAction($event, item)\">\n        @if (item.icon) {\n          <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n        }\n        <span class=\"ag-menu-bar-label\">{{ item.label }}</span>\n      </button>\n      @if (children.length > 0) {\n        <button type=\"button\" class=\"ag-menu-bar-trigger\"\n          [class.ag-menu-bar-trigger--open]=\"openItemId() === item.id\"\n          [attr.aria-label]=\"item.label + ': ' + label()\"\n          [attr.aria-expanded]=\"openItemId() === item.id\" aria-haspopup=\"menu\"\n          [disabled]=\"isDisabled(item)\"\n          (click)=\"toggleMenu($event, item)\"\n          (keydown)=\"onTriggerKeydown($event, item)\">&#9662;</button>\n        @if (openItemId() === item.id) {\n          <div class=\"ag-menu-bar-dropdown\" role=\"menu\" [attr.aria-label]=\"item.label\"\n            (click)=\"$event.stopPropagation()\" (keydown)=\"onMenuKeydown($event)\">\n            @for (child of children; track child.id) {\n              <button type=\"button\" class=\"ag-menu-bar-dropdown-item\" role=\"menuitem\"\n                [class.ag-menu-bar-dropdown-item--active]=\"isActive(child)\"\n                [disabled]=\"isDisabled(child)\"\n                [attr.aria-current]=\"isActive(child) ? 'true' : null\"\n                (click)=\"runAction($event, child)\">\n                <span class=\"ag-menu-bar-dropdown-check\" aria-hidden=\"true\">{{ isActive(child) ? '&#10003;' : '' }}</span>\n                @if (child.icon) {\n                  <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ child.icon }}</span>\n                }\n                <span class=\"ag-menu-bar-label\">{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0}.ag-menu-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.ag-menu-bar-group{position:relative;display:inline-flex;align-items:stretch}.ag-menu-bar-button,.ag-menu-bar-trigger{display:inline-flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-button{gap:6px;min-width:0;padding:0 10px;border-radius:4px;font-weight:500;white-space:nowrap}.ag-menu-bar-button--split{border-radius:4px 0 0 4px}.ag-menu-bar-trigger{width:28px;padding:0;margin-left:-1px;border-radius:0 4px 4px 0;color:var(--agrid-color-text-muted);font-size:10px}.ag-menu-bar-button--active,.ag-menu-bar-trigger--open{position:relative;z-index:1;border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-button:focus-visible,.ag-menu-bar-trigger:focus-visible,.ag-menu-bar-dropdown-item:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-menu-bar-button:active:not(:disabled),.ag-menu-bar-trigger:active:not(:disabled),.ag-menu-bar-dropdown-item:active:not(:disabled){transform:scale(.97)}.ag-menu-bar-button:disabled,.ag-menu-bar-trigger:disabled,.ag-menu-bar-dropdown-item:disabled{opacity:.48;cursor:not-allowed}.ag-menu-bar-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:14px;line-height:1}.ag-menu-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-menu-bar-dropdown{position:absolute;z-index:12;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;min-width:184px;max-width:min(280px,calc(100vw - 24px));padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top left}.ag-menu-bar-group:last-child .ag-menu-bar-dropdown{right:0;left:auto;transform-origin:top right}.ag-menu-bar-dropdown-item{display:flex;align-items:center;gap:7px;width:100%;min-height:30px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-dropdown-item--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-dropdown-check{flex:0 0 12px;color:var(--agrid-color-accent);font-size:11px;font-weight:700;text-align:center}@media(hover:hover)and (pointer:fine){.ag-menu-bar-button:hover:not(:disabled),.ag-menu-bar-trigger:hover:not(:disabled),.ag-menu-bar-dropdown-item:hover:not(:disabled){background:var(--agrid-color-bg-muted)}.ag-menu-bar-button--active:hover:not(:disabled),.ag-menu-bar-trigger--open:hover:not(:disabled),.ag-menu-bar-dropdown-item--active:hover:not(:disabled){background:var(--agrid-color-accent-subtle)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridMenuBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridMenuBarComponent, isStandalone: true, selector: "agrid-menu-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, openItemId: { classPropertyName: "openItemId", publicName: "openItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", openItemIdChange: "openItemIdChange" }, ngImport: i0, template: "<div class=\"ag-menu-bar\" role=\"toolbar\" [attr.aria-label]=\"label()\">\n  @for (item of items(); track item.id) {\n    @let children = visibleChildren(item);\n    <div class=\"ag-menu-bar-group\" [attr.data-menu-id]=\"item.id\">\n      <button type=\"button\" class=\"ag-menu-bar-button\"\n        [class.ag-menu-bar-button--active]=\"isActive(item)\"\n        [class.ag-menu-bar-button--split]=\"children.length > 0\"\n        [disabled]=\"isDisabled(item)\"\n        [attr.aria-pressed]=\"item.active !== undefined ? isActive(item) : null\"\n        (click)=\"runAction($event, item)\">\n        @if (item.icon) {\n          <agrid-menu-icon [class]=\"item.class\">{{item.icon}}</agrid-menu-icon>\n        }\n        <span class=\"ag-menu-bar-label\">{{ item.label }}</span>\n      </button>\n      @if (children.length > 0) {\n        <button type=\"button\" class=\"ag-menu-bar-trigger\"\n          [class.ag-menu-bar-trigger--open]=\"openItemId() === item.id\"\n          [attr.aria-label]=\"item.label + ': ' + label()\"\n          [attr.aria-expanded]=\"openItemId() === item.id\" aria-haspopup=\"menu\"\n          [disabled]=\"isDisabled(item)\"\n          (click)=\"toggleMenu($event, item)\"\n          (keydown)=\"onTriggerKeydown($event, item)\">&#9662;</button>\n        @if (openItemId() === item.id) {\n          <div class=\"ag-menu-bar-dropdown\" role=\"menu\" [attr.aria-label]=\"item.label\"\n            (click)=\"$event.stopPropagation()\" (keydown)=\"onMenuKeydown($event)\">\n            @for (child of children; track child.id) {\n              <button type=\"button\" class=\"ag-menu-bar-dropdown-item\" role=\"menuitem\"\n                [class.ag-menu-bar-dropdown-item--active]=\"isActive(child)\"\n                [disabled]=\"isDisabled(child)\"\n                [attr.aria-current]=\"isActive(child) ? 'true' : null\"\n                (click)=\"runAction($event, child)\">\n                <span class=\"ag-menu-bar-dropdown-check\" aria-hidden=\"true\">{{ isActive(child) ? '&#10003;' : '' }}</span>\n                @if (child.icon) {\n                 <agrid-menu-icon [class]=\"item.class\">{{child.icon}}</agrid-menu-icon>\n                }\n                <span class=\"ag-menu-bar-label\">{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0}.ag-menu-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.ag-menu-bar-group{position:relative;display:inline-flex;align-items:stretch}.ag-menu-bar-button,.ag-menu-bar-trigger{display:inline-flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-button{gap:6px;min-width:0;padding:0 10px;border-radius:4px;font-weight:500;white-space:nowrap}.ag-menu-bar-button--split{border-radius:4px 0 0 4px}.ag-menu-bar-trigger{width:28px;padding:0;margin-left:-1px;border-radius:0 4px 4px 0;color:var(--agrid-color-text-muted);font-size:10px}.ag-menu-bar-button--active,.ag-menu-bar-trigger--open{position:relative;z-index:1;border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-button:focus-visible,.ag-menu-bar-trigger:focus-visible,.ag-menu-bar-dropdown-item:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-menu-bar-button:active:not(:disabled),.ag-menu-bar-trigger:active:not(:disabled),.ag-menu-bar-dropdown-item:active:not(:disabled){transform:scale(.97)}.ag-menu-bar-button:disabled,.ag-menu-bar-trigger:disabled,.ag-menu-bar-dropdown-item:disabled{opacity:.48;cursor:not-allowed}.ag-menu-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-menu-bar-dropdown{position:absolute;z-index:12;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;min-width:184px;max-width:min(280px,calc(100vw - 24px));padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top left}.ag-menu-bar-group:last-child .ag-menu-bar-dropdown{right:0;left:auto;transform-origin:top right}.ag-menu-bar-dropdown-item{display:flex;align-items:center;gap:7px;width:100%;min-height:30px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-dropdown-item--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-dropdown-check{flex:0 0 12px;color:var(--agrid-color-accent);font-size:11px;font-weight:700;text-align:center}@media(hover:hover)and (pointer:fine){.ag-menu-bar-button:hover:not(:disabled),.ag-menu-bar-trigger:hover:not(:disabled),.ag-menu-bar-dropdown-item:hover:not(:disabled){background:var(--agrid-color-bg-muted)}.ag-menu-bar-button--active:hover:not(:disabled),.ag-menu-bar-trigger--open:hover:not(:disabled),.ag-menu-bar-dropdown-item--active:hover:not(:disabled){background:var(--agrid-color-accent-subtle)}}\n"], dependencies: [{ kind: "component", type: AgridMenuBarIcon, selector: "agrid-menu-icon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridMenuBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridMenuBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'agrid-menu-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-menu-bar\" role=\"toolbar\" [attr.aria-label]=\"label()\">\n  @for (item of items(); track item.id) {\n    @let children = visibleChildren(item);\n    <div class=\"ag-menu-bar-group\" [attr.data-menu-id]=\"item.id\">\n      <button type=\"button\" class=\"ag-menu-bar-button\"\n        [class.ag-menu-bar-button--active]=\"isActive(item)\"\n        [class.ag-menu-bar-button--split]=\"children.length > 0\"\n        [disabled]=\"isDisabled(item)\"\n        [attr.aria-pressed]=\"item.active !== undefined ? isActive(item) : null\"\n        (click)=\"runAction($event, item)\">\n        @if (item.icon) {\n          <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n        }\n        <span class=\"ag-menu-bar-label\">{{ item.label }}</span>\n      </button>\n      @if (children.length > 0) {\n        <button type=\"button\" class=\"ag-menu-bar-trigger\"\n          [class.ag-menu-bar-trigger--open]=\"openItemId() === item.id\"\n          [attr.aria-label]=\"item.label + ': ' + label()\"\n          [attr.aria-expanded]=\"openItemId() === item.id\" aria-haspopup=\"menu\"\n          [disabled]=\"isDisabled(item)\"\n          (click)=\"toggleMenu($event, item)\"\n          (keydown)=\"onTriggerKeydown($event, item)\">&#9662;</button>\n        @if (openItemId() === item.id) {\n          <div class=\"ag-menu-bar-dropdown\" role=\"menu\" [attr.aria-label]=\"item.label\"\n            (click)=\"$event.stopPropagation()\" (keydown)=\"onMenuKeydown($event)\">\n            @for (child of children; track child.id) {\n              <button type=\"button\" class=\"ag-menu-bar-dropdown-item\" role=\"menuitem\"\n                [class.ag-menu-bar-dropdown-item--active]=\"isActive(child)\"\n                [disabled]=\"isDisabled(child)\"\n                [attr.aria-current]=\"isActive(child) ? 'true' : null\"\n                (click)=\"runAction($event, child)\">\n                <span class=\"ag-menu-bar-dropdown-check\" aria-hidden=\"true\">{{ isActive(child) ? '&#10003;' : '' }}</span>\n                @if (child.icon) {\n                  <span class=\"ag-menu-bar-icon\" aria-hidden=\"true\">{{ child.icon }}</span>\n                }\n                <span class=\"ag-menu-bar-label\">{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0}.ag-menu-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.ag-menu-bar-group{position:relative;display:inline-flex;align-items:stretch}.ag-menu-bar-button,.ag-menu-bar-trigger{display:inline-flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-button{gap:6px;min-width:0;padding:0 10px;border-radius:4px;font-weight:500;white-space:nowrap}.ag-menu-bar-button--split{border-radius:4px 0 0 4px}.ag-menu-bar-trigger{width:28px;padding:0;margin-left:-1px;border-radius:0 4px 4px 0;color:var(--agrid-color-text-muted);font-size:10px}.ag-menu-bar-button--active,.ag-menu-bar-trigger--open{position:relative;z-index:1;border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-button:focus-visible,.ag-menu-bar-trigger:focus-visible,.ag-menu-bar-dropdown-item:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-menu-bar-button:active:not(:disabled),.ag-menu-bar-trigger:active:not(:disabled),.ag-menu-bar-dropdown-item:active:not(:disabled){transform:scale(.97)}.ag-menu-bar-button:disabled,.ag-menu-bar-trigger:disabled,.ag-menu-bar-dropdown-item:disabled{opacity:.48;cursor:not-allowed}.ag-menu-bar-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:14px;line-height:1}.ag-menu-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-menu-bar-dropdown{position:absolute;z-index:12;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;min-width:184px;max-width:min(280px,calc(100vw - 24px));padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top left}.ag-menu-bar-group:last-child .ag-menu-bar-dropdown{right:0;left:auto;transform-origin:top right}.ag-menu-bar-dropdown-item{display:flex;align-items:center;gap:7px;width:100%;min-height:30px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-dropdown-item--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-dropdown-check{flex:0 0 12px;color:var(--agrid-color-accent);font-size:11px;font-weight:700;text-align:center}@media(hover:hover)and (pointer:fine){.ag-menu-bar-button:hover:not(:disabled),.ag-menu-bar-trigger:hover:not(:disabled),.ag-menu-bar-dropdown-item:hover:not(:disabled){background:var(--agrid-color-bg-muted)}.ag-menu-bar-button--active:hover:not(:disabled),.ag-menu-bar-trigger--open:hover:not(:disabled),.ag-menu-bar-dropdown-item--active:hover:not(:disabled){background:var(--agrid-color-accent-subtle)}}\n"] }]
+            args: [{ selector: 'agrid-menu-bar', imports: [AgridMenuBarIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-menu-bar\" role=\"toolbar\" [attr.aria-label]=\"label()\">\n  @for (item of items(); track item.id) {\n    @let children = visibleChildren(item);\n    <div class=\"ag-menu-bar-group\" [attr.data-menu-id]=\"item.id\">\n      <button type=\"button\" class=\"ag-menu-bar-button\"\n        [class.ag-menu-bar-button--active]=\"isActive(item)\"\n        [class.ag-menu-bar-button--split]=\"children.length > 0\"\n        [disabled]=\"isDisabled(item)\"\n        [attr.aria-pressed]=\"item.active !== undefined ? isActive(item) : null\"\n        (click)=\"runAction($event, item)\">\n        @if (item.icon) {\n          <agrid-menu-icon [class]=\"item.class\">{{item.icon}}</agrid-menu-icon>\n        }\n        <span class=\"ag-menu-bar-label\">{{ item.label }}</span>\n      </button>\n      @if (children.length > 0) {\n        <button type=\"button\" class=\"ag-menu-bar-trigger\"\n          [class.ag-menu-bar-trigger--open]=\"openItemId() === item.id\"\n          [attr.aria-label]=\"item.label + ': ' + label()\"\n          [attr.aria-expanded]=\"openItemId() === item.id\" aria-haspopup=\"menu\"\n          [disabled]=\"isDisabled(item)\"\n          (click)=\"toggleMenu($event, item)\"\n          (keydown)=\"onTriggerKeydown($event, item)\">&#9662;</button>\n        @if (openItemId() === item.id) {\n          <div class=\"ag-menu-bar-dropdown\" role=\"menu\" [attr.aria-label]=\"item.label\"\n            (click)=\"$event.stopPropagation()\" (keydown)=\"onMenuKeydown($event)\">\n            @for (child of children; track child.id) {\n              <button type=\"button\" class=\"ag-menu-bar-dropdown-item\" role=\"menuitem\"\n                [class.ag-menu-bar-dropdown-item--active]=\"isActive(child)\"\n                [disabled]=\"isDisabled(child)\"\n                [attr.aria-current]=\"isActive(child) ? 'true' : null\"\n                (click)=\"runAction($event, child)\">\n                <span class=\"ag-menu-bar-dropdown-check\" aria-hidden=\"true\">{{ isActive(child) ? '&#10003;' : '' }}</span>\n                @if (child.icon) {\n                 <agrid-menu-icon [class]=\"item.class\">{{child.icon}}</agrid-menu-icon>\n                }\n                <span class=\"ag-menu-bar-label\">{{ child.label }}</span>\n              </button>\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;min-width:0}.ag-menu-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.ag-menu-bar-group{position:relative;display:inline-flex;align-items:stretch}.ag-menu-bar-button,.ag-menu-bar-trigger{display:inline-flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-button{gap:6px;min-width:0;padding:0 10px;border-radius:4px;font-weight:500;white-space:nowrap}.ag-menu-bar-button--split{border-radius:4px 0 0 4px}.ag-menu-bar-trigger{width:28px;padding:0;margin-left:-1px;border-radius:0 4px 4px 0;color:var(--agrid-color-text-muted);font-size:10px}.ag-menu-bar-button--active,.ag-menu-bar-trigger--open{position:relative;z-index:1;border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-button:focus-visible,.ag-menu-bar-trigger:focus-visible,.ag-menu-bar-dropdown-item:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-menu-bar-button:active:not(:disabled),.ag-menu-bar-trigger:active:not(:disabled),.ag-menu-bar-dropdown-item:active:not(:disabled){transform:scale(.97)}.ag-menu-bar-button:disabled,.ag-menu-bar-trigger:disabled,.ag-menu-bar-dropdown-item:disabled{opacity:.48;cursor:not-allowed}.ag-menu-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-menu-bar-dropdown{position:absolute;z-index:12;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;min-width:184px;max-width:min(280px,calc(100vw - 24px));padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top left}.ag-menu-bar-group:last-child .ag-menu-bar-dropdown{right:0;left:auto;transform-origin:top right}.ag-menu-bar-dropdown-item{display:flex;align-items:center;gap:7px;width:100%;min-height:30px;padding:4px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-menu-bar-dropdown-item--active{background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-menu-bar-dropdown-check{flex:0 0 12px;color:var(--agrid-color-accent);font-size:11px;font-weight:700;text-align:center}@media(hover:hover)and (pointer:fine){.ag-menu-bar-button:hover:not(:disabled),.ag-menu-bar-trigger:hover:not(:disabled),.ag-menu-bar-dropdown-item:hover:not(:disabled){background:var(--agrid-color-bg-muted)}.ag-menu-bar-button--active:hover:not(:disabled),.ag-menu-bar-trigger--open:hover:not(:disabled),.ag-menu-bar-dropdown-item--active:hover:not(:disabled){background:var(--agrid-color-accent-subtle)}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], openItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "openItemId", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], openItemIdChange: [{ type: i0.Output, args: ["openItemIdChange"] }] } });
 
+const CONTROL_RUNTIME_STATE = new WeakMap();
 /**
  * Signal-based container for mutable grid UI state such as column widths and active filters.
  *
@@ -3618,36 +3972,37 @@ class AgridControl {
     _totalRows = signal(0, ...(ngDevMode ? [{ debugName: "_totalRows" }] : /* istanbul ignore next */ []));
     _aggregates = signal({}, ...(ngDevMode ? [{ debugName: "_aggregates" }] : /* istanbul ignore next */ []));
     _sortOrder = signal([], ...(ngDevMode ? [{ debugName: "_sortOrder" }] : /* istanbul ignore next */ []));
+    _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 */ []));
     /** @param state Optional initial state, e.g. deserialized from storage. */
     constructor(state) {
-        if (state?.columnWidths)
-            this._columnWidths.set({ ...state.columnWidths });
-        if (state?.filters)
-            this._filters.set({ ...state.filters });
-        if (state?.quickFilter)
-            this._quickFilter.set(state.quickFilter);
-        if (state?.allowRowReorder)
-            this._allowRowReorder.set(state.allowRowReorder);
-        if (state?.groupByField !== undefined)
-            this._groupByField.set(state.groupByField ?? null);
-        if (state?.hiddenColumns?.length)
-            this._hiddenColumns.set(new Set(state.hiddenColumns));
-        if (state?.columnOrder?.length)
-            this._columnOrder.set([...state.columnOrder]);
-        if (state?.pinnedColumns?.length)
-            this._pinnedColumns.set(new Set(state.pinnedColumns));
-        if (state?.pinnedRightColumns?.length)
-            this._pinnedRightColumns.set(new Set(state.pinnedRightColumns));
-        if (state?.pageSize)
-            this._pageSize.set(state.pageSize);
-        if (state?.currentPage)
-            this._currentPage.set(state.currentPage);
-        if (state?.totalRows)
-            this._totalRows.set(state.totalRows);
-        if (state?.aggregates)
-            this._aggregates.set({ ...state.aggregates });
-        if (state?.sortOrder?.length)
-            this._sortOrder.set([...state.sortOrder]);
+        CONTROL_RUNTIME_STATE.set(this, {
+            loading: this._loading,
+            readonly: this._readonly,
+            autoAddRows: this._autoAddRows,
+        });
+        if (state)
+            this.loadState(state);
+    }
+    // ── Runtime grid state ────────────────────────────────────────────────────
+    /** Whether the grid displays its loading overlay. This transient state is not serialized. */
+    loading = this._loading.asReadonly();
+    /** Show or hide the grid loading overlay. */
+    setLoading(value) {
+        this._loading.set(value);
+    }
+    /** Whether all grid editing and mutation UI is disabled. This transient state is not serialized. */
+    readonly = this._readonly.asReadonly();
+    /** Enable or disable readonly mode at runtime. */
+    setReadonly(value) {
+        this._readonly.set(value);
+    }
+    /** Whether navigation beyond the final row automatically inserts a row. Not serialized. */
+    autoAddRows = this._autoAddRows.asReadonly();
+    /** Enable or disable automatic row insertion at runtime. */
+    setAutoAddRows(value) {
+        this._autoAddRows.set(value);
     }
     /**
      * When `true`, the control column shows a drag handle and rows can be
@@ -4032,6 +4387,27 @@ class AgridControl {
             || (!!f.operator && f.operand != null && f.operand !== ''));
     }
     // ── Serialization ──────────────────────────────────────────────────────────
+    /**
+     * Replace the live serializable state from a plain object.
+     * Missing properties reset to their defaults, making a loaded snapshot deterministic.
+     * Transient loading, readonly, auto-add, selection, and edit-history state are preserved.
+     */
+    loadState(state) {
+        this._columnWidths.set({ ...(state.columnWidths ?? {}) });
+        this._filters.set({ ...(state.filters ?? {}) });
+        this._quickFilter.set(state.quickFilter ?? '');
+        this._allowRowReorder.set(state.allowRowReorder ?? false);
+        this._groupByField.set(state.groupByField ?? null);
+        this._hiddenColumns.set(new Set(state.hiddenColumns ?? []));
+        this._columnOrder.set([...(state.columnOrder ?? [])]);
+        this._pinnedColumns.set(new Set(state.pinnedColumns ?? []));
+        this._pinnedRightColumns.set(new Set(state.pinnedRightColumns ?? []));
+        this._pageSize.set(state.pageSize ?? 0);
+        this._currentPage.set(state.currentPage ?? 1);
+        this._totalRows.set(state.totalRows ?? 0);
+        this._aggregates.set({ ...(state.aggregates ?? {}) });
+        this._sortOrder.set([...(state.sortOrder ?? [])]);
+    }
     /** Serialize current state to a plain object suitable for JSON storage. */
     toJSON() {
         return {
@@ -4056,147 +4432,9 @@ class AgridControl {
         return new AgridControl(state);
     }
 }
-
-/**
- * Signal-based data container shared between the grid and the host component.
- *
- * Both the grid and the host component hold a reference to the same `AgridDataSource`
- * instance. Mutations made by either side (e.g. the grid calling `patchRow` when a cell
- * is committed, or the host calling `setData` to load fresh data) are immediately reflected
- * in the grid because {@link rows} is a readonly Angular signal.
- *
- * @example
- * ```ts
- * readonly ds = new AgridDataSource(generateRows(1000));
- *
- * // Later — update one row from outside the grid:
- * this.ds.patchRow(5, { salary: 99000 });
- * ```
- */
-class AgridDataSource {
-    _linkedRows = signal(null, ...(ngDevMode ? [{ debugName: "_linkedRows" }] : /* istanbul ignore next */ []));
-    _rows = linkedSignal(() => this._linkedRows()?.() ?? [], ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
-    _writableLinkedRows = null;
-    _rowAdded = signal(null, ...(ngDevMode ? [{ debugName: "_rowAdded" }] : /* istanbul ignore next */ []));
-    _changeSequence = 0;
-    /**
-     * @param initialData Rows to seed the data source with.
-     *   The array is shallow-copied so external mutations do not affect the source.
-     */
-    constructor(initialData = []) {
-        this._rows.set([...initialData]);
-    }
-    /**
-     * Readonly signal of the current row array.
-     * Read it inside Angular templates or `computed()` to react to changes automatically.
-     */
-    rows = this._rows.asReadonly();
-    /** Latest row insertion, used by attached grids to reveal the inserted row. */
-    rowAdded = this._rowAdded.asReadonly();
-    /**
-     * Link an external row signal to this data source.
-     *
-     * Whenever `source` changes, its array becomes the current datasource value without an
-     * intermediate effect or array copy. If `source` is writable, datasource mutations are written
-     * back to it automatically. Mutations remain local when linking a readonly signal.
-    */
-    linkSignal(source) {
-        this._writableLinkedRows = isWritableSignal(source)
-            ? source
-            : null;
-        this._linkedRows.set(source);
-    }
-    /**
-     * Replace the entire row array.
-     * Triggers a full grid re-render via the signal.
-     */
-    setData(rows) {
-        this.setRows([...rows]);
-    }
-    /**
-     * Overwrite the row at `index` with a new row object.
-     * Use {@link patchRow} when you only want to change specific fields.
-     */
-    updateRow(index, row) {
-        this.updateRows(rows => {
-            const next = [...rows];
-            next[index] = row;
-            return next;
-        });
-    }
-    /**
-     * Merge `patch` into the existing row at `index`, leaving other fields untouched.
-     * The grid calls this internally when a cell edit is committed.
-     */
-    patchRow(index, patch) {
-        this.updateRows(rows => {
-            const next = [...rows];
-            next[index] = { ...next[index], ...patch };
-            return next;
-        });
-    }
-    /**
-     * Insert a row into the data source and return the index at which it was inserted.
-     *
-     * @param row The row object to insert.
-     * @param atIndex Optional insertion index. Defaults to the end of the array.
-     * @returns The index the row was inserted at.
-     */
-    addRow(row, atIndex) {
-        let insertedAt;
-        this.updateRows(rows => {
-            if (atIndex === undefined) {
-                insertedAt = rows.length;
-                return [...rows, row];
-            }
-            insertedAt = atIndex;
-            const next = [...rows];
-            next.splice(atIndex, 0, row);
-            return next;
-        });
-        this._rowAdded.set({ index: insertedAt, sequence: ++this._changeSequence });
-        return insertedAt;
-    }
-    /**
-     * Remove the row at `index`.
-     * The grid adjusts `selectedCell` and `editingCell` internally when a deletion occurs
-     * via the control column context menu.
-     */
-    removeRow(index) {
-        this.updateRows(rows => rows.filter((_, i) => i !== index));
-    }
-    /**
-     * Move the row at `from` to position `to` (insert-before semantics).
-     * Designed to be called directly from a `(rowReorder)` handler:
-     * ```ts
-     * onReorder(e: RowReorderEvent) { this.ds.moveRow(e.oldIndex, e.newIndex); }
-     * ```
-     */
-    moveRow(from, to) {
-        if (from === to)
-            return;
-        this.updateRows(rows => {
-            const arr = [...rows];
-            const [item] = arr.splice(from, 1);
-            arr.splice(to > from ? to - 1 : to, 0, item);
-            return arr;
-        });
-    }
-    /** Return the current row at `index` (non-reactive snapshot). */
-    getRow(index) {
-        return this._rows()[index];
-    }
-    /** Current number of rows (non-reactive snapshot). */
-    get length() {
-        return this._rows().length;
-    }
-    updateRows(update) {
-        this.setRows(update(this._rows()));
-    }
-    setRows(rows) {
-        this._writableLinkedRows?.set(rows);
-        this._rows.set(rows);
-    }
+/** @internal Bridge for deprecated writable signals on AgridProvider. */
+function ɵgetAgridControlRuntimeState(control) {
+    return CONTROL_RUNTIME_STATE.get(control);
 }
 
 /**
@@ -4208,10 +4446,23 @@ class AgridDataSource {
 class AgridProvider {
     /** Mutable row data consumed by the grid. */
     datasource;
+    /** Lazy server-side model, or `null` for the regular client-side datasource. */
+    serverSideRowModel;
     /** Runtime UI state and imperative grid controls. */
     control;
     /** Reactive column definitions in display order. */
     columns;
+    _pivotConfig = signal(null, ...(ngDevMode ? [{ debugName: "_pivotConfig" }] : /* istanbul ignore next */ []));
+    /**
+     * Client-side pivot configuration, or `null` for the normal row view.
+     * Assigning a new configuration reactively rebuilds the derived pivot rows and columns.
+     */
+    get pivotConfig() {
+        return this._pivotConfig();
+    }
+    set pivotConfig(config) {
+        this._pivotConfig.set(config);
+    }
     /** Header-group labels referenced by column definitions. */
     headerGroups;
     /** Tree configuration, or `null` when the grid is not in tree mode. */
@@ -4261,7 +4512,7 @@ class AgridProvider {
     menuBarItems;
     /** Enabled sorting mode. */
     sortOption;
-    /** Toggle auto-add-rows without recreating the provider. @default signal(false) */
+    /** @deprecated Use `control.autoAddRows` and `control.setAutoAddRows()` instead. */
     autoAddRows;
     /** Enabled row-selection mode. */
     rowSelection;
@@ -4293,28 +4544,39 @@ class AgridProvider {
     detailRenderer;
     /** Fixed height in pixels of an expanded detail panel row. */
     detailRowHeight;
-    /** Toggle the loading overlay without recreating the provider. @default signal(false) */
+    /** @deprecated Use `control.loading` and `control.setLoading()` instead. */
     loading;
-    /** Toggle readonly mode without recreating the provider. @default signal(false) */
+    /** @deprecated Use `control.readonly` and `control.setReadonly()` instead. */
     readonlyGrid;
     /** Creates a provider from the supplied data, state, columns, and display options. */
     constructor(config = {}) {
+        if (config.serverSideRowModel && (config.treeConfig || config.pivotConfig)) {
+            throw new Error('AgridServerSideRowModel does not support treeConfig or pivotConfig.');
+        }
+        if (config.treeConfig && config.pivotConfig) {
+            throw new Error('treeConfig and pivotConfig are mutually exclusive.');
+        }
         this.options = { locale: config.locale ?? 'auto' };
-        this.datasource = config.datasource ?? new AgridDataSource([]);
+        this.serverSideRowModel = config.serverSideRowModel ?? null;
+        this.datasource = this.serverSideRowModel ?? config.datasource ?? new AgridDataSource([]);
         this.control = config.control ?? new AgridControl({ allowRowReorder: true });
+        const runtimeState = ɵgetAgridControlRuntimeState(this.control);
         this.columns = signal(config.columns ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.pivotConfig = config.pivotConfig ?? null;
         this.headerGroups = config.headerGroups ?? [];
         this.treeConfig = config.treeConfig ?? null;
         this.rowHeight = config.rowHeight ?? 32;
         this.minHeight = config.minHeight;
         this.maxHeight = config.maxHeight;
         this.allowAddRows = config.allowAddRows ?? false;
-        this.autoAddRows = signal(config.autoAddRows ?? false, ...(ngDevMode ? [{ debugName: "autoAddRows" }] : /* istanbul ignore next */ []));
+        if (config.autoAddRows !== undefined)
+            this.control.setAutoAddRows(config.autoAddRows);
+        this.autoAddRows = runtimeState.autoAddRows;
         this.showControlColumn = config.showControlColumn ?? false;
         this.enableRowMarking = config.enableRowMarking ?? false;
         this.showSidebar = config.showSidebar ?? false;
         this.autoOpenDetail = config.autoOpenDetail ?? false;
-        this.serverSideFiltering = config.serverSideFiltering ?? false;
+        this.serverSideFiltering = this.serverSideRowModel ? true : config.serverSideFiltering ?? false;
         this.filterDebounceMs = Math.max(0, config.filterDebounceMs ?? 300);
         this.enableQuickFilter = config.enableQuickFilter ?? false;
         this.menuBarItems = config.menuBarItems ?? [];
@@ -4328,8 +4590,12 @@ class AgridProvider {
         this.showChangedCellIndicator = config.showChangedCellIndicator ?? false;
         this.confirmRowDelete = config.confirmRowDelete ?? false;
         this.emptyText = config.emptyText;
-        this.loading = signal(config.loading ?? false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-        this.readonlyGrid = signal(config.readonly ?? false, ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
+        if (config.loading !== undefined)
+            this.control.setLoading(config.loading);
+        if (config.readonly !== undefined)
+            this.control.setReadonly(config.readonly);
+        this.loading = runtimeState.loading;
+        this.readonlyGrid = runtimeState.readonly;
         this.useSidebarEditor = config.useSidebarEditor ?? false;
         this.getRowClass = config.getRowClass;
         this.pinRow = config.pinRow;
@@ -4341,6 +4607,338 @@ class AgridProvider {
     getGridData() {
         return this.datasource.rows();
     }
+    /**
+     * Return a detached, JSON-safe snapshot of persistent grid and pivot settings.
+     * Custom pivot aggregate functions cannot be serialized and produce an explicit error.
+     */
+    saveSettings() {
+        const pivot = this.pivotConfig;
+        const aggregate = pivot?.aggregate;
+        if (typeof aggregate === 'function') {
+            throw new Error('Custom pivot aggregate functions cannot be saved as JSON settings.');
+        }
+        return {
+            version: 1,
+            control: this.control.toJSON(),
+            pivotConfig: pivot
+                ? {
+                    rowField: pivot.rowField,
+                    columnField: pivot.columnField,
+                    valueField: pivot.valueField,
+                    aggregate: aggregate ?? 'sum',
+                }
+                : null,
+        };
+    }
+    /**
+     * Apply a previously saved snapshot to this live provider.
+     * Existing component instances update immediately because both control and pivot state are
+     * signal-backed. Unknown versions and pivot fields fail early with actionable errors.
+     */
+    loadSettings(settings) {
+        if (settings.version !== 1) {
+            throw new Error(`Unsupported aGrid settings version: ${settings.version}`);
+        }
+        if (settings.pivotConfig) {
+            if (this.serverSideRowModel || this.treeConfig) {
+                throw new Error('Saved pivot settings cannot be loaded with treeConfig or a server-side row model.');
+            }
+            const fields = new Set(this.columns().map(column => column.field));
+            const pivotFields = [
+                settings.pivotConfig.rowField,
+                settings.pivotConfig.columnField,
+                settings.pivotConfig.valueField,
+            ];
+            if (pivotFields.some(field => !fields.has(field))) {
+                throw new Error('Saved pivot settings reference a column that is not configured.');
+            }
+        }
+        this.control.loadState(settings.control);
+        this.pivotConfig = settings.pivotConfig;
+    }
+}
+
+/** Apply one supported aggregate to the raw values in a pivot bucket. */
+function aggregatePivotValues(values, aggregate) {
+    if (typeof aggregate === 'function')
+        return aggregate(values);
+    if (aggregate === 'count') {
+        return values.reduce((count, value) => count + (value != null && value !== '' ? 1 : 0), 0);
+    }
+    const numeric = values
+        .map(value => Number(value))
+        .filter(value => !Number.isNaN(value));
+    if (aggregate === 'sum')
+        return numeric.reduce((sum, value) => sum + value, 0);
+    if (numeric.length === 0)
+        return null;
+    if (aggregate === 'avg') {
+        return numeric.reduce((sum, value) => sum + value, 0) / numeric.length;
+    }
+    let result = numeric[0];
+    for (let index = 1; index < numeric.length; index++) {
+        result = aggregate === 'min'
+            ? Math.min(result, numeric[index])
+            : Math.max(result, numeric[index]);
+    }
+    return result;
+}
+/**
+ * Convert flat datasource rows into a read-only cross-tabulation.
+ *
+ * Distinct row and column values retain their raw identity while their configured column
+ * formatters supply labels. Generated field names are private implementation keys, avoiding
+ * collisions with source fields. Empty intersections are represented by `null`.
+ */
+function buildPivotResult(rows, sourceColumns, config, locale) {
+    // ColDef is deliberately row-type invariant because callback parameters contain T. Pivoting
+    // reads only display metadata, so normalize definitions to the renderer's untyped view here.
+    const normalizedColumns = sourceColumns;
+    const columnMap = new Map(normalizedColumns.map(column => [column.field, column]));
+    const rowColumn = columnMap.get(config.rowField);
+    const pivotColumn = columnMap.get(config.columnField);
+    const valueColumn = columnMap.get(config.valueField);
+    if (!rowColumn || !pivotColumn || !valueColumn) {
+        throw new Error('Pivot rowField, columnField, and valueField must reference configured columns.');
+    }
+    const buckets = new Map();
+    const rowLabels = new Map();
+    const columnLabels = new Map();
+    for (const row of rows) {
+        const record = row;
+        const rowValue = record[config.rowField];
+        const columnValue = record[config.columnField];
+        rowLabels.set(rowValue, getDisplayForField(rowColumn, rowValue, locale));
+        columnLabels.set(columnValue, getDisplayForField(pivotColumn, columnValue, locale));
+        let columns = buckets.get(rowValue);
+        if (!columns) {
+            columns = new Map();
+            buckets.set(rowValue, columns);
+        }
+        const values = columns.get(columnValue);
+        if (values)
+            values.push(record[config.valueField]);
+        else
+            columns.set(columnValue, [record[config.valueField]]);
+    }
+    const byLabel = (labels) => ([a], [b]) => (labels.get(a) ?? '').localeCompare(labels.get(b) ?? '', locale, { sensitivity: 'base' });
+    const pivotValues = [...columnLabels.entries()].sort(byLabel(columnLabels)).map(([value]) => value);
+    const rowValues = [...rowLabels.entries()].sort(byLabel(rowLabels)).map(([value]) => value);
+    const aggregate = config.aggregate ?? 'sum';
+    const columns = [
+        { ...rowColumn, editable: false, aggregate: undefined },
+        ...pivotValues.map((value, index) => ({
+            field: `__agrid_pivot_${index}`,
+            header: columnLabels.get(value) ?? String(value ?? ''),
+            type: valueColumn.type,
+            width: valueColumn.width,
+            // A count describes bucket cardinality rather than the source value's unit (for example
+            // dollars), so carrying a currency/percentage formatter onto it would be misleading.
+            formatter: aggregate === 'count'
+                ? undefined
+                : valueColumn.formatter,
+            editable: false,
+        })),
+    ];
+    const pivotRows = rowValues.map(rowValue => {
+        const result = { [config.rowField]: rowValue };
+        pivotValues.forEach((columnValue, index) => {
+            const values = buckets.get(rowValue)?.get(columnValue);
+            result[`__agrid_pivot_${index}`] = values
+                ? aggregatePivotValues(values, aggregate)
+                : null;
+        });
+        return result;
+    });
+    return { rows: pivotRows, columns };
+}
+
+const SERVER_ROW_PLACEHOLDER = Symbol('agrid-server-row-placeholder');
+const PLACEHOLDER = { [SERVER_ROW_PLACEHOLDER]: true };
+/**
+ * Sparse datasource that lazy-loads row blocks while retaining global datasource indices.
+ * Attach it to an `AgridProvider` through `serverSideRowModel`.
+ */
+class AgridServerSideRowModel extends AgridDataSource {
+    blockSize;
+    maxBlocksInCache;
+    remote;
+    slots = [];
+    loadedBlocks = new Map();
+    loadingBlocks = new Set();
+    query = { filters: {}, sort: [], quickFilter: '' };
+    queryKey = '';
+    generation = 0;
+    accessSequence = 0;
+    knownRowCount = false;
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
+    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : /* istanbul ignore next */ []));
+    _rowCount = signal(0, ...(ngDevMode ? [{ debugName: "_rowCount" }] : /* istanbul ignore next */ []));
+    /** Whether at least one block request is in flight. */
+    loading = this._loading.asReadonly();
+    /** Most recent load error, cleared by the next successful request or refresh. */
+    error = this._error.asReadonly();
+    /** Current logical row count represented by the virtual scrollbar. */
+    rowCount = this._rowCount.asReadonly();
+    constructor(config) {
+        super();
+        this.remote = config.datasource;
+        this.blockSize = Math.max(1, Math.floor(config.blockSize ?? 100));
+        this.maxBlocksInCache = Math.max(1, Math.floor(config.maxBlocksInCache ?? 10));
+        const initial = config.initialRowCount;
+        this.knownRowCount = initial !== undefined;
+        this.replaceSlots(this.createPlaceholders(Math.max(0, initial ?? this.blockSize)));
+    }
+    /** Update server query state. A changed query invalidates cached blocks and starts at row zero. */
+    setQuery(control, sortFields) {
+        const filters = cloneFilters(control?.filters() ?? {});
+        const sort = sortFields.flatMap(field => {
+            const direction = filters[field]?.sort;
+            return direction ? [{ field, direction }] : [];
+        });
+        const quickFilter = control?.quickFilter() ?? '';
+        const key = JSON.stringify({ filters, sort, quickFilter });
+        if (key === this.queryKey)
+            return false;
+        this.queryKey = key;
+        this.query = { filters, sort, quickFilter };
+        this.reset();
+        return true;
+    }
+    /** Invalidate all cached blocks while preserving a known total row count. */
+    refresh() {
+        this.reset();
+    }
+    /** Ensure every block intersecting the requested half-open range is loaded. */
+    ensureRange(startRow, endRow) {
+        const count = this.slots.length;
+        if (!count)
+            return;
+        const start = Math.max(0, Math.min(Math.floor(startRow), count - 1));
+        const end = Math.max(start + 1, Math.min(Math.ceil(endRow), count));
+        const firstBlock = Math.floor(start / this.blockSize);
+        const lastBlock = Math.floor((end - 1) / this.blockSize);
+        for (let block = firstBlock; block <= lastBlock; block++)
+            void this.loadBlock(block);
+    }
+    /** Whether a logical datasource row has not been loaded yet. */
+    isPlaceholder(index) {
+        return isServerRowPlaceholder(this.slots[index]);
+    }
+    reset() {
+        this.generation++;
+        this.loadedBlocks.clear();
+        this.loadingBlocks.clear();
+        this._loading.set(false);
+        this._error.set(null);
+        const length = this.knownRowCount ? this._rowCount() : this.blockSize;
+        this.replaceSlots(this.createPlaceholders(length));
+    }
+    async loadBlock(block) {
+        if (this.loadedBlocks.has(block) || this.loadingBlocks.has(block)) {
+            if (this.loadedBlocks.has(block))
+                this.loadedBlocks.set(block, ++this.accessSequence);
+            return;
+        }
+        const startRow = block * this.blockSize;
+        if (startRow >= this.slots.length)
+            return;
+        const endRow = Math.min(startRow + this.blockSize, this.slots.length);
+        const generation = this.generation;
+        this.loadingBlocks.add(block);
+        this._loading.set(true);
+        try {
+            const result = await this.remote.getRows({
+                startRow,
+                endRow,
+                filters: this.query.filters,
+                sort: this.query.sort,
+                quickFilter: this.query.quickFilter,
+            });
+            if (generation !== this.generation)
+                return;
+            this.applyBlock(block, startRow, result);
+            this._error.set(null);
+        }
+        catch (error) {
+            if (generation === this.generation)
+                this._error.set(error);
+        }
+        finally {
+            if (generation === this.generation) {
+                this.loadingBlocks.delete(block);
+                this._loading.set(this.loadingBlocks.size > 0);
+            }
+        }
+    }
+    applyBlock(block, startRow, result) {
+        if (result.rowCount !== undefined) {
+            this.knownRowCount = true;
+            this.resize(Math.max(0, Math.floor(result.rowCount)));
+        }
+        else if (result.rows.length < this.blockSize) {
+            this.knownRowCount = true;
+            this.resize(startRow + result.rows.length);
+        }
+        else if (!this.knownRowCount && startRow + result.rows.length >= this.slots.length) {
+            this.resize(this.slots.length + this.blockSize);
+        }
+        const next = [...this.slots];
+        for (let index = 0; index < result.rows.length; index++) {
+            const target = startRow + index;
+            if (target >= next.length)
+                break;
+            next[target] = result.rows[index];
+        }
+        this.loadedBlocks.set(block, ++this.accessSequence);
+        this.evictBlocks(block, next);
+        this.replaceSlots(next);
+    }
+    evictBlocks(activeBlock, slots) {
+        while (this.loadedBlocks.size > this.maxBlocksInCache) {
+            const candidate = [...this.loadedBlocks]
+                .filter(([block]) => block !== activeBlock)
+                .sort((left, right) => left[1] - right[1])[0];
+            if (!candidate)
+                return;
+            const [block] = candidate;
+            this.loadedBlocks.delete(block);
+            const start = block * this.blockSize;
+            const end = Math.min(start + this.blockSize, slots.length);
+            for (let index = start; index < end; index++)
+                slots[index] = placeholder();
+        }
+    }
+    resize(length) {
+        if (length === this.slots.length)
+            return;
+        if (length < this.slots.length)
+            this.slots = this.slots.slice(0, length);
+        else
+            this.slots = [...this.slots, ...this.createPlaceholders(length - this.slots.length)];
+        this._rowCount.set(length);
+    }
+    replaceSlots(slots) {
+        this.slots = slots;
+        this._rowCount.set(slots.length);
+        this.setRows(slots);
+    }
+    createPlaceholders(length) {
+        return Array.from({ length }, () => placeholder());
+    }
+}
+/** @internal */
+function isServerRowPlaceholder(value) {
+    return !!value && typeof value === 'object' && SERVER_ROW_PLACEHOLDER in value;
+}
+function placeholder() {
+    return PLACEHOLDER;
+}
+function cloneFilters(filters) {
+    return Object.fromEntries(Object.entries(filters).map(([field, filter]) => [field, {
+            ...filter,
+            selectedValues: filter.selectedValues ? [...filter.selectedValues] : null,
+        }]));
 }
 
 /**
@@ -4366,7 +4964,7 @@ class AgridProjectionModel {
         if (quick) {
             indices = applyQuickFilter(rows, indices, quick, this.opts.visibleColDefs(), this.opts.locale());
         }
-        if (control.groupByField())
+        if (control.groupByField() && !this.opts.pivotMode?.())
             return indices;
         const sortEntries = this.sortEntries(filters);
         return sortEntries.length
@@ -4376,7 +4974,9 @@ class AgridProjectionModel {
     /** Total filtered row count, unaffected by client-side pagination. */
     filteredRowCount = computed(() => this.filteredSortedIndices().length, ...(ngDevMode ? [{ debugName: "filteredRowCount" }] : /* istanbul ignore next */ []));
     /** Whether row pinning is active: a `pinRow` callback is supplied and not in tree mode. */
-    pinningActive = computed(() => !!this.opts.pinRow?.() && !this.opts.treeConfig(), ...(ngDevMode ? [{ debugName: "pinningActive" }] : /* istanbul ignore next */ []));
+    pinningActive = computed(() => !(this.opts.dataSource() instanceof AgridServerSideRowModel)
+        && !!this.opts.pinRow?.()
+        && !this.opts.treeConfig(), ...(ngDevMode ? [{ debugName: "pinningActive" }] : /* istanbul ignore next */ []));
     /**
      * Partitions the filtered+sorted indices into top-pinned, bottom-pinned, and a body set.
      * Pinned rows keep their real source index, so editing/selection over them is unchanged.
@@ -4435,13 +5035,21 @@ class AgridProjectionModel {
     }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     /** Whether client or server pagination controls should be rendered. */
     showPagination = computed(() => {
+        if (this.opts.dataSource() instanceof AgridServerSideRowModel)
+            return false;
         const control = this.opts.control();
         if (this.opts.treeConfig())
             return false;
-        return (control?.pageSize() ?? 0) > 0 && !control?.groupByField();
+        return (control?.pageSize() ?? 0) > 0
+            && (!control?.groupByField() || !!this.opts.pivotMode?.());
     }, ...(ngDevMode ? [{ debugName: "showPagination" }] : /* istanbul ignore next */ []));
     /** Whether at least one visible column has an aggregate footer. */
     showFooter = computed(() => {
+        if (this.opts.dataSource() instanceof AgridServerSideRowModel)
+            return false;
+        // Aggregating already-aggregated pivot cells is not generally valid (for example avg of avg).
+        if (this.opts.pivotMode?.())
+            return false;
         const aggregates = this.opts.control()?.aggregates() ?? {};
         return this.opts.visibleColDefs().some(col => col.aggregate || aggregates[col.field]);
     }, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
@@ -4450,20 +5058,38 @@ class AgridProjectionModel {
     /** Filtered, sorted, paginated, and optionally grouped virtual-scroll items. */
     filteredItems = computed(() => {
         const rows = this.opts.dataSource().rows();
+        const serverModel = this.opts.dataSource() instanceof AgridServerSideRowModel
+            ? this.opts.dataSource()
+            : null;
         const control = this.opts.control();
         let indices = this.filteredSortedIndices();
+        // Server-side blocks already arrive filtered and sorted. Preserve their global indices and
+        // represent unloaded sparse slots as non-interactive virtual rows.
+        if (serverModel) {
+            return indices.map(originalIndex => serverModel.isPlaceholder(originalIndex)
+                ? { loading: true, originalIndex }
+                : { row: rows[originalIndex], originalIndex });
+        }
         // Tree mode takes precedence over grouping/pagination: the already filtered-and-sorted
         // indices are flattened into a hierarchy honoring the expanded-id set.
         const treeConfig = this.opts.treeConfig();
         if (treeConfig) {
             const expandedIds = this.opts.expandedTreeIds();
+            // Passing no columns keeps the tree builders allocation-free when rollups are disabled.
+            // Runtime control aggregates override static ColDef.aggregate values inside the builders.
+            const treeAggregateCols = treeConfig.aggregateTreeNodes
+                ? this.opts.visibleColDefs()
+                : [];
+            const treeControlAggregates = treeConfig.aggregateTreeNodes
+                ? control?.aggregates() ?? {}
+                : {};
             // When a text/value filter is active, keep the ancestors of every match visible (and
             // force their path open) so deep matches don't vanish under filtered-out parents.
             const filters = control?.filters() ?? {};
             const filterActive = !this.opts.serverSideFiltering()
                 && Object.values(filters).some(f => f.text || f.selectedValues !== null);
             if (isPathTreeConfig(treeConfig)) {
-                const items = this.appendTreeDetailItems(buildPathTreeItems(rows, indices, treeConfig, expandedIds, filterActive && treeConfig.keepAncestorsOnFilter !== false), rows, treeConfig);
+                const items = this.appendTreeDetailItems(buildPathTreeItems(rows, indices, treeConfig, expandedIds, filterActive && treeConfig.keepAncestorsOnFilter !== false, treeAggregateCols, treeControlAggregates), rows, treeConfig);
                 this.appendAddRow(items);
                 return items;
             }
@@ -4485,11 +5111,11 @@ class AgridProjectionModel {
                     }
                 }
                 const ordered = this.allSortedIndices().filter(index => visible.has(index));
-                const items = this.appendTreeDetailItems(buildTreeItems(rows, ordered, treeConfig, expandedIds, forced), rows, treeConfig);
+                const items = this.appendTreeDetailItems(buildTreeItems(rows, ordered, treeConfig, expandedIds, forced, treeAggregateCols, treeControlAggregates), rows, treeConfig);
                 this.appendAddRow(items);
                 return items;
             }
-            const items = this.appendTreeDetailItems(buildTreeItems(rows, indices, treeConfig, expandedIds), rows, treeConfig);
+            const items = this.appendTreeDetailItems(buildTreeItems(rows, indices, treeConfig, expandedIds, undefined, treeAggregateCols, treeControlAggregates), rows, treeConfig);
             this.appendAddRow(items);
             return items;
         }
@@ -4506,7 +5132,7 @@ class AgridProjectionModel {
                 const page = Math.max(1, Math.min(control.currentPage(), this.totalPages()));
                 indices = indices.slice((page - 1) * pageSize, page * pageSize);
             }
-            if (groupField) {
+            if (groupField && !this.opts.pivotMode?.()) {
                 const expansion = this.opts.expandedGroups();
                 const expandedLabels = expansion.field === groupField
                     ? expansion.labels
@@ -4563,6 +5189,7 @@ class AgridProjectionModel {
             if (item
                 && typeof item === 'object'
                 && 'originalIndex' in item
+                && 'row' in item
                 && (isPathTreeConfig(treeConfig)
                     || !parentIds.has(treeConfig.getId(item.row)))
                 && expandedDetail.has(item.originalIndex)) {
@@ -5092,7 +5719,7 @@ class AgridSidebarController {
             return;
         let newValue = stringValue;
         if (col.type === 'number') {
-            newValue = stringValue === '' ? null : Number(stringValue);
+            newValue = coerceNumberInputValue(stringValue);
         }
         else if (col.type === 'date') {
             newValue = coerceDateInputValue(stringValue, this.opts.dataSource().getRow(index)[field]);
@@ -5137,6 +5764,10 @@ class AgridSidebarComponent {
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     activeTab = input('columns', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Original datasource columns available as pivot dimensions and values. */
+    pivotColumns = input([], ...(ngDevMode ? [{ debugName: "pivotColumns" }] : /* istanbul ignore next */ []));
+    /** Active pivot configuration; `null` hides the pivot tab. */
+    pivotConfig = input(null, ...(ngDevMode ? [{ debugName: "pivotConfig" }] : /* istanbul ignore next */ []));
     headerGroups = input([], ...(ngDevMode ? [{ debugName: "headerGroups" }] : /* istanbul ignore next */ []));
     row = input(null, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     rowIndex = input(null, ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
@@ -5154,6 +5785,43 @@ class AgridSidebarComponent {
     toggleColumnGroup = output();
     detailEdit = output();
     save = output();
+    /** Emits a complete replacement configuration after one pivot control changes. */
+    pivotChange = output();
+    /** Built-in aggregate selected by the sidebar, or `custom` for host functions. */
+    pivotAggregate = computed(() => {
+        const aggregate = this.pivotConfig()?.aggregate ?? 'sum';
+        return typeof aggregate === 'function' ? 'custom' : aggregate;
+    }, ...(ngDevMode ? [{ debugName: "pivotAggregate" }] : /* istanbul ignore next */ []));
+    /** Localized title for the currently active sidebar tab. */
+    activeTabLabel() {
+        const locale = this.localeText();
+        if (this.activeTab() === 'pivot')
+            return locale.pivot;
+        return this.activeTab() === 'columns' ? locale.columns : locale.detail;
+    }
+    /** Replace one pivot dimension/value field while preserving the other settings. */
+    onPivotFieldChange(field, event) {
+        const config = this.pivotConfig();
+        if (!config)
+            return;
+        this.pivotChange.emit({
+            ...config,
+            [field]: event.target.value,
+        });
+    }
+    /** Replace the pivot aggregate with one of the serializable built-in functions. */
+    onPivotAggregateChange(event) {
+        const config = this.pivotConfig();
+        if (!config)
+            return;
+        const aggregate = event.target.value;
+        if (aggregate === 'custom')
+            return;
+        this.pivotChange.emit({
+            ...config,
+            aggregate: aggregate,
+        });
+    }
     columnEntries = computed(() => {
         const groupLabels = new Map(this.headerGroups().map(group => [group.id, group.label]));
         const entries = [];
@@ -5244,13 +5912,13 @@ class AgridSidebarComponent {
             };
         });
     }, ...(ngDevMode ? [{ debugName: "detailFields" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridSidebarComponent, isStandalone: true, selector: "agrid-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, readonlyGrid: { classPropertyName: "readonlyGrid", publicName: "readonlyGrid", isSignal: true, isRequired: false, transformFunction: null }, useSidebarEditor: { classPropertyName: "useSidebarEditor", publicName: "useSidebarEditor", isSignal: true, isRequired: false, transformFunction: null }, isCellEditable: { classPropertyName: "isCellEditable", publicName: "isCellEditable", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", tabChange: "tabChange", toggleColumn: "toggleColumn", toggleColumnGroup: "toggleColumnGroup", detailEdit: "detailEdit", save: "save" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if (field.editable && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (input)=\"onDetailMaskInput(field, $event)\"\n                (change)=\"onDetailChange(field, $event)\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridSidebarComponent, isStandalone: true, selector: "agrid-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, pivotColumns: { classPropertyName: "pivotColumns", publicName: "pivotColumns", isSignal: true, isRequired: false, transformFunction: null }, pivotConfig: { classPropertyName: "pivotConfig", publicName: "pivotConfig", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, readonlyGrid: { classPropertyName: "readonlyGrid", publicName: "readonlyGrid", isSignal: true, isRequired: false, transformFunction: null }, useSidebarEditor: { classPropertyName: "useSidebarEditor", publicName: "useSidebarEditor", isSignal: true, isRequired: false, transformFunction: null }, isCellEditable: { classPropertyName: "isCellEditable", publicName: "isCellEditable", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", tabChange: "tabChange", toggleColumn: "toggleColumn", toggleColumnGroup: "toggleColumnGroup", detailEdit: "detailEdit", save: "save", pivotChange: "pivotChange" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTabLabel()\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTabLabel() }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else if (activeTab() === 'pivot' && pivotConfig(); as pivot) {\n      <div class=\"ag-pivot-config\">\n        <p class=\"ag-pivot-description\">{{ localeText().pivotDescription }}</p>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().pivotRows }}</span>\n          <select [value]=\"pivot.rowField\"\n            (change)=\"onPivotFieldChange('rowField', $event)\">\n            @for (col of pivotColumns(); track col.field) {\n              <option [value]=\"col.field\" [selected]=\"col.field === pivot.rowField\">{{ col.header }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().pivotColumns }}</span>\n          <select [value]=\"pivot.columnField\"\n            (change)=\"onPivotFieldChange('columnField', $event)\">\n            @for (col of pivotColumns(); track col.field) {\n              <option [value]=\"col.field\" [selected]=\"col.field === pivot.columnField\">{{ col.header }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().pivotValues }}</span>\n          <select [value]=\"pivot.valueField\"\n            (change)=\"onPivotFieldChange('valueField', $event)\">\n            @for (col of pivotColumns(); track col.field) {\n              <option [value]=\"col.field\" [selected]=\"col.field === pivot.valueField\">{{ col.header }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().aggregate }}</span>\n          <select [value]=\"pivotAggregate()\" (change)=\"onPivotAggregateChange($event)\">\n            <option value=\"sum\" [selected]=\"pivotAggregate() === 'sum'\">{{ localeText().aggregateSum }}</option>\n            <option value=\"avg\" [selected]=\"pivotAggregate() === 'avg'\">{{ localeText().aggregateAvg }}</option>\n            <option value=\"min\" [selected]=\"pivotAggregate() === 'min'\">{{ localeText().aggregateMin }}</option>\n            <option value=\"max\" [selected]=\"pivotAggregate() === 'max'\">{{ localeText().aggregateMax }}</option>\n            <option value=\"count\" [selected]=\"pivotAggregate() === 'count'\">{{ localeText().aggregateCount }}</option>\n            @if (pivotAggregate() === 'custom') {\n              <option value=\"custom\" disabled selected>{{ localeText().aggregateCustom }}</option>\n            }\n          </select>\n        </label>\n\n        <div class=\"ag-pivot-columns-heading\">{{ localeText().columns }}</div>\n        <div class=\"ag-pivot-column-list\">\n          @for (entry of columnEntries(); track entry.kind === 'group' ? 'pivot-group-' + entry.id : 'pivot-column-' + entry.col.field) {\n            @if (entry.kind === 'group') {\n              <div class=\"ag-sidebar-group\">\n                <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n                  <input type=\"checkbox\"\n                    [checked]=\"isGroupVisible(entry.columns)\"\n                    [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                    (change)=\"onGroupToggle(entry.columns, $event)\" />\n                  {{ entry.label }}\n                </label>\n                <div class=\"ag-sidebar-group-children\">\n                  @for (col of entry.columns; track col.field) {\n                    <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\"\n                        [checked]=\"!hiddenColumns().has(col.field)\"\n                        (change)=\"toggleColumn.emit(col.field)\" />\n                      {{ col.header }}\n                    </label>\n                  }\n                </div>\n              </div>\n            } @else {\n              <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n                <input type=\"checkbox\"\n                  [checked]=\"!hiddenColumns().has(entry.col.field)\"\n                  (change)=\"toggleColumn.emit(entry.col.field)\" />\n                {{ entry.col.header }}\n              </label>\n            }\n          }\n        </div>\n      </div>\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if (field.editable && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'date' ? 'date' : 'text'\"\n                [attr.inputmode]=\"field.col.type === 'number' ? 'decimal' : null\"\n                [value]=\"field.inputValue\"\n                (input)=\"onDetailMaskInput(field, $event)\"\n                (change)=\"onDetailChange(field, $event)\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n  @if (pivotConfig()) {\n    <button\n      class=\"ag-sidebar-strip-btn\"\n      [class.active]=\"open() && activeTab() === 'pivot'\"\n      [attr.aria-pressed]=\"open() && activeTab() === 'pivot'\"\n      (click)=\"tabChange.emit('pivot')\"\n    >{{ localeText().pivot }}</button>\n  }\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}.ag-pivot-config{display:grid;gap:12px;padding:12px}.ag-pivot-description{margin:0 0 2px;color:var(--agrid-color-text-muted);font-size:12px;line-height:1.45}.ag-pivot-field{display:grid;gap:5px}.ag-pivot-field>span{color:var(--agrid-color-text-muted);font-size:10px;font-weight:650;letter-spacing:.4px;text-transform:uppercase}.ag-pivot-field select{width:100%;height:30px;box-sizing:border-box;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);padding:0 7px;font:inherit;font-size:12px}.ag-pivot-field select:focus-visible{outline:2px solid var(--agrid-color-accent);outline-offset:2px}.ag-pivot-columns-heading{margin:2px -12px 0;padding:10px 12px 6px;border-top:1px solid var(--agrid-color-border);color:var(--agrid-color-text-muted);font-size:10px;font-weight:650;letter-spacing:.4px;text-transform:uppercase}.ag-pivot-column-list{margin:-6px -12px -12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'agrid-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if (field.editable && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (input)=\"onDetailMaskInput(field, $event)\"\n                (change)=\"onDetailChange(field, $event)\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"] }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], readonlyGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyGrid", required: false }] }], useSidebarEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSidebarEditor", required: false }] }], isCellEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCellEditable", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], toggleColumn: [{ type: i0.Output, args: ["toggleColumn"] }], toggleColumnGroup: [{ type: i0.Output, args: ["toggleColumnGroup"] }], detailEdit: [{ type: i0.Output, args: ["detailEdit"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+            args: [{ selector: 'agrid-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTabLabel()\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTabLabel() }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else if (activeTab() === 'pivot' && pivotConfig(); as pivot) {\n      <div class=\"ag-pivot-config\">\n        <p class=\"ag-pivot-description\">{{ localeText().pivotDescription }}</p>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().pivotRows }}</span>\n          <select [value]=\"pivot.rowField\"\n            (change)=\"onPivotFieldChange('rowField', $event)\">\n            @for (col of pivotColumns(); track col.field) {\n              <option [value]=\"col.field\" [selected]=\"col.field === pivot.rowField\">{{ col.header }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().pivotColumns }}</span>\n          <select [value]=\"pivot.columnField\"\n            (change)=\"onPivotFieldChange('columnField', $event)\">\n            @for (col of pivotColumns(); track col.field) {\n              <option [value]=\"col.field\" [selected]=\"col.field === pivot.columnField\">{{ col.header }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().pivotValues }}</span>\n          <select [value]=\"pivot.valueField\"\n            (change)=\"onPivotFieldChange('valueField', $event)\">\n            @for (col of pivotColumns(); track col.field) {\n              <option [value]=\"col.field\" [selected]=\"col.field === pivot.valueField\">{{ col.header }}</option>\n            }\n          </select>\n        </label>\n\n        <label class=\"ag-pivot-field\">\n          <span>{{ localeText().aggregate }}</span>\n          <select [value]=\"pivotAggregate()\" (change)=\"onPivotAggregateChange($event)\">\n            <option value=\"sum\" [selected]=\"pivotAggregate() === 'sum'\">{{ localeText().aggregateSum }}</option>\n            <option value=\"avg\" [selected]=\"pivotAggregate() === 'avg'\">{{ localeText().aggregateAvg }}</option>\n            <option value=\"min\" [selected]=\"pivotAggregate() === 'min'\">{{ localeText().aggregateMin }}</option>\n            <option value=\"max\" [selected]=\"pivotAggregate() === 'max'\">{{ localeText().aggregateMax }}</option>\n            <option value=\"count\" [selected]=\"pivotAggregate() === 'count'\">{{ localeText().aggregateCount }}</option>\n            @if (pivotAggregate() === 'custom') {\n              <option value=\"custom\" disabled selected>{{ localeText().aggregateCustom }}</option>\n            }\n          </select>\n        </label>\n\n        <div class=\"ag-pivot-columns-heading\">{{ localeText().columns }}</div>\n        <div class=\"ag-pivot-column-list\">\n          @for (entry of columnEntries(); track entry.kind === 'group' ? 'pivot-group-' + entry.id : 'pivot-column-' + entry.col.field) {\n            @if (entry.kind === 'group') {\n              <div class=\"ag-sidebar-group\">\n                <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n                  <input type=\"checkbox\"\n                    [checked]=\"isGroupVisible(entry.columns)\"\n                    [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                    (change)=\"onGroupToggle(entry.columns, $event)\" />\n                  {{ entry.label }}\n                </label>\n                <div class=\"ag-sidebar-group-children\">\n                  @for (col of entry.columns; track col.field) {\n                    <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\"\n                        [checked]=\"!hiddenColumns().has(col.field)\"\n                        (change)=\"toggleColumn.emit(col.field)\" />\n                      {{ col.header }}\n                    </label>\n                  }\n                </div>\n              </div>\n            } @else {\n              <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n                <input type=\"checkbox\"\n                  [checked]=\"!hiddenColumns().has(entry.col.field)\"\n                  (change)=\"toggleColumn.emit(entry.col.field)\" />\n                {{ entry.col.header }}\n              </label>\n            }\n          }\n        </div>\n      </div>\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if (field.editable && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'date' ? 'date' : 'text'\"\n                [attr.inputmode]=\"field.col.type === 'number' ? 'decimal' : null\"\n                [value]=\"field.inputValue\"\n                (input)=\"onDetailMaskInput(field, $event)\"\n                (change)=\"onDetailChange(field, $event)\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n  @if (pivotConfig()) {\n    <button\n      class=\"ag-sidebar-strip-btn\"\n      [class.active]=\"open() && activeTab() === 'pivot'\"\n      [attr.aria-pressed]=\"open() && activeTab() === 'pivot'\"\n      (click)=\"tabChange.emit('pivot')\"\n    >{{ localeText().pivot }}</button>\n  }\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}.ag-pivot-config{display:grid;gap:12px;padding:12px}.ag-pivot-description{margin:0 0 2px;color:var(--agrid-color-text-muted);font-size:12px;line-height:1.45}.ag-pivot-field{display:grid;gap:5px}.ag-pivot-field>span{color:var(--agrid-color-text-muted);font-size:10px;font-weight:650;letter-spacing:.4px;text-transform:uppercase}.ag-pivot-field select{width:100%;height:30px;box-sizing:border-box;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);padding:0 7px;font:inherit;font-size:12px}.ag-pivot-field select:focus-visible{outline:2px solid var(--agrid-color-accent);outline-offset:2px}.ag-pivot-columns-heading{margin:2px -12px 0;padding:10px 12px 6px;border-top:1px solid var(--agrid-color-border);color:var(--agrid-color-text-muted);font-size:10px;font-weight:650;letter-spacing:.4px;text-transform:uppercase}.ag-pivot-column-list{margin:-6px -12px -12px}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], pivotColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivotColumns", required: false }] }], pivotConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "pivotConfig", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], readonlyGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyGrid", required: false }] }], useSidebarEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSidebarEditor", required: false }] }], isCellEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCellEditable", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], toggleColumn: [{ type: i0.Output, args: ["toggleColumn"] }], toggleColumnGroup: [{ type: i0.Output, args: ["toggleColumnGroup"] }], detailEdit: [{ type: i0.Output, args: ["detailEdit"] }], save: [{ type: i0.Output, args: ["save"] }], pivotChange: [{ type: i0.Output, args: ["pivotChange"] }] } });
 
 /** Pixels rendered above and below the viewport so scrolling does not reveal blank rows. */
 const BUFFER_PX = 200;
@@ -5371,8 +6039,8 @@ class AgridVariableRowSizeDirective {
     ngOnChanges() {
         this.strategy.updateItemSizes(this.itemSizes());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridVariableRowSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: AgridVariableRowSizeDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport[agridVariableRowSize]", inputs: { itemSizes: { classPropertyName: "itemSizes", publicName: "agridVariableRowSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridVariableRowSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: AgridVariableRowSizeDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport[agridVariableRowSize]", inputs: { itemSizes: { classPropertyName: "itemSizes", publicName: "agridVariableRowSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: VIRTUAL_SCROLL_STRATEGY,
                 useFactory: (d) => d.strategy,
@@ -5380,7 +6048,7 @@ class AgridVariableRowSizeDirective {
             },
         ], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridVariableRowSizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridVariableRowSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'cdk-virtual-scroll-viewport[agridVariableRowSize]',
@@ -5406,6 +6074,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * | Key | Action |
  * |-----|--------|
  * | Arrow keys | Move selection |
+ * | Page Up / Page Down | Move by one visible viewport page |
+ * | Home / End | Move to the first / last cell in the current row |
+ * | Ctrl/Cmd+Home / Ctrl/Cmd+End | Move to the first / last cell in the grid |
  * | Tab / Shift+Tab | Move right / left (wraps rows) |
  * | Enter | Enter edit mode |
  * | Ctrl/Cmd+Enter | Toggle an expandable tree node |
@@ -5422,8 +6093,8 @@ class AgridComponent {
     rowHeight = computed(() => this.provider().rowHeight, ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
     minHeight = computed(() => this.provider().minHeight, ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
     maxHeight = computed(() => this.provider().maxHeight, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
-    allowAddRows = computed(() => this.provider().allowAddRows, ...(ngDevMode ? [{ debugName: "allowAddRows" }] : /* istanbul ignore next */ []));
-    autoAddRows = computed(() => this.provider().autoAddRows(), ...(ngDevMode ? [{ debugName: "autoAddRows" }] : /* istanbul ignore next */ []));
+    allowAddRows = computed(() => this.provider().allowAddRows && !this.provider().pivotConfig, ...(ngDevMode ? [{ debugName: "allowAddRows" }] : /* istanbul ignore next */ []));
+    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 */ []));
     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 */ []));
@@ -5442,17 +6113,41 @@ class AgridComponent {
     cellMenuItems = computed(() => this.provider().cellMenuItems, ...(ngDevMode ? [{ debugName: "cellMenuItems" }] : /* istanbul ignore next */ []));
     headerGroups = computed(() => this.provider().headerGroups, ...(ngDevMode ? [{ debugName: "headerGroups" }] : /* istanbul ignore next */ []));
     treeConfig = computed(() => this.provider().treeConfig, ...(ngDevMode ? [{ debugName: "treeConfig" }] : /* istanbul ignore next */ []));
+    /** Whether the provider is rendering a derived client-side pivot table. */
+    pivotMode = computed(() => !!this.provider().pivotConfig, ...(ngDevMode ? [{ debugName: "pivotMode" }] : /* istanbul ignore next */ []));
     zebraStripes = computed(() => this.provider().zebraStripes, ...(ngDevMode ? [{ debugName: "zebraStripes" }] : /* istanbul ignore next */ []));
     showChangedCellIndicator = computed(() => this.provider().showChangedCellIndicator, ...(ngDevMode ? [{ debugName: "showChangedCellIndicator" }] : /* istanbul ignore next */ []));
     confirmRowDelete = computed(() => this.provider().confirmRowDelete, ...(ngDevMode ? [{ debugName: "confirmRowDelete" }] : /* istanbul ignore next */ []));
-    readonlyGrid = computed(() => this.provider().readonlyGrid(), ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
-    loading = computed(() => this.provider().loading(), ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    readonlyGrid = computed(() => !!this.provider().pivotConfig || (this.control()?.readonly() ?? false), ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this.control()?.loading() ?? false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     emptyText = computed(() => this.provider().emptyText, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     useSidebarEditor = computed(() => this.provider().useSidebarEditor, ...(ngDevMode ? [{ debugName: "useSidebarEditor" }] : /* istanbul ignore next */ []));
     /** Host callback for per-row CSS classes, or `undefined`. */
     rowClassFn = computed(() => this.provider().getRowClass, ...(ngDevMode ? [{ debugName: "rowClassFn" }] : /* istanbul ignore next */ []));
     /** Host callback designating pinned rows, or `undefined`. */
     pinRowFn = computed(() => this.provider().pinRow, ...(ngDevMode ? [{ debugName: "pinRowFn" }] : /* istanbul ignore next */ []));
+    pivotRowColumnField = computed(() => {
+        return this.provider().pivotConfig?.rowField;
+    }, ...(ngDevMode ? [{ debugName: "pivotRowColumnField" }] : /* istanbul ignore next */ []));
+    pivotHeaderLabel = computed(() => {
+        const aggr = this.provider().pivotConfig?.aggregate;
+        const vcfield = this.provider().pivotConfig?.valueField;
+        const valueColumn = this.provider().columns().find(c => c.field === vcfield);
+        switch (aggr) {
+            case "sum":
+                return `${this.localeText().aggregateSum} ${valueColumn?.header ?? ''}`;
+            case "avg":
+                return `${this.localeText().aggregateAvg} ${valueColumn?.header ?? ''}`;
+            case "count":
+                return `${this.localeText().aggregateCount} ${valueColumn?.header ?? ''}`;
+            case "max":
+                return `${this.localeText().aggregateMax} ${valueColumn?.header ?? ''}`;
+            case "min":
+                return `${this.localeText().aggregateMin} ${valueColumn?.header ?? ''}`;
+            default:
+                return undefined;
+        }
+    }, ...(ngDevMode ? [{ debugName: "pivotHeaderLabel" }] : /* istanbul ignore next */ []));
     /**
      * Effective pin resolver fed to the projection: a runtime UI override wins (including an explicit
      * `null` unpin), otherwise the provider `pinRow` predicate decides. Returns `undefined` when
@@ -5472,13 +6167,28 @@ class AgridComponent {
     }, ...(ngDevMode ? [{ debugName: "effectivePinRow" }] : /* istanbul ignore next */ []));
     /** Whether master/detail is enabled and applicable (flat rows or tree leaves; not grouped). */
     masterDetail = computed(() => this.provider().masterDetail && !!this.provider().detailRenderer
-        && !this.control()?.groupByField(), ...(ngDevMode ? [{ debugName: "masterDetail" }] : /* istanbul ignore next */ []));
+        && !this.control()?.groupByField() && !this.provider().pivotConfig, ...(ngDevMode ? [{ debugName: "masterDetail" }] : /* istanbul ignore next */ []));
     /** Fixed detail-panel height in pixels. */
     detailRowHeight = computed(() => this.provider().detailRowHeight, ...(ngDevMode ? [{ debugName: "detailRowHeight" }] : /* istanbul ignore next */ []));
-    /** Column definitions from the active provider. */
-    colDefs = computed(() => this.provider().columns(), ...(ngDevMode ? [{ debugName: "colDefs" }] : /* istanbul ignore next */ []));
-    /** Signal-based data container from the active provider. */
-    dataSource = computed(() => this.provider().datasource, ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /** Read-only pivot rows and generated columns, or `null` in the normal datasource view. */
+    pivotResult = computed(() => {
+        const provider = this.provider();
+        if (!provider.pivotConfig)
+            return null;
+        return buildPivotResult(provider.datasource.rows(), provider.columns(), provider.pivotConfig, resolveLocale(provider.options.locale));
+    }, ...(ngDevMode ? [{ debugName: "pivotResult" }] : /* istanbul ignore next */ []));
+    /** Reactive row projection linked into a stable datasource instance for pivot mode. */
+    pivotRows = computed(() => this.pivotResult()?.rows ?? [], ...(ngDevMode ? [{ debugName: "pivotRows" }] : /* istanbul ignore next */ []));
+    pivotDataSource = new AgridDataSource();
+    /** Column definitions from the active provider or generated by the active pivot. */
+    colDefs = computed(() => this.pivotResult()?.columns
+        ?? this.provider().columns(), ...(ngDevMode ? [{ debugName: "colDefs" }] : /* istanbul ignore next */ []));
+    /** Signal-based source rows or a derived, read-only pivot datasource. */
+    dataSource = computed(() => {
+        return this.pivotResult() ? this.pivotDataSource : this.provider().datasource;
+    }, ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /** Active lazy server-side row model, when configured on the provider. */
+    serverSideRowModel = computed(() => this.provider().serverSideRowModel, ...(ngDevMode ? [{ debugName: "serverSideRowModel" }] : /* istanbul ignore next */ []));
     treeParentIds = computed(() => {
         const config = this.treeConfig();
         if (!config || isPathTreeConfig(config))
@@ -5520,6 +6230,8 @@ class AgridComponent {
     rowClick = output();
     /** Emitted when the user single-clicks a generated path-tree branch node. */
     treeNodeClick = output();
+    /** Emitted after sidebar changes produce a new persistable grid settings snapshot. */
+    settingsChange = output();
     /** Emitted when the user double-clicks a generated path-tree branch node. */
     treeNodeDoubleClicked = output();
     /**
@@ -5589,6 +6301,29 @@ class AgridComponent {
     onSidebarStripClick(tab) {
         this.sidebarController.selectTab(tab);
     }
+    /** @internal Replace the active pivot configuration from the sidebar controls. */
+    onSidebarPivotChange(config) {
+        this.provider().pivotConfig = config;
+        this.emitSettingsChange();
+    }
+    /** Return a detached, JSON-safe snapshot suitable for persistence by the host application. */
+    saveSettings() {
+        return this.provider().saveSettings();
+    }
+    /** Apply a saved settings snapshot to this live grid. */
+    loadSettings(settings) {
+        this.provider().loadSettings(settings);
+    }
+    /** Emit when the active state is JSON-safe; custom function aggregates remain host-owned. */
+    emitSettingsChange() {
+        try {
+            this.settingsChange.emit(this.saveSettings());
+        }
+        catch (error) {
+            if (!(error instanceof Error) || !error.message.includes('cannot be saved'))
+                throw error;
+        }
+    }
     /** @internal */
     onSidebarDetailEdit(event) {
         this.sidebarController.edit(event);
@@ -5677,7 +6412,9 @@ class AgridComponent {
     });
     treeController = new AgridTreeController();
     // ── Derived state ─────────────────────────────────────────────────────────────
-    allowRowReorder = computed(() => (this.control()?.allowRowReorder() ?? false) && !this.control()?.groupByField(), ...(ngDevMode ? [{ debugName: "allowRowReorder" }] : /* istanbul ignore next */ []));
+    allowRowReorder = computed(() => (this.control()?.allowRowReorder() ?? false)
+        && !this.control()?.groupByField()
+        && !this.provider().pivotConfig, ...(ngDevMode ? [{ debugName: "allowRowReorder" }] : /* istanbul ignore next */ []));
     /** `true` when there is a committed edit that can be undone (Ctrl+Z). */
     canUndo = computed(() => this.control()?.canUndo() ?? false, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
     /** `true` when there is a previously undone edit that can be re-applied (Ctrl+Y / Ctrl+Shift+Z). */
@@ -5728,6 +6465,7 @@ class AgridComponent {
         autoAddRows: this.autoAddRows,
         expandedGroups: this.groupController.expandedGroups,
         treeConfig: this.treeConfig,
+        pivotMode: this.pivotMode,
         expandedTreeIds: this.treeController.expandedIds,
         pinRow: this.effectivePinRow,
         masterDetail: this.masterDetail,
@@ -5846,6 +6584,7 @@ class AgridComponent {
     destroyRef = inject(DestroyRef);
     _hostEl = inject((ElementRef));
     browser = new AgridBrowserAdapter();
+    viewReady = false;
     rangeController = new AgridRangeController({
         control: this.control,
         dataSource: this.dataSource,
@@ -6009,6 +6748,8 @@ class AgridComponent {
     sidebarTab = this.sidebarController.tab;
     sidebarRow = this.sidebarController.row;
     sidebarHiddenColumns = this.sidebarController.hiddenColumns;
+    /** Original provider columns used as pivot field choices. */
+    sidebarPivotColumns = computed(() => this.provider().columns(), ...(ngDevMode ? [{ debugName: "sidebarPivotColumns" }] : /* istanbul ignore next */ []));
     clipboardHandler = new AgridClipboardHandler({
         control: this.control,
         dataSource: this.dataSource,
@@ -6177,6 +6918,9 @@ class AgridComponent {
         };
     }
     constructor() {
+        // Keep one datasource identity so selection/controllers are not reset whenever source data
+        // causes the computed pivot rows to be regenerated.
+        this.pivotDataSource.linkSignal(this.pivotRows);
         effect(() => this.sidebarController.syncAutoOpen());
         effect(() => {
             const datasource = this.dataSource();
@@ -6190,10 +6934,31 @@ class AgridComponent {
             this.flushDirtyInlineRows(activeRowIndex);
         });
         afterNextRender(() => {
+            this.viewReady = true;
             const wrapper = this.wrapperEl().nativeElement;
+            const renderedRangeSubscription = this.viewport().renderedRangeStream.subscribe(() => this.ensureServerRowsVisible());
             const onKeyDown = (event) => this.onKeyDown(event);
             wrapper.addEventListener('keydown', onKeyDown, { capture: true });
-            this.destroyRef.onDestroy(() => wrapper.removeEventListener('keydown', onKeyDown, { capture: true }));
+            this.destroyRef.onDestroy(() => {
+                renderedRangeSubscription.unsubscribe();
+                wrapper.removeEventListener('keydown', onKeyDown, { capture: true });
+            });
+            this.ensureServerRowsVisible();
+        });
+        // Query changes invalidate lazy blocks. The model owns request cancellation by generation,
+        // so late responses from an old filter/sort state cannot overwrite current rows.
+        effect(() => {
+            const model = this.serverSideRowModel();
+            const ctrl = this.control();
+            if (!model)
+                return;
+            ctrl?.filters();
+            ctrl?.sortOrder();
+            ctrl?.quickFilter();
+            const changed = model.setQuery(ctrl, this.projection.effectiveSortOrder());
+            if (changed && this.viewReady)
+                this.viewport().scrollToIndex(0);
+            queueMicrotask(() => this.ensureServerRowsVisible());
         });
         const onDocumentKeyDown = (event) => {
             if (event.key !== 'Escape' || event.defaultPrevented)
@@ -6281,6 +7046,10 @@ class AgridComponent {
     isDataRowItem(item) {
         return isDataRowItem(item);
     }
+    /** @internal Whether this virtual row is waiting for a server-side block. */
+    isLoadingRow(item) {
+        return !!item && typeof item === 'object' && 'loading' in item;
+    }
     /** @internal */
     isGroupHeaderItem(item) {
         return isGroupHeaderItem(item);
@@ -6391,9 +7160,30 @@ class AgridComponent {
     treeRowExpanded(item) {
         return (isTreeRowItem(item) || isPathTreeNodeItem(item)) && item.expanded;
     }
-    /** @internal Display-only final path segment for a datasource-backed path-tree leaf. */
+    /**
+     * @internal Resolve the non-persistent value shown by a tree cell.
+     *
+     * A formatted path-leaf label wins in the tree column. In every other aggregate column, an
+     * expandable parent shows its descendant rollup instead of its stored value. Returning `null`
+     * delegates to the normal cell formatter. The source row is never mutated.
+     */
     treeCellDisplayOverride(item, col) {
-        return isTreeRowItem(item) && this.isTreeCell(col) ? item.treeLabel ?? null : null;
+        if (!isTreeRowItem(item))
+            return null;
+        if (this.isTreeCell(col) && item.treeLabel != null)
+            return item.treeLabel;
+        if (item.aggregates && col.field in item.aggregates) {
+            return this.getFooterDisplay(col, item.aggregates[col.field]);
+        }
+        return null;
+    }
+    /**
+     * @internal True when a datasource-backed tree parent cell displays a computed rollup.
+     * The template uses this to prevent editing a display-only value into the source parent row.
+     * Generated path branches are not cell components and render their aggregates separately.
+     */
+    isTreeAggregateCell(item, col) {
+        return isTreeRowItem(item) && !!item.aggregates && col.field in item.aggregates;
     }
     /** @internal Whether the configured info action is visible for this cell. */
     showCellInfoIcon(col, row) {
@@ -6494,6 +7284,8 @@ class AgridComponent {
             return '__ghost__';
         if (item === null)
             return -1;
+        if (this.isLoadingRow(item))
+            return `__loading__${item.originalIndex}`;
         if (isGroupHeaderItem(item))
             return `__group__${item.groupLabel}`;
         if (isDetailRowItem(item))
@@ -7112,10 +7904,12 @@ class AgridComponent {
     /** @internal */
     onSidebarToggleColumn(field) {
         this.columnMenuController.toggleColumnVisibility(field);
+        this.emitSettingsChange();
     }
     /** @internal Sets every column in a sidebar header group to the requested visibility. */
     onSidebarToggleColumnGroup(fields, visible) {
         this.columnMenuController.setColumnsVisibility(fields, visible);
+        this.emitSettingsChange();
     }
     /** @internal Mirrors vertical scrolling from the main viewport into both pinned panes. */
     onBodyScroll() {
@@ -7123,6 +7917,16 @@ class AgridComponent {
         this.pinnedViewport()?.scrollToOffset(offset);
         this.rightPinnedViewport()?.scrollToOffset(offset);
     }
+    ensureServerRowsVisible() {
+        const model = this.serverSideRowModel();
+        if (!model || !this.viewReady)
+            return;
+        const viewport = this.viewport();
+        const range = viewport.getRenderedRange();
+        const start = Math.max(0, range.start - model.blockSize);
+        const end = Math.max(range.end, range.start + model.blockSize) + model.blockSize;
+        model.ensureRange(start, end);
+    }
     /** @internal Keeps the row-delete prompt visible while columns scroll horizontally. */
     onHorizontalScroll() {
         this.updateDeleteConfirmationPosition();
@@ -7227,10 +8031,10 @@ class AgridComponent {
     getColumnWidthToken(col) {
         return this.columnSizing.getWidthToken(col);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridComponent, isStandalone: true, selector: "agrid", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", recordEdit: "recordEdit", rowRemoved: "rowRemoved", prepareAddRecord: "prepareAddRecord", rowReorder: "rowReorder", rowSelect: "rowSelect", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", treeNodeClick: "treeNodeClick", treeNodeDoubleClicked: "treeNodeDoubleClicked", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange", quickFilterChange: "quickFilterChange", validationFailed: "validationFailed", cellInfo: "cellInfo", menuBarAction: "menuBarAction" }, host: { properties: { "class.ag-zebra": "zebraStripes()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "pinnedViewport", first: true, predicate: ["pinnedViewport"], descendants: true, isSignal: true }, { propertyName: "rightPinnedViewport", first: true, predicate: ["rightPinnedViewport"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "horizontalScrollerEl", first: true, predicate: ["horizontalScroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\" [attr.aria-busy]=\"loading() ? 'true' : null\"\n  (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu(); closeMenuBarMenu()\">\n  @if (visibleMenuBarItems().length > 0 || enableQuickFilter()) {\n  <div class=\"ag-toolbar\">\n    @if (visibleMenuBarItems().length > 0) {\n    <agrid-menu-bar [items]=\"visibleMenuBarItems()\" [context]=\"menuBarContext()\"\n      [label]=\"localeText().actions\" [openItemId]=\"openMenuBarItemId()\"\n      (openItemIdChange)=\"onMenuBarOpenItemChange($event)\" (action)=\"menuBarAction.emit($event)\" />\n    }\n    @if (enableQuickFilter()) {\n    <input class=\"ag-quick-filter\" type=\"search\" [value]=\"quickFilterValue()\" (input)=\"onQuickFilterInput($event)\"\n      [placeholder]=\"localeText().quickFilterPlaceholder\" [attr.aria-label]=\"localeText().quickFilterPlaceholder\" />\n    }\n  </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.data-control]=\"true\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (canToggleDetail(item)) {\n              <button class=\"ag-detail-toggle\" type=\"button\"\n                [class.ag-detail-toggle--expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().toggleDetail\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"onDetailToggle(item.originalIndex); $event.stopPropagation()\">\u25B6</button>\n              }\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"$event.stopPropagation()\" (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [agridVariableRowSize]=\"itemSizes()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"leftRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                @if (getMenuFilterType(col.field)) {\n                <button type=\"button\" class=\"ag-filter-condition-btn\"\n                  [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                  [title]=\"localeText().filterConditionMenu\"\n                  [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n                }\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n                (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <ng-template #bodyRow let-item let-ariaIndex=\"ariaIndex\">\n            <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\"\n                [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n                [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\"\n                (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n                (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\" [innerHTML]=\"detailHtml(item)\"></div>\n              } @else if (isPathTreeNodeItem(item)) {\n              <div class=\"ag-path-tree-content\" [style.min-width.px]=\"scrollableTotalWidth()\"\n                [style.padding-left.px]=\"treeRowLevel(item) * 16 + 8\"\n                (click)=\"onTreeNodeClick(item); $event.stopPropagation()\"\n                (dblclick)=\"onTreeNodeDoubleClick(item); $event.stopPropagation()\">\n                <button type=\"button\" class=\"ag-tree-twisty\"\n                  [class.ag-tree-twisty--expanded]=\"treeRowExpanded(item)\"\n                  [attr.aria-expanded]=\"treeRowExpanded(item)\"\n                  (click)=\"onTreeToggle(item); $event.stopPropagation()\">\u25B6</button>\n                <span>{{ pathTreeLabel(item) }}</span>\n              </div>\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                    @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                    <span class=\"ag-group-aggregate\">\n                      <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                      <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                      {{ getFooterDisplay(col, aggs[col.field]) }}\n                    </span>\n                    }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\" [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\" [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\" type=\"button\"\n                  (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </ng-template>\n\n          @if (hasPinnedTopRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--top\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedTopItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n            }\n          </div>\n          }\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [agridVariableRowSize]=\"itemSizes()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n              <ng-container [ngTemplateOutlet]=\"bodyRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n\n          @if (hasPinnedBottomRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--bottom\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedBottomItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n            }\n          </div>\n          }\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #rightRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\" [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [agridVariableRowSize]=\"itemSizes()\" [style.width.px]=\"rightPinnedPaneWidth()\"\n          (scroll)=\"onRightPinnedBodyScroll()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"rightRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar [open]=\"sidebarOpen()\" [activeTab]=\"sidebarTab()\" [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\" [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\"\n      [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\" (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\" (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\" (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\" (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  @if(hasContextMenuEntries()) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @if (!treeConfig()) {\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    }\n    @if (!readonlyGrid()) {\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n    }\n  </div>\n  }\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{\n      localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow\n      }}</button>\n    @if (!treeConfig()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    }\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{\n      localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">{{\n      localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\"\n      [disabled]=\"item.disabled\" (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\" [showColumnActions]=\"!!control()\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"!!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showValueFilter]=\"!serverSideFiltering()\" [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\" (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\" [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\"\n    (sort)=\"onMenuSort(menu.field, $event)\" (resetSort)=\"onMenuResetSort(menu.field, $event)\"\n    (autosize)=\"onMenuAutosizeColumn(menu.field)\" (togglePin)=\"onMenuTogglePin(menu.field)\"\n    (togglePinRight)=\"onMenuTogglePinRight(menu.field)\" (hide)=\"onMenuHideColumn(menu.field)\"\n    (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\" (clearFilter)=\"onMenuClearFilter(menu.field)\"\n    (clearAll)=\"onMenuClearAll()\" (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\" [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-condition-btn{flex:0 0 24px;height:20px;padding:0;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);cursor:pointer}.ag-filter-condition-btn:hover,.ag-filter-condition-btn:focus-visible{border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg)}.ag-filter-condition-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-path-tree-content{display:flex;align-items:center;gap:4px;height:100%;box-sizing:border-box;color:var(--agrid-color-text);font-weight:600;border-bottom:1px solid var(--agrid-color-border)}.ag-path-tree-content .ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;font-size:10px;transition:transform .12s ease}.ag-path-tree-content .ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{margin-left:auto;width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-quick-filter:focus{border-color:var(--agrid-color-accent-border)}.ag-detail-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;font-size:9px;line-height:1;color:var(--agrid-color-text-muted);transition:transform .12s ease,color .12s ease}.ag-detail-toggle:hover{color:var(--agrid-color-text)}.ag-detail-toggle--expanded{transform:rotate(90deg)}.ag-detail-row{display:block;position:relative;box-sizing:border-box}.ag-detail-panel{box-sizing:border-box;height:100%;overflow:auto;padding:8px 12px;background:var(--agrid-color-bg-subtle);border-bottom:1px solid var(--agrid-color-border)}.ag-pinned-rows{position:relative;z-index:3;flex:none;background:var(--agrid-color-bg)}.ag-pinned-rows--top{box-shadow:0 2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows--bottom{box-shadow:0 -2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows .ag-row{background:var(--agrid-color-bg-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AgridVariableRowSizeDirective, selector: "cdk-virtual-scroll-viewport[agridVariableRowSize]", inputs: ["agridVariableRowSize"] }, { kind: "component", type: AgridCellComponent, selector: "agrid-cell", inputs: ["col", "rowIndex", "colIndex", "value", "displayValueOverride", "row", "locale", "selected", "editing", "editable", "showInfoIcon", "error", "treeCell", "treeLevel", "treeExpandable", "treeExpanded", "seedChar", "selectTextOnEdit"], outputs: ["treeToggle", "activate", "startEdit", "booleanToggle", "infoClick", "draftChange"] }, { kind: "component", type: AgridMenuBarComponent, selector: "agrid-menu-bar", inputs: ["items", "context", "label", "openItemId"], outputs: ["action", "openItemIdChange"] }, { kind: "component", type: AgridColumnMenuComponent, selector: "agrid-column-menu", inputs: ["localeText", "x", "y", "header", "sortDir", "sortable", "showColumnActions", "pinned", "groupable", "grouped", "filterable", "showValueFilter", "filterType", "operator", "operand", "operand2", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["operatorChange", "operandChange", "operand2Change", "sort", "resetSort", "autosize", "togglePin", "togglePinRight", "hide", "toggleGroup", "clearFilter", "clearAll", "searchChange", "toggleAll", "toggleValue", "setAggregate"] }, { kind: "component", type: AgridFindPanelComponent, selector: "agrid-find-panel", inputs: ["localeText", "query", "matchCount", "activeIndex"], outputs: ["queryChange", "next", "previous", "close"] }, { kind: "component", type: AgridSidebarComponent, selector: "agrid-sidebar", inputs: ["open", "activeTab", "columns", "headerGroups", "row", "rowIndex", "hiddenColumns", "locale", "localeText", "readonlyGrid", "useSidebarEditor", "isCellEditable", "errors"], outputs: ["close", "tabChange", "toggleColumn", "toggleColumnGroup", "detailEdit", "save"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridComponent, isStandalone: true, selector: "agrid", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", recordEdit: "recordEdit", rowRemoved: "rowRemoved", prepareAddRecord: "prepareAddRecord", rowReorder: "rowReorder", rowSelect: "rowSelect", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", treeNodeClick: "treeNodeClick", settingsChange: "settingsChange", treeNodeDoubleClicked: "treeNodeDoubleClicked", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange", quickFilterChange: "quickFilterChange", validationFailed: "validationFailed", cellInfo: "cellInfo", menuBarAction: "menuBarAction" }, host: { properties: { "class.ag-zebra": "zebraStripes()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "pinnedViewport", first: true, predicate: ["pinnedViewport"], descendants: true, isSignal: true }, { propertyName: "rightPinnedViewport", first: true, predicate: ["rightPinnedViewport"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "horizontalScrollerEl", first: true, predicate: ["horizontalScroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\" [attr.aria-busy]=\"loading() ? 'true' : null\"\n  (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu(); closeMenuBarMenu()\">\n  @if (visibleMenuBarItems().length > 0 || enableQuickFilter()) {\n  <div class=\"ag-toolbar\">\n    @if (visibleMenuBarItems().length > 0) {\n    <agrid-menu-bar [items]=\"visibleMenuBarItems()\" [context]=\"menuBarContext()\" [label]=\"localeText().actions\"\n      [openItemId]=\"openMenuBarItemId()\" (openItemIdChange)=\"onMenuBarOpenItemChange($event)\"\n      (action)=\"menuBarAction.emit($event)\" />\n    }\n    @if (enableQuickFilter()) {\n    <input class=\"ag-quick-filter\" type=\"search\" [value]=\"quickFilterValue()\" (input)=\"onQuickFilterInput($event)\"\n      [placeholder]=\"localeText().quickFilterPlaceholder\" [attr.aria-label]=\"localeText().quickFilterPlaceholder\" />\n    }\n  </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}\n                @if (pivotHeaderLabel() && pivotRowColumnField()!==col.field) {\n                ({{pivotHeaderLabel()}})\n                }\n\n              </span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\" [attr.data-control]=\"true\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || 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              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (canToggleDetail(item)) {\n              <button class=\"ag-detail-toggle\" type=\"button\"\n                [class.ag-detail-toggle--expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().toggleDetail\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"onDetailToggle(item.originalIndex); $event.stopPropagation()\">\u25B6</button>\n              }\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"$event.stopPropagation()\" (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [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]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex) && !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-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (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 (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [agridVariableRowSize]=\"itemSizes()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"leftRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}\n                  @if (pivotHeaderLabel() && pivotRowColumnField()!==col.field) {\n                  ({{pivotHeaderLabel()}})\n                  }\n\n                </span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                @if (getMenuFilterType(col.field)) {\n                <button type=\"button\" class=\"ag-filter-condition-btn\"\n                  [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                  [title]=\"localeText().filterConditionMenu\"\n                  [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n                }\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n                (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <ng-template #bodyRow let-item let-ariaIndex=\"ariaIndex\">\n            <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || 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              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [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]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [editable]=\"isColEditable(col, item.originalIndex) && !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-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\"\n                (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n                (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (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 (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\" [innerHTML]=\"detailHtml(item)\"></div>\n              } @else if (isPathTreeNodeItem(item)) {\n              <div class=\"ag-path-tree-content\" [style.min-width.px]=\"scrollableTotalWidth()\"\n                [style.padding-left.px]=\"treeRowLevel(item) * 16 + 8\"\n                (click)=\"onTreeNodeClick(item); $event.stopPropagation()\"\n                (dblclick)=\"onTreeNodeDoubleClick(item); $event.stopPropagation()\">\n                <button type=\"button\" class=\"ag-tree-twisty\" [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 (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}\n                @if (pivotHeaderLabel() && pivotRowColumnField()!==col.field) {\n                ({{pivotHeaderLabel()}})\n                }\n              </span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #rightRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [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]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex) && !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-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (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 (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [agridVariableRowSize]=\"itemSizes()\" [style.width.px]=\"rightPinnedPaneWidth()\"\n          (scroll)=\"onRightPinnedBodyScroll()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"rightRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar [open]=\"sidebarOpen()\" [activeTab]=\"sidebarTab()\" [columns]=\"colDefs()\"\n      [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 (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\" (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\" (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  @if(hasContextMenuEntries()) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @if (!treeConfig()) {\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    }\n    @if (!readonlyGrid()) {\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n    }\n  </div>\n  }\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{\n      localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow\n      }}</button>\n    @if (!treeConfig()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    }\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{\n      localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">{{\n      localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\"\n      [disabled]=\"item.disabled\" (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\" [showColumnActions]=\"!!control()\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"!!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showValueFilter]=\"!serverSideFiltering() || !!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    (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>", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-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-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-condition-btn{flex:0 0 24px;height:20px;padding:0;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);cursor:pointer}.ag-filter-condition-btn:hover,.ag-filter-condition-btn:focus-visible{border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg)}.ag-filter-condition-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-path-tree-content{display:flex;align-items:center;gap:4px;height:100%;box-sizing:border-box;color:var(--agrid-color-text);font-weight:600;border-bottom:1px solid var(--agrid-color-border)}.ag-path-tree-content .ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;font-size:10px;transition:transform .12s ease}.ag-path-tree-content .ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{margin-left:auto;width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-quick-filter:focus{border-color:var(--agrid-color-accent-border)}.ag-detail-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;font-size:9px;line-height:1;color:var(--agrid-color-text-muted);transition:transform .12s ease,color .12s ease}.ag-detail-toggle:hover{color:var(--agrid-color-text)}.ag-detail-toggle--expanded{transform:rotate(90deg)}.ag-detail-row{display:block;position:relative;box-sizing:border-box}.ag-detail-panel{box-sizing:border-box;height:100%;overflow:auto;padding:8px 12px;background:var(--agrid-color-bg-subtle);border-bottom:1px solid var(--agrid-color-border)}.ag-pinned-rows{position:relative;z-index:3;flex:none;background:var(--agrid-color-bg)}.ag-pinned-rows--top{box-shadow:0 2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows--bottom{box-shadow:0 -2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows .ag-row{background:var(--agrid-color-bg-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AgridVariableRowSizeDirective, selector: "cdk-virtual-scroll-viewport[agridVariableRowSize]", inputs: ["agridVariableRowSize"] }, { kind: "component", type: AgridCellComponent, selector: "agrid-cell", inputs: ["col", "rowIndex", "colIndex", "value", "displayValueOverride", "row", "locale", "selected", "editing", "editable", "showInfoIcon", "error", "treeCell", "treeLevel", "treeExpandable", "treeExpanded", "seedChar", "selectTextOnEdit"], outputs: ["treeToggle", "activate", "startEdit", "booleanToggle", "infoClick", "draftChange"] }, { kind: "component", type: AgridMenuBarComponent, selector: "agrid-menu-bar", inputs: ["items", "context", "label", "openItemId"], outputs: ["action", "openItemIdChange"] }, { kind: "component", type: AgridColumnMenuComponent, selector: "agrid-column-menu", inputs: ["localeText", "x", "y", "header", "sortDir", "sortable", "showColumnActions", "pinned", "groupable", "grouped", "filterable", "showValueFilter", "filterType", "operator", "operand", "operand2", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["operatorChange", "operandChange", "operand2Change", "sort", "resetSort", "autosize", "togglePin", "togglePinRight", "hide", "toggleGroup", "clearFilter", "clearAll", "searchChange", "toggleAll", "toggleValue", "setAggregate"] }, { kind: "component", type: AgridFindPanelComponent, selector: "agrid-find-panel", inputs: ["localeText", "query", "matchCount", "activeIndex"], outputs: ["queryChange", "next", "previous", "close"] }, { kind: "component", type: AgridSidebarComponent, selector: "agrid-sidebar", inputs: ["open", "activeTab", "columns", "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.15", ngImport: i0, type: AgridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ScrollingModule,
@@ -7245,8 +8049,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         '[class.ag-zebra]': 'zebraStripes()',
                         '[style.min-height]': 'minHeight()',
                         '[style.max-height]': 'maxHeight()',
-                    }, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\" [attr.aria-busy]=\"loading() ? 'true' : null\"\n  (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\" (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu(); closeMenuBarMenu()\">\n  @if (visibleMenuBarItems().length > 0 || enableQuickFilter()) {\n  <div class=\"ag-toolbar\">\n    @if (visibleMenuBarItems().length > 0) {\n    <agrid-menu-bar [items]=\"visibleMenuBarItems()\" [context]=\"menuBarContext()\"\n      [label]=\"localeText().actions\" [openItemId]=\"openMenuBarItemId()\"\n      (openItemIdChange)=\"onMenuBarOpenItemChange($event)\" (action)=\"menuBarAction.emit($event)\" />\n    }\n    @if (enableQuickFilter()) {\n    <input class=\"ag-quick-filter\" type=\"search\" [value]=\"quickFilterValue()\" (input)=\"onQuickFilterInput($event)\"\n      [placeholder]=\"localeText().quickFilterPlaceholder\" [attr.aria-label]=\"localeText().quickFilterPlaceholder\" />\n    }\n  </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.data-control]=\"true\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (canToggleDetail(item)) {\n              <button class=\"ag-detail-toggle\" type=\"button\"\n                [class.ag-detail-toggle--expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().toggleDetail\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"onDetailToggle(item.originalIndex); $event.stopPropagation()\">\u25B6</button>\n              }\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"$event.stopPropagation()\" (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [agridVariableRowSize]=\"itemSizes()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"leftRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                @if (getMenuFilterType(col.field)) {\n                <button type=\"button\" class=\"ag-filter-condition-btn\"\n                  [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                  [title]=\"localeText().filterConditionMenu\"\n                  [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n                }\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n                (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <ng-template #bodyRow let-item let-ariaIndex=\"ariaIndex\">\n            <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n                [treeCell]=\"isTreeCell(col)\"\n                [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n                [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\"\n                (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n                (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\" [innerHTML]=\"detailHtml(item)\"></div>\n              } @else if (isPathTreeNodeItem(item)) {\n              <div class=\"ag-path-tree-content\" [style.min-width.px]=\"scrollableTotalWidth()\"\n                [style.padding-left.px]=\"treeRowLevel(item) * 16 + 8\"\n                (click)=\"onTreeNodeClick(item); $event.stopPropagation()\"\n                (dblclick)=\"onTreeNodeDoubleClick(item); $event.stopPropagation()\">\n                <button type=\"button\" class=\"ag-tree-twisty\"\n                  [class.ag-tree-twisty--expanded]=\"treeRowExpanded(item)\"\n                  [attr.aria-expanded]=\"treeRowExpanded(item)\"\n                  (click)=\"onTreeToggle(item); $event.stopPropagation()\">\u25B6</button>\n                <span>{{ pathTreeLabel(item) }}</span>\n              </div>\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                    @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                    <span class=\"ag-group-aggregate\">\n                      <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                      <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                      {{ getFooterDisplay(col, aggs[col.field]) }}\n                    </span>\n                    }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\" [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\" [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\" type=\"button\"\n                  (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </ng-template>\n\n          @if (hasPinnedTopRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--top\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedTopItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n            }\n          </div>\n          }\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [agridVariableRowSize]=\"itemSizes()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n              <ng-container [ngTemplateOutlet]=\"bodyRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n            </ng-container>\n          </cdk-virtual-scroll-viewport>\n\n          @if (hasPinnedBottomRows()) {\n          <div class=\"ag-pinned-rows ag-pinned-rows--bottom\" [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (item of pinnedBottomItems(); track item.originalIndex) {\n            <ng-container [ngTemplateOutlet]=\"bodyRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n            }\n          </div>\n          }\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #rightRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\" [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [showInfoIcon]=\"showCellInfoIcon(col, item.row)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\" [selectTextOnEdit]=\"selectTextOnEdit()\"\n              [treeCell]=\"isTreeCell(col)\"\n              [treeLevel]=\"treeRowLevel(item)\" [treeExpandable]=\"treeRowExpandable(item)\"\n              [treeExpanded]=\"treeRowExpanded(item)\" [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n              (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [agridVariableRowSize]=\"itemSizes()\" [style.width.px]=\"rightPinnedPaneWidth()\"\n          (scroll)=\"onRightPinnedBodyScroll()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"rightRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar [open]=\"sidebarOpen()\" [activeTab]=\"sidebarTab()\" [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\" [row]=\"sidebarRow()\" [rowIndex]=\"selectedRowIndex()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\" [locale]=\"locale()\"\n      [localeText]=\"localeText()\" [readonlyGrid]=\"readonlyGrid()\" [useSidebarEditor]=\"useSidebarEditor()\"\n      [isCellEditable]=\"isCellEditableForRow\"\n      [errors]=\"sidebarValidationErrors()\" (close)=\"toggleSidebar()\" (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\" (save)=\"onSidebarDetailSave($event)\" />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\" (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\" (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  @if(hasContextMenuEntries()) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @if (!treeConfig()) {\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    }\n    @if (!readonlyGrid()) {\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n    }\n  </div>\n  }\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{\n      localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow\n      }}</button>\n    @if (!treeConfig()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    }\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{\n      localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">{{\n      localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\"\n      [disabled]=\"item.disabled\" (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\" [showColumnActions]=\"!!control()\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"!!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showValueFilter]=\"!serverSideFiltering()\" [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\" (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\" [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\" [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\"\n    (sort)=\"onMenuSort(menu.field, $event)\" (resetSort)=\"onMenuResetSort(menu.field, $event)\"\n    (autosize)=\"onMenuAutosizeColumn(menu.field)\" (togglePin)=\"onMenuTogglePin(menu.field)\"\n    (togglePinRight)=\"onMenuTogglePinRight(menu.field)\" (hide)=\"onMenuHideColumn(menu.field)\"\n    (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\" (clearFilter)=\"onMenuClearFilter(menu.field)\"\n    (clearAll)=\"onMenuClearAll()\" (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\" [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-condition-btn{flex:0 0 24px;height:20px;padding:0;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);cursor:pointer}.ag-filter-condition-btn:hover,.ag-filter-condition-btn:focus-visible{border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg)}.ag-filter-condition-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-path-tree-content{display:flex;align-items:center;gap:4px;height:100%;box-sizing:border-box;color:var(--agrid-color-text);font-weight:600;border-bottom:1px solid var(--agrid-color-border)}.ag-path-tree-content .ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;font-size:10px;transition:transform .12s ease}.ag-path-tree-content .ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{margin-left:auto;width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-quick-filter:focus{border-color:var(--agrid-color-accent-border)}.ag-detail-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;font-size:9px;line-height:1;color:var(--agrid-color-text-muted);transition:transform .12s ease,color .12s ease}.ag-detail-toggle:hover{color:var(--agrid-color-text)}.ag-detail-toggle--expanded{transform:rotate(90deg)}.ag-detail-row{display:block;position:relative;box-sizing:border-box}.ag-detail-panel{box-sizing:border-box;height:100%;overflow:auto;padding:8px 12px;background:var(--agrid-color-bg-subtle);border-bottom:1px solid var(--agrid-color-border)}.ag-pinned-rows{position:relative;z-index:3;flex:none;background:var(--agrid-color-bg)}.ag-pinned-rows--top{box-shadow:0 2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows--bottom{box-shadow:0 -2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows .ag-row{background:var(--agrid-color-bg-subtle)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], recordEdit: [{ type: i0.Output, args: ["recordEdit"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], prepareAddRecord: [{ type: i0.Output, args: ["prepareAddRecord"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], treeNodeClick: [{ type: i0.Output, args: ["treeNodeClick"] }], treeNodeDoubleClicked: [{ type: i0.Output, args: ["treeNodeDoubleClicked"] }], rowChanged: [{ type: i0.Output, args: ["rowChanged"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], quickFilterChange: [{ type: i0.Output, args: ["quickFilterChange"] }], validationFailed: [{ type: i0.Output, args: ["validationFailed"] }], cellInfo: [{ type: i0.Output, args: ["cellInfo"] }], menuBarAction: [{ type: i0.Output, args: ["menuBarAction"] }], viewport: [{ type: i0.ViewChild, args: ['scrollViewport', { isSignal: true }] }], pinnedViewport: [{ type: i0.ViewChild, args: ['pinnedViewport', { isSignal: true }] }], rightPinnedViewport: [{ type: i0.ViewChild, args: ['rightPinnedViewport', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], horizontalScrollerEl: [{ type: i0.ViewChild, args: ['horizontalScroller', { isSignal: true }] }] } });
+                    }, 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)=\"menuBarAction.emit($event)\" />\n    }\n    @if (enableQuickFilter()) {\n    <input class=\"ag-quick-filter\" type=\"search\" [value]=\"quickFilterValue()\" (input)=\"onQuickFilterInput($event)\"\n      [placeholder]=\"localeText().quickFilterPlaceholder\" [attr.aria-label]=\"localeText().quickFilterPlaceholder\" />\n    }\n  </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}\n                @if (pivotHeaderLabel() && pivotRowColumnField()!==col.field) {\n                ({{pivotHeaderLabel()}})\n                }\n\n              </span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #leftRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\" [attr.data-control]=\"true\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || 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              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (canToggleDetail(item)) {\n              <button class=\"ag-detail-toggle\" type=\"button\"\n                [class.ag-detail-toggle--expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-expanded]=\"isDetailExpanded(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().toggleDetail\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"onDetailToggle(item.originalIndex); $event.stopPropagation()\">\u25B6</button>\n              }\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\" (pointerdown)=\"$event.stopPropagation()\"\n                (click)=\"$event.stopPropagation()\" (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [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]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex) && !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-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (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 (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [agridVariableRowSize]=\"itemSizes()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"leftRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body\" [style.width.px]=\"pinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"leftRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}\n                  @if (pivotHeaderLabel() && pivotRowColumnField()!==col.field) {\n                  ({{pivotHeaderLabel()}})\n                  }\n\n                </span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                @if (getMenuFilterType(col.field)) {\n                <button type=\"button\" class=\"ag-filter-condition-btn\"\n                  [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                  [title]=\"localeText().filterConditionMenu\"\n                  [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n                }\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n                (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <ng-template #bodyRow let-item let-ariaIndex=\"ariaIndex\">\n            <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\" [class.ag-detail-row]=\"isDetailRowItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowPx(item)\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || 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              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [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]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [editable]=\"isColEditable(col, item.originalIndex) && !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-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\"\n                (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n                (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (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 (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\" [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else if (isDetailRowItem(item)) {\n              <div class=\"ag-detail-panel\" [style.height.px]=\"detailRowHeight()\"\n                [style.min-width.px]=\"scrollableTotalWidth()\" [innerHTML]=\"detailHtml(item)\"></div>\n              } @else if (isPathTreeNodeItem(item)) {\n              <div class=\"ag-path-tree-content\" [style.min-width.px]=\"scrollableTotalWidth()\"\n                [style.padding-left.px]=\"treeRowLevel(item) * 16 + 8\"\n                (click)=\"onTreeNodeClick(item); $event.stopPropagation()\"\n                (dblclick)=\"onTreeNodeDoubleClick(item); $event.stopPropagation()\">\n                <button type=\"button\" class=\"ag-tree-twisty\" [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 (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\" [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}\n                @if (pivotHeaderLabel() && pivotRowColumnField()!==col.field) {\n                ({{pivotHeaderLabel()}})\n                }\n              </span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\" (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              @if (getMenuFilterType(col.field)) {\n              <button type=\"button\" class=\"ag-filter-condition-btn\"\n                [class.ag-filter-condition-btn--active]=\"!!getMenuOperator(col.field)\"\n                [title]=\"localeText().filterConditionMenu\"\n                [attr.aria-label]=\"localeText().filterConditionMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">{{ getConditionButtonLabel(col.field) }}</button>\n              }\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\" (pointerdown)=\"$event.stopPropagation()\"\n              (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <ng-template #rightRow let-item let-ariaIndex=\"ariaIndex\">\n          <div role=\"row\" [attr.aria-rowindex]=\"ariaIndex\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item) && !isDetailRowItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-detail-row]=\"isDetailRowItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [class]=\"isDataRowItem(item) ? getRowClass(item.row, item.originalIndex) : ''\"\n            [style.height.px]=\"rowPx(item)\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || isLoadingRow(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [displayValueOverride]=\"treeCellDisplayOverride(item, col)\" [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]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [editable]=\"isColEditable(col, item.originalIndex) && !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-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n              (infoClick)=\"onCellInfo(item.originalIndex, col, item.row)\" (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 (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            }\n          </div>\n        </ng-template>\n\n        @if (hasPinnedTopRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--top ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedTopItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + $index }\" />\n          }\n        </div>\n        }\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [agridVariableRowSize]=\"itemSizes()\" [style.width.px]=\"rightPinnedPaneWidth()\"\n          (scroll)=\"onRightPinnedBodyScroll()\">\n          <ng-container *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\">\n            <ng-container [ngTemplateOutlet]=\"rightRow\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: di + headerRowCount() + 1 + pinnedTopItems().length }\" />\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n\n        @if (hasPinnedBottomRows()) {\n        <div class=\"ag-pinned-rows ag-pinned-rows--bottom ag-pinned-body ag-right-pinned-body\"\n          [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (item of pinnedBottomItems(); track item.originalIndex) {\n          <ng-container [ngTemplateOutlet]=\"rightRow\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, ariaIndex: headerRowCount() + 1 + pinnedTopItems().length + displayItems().length + $index }\" />\n          }\n        </div>\n        }\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar [open]=\"sidebarOpen()\" [activeTab]=\"sidebarTab()\" [columns]=\"colDefs()\"\n      [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 (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\" [disabled]=\"control()!.currentPage() <= 1\"\n      (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\" (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\" (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  @if(hasContextMenuEntries()) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @if (!treeConfig()) {\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    }\n    @if (!readonlyGrid()) {\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n    }\n  </div>\n  }\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{\n      localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow\n      }}</button>\n    @if (!treeConfig()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @if (rowPinState(menu.rowIndex)) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, null)\">{{ localeText().unpinRow\n      }}</button>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'top')\">{{ localeText().pinRowTop\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onPinRow(menu.rowIndex, 'bottom')\">{{\n      localeText().pinRowBottom }}</button>\n    }\n    }\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{\n      localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">{{\n      localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\"\n      [disabled]=\"item.disabled\" (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\" [showColumnActions]=\"!!control()\"\n    [pinned]=\"getColumnPinState(menu.field)\" [groupable]=\"!!getColDef(menu.field)?.groupable\"\n    [grouped]=\"isGroupedByField(menu.field)\" [filterable]=\"!!getColDef(menu.field)?.filterable\"\n    [showValueFilter]=\"!serverSideFiltering() || !!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    (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>", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-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-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-condition-btn{flex:0 0 24px;height:20px;padding:0;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text-muted);cursor:pointer}.ag-filter-condition-btn:hover,.ag-filter-condition-btn:focus-visible{border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg)}.ag-filter-condition-btn--active{border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle);color:var(--agrid-color-accent-fg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-path-tree-content{display:flex;align-items:center;gap:4px;height:100%;box-sizing:border-box;color:var(--agrid-color-text);font-weight:600;border-bottom:1px solid var(--agrid-color-border)}.ag-path-tree-content .ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;color:inherit;background:transparent;cursor:pointer;font-size:10px;transition:transform .12s ease}.ag-path-tree-content .ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{margin-left:auto;width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-quick-filter:focus{border-color:var(--agrid-color-accent-border)}.ag-detail-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;font-size:9px;line-height:1;color:var(--agrid-color-text-muted);transition:transform .12s ease,color .12s ease}.ag-detail-toggle:hover{color:var(--agrid-color-text)}.ag-detail-toggle--expanded{transform:rotate(90deg)}.ag-detail-row{display:block;position:relative;box-sizing:border-box}.ag-detail-panel{box-sizing:border-box;height:100%;overflow:auto;padding:8px 12px;background:var(--agrid-color-bg-subtle);border-bottom:1px solid var(--agrid-color-border)}.ag-pinned-rows{position:relative;z-index:3;flex:none;background:var(--agrid-color-bg)}.ag-pinned-rows--top{box-shadow:0 2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows--bottom{box-shadow:0 -2px 4px -2px var(--agrid-color-shadow)}.ag-pinned-rows .ag-row{background:var(--agrid-color-bg-subtle)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], recordEdit: [{ type: i0.Output, args: ["recordEdit"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], prepareAddRecord: [{ type: i0.Output, args: ["prepareAddRecord"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], treeNodeClick: [{ type: i0.Output, args: ["treeNodeClick"] }], 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"] }], 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. */
@@ -7412,10 +8216,10 @@ class AgridPageSelectorComponent {
     idsEqual(left, right) {
         return right !== null && left === right;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridPageSelectorComponent, isStandalone: true, selector: "agrid-page-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, selectedPageNumber: { classPropertyName: "selectedPageNumber", publicName: "selectedPageNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectPage: "selectPage" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, ngImport: i0, template: "<div class=\"ag-page-selector\" [class.ag-page-selector--disabled]=\"disabled()\">\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasPrevious()\"\n    [attr.aria-label]=\"previousLabel()\" [title]=\"previousLabel()\" (click)=\"previous()\">\n    <span aria-hidden=\"true\">&#8249;</span>\n  </button>\n\n  <div class=\"ag-page-combo\">\n    <div class=\"ag-page-input-group\" [class.ag-page-input-group--open]=\"menuOpen()\"\n      [class.ag-page-input-group--invalid]=\"invalid()\">\n      <input class=\"ag-page-input\" type=\"text\" inputmode=\"text\" autocomplete=\"off\"\n        role=\"combobox\" [value]=\"draft()\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"inputLabel()\" [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"menuOpen() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"menuOpen() && focusedOptionIndex() >= 0 ? optionId(focusedOptionIndex()) : null\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (input)=\"onInput($event)\" (keydown)=\"onInputKeydown($event)\" />\n      <button type=\"button\" class=\"ag-page-trigger\" [disabled]=\"disabled() || items().length === 0\"\n        [attr.aria-label]=\"menuLabel()\" [title]=\"menuLabel()\"\n        [attr.aria-expanded]=\"menuOpen()\" aria-haspopup=\"listbox\"\n        (click)=\"toggleMenu($event)\">\n        <span aria-hidden=\"true\">&#9662;</span>\n      </button>\n    </div>\n\n    @if (menuOpen()) {\n      <div [id]=\"listboxId\" class=\"ag-page-options\" role=\"listbox\"\n        [attr.aria-label]=\"menuLabel()\" (pointerdown)=\"$event.stopPropagation()\">\n        @for (item of items(); track item.id; let index = $index) {\n          <button type=\"button\" class=\"ag-page-option\" role=\"option\" [id]=\"optionId(index)\"\n            [class.ag-page-option--selected]=\"isSelected(item)\"\n            [class.ag-page-option--focused]=\"focusedOptionIndex() === index\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            (mouseenter)=\"focusedOptionIndex.set(index)\" (click)=\"choose(item)\">\n            <span class=\"ag-page-option-id\">{{ item.pageNumber }}</span>\n            <span class=\"ag-page-option-label\">{{ item.label }}</span>\n          </button>\n        } @empty {\n          <div class=\"ag-page-empty\">{{ emptyText() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasNext()\"\n    [attr.aria-label]=\"nextLabel()\" [title]=\"nextLabel()\" (click)=\"next()\">\n    <span aria-hidden=\"true\">&#8250;</span>\n  </button>\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2)}}:host{display:inline-block;color:var(--agrid-color-text);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-page-selector{display:inline-flex;align-items:center;gap:4px}.ag-page-nav,.ag-page-trigger{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-nav{width:32px;border-radius:4px;font-size:20px}.ag-page-trigger{width:30px;border-width:0 0 0 1px;font-size:10px}.ag-page-nav:active:not(:disabled),.ag-page-trigger:active:not(:disabled),.ag-page-option:active{transform:scale(.97)}.ag-page-nav:disabled,.ag-page-trigger:disabled,.ag-page-input:disabled{opacity:.48;cursor:not-allowed}.ag-page-nav:focus-visible,.ag-page-trigger:focus-visible,.ag-page-input:focus-visible,.ag-page-option:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-page-combo{position:relative;width:clamp(150px,24vw,230px)}.ag-page-input-group{display:flex;height:32px;overflow:hidden;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg)}.ag-page-input-group:focus-within,.ag-page-input-group--open{border-color:var(--agrid-color-accent)}.ag-page-input-group--invalid{border-color:var(--agrid-color-danger, #d1242f)}.ag-page-input{min-width:0;flex:1;padding:0 9px;border:0;outline:0;background:transparent;color:var(--agrid-color-text);font:inherit}.ag-page-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;width:max(100%,220px);max-width:min(320px,calc(100vw - 24px));max-height:280px;overflow-y:auto;padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top right}.ag-page-option{display:grid;grid-template-columns:minmax(32px,auto) minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:34px;padding:5px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-option--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-page-option-id{color:var(--agrid-color-text-muted);font-variant-numeric:tabular-nums}.ag-page-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-page-empty{padding:12px 8px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-page-nav:hover:not(:disabled),.ag-page-trigger:hover:not(:disabled),.ag-page-option--focused:not(.ag-page-option--selected){background:var(--agrid-color-bg-muted)}}@media(max-width:420px){.ag-page-combo{width:min(210px,calc(100vw - 92px))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridPageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridPageSelectorComponent, isStandalone: true, selector: "agrid-page-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, selectedPageNumber: { classPropertyName: "selectedPageNumber", publicName: "selectedPageNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, inputLabel: { classPropertyName: "inputLabel", publicName: "inputLabel", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectPage: "selectPage" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } }, ngImport: i0, template: "<div class=\"ag-page-selector\" [class.ag-page-selector--disabled]=\"disabled()\">\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasPrevious()\"\n    [attr.aria-label]=\"previousLabel()\" [title]=\"previousLabel()\" (click)=\"previous()\">\n    <span aria-hidden=\"true\">&#8249;</span>\n  </button>\n\n  <div class=\"ag-page-combo\">\n    <div class=\"ag-page-input-group\" [class.ag-page-input-group--open]=\"menuOpen()\"\n      [class.ag-page-input-group--invalid]=\"invalid()\">\n      <input class=\"ag-page-input\" type=\"text\" inputmode=\"text\" autocomplete=\"off\"\n        role=\"combobox\" [value]=\"draft()\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"inputLabel()\" [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"menuOpen() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"menuOpen() && focusedOptionIndex() >= 0 ? optionId(focusedOptionIndex()) : null\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (input)=\"onInput($event)\" (keydown)=\"onInputKeydown($event)\" />\n      <button type=\"button\" class=\"ag-page-trigger\" [disabled]=\"disabled() || items().length === 0\"\n        [attr.aria-label]=\"menuLabel()\" [title]=\"menuLabel()\"\n        [attr.aria-expanded]=\"menuOpen()\" aria-haspopup=\"listbox\"\n        (click)=\"toggleMenu($event)\">\n        <span aria-hidden=\"true\">&#9662;</span>\n      </button>\n    </div>\n\n    @if (menuOpen()) {\n      <div [id]=\"listboxId\" class=\"ag-page-options\" role=\"listbox\"\n        [attr.aria-label]=\"menuLabel()\" (pointerdown)=\"$event.stopPropagation()\">\n        @for (item of items(); track item.id; let index = $index) {\n          <button type=\"button\" class=\"ag-page-option\" role=\"option\" [id]=\"optionId(index)\"\n            [class.ag-page-option--selected]=\"isSelected(item)\"\n            [class.ag-page-option--focused]=\"focusedOptionIndex() === index\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            (mouseenter)=\"focusedOptionIndex.set(index)\" (click)=\"choose(item)\">\n            <span class=\"ag-page-option-id\">{{ item.pageNumber }}</span>\n            <span class=\"ag-page-option-label\">{{ item.label }}</span>\n          </button>\n        } @empty {\n          <div class=\"ag-page-empty\">{{ emptyText() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasNext()\"\n    [attr.aria-label]=\"nextLabel()\" [title]=\"nextLabel()\" (click)=\"next()\">\n    <span aria-hidden=\"true\">&#8250;</span>\n  </button>\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2)}}:host{display:inline-block;color:var(--agrid-color-text);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-page-selector{display:inline-flex;align-items:center;gap:4px}.ag-page-nav,.ag-page-trigger{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-nav{width:32px;border-radius:4px;font-size:20px}.ag-page-trigger{width:30px;border-width:0 0 0 1px;font-size:10px}.ag-page-nav:active:not(:disabled),.ag-page-trigger:active:not(:disabled),.ag-page-option:active{transform:scale(.97)}.ag-page-nav:disabled,.ag-page-trigger:disabled,.ag-page-input:disabled{opacity:.48;cursor:not-allowed}.ag-page-nav:focus-visible,.ag-page-trigger:focus-visible,.ag-page-input:focus-visible,.ag-page-option:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-page-combo{position:relative;width:clamp(150px,24vw,230px)}.ag-page-input-group{display:flex;height:32px;overflow:hidden;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg)}.ag-page-input-group:focus-within,.ag-page-input-group--open{border-color:var(--agrid-color-accent)}.ag-page-input-group--invalid{border-color:var(--agrid-color-danger, #d1242f)}.ag-page-input{min-width:0;flex:1;padding:0 9px;border:0;outline:0;background:transparent;color:var(--agrid-color-text);font:inherit}.ag-page-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;width:max(100%,220px);max-width:min(320px,calc(100vw - 24px));max-height:280px;overflow-y:auto;padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top right}.ag-page-option{display:grid;grid-template-columns:minmax(32px,auto) minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:34px;padding:5px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-option--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-page-option-id{color:var(--agrid-color-text-muted);font-variant-numeric:tabular-nums}.ag-page-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-page-empty{padding:12px 8px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-page-nav:hover:not(:disabled),.ag-page-trigger:hover:not(:disabled),.ag-page-option--focused:not(.ag-page-option--selected){background:var(--agrid-color-bg-muted)}}@media(max-width:420px){.ag-page-combo{width:min(210px,calc(100vw - 92px))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridPageSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridPageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid-page-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-page-selector\" [class.ag-page-selector--disabled]=\"disabled()\">\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasPrevious()\"\n    [attr.aria-label]=\"previousLabel()\" [title]=\"previousLabel()\" (click)=\"previous()\">\n    <span aria-hidden=\"true\">&#8249;</span>\n  </button>\n\n  <div class=\"ag-page-combo\">\n    <div class=\"ag-page-input-group\" [class.ag-page-input-group--open]=\"menuOpen()\"\n      [class.ag-page-input-group--invalid]=\"invalid()\">\n      <input class=\"ag-page-input\" type=\"text\" inputmode=\"text\" autocomplete=\"off\"\n        role=\"combobox\" [value]=\"draft()\" [disabled]=\"disabled()\"\n        [attr.aria-label]=\"inputLabel()\" [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"menuOpen() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"menuOpen() && focusedOptionIndex() >= 0 ? optionId(focusedOptionIndex()) : null\"\n        [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n        (input)=\"onInput($event)\" (keydown)=\"onInputKeydown($event)\" />\n      <button type=\"button\" class=\"ag-page-trigger\" [disabled]=\"disabled() || items().length === 0\"\n        [attr.aria-label]=\"menuLabel()\" [title]=\"menuLabel()\"\n        [attr.aria-expanded]=\"menuOpen()\" aria-haspopup=\"listbox\"\n        (click)=\"toggleMenu($event)\">\n        <span aria-hidden=\"true\">&#9662;</span>\n      </button>\n    </div>\n\n    @if (menuOpen()) {\n      <div [id]=\"listboxId\" class=\"ag-page-options\" role=\"listbox\"\n        [attr.aria-label]=\"menuLabel()\" (pointerdown)=\"$event.stopPropagation()\">\n        @for (item of items(); track item.id; let index = $index) {\n          <button type=\"button\" class=\"ag-page-option\" role=\"option\" [id]=\"optionId(index)\"\n            [class.ag-page-option--selected]=\"isSelected(item)\"\n            [class.ag-page-option--focused]=\"focusedOptionIndex() === index\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            (mouseenter)=\"focusedOptionIndex.set(index)\" (click)=\"choose(item)\">\n            <span class=\"ag-page-option-id\">{{ item.pageNumber }}</span>\n            <span class=\"ag-page-option-label\">{{ item.label }}</span>\n          </button>\n        } @empty {\n          <div class=\"ag-page-empty\">{{ emptyText() }}</div>\n        }\n      </div>\n    }\n  </div>\n\n  <button type=\"button\" class=\"ag-page-nav\" [disabled]=\"!hasNext()\"\n    [attr.aria-label]=\"nextLabel()\" [title]=\"nextLabel()\" (click)=\"next()\">\n    <span aria-hidden=\"true\">&#8250;</span>\n  </button>\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2)}}:host{display:inline-block;color:var(--agrid-color-text);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-page-selector{display:inline-flex;align-items:center;gap:4px}.ag-page-nav,.ag-page-trigger{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0;border:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);cursor:pointer;font:inherit;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-nav{width:32px;border-radius:4px;font-size:20px}.ag-page-trigger{width:30px;border-width:0 0 0 1px;font-size:10px}.ag-page-nav:active:not(:disabled),.ag-page-trigger:active:not(:disabled),.ag-page-option:active{transform:scale(.97)}.ag-page-nav:disabled,.ag-page-trigger:disabled,.ag-page-input:disabled{opacity:.48;cursor:not-allowed}.ag-page-nav:focus-visible,.ag-page-trigger:focus-visible,.ag-page-input:focus-visible,.ag-page-option:focus-visible{position:relative;z-index:2;outline:2px solid var(--agrid-color-accent);outline-offset:1px}.ag-page-combo{position:relative;width:clamp(150px,24vw,230px)}.ag-page-input-group{display:flex;height:32px;overflow:hidden;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg)}.ag-page-input-group:focus-within,.ag-page-input-group--open{border-color:var(--agrid-color-accent)}.ag-page-input-group--invalid{border-color:var(--agrid-color-danger, #d1242f)}.ag-page-input{min-width:0;flex:1;padding:0 9px;border:0;outline:0;background:transparent;color:var(--agrid-color-text);font:inherit}.ag-page-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;width:max(100%,220px);max-width:min(320px,calc(100vw - 24px));max-height:280px;overflow-y:auto;padding:4px;border:1px solid var(--agrid-color-border);border-radius:6px;background:var(--agrid-color-bg);box-shadow:0 10px 28px var(--agrid-color-shadow);transform-origin:top right}.ag-page-option{display:grid;grid-template-columns:minmax(32px,auto) minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:34px;padding:5px 8px;border:0;border-radius:4px;background:transparent;color:var(--agrid-color-text);cursor:pointer;font:inherit;text-align:left;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-page-option--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-page-option-id{color:var(--agrid-color-text-muted);font-variant-numeric:tabular-nums}.ag-page-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-page-empty{padding:12px 8px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-page-nav:hover:not(:disabled),.ag-page-trigger:hover:not(:disabled),.ag-page-option--focused:not(.ag-page-option--selected){background:var(--agrid-color-bg-muted)}}@media(max-width:420px){.ag-page-combo{width:min(210px,calc(100vw - 92px))}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], selectedPageNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPageNumber", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], inputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputLabel", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], selectPage: [{ type: i0.Output, args: ["selectPage"] }], onDocumentPointerDown: [{
@@ -7621,24 +8425,33 @@ class AgridTreeComponent {
         }
         return -1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridTreeComponent, isStandalone: true, selector: "agrid-tree", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeDoubleClicked: "nodeDoubleClicked", selectionChange: "selectionChange" }, host: { properties: { "style.--agrid-tree-row-height.px": "provider().rowHeight" } }, viewQueries: [{ propertyName: "treeElement", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #tree class=\"ag-tree\" role=\"tree\" [attr.aria-label]=\"provider().ariaLabel\"\n  [attr.aria-multiselectable]=\"provider().selection === 'multi' ? 'true' : null\">\n  @for (item of items(); track trackItem($index, item); let index = $index) {\n    <div class=\"ag-tree-node\" role=\"treeitem\" [attr.data-tree-index]=\"index\"\n      [attr.tabindex]=\"focusedIndex() === index ? 0 : -1\"\n      [attr.aria-level]=\"item.level + 1\"\n      [attr.aria-expanded]=\"item.expandable ? item.expanded : null\"\n      [attr.aria-selected]=\"provider().selection !== 'none' ? isSelected(item) : null\"\n      [class.ag-tree-node--selected]=\"isSelected(item)\"\n      [style.padding-left.px]=\"8 + item.level * 20\"\n      (click)=\"onNodeClick($event, item, index)\"\n      (dblclick)=\"onNodeDoubleClick($event, item)\"\n      (keydown)=\"onKeydown($event, item, index)\">\n      <button class=\"ag-tree-toggle\" type=\"button\" tabindex=\"-1\"\n        [class.ag-tree-toggle--expanded]=\"item.expanded\"\n        [class.ag-tree-toggle--hidden]=\"!item.expandable\"\n        [attr.aria-label]=\"(item.expanded ? 'Collapse ' : 'Expand ') + label(item)\"\n        (click)=\"toggleNode(item); $event.stopPropagation()\">&#9656;</button>\n      <span class=\"ag-tree-content\">\n        <span class=\"ag-tree-label\">{{ label(item) }}</span>\n        @if (description(item); as detail) {\n          <span class=\"ag-tree-description\">{{ detail }}</span>\n        }\n      </span>\n    </div>\n  } @empty {\n    <div class=\"ag-tree-empty\">{{ provider().emptyText }}</div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa}}:host{display:block;min-width:180px;min-height:0;overflow:auto;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-tree{min-width:max-content;padding:4px}.ag-tree-node{display:flex;align-items:center;min-width:100%;height:var(--agrid-tree-row-height);padding-right:10px;border-radius:4px;box-sizing:border-box;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.ag-tree-node--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-tree-node:focus-visible{box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-tree-toggle{display:inline-flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;color:var(--agrid-color-text-muted);background:transparent;font:inherit;cursor:pointer;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-tree-toggle--expanded{transform:rotate(90deg)}.ag-tree-toggle--hidden{visibility:hidden}.ag-tree-toggle:active{scale:.92}.ag-tree-content{display:flex;min-width:0;flex-direction:column;justify-content:center}.ag-tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ag-tree-description{overflow:hidden;color:var(--agrid-color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px}.ag-tree-empty{padding:16px 12px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-tree-node:hover:not(.ag-tree-node--selected),.ag-tree-toggle:hover{background:var(--agrid-color-bg-muted)}}@media(prefers-reduced-motion:reduce){.ag-tree-toggle{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AgridTreeComponent, isStandalone: true, selector: "agrid-tree", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeDoubleClicked: "nodeDoubleClicked", selectionChange: "selectionChange" }, host: { properties: { "style.--agrid-tree-row-height.px": "provider().rowHeight" } }, viewQueries: [{ propertyName: "treeElement", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #tree class=\"ag-tree\" role=\"tree\" [attr.aria-label]=\"provider().ariaLabel\"\n  [attr.aria-multiselectable]=\"provider().selection === 'multi' ? 'true' : null\">\n  @for (item of items(); track trackItem($index, item); let index = $index) {\n    <div class=\"ag-tree-node\" role=\"treeitem\" [attr.data-tree-index]=\"index\"\n      [attr.tabindex]=\"focusedIndex() === index ? 0 : -1\"\n      [attr.aria-level]=\"item.level + 1\"\n      [attr.aria-expanded]=\"item.expandable ? item.expanded : null\"\n      [attr.aria-selected]=\"provider().selection !== 'none' ? isSelected(item) : null\"\n      [class.ag-tree-node--selected]=\"isSelected(item)\"\n      [style.padding-left.px]=\"8 + item.level * 20\"\n      (click)=\"onNodeClick($event, item, index)\"\n      (dblclick)=\"onNodeDoubleClick($event, item)\"\n      (keydown)=\"onKeydown($event, item, index)\">\n      <button class=\"ag-tree-toggle\" type=\"button\" tabindex=\"-1\"\n        [class.ag-tree-toggle--expanded]=\"item.expanded\"\n        [class.ag-tree-toggle--hidden]=\"!item.expandable\"\n        [attr.aria-label]=\"(item.expanded ? 'Collapse ' : 'Expand ') + label(item)\"\n        (click)=\"toggleNode(item); $event.stopPropagation()\">&#9656;</button>\n      <span class=\"ag-tree-content\">\n        <span class=\"ag-tree-label\">{{ label(item) }}</span>\n        @if (description(item); as detail) {\n          <span class=\"ag-tree-description\">{{ detail }}</span>\n        }\n      </span>\n    </div>\n  } @empty {\n    <div class=\"ag-tree-empty\">{{ provider().emptyText }}</div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa}}:host{display:block;min-width:180px;min-height:0;overflow:auto;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-tree{min-width:max-content;padding:4px}.ag-tree-node{display:flex;align-items:center;min-width:100%;height:var(--agrid-tree-row-height);padding-right:10px;border-radius:4px;box-sizing:border-box;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.ag-tree-node--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-tree-node:focus-visible{box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-tree-toggle{display:inline-flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;color:var(--agrid-color-text-muted);background:transparent;font:inherit;cursor:pointer;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-tree-toggle--expanded{transform:rotate(90deg)}.ag-tree-toggle--hidden{visibility:hidden}.ag-tree-toggle:active{scale:.92}.ag-tree-content{display:flex;min-width:0;flex-direction:column;justify-content:center}.ag-tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ag-tree-description{overflow:hidden;color:var(--agrid-color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px}.ag-tree-empty{padding:16px 12px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-tree-node:hover:not(.ag-tree-node--selected),.ag-tree-toggle:hover{background:var(--agrid-color-bg-muted)}}@media(prefers-reduced-motion:reduce){.ag-tree-toggle{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AgridTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'agrid-tree', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.--agrid-tree-row-height.px]': 'provider().rowHeight' }, template: "<div #tree class=\"ag-tree\" role=\"tree\" [attr.aria-label]=\"provider().ariaLabel\"\n  [attr.aria-multiselectable]=\"provider().selection === 'multi' ? 'true' : null\">\n  @for (item of items(); track trackItem($index, item); let index = $index) {\n    <div class=\"ag-tree-node\" role=\"treeitem\" [attr.data-tree-index]=\"index\"\n      [attr.tabindex]=\"focusedIndex() === index ? 0 : -1\"\n      [attr.aria-level]=\"item.level + 1\"\n      [attr.aria-expanded]=\"item.expandable ? item.expanded : null\"\n      [attr.aria-selected]=\"provider().selection !== 'none' ? isSelected(item) : null\"\n      [class.ag-tree-node--selected]=\"isSelected(item)\"\n      [style.padding-left.px]=\"8 + item.level * 20\"\n      (click)=\"onNodeClick($event, item, index)\"\n      (dblclick)=\"onNodeDoubleClick($event, item)\"\n      (keydown)=\"onKeydown($event, item, index)\">\n      <button class=\"ag-tree-toggle\" type=\"button\" tabindex=\"-1\"\n        [class.ag-tree-toggle--expanded]=\"item.expanded\"\n        [class.ag-tree-toggle--hidden]=\"!item.expandable\"\n        [attr.aria-label]=\"(item.expanded ? 'Collapse ' : 'Expand ') + label(item)\"\n        (click)=\"toggleNode(item); $event.stopPropagation()\">&#9656;</button>\n      <span class=\"ag-tree-content\">\n        <span class=\"ag-tree-label\">{{ label(item) }}</span>\n        @if (description(item); as detail) {\n          <span class=\"ag-tree-description\">{{ detail }}</span>\n        }\n      </span>\n    </div>\n  } @empty {\n    <div class=\"ag-tree-empty\">{{ provider().emptyText }}</div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-muted: #f6f8fa}}:host{display:block;min-width:180px;min-height:0;overflow:auto;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ag-tree{min-width:max-content;padding:4px}.ag-tree-node{display:flex;align-items:center;min-width:100%;height:var(--agrid-tree-row-height);padding-right:10px;border-radius:4px;box-sizing:border-box;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.ag-tree-node--selected{color:var(--agrid-color-accent-fg);background:var(--agrid-color-accent-subtle)}.ag-tree-node:focus-visible{box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-tree-toggle{display:inline-flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;color:var(--agrid-color-text-muted);background:transparent;font:inherit;cursor:pointer;transition:transform .12s cubic-bezier(.23,1,.32,1)}.ag-tree-toggle--expanded{transform:rotate(90deg)}.ag-tree-toggle--hidden{visibility:hidden}.ag-tree-toggle:active{scale:.92}.ag-tree-content{display:flex;min-width:0;flex-direction:column;justify-content:center}.ag-tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ag-tree-description{overflow:hidden;color:var(--agrid-color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px}.ag-tree-empty{padding:16px 12px;color:var(--agrid-color-text-muted)}@media(hover:hover)and (pointer:fine){.ag-tree-node:hover:not(.ag-tree-node--selected),.ag-tree-toggle:hover{background:var(--agrid-color-bg-muted)}}@media(prefers-reduced-motion:reduce){.ag-tree-toggle{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: true }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeDoubleClicked: [{ type: i0.Output, args: ["nodeDoubleClicked"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], treeElement: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
 
 /** Provider-style configuration and datasource container for `<agrid-tree>`. */
 class AgridTreeProvider {
+    /** Rows projected into the standalone tree. */
     datasource;
+    /** Shared hierarchy configuration; column-specific aggregation is not used here. */
     treeConfig;
+    /** Optional host label resolver for parent-linked datasource rows. */
     getLabel;
+    /** Optional host resolver for secondary node text. */
     getDescription;
+    /** Effective node selection behavior. */
     selection;
+    /** Effective fixed node height in pixels. */
     rowHeight;
+    /** Effective accessible name applied to the tree root. */
     ariaLabel;
+    /** Effective empty-state message. */
     emptyText;
+    /** Normalize optional standalone-tree settings and retain the reactive datasource. */
     constructor(config) {
         this.datasource = config.datasource;
         this.treeConfig = config.treeConfig;
@@ -7658,5 +8471,5 @@ const ColDefAutoSize = -1;
  * Generated bundle index. Do not edit.
  */
 
-export { AGRID_LOCALE_TEXT, AgridComponent, AgridControl, AgridDataSource, AgridPageSelectorComponent, AgridProvider, AgridTreeComponent, AgridTreeProvider, ColDefAutoSize };
+export { AGRID_LOCALE_TEXT, AgridComponent, AgridControl, AgridDataSource, AgridPageSelectorComponent, AgridProvider, AgridServerSideRowModel, AgridTreeComponent, AgridTreeProvider, ColDefAutoSize };
 //# sourceMappingURL=thkl-agrid.mjs.map