@thkl/agrid 0.1.4 → 0.1.7

package/fesm2022/thkl-agrid.mjs

@@ -83,6 +83,15 @@ function isDataRowItem(item) {
 function isGroupHeaderItem(item) {
     return typeof item === 'object' && item !== null && 'groupLabel' in item;
 }
+/**
+ * Returns whether a virtual-scroll item represents a tree row.
+ *
+ * Tree rows also pass {@link isDataRowItem} (they carry `row` + `originalIndex`); this guard
+ * additionally narrows to the indentation/expansion fields via the `level` discriminator.
+ */
+function isTreeRowItem(item) {
+    return typeof item === 'object' && item !== null && 'level' in item;
+}
 // Filtering
 /** Apply text substring and value-set filters, returning the surviving row indices. */
 function applyTextAndValueFilters(rows, indices, filters, colMap, locale) {
@@ -97,9 +106,54 @@ function applyTextAndValueFilters(rows, indices, filters, colMap, locale) {
             const allowed = new Set(filter.selectedValues);
             result = result.filter(i => allowed.has(String(rows[i][field] ?? '')));
         }
+        if (filter.operator && filter.operand != null && filter.operand !== '') {
+            result = result.filter(i => passesRangeFilter(col, rows[i][field], filter));
+        }
     }
     return result;
 }
+/**
+ * Evaluate a typed range filter (`number` / `date`) for one cell value.
+ * Date columns compare epoch-millis; everything else compares as numbers.
+ * Rows whose value can't be parsed to the comparison type are excluded.
+ */
+function passesRangeFilter(col, raw, filter) {
+    const isDate = col?.type === 'date' || looksLikeDate(raw);
+    const toNum = (v) => isDate
+        ? (v instanceof Date ? v.getTime() : new Date(v).getTime())
+        : Number(v);
+    const value = toNum(raw);
+    if (Number.isNaN(value))
+        return false;
+    const a = toNum(filter.operand);
+    if (Number.isNaN(a))
+        return true;
+    switch (filter.operator) {
+        case 'eq': return value === a;
+        case 'neq': return value !== a;
+        case 'gt': return value > a;
+        case 'gte': return value >= a;
+        case 'lt': return value < a;
+        case 'lte': return value <= a;
+        case 'between': {
+            const b = toNum(filter.operand2);
+            if (Number.isNaN(b))
+                return value >= a;
+            return value >= Math.min(a, b) && value <= Math.max(a, b);
+        }
+        default: return true;
+    }
+}
+/**
+ * Keep only the rows where at least one of the given columns' display value contains
+ * `text` (case-insensitive). An empty/whitespace `text` returns the indices unchanged.
+ */
+function applyQuickFilter(rows, indices, text, cols, locale) {
+    const q = text.trim().toLowerCase();
+    if (!q)
+        return indices;
+    return indices.filter(i => cols.some(col => getDisplayForField(col, rows[i][col.field], locale).toLowerCase().includes(q)));
+}
 // Sorting
 /**
  * Sort indices by one or more columns in priority order.
@@ -161,13 +215,47 @@ function applySortToIndices(rows, indices, sortEntries, colMap, locale) {
     });
     return decorated.map(item => item.index);
 }
-// Grouping
 /**
- * Bucket rows by the display value of `groupField`, sort group keys alphabetically,
- * optionally sort within groups by a secondary sort, and interleave group-header items.
- * Does NOT append the add-row null sentinel — the caller does that.
+ * 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.
  */
-function buildGroupedItems(rows, indices, groupField, colMap, sortEntries, expandedLabels, locale) {
+function computeAggregates(rows, indices, cols, controlAggregates) {
+    const result = {};
+    for (const col of cols) {
+        const aggregate = controlAggregates[col.field] ?? col.aggregate;
+        if (!aggregate)
+            continue;
+        const values = indices.map(index => rows[index][col.field]);
+        if (typeof aggregate === 'function') {
+            result[col.field] = aggregate(values);
+            continue;
+        }
+        const numbers = values.map(Number).filter(value => !Number.isNaN(value));
+        switch (aggregate) {
+            case 'sum':
+                result[col.field] = numbers.reduce((sum, value) => sum + value, 0);
+                break;
+            case 'avg':
+                result[col.field] = numbers.length
+                    ? numbers.reduce((sum, value) => sum + value, 0) / numbers.length
+                    : null;
+                break;
+            case 'min':
+                result[col.field] = numbers.length ? Math.min(...numbers) : null;
+                break;
+            case 'max':
+                result[col.field] = numbers.length ? Math.max(...numbers) : null;
+                break;
+            case 'count':
+                result[col.field] = values.filter(value => value != null && value !== '').length;
+                break;
+        }
+    }
+    return result;
+}
+function buildGroupedItems(rows, indices, groupField, colMap, sortEntries, expandedLabels, locale, aggregateCols = [], controlAggregates = {}) {
+    const hasAggregates = aggregateCols.some(col => controlAggregates[col.field] ?? col.aggregate);
     const groupCol = colMap.get(groupField);
     const groups = new Map();
     for (const i of indices) {
@@ -188,7 +276,10 @@ function buildGroupedItems(rows, indices, groupField, colMap, sortEntries, expan
     for (const key of sortedKeys) {
         const groupRows = groups.get(key);
         const isExpanded = expandedLabels.has(key);
-        items.push({ groupLabel: key, count: groupRows.length, collapsed: !isExpanded });
+        const aggregates = hasAggregates
+            ? computeAggregates(rows, groupRows, aggregateCols, controlAggregates)
+            : undefined;
+        items.push({ groupLabel: key, count: groupRows.length, collapsed: !isExpanded, aggregates });
         if (isExpanded) {
             for (const i of groupRows)
                 items.push({ row: rows[i], originalIndex: i });
@@ -196,6 +287,63 @@ function buildGroupedItems(rows, indices, groupField, colMap, sortEntries, expan
     }
     return items;
 }
+/**
+ * Flatten a parent/child hierarchy into a depth-first list of {@link TreeRowItem}s for the
+ * virtual scroll list, honoring the expanded-id set.
+ *
+ * `indices` is the already filtered and sorted set of source-array positions; sibling order
+ * follows that order. A row is treated as a **root** when its parent id is `null`/`undefined`
+ * or when that parent is not present in `indices` (orphan). Children of a collapsed row are
+ * omitted. Cycles and rows visited more than once are guarded so the walk always terminates.
+ *
+ * @param rows            The full data-source array.
+ * @param indices         Filtered/sorted source positions to include, in display order.
+ * @param accessors       `getId` / `getParentId` for the rows.
+ * @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.
+ */
+function buildTreeItems(rows, indices, accessors, expandedIds, forceExpandedIds) {
+    const { getId, getParentId } = accessors;
+    const includedIds = new Set();
+    for (const i of indices)
+        includedIds.add(getId(rows[i]));
+    // Bucket each included row under its parent, preserving the incoming (sorted) order.
+    const childrenByParent = new Map();
+    const roots = [];
+    for (const i of indices) {
+        const parentId = getParentId(rows[i]);
+        if (parentId == null || !includedIds.has(parentId)) {
+            roots.push(i);
+            continue;
+        }
+        const siblings = childrenByParent.get(parentId);
+        if (siblings)
+            siblings.push(i);
+        else
+            childrenByParent.set(parentId, [i]);
+    }
+    const items = [];
+    const visited = new Set();
+    const visit = (index, level) => {
+        const row = rows[index];
+        const id = getId(row);
+        if (visited.has(id))
+            return; // cycle / duplicate-parent guard
+        visited.add(id);
+        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 });
+        if (expanded && children) {
+            for (const childIndex of children)
+                visit(childIndex, level + 1);
+        }
+    };
+    for (const rootIndex of roots)
+        visit(rootIndex, 0);
+    return items;
+}
 // Selection range
 /** Build the set of original indices spanning from `fromOrig` to `toOrig` in display order. */
 function buildSelectionRange(fromOrig, toOrig, items) {
@@ -238,6 +386,22 @@ class AgridCellComponent {
     selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     /** Whether this cell is currently in edit mode. */
     editing = input(false, ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    /** Whether this cell may be edited (drives the boolean checkbox enabled state). */
+    editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    /** Validation error message to show under the editor, or `null` when the value is valid. */
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Whether this cell is the tree column and should render indentation + a twisty. */
+    treeCell = input(false, ...(ngDevMode ? [{ debugName: "treeCell" }] : /* istanbul ignore next */ []));
+    /** Depth of the row in the tree (drives indentation). Root rows are `0`. */
+    treeLevel = input(0, ...(ngDevMode ? [{ debugName: "treeLevel" }] : /* istanbul ignore next */ []));
+    /** Whether the row has children and can be expanded/collapsed. */
+    treeExpandable = input(false, ...(ngDevMode ? [{ debugName: "treeExpandable" }] : /* istanbul ignore next */ []));
+    /** Whether the row is currently expanded. */
+    treeExpanded = input(false, ...(ngDevMode ? [{ debugName: "treeExpanded" }] : /* istanbul ignore next */ []));
+    /** Emitted when the user clicks the expand/collapse twisty. */
+    treeToggle = output();
+    /** Indentation in pixels applied per tree level. */
+    treeIndent = 16;
     /**
      * Optional character to pre-fill the edit input when the user presses a printable key
      * while the cell is selected (type-to-start-editing behavior).
@@ -250,6 +414,8 @@ class AgridCellComponent {
     activate = output();
     /** Emitted on double-click — the grid enters edit mode. */
     startEdit = output();
+    /** Emitted when a boolean-column checkbox is toggled, carrying the new value. */
+    booleanToggle = output();
     /**
      * Emitted on every keystroke inside the edit input or on every select change.
      * The grid stores the latest value in `currentDraft` so it can commit on Tab / Enter.
@@ -264,6 +430,13 @@ class AgridCellComponent {
             ? getDateInputValue(draft)
             : String(draft ?? '');
     }, ...(ngDevMode ? [{ debugName: "editorValue" }] : /* istanbul ignore next */ []));
+    /** Whether this cell renders as an inline boolean checkbox (no edit mode). */
+    booleanCell = computed(() => this.col().type === 'boolean' && !this.col().cellRenderer, ...(ngDevMode ? [{ debugName: "booleanCell" }] : /* istanbul ignore next */ []));
+    /** Truthiness of the current boolean value (accepts `true`, `'true'`, `1`, `'1'`). */
+    booleanChecked = computed(() => {
+        const v = this.value();
+        return v === true || v === 1 || v === 'true' || v === '1';
+    }, ...(ngDevMode ? [{ debugName: "booleanChecked" }] : /* istanbul ignore next */ []));
     renderedHtml = computed(() => {
         const renderer = this.col().cellRenderer;
         if (!renderer)
@@ -354,6 +527,19 @@ class AgridCellComponent {
             }
         });
     }
+    /** Toggle a boolean cell's value, driven entirely from data (no DOM toggle). */
+    onCheckboxClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.editable())
+            return;
+        this.booleanToggle.emit(!this.booleanChecked());
+    }
+    /** Emit a tree expand/collapse request without selecting or editing the cell. */
+    onTreeToggle(event) {
+        event.stopPropagation();
+        this.treeToggle.emit();
+    }
     /** Forward `<input>` changes to the grid. */
     onInput(event) {
         const val = event.target.value;
@@ -375,8 +561,18 @@ class AgridCellComponent {
         this.draftChange.emit(rawValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridCellComponent, isStandalone: true, selector: "agrid-cell", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, seedChar: { classPropertyName: "seedChar", publicName: "seedChar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate", startEdit: "startEdit", draftChange: "draftChange" }, host: { attributes: { "role": "gridcell", "tabindex": "-1" }, listeners: { "click": "activate.emit($event)", "dblclick": "startEdit.emit()" }, properties: { "class.selected": "selected()", "class.editing": "editing()", "attr.aria-readonly": "col().editable === false ? \"true\" : null" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "selectEl", first: true, predicate: ["editSelect"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (editing()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridCellComponent, isStandalone: true, selector: "agrid-cell", inputs: { col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, treeCell: { classPropertyName: "treeCell", publicName: "treeCell", isSignal: true, isRequired: false, transformFunction: null }, treeLevel: { classPropertyName: "treeLevel", publicName: "treeLevel", isSignal: true, isRequired: false, transformFunction: null }, treeExpandable: { classPropertyName: "treeExpandable", publicName: "treeExpandable", isSignal: true, isRequired: false, transformFunction: null }, treeExpanded: { classPropertyName: "treeExpanded", publicName: "treeExpanded", isSignal: true, isRequired: false, transformFunction: null }, seedChar: { classPropertyName: "seedChar", publicName: "seedChar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeToggle: "treeToggle", activate: "activate", startEdit: "startEdit", booleanToggle: "booleanToggle", draftChange: "draftChange" }, host: { attributes: { "role": "gridcell", "tabindex": "-1" }, listeners: { "click": "activate.emit($event)", "dblclick": "startEdit.emit()" }, properties: { "class.selected": "selected()", "class.editing": "editing()", "class.ag-cell--tree": "treeCell()", "attr.aria-readonly": "col().editable === false ? \"true\" : null" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["editInput"], descendants: true, isSignal: true }, { propertyName: "selectEl", first: true, predicate: ["editSelect"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (booleanCell()) {
+      <input
+        type="checkbox"
+        class="ag-cell-checkbox"
+        [checked]="booleanChecked()"
+        [disabled]="!editable()"
+        [attr.aria-label]="col().header"
+        (click)="onCheckboxClick($event)"
+        (dblclick)="$event.stopPropagation()"
+      />
+    } @else if (editing()) {
       @if (col().values?.length) {
         <select
           #editSelect
@@ -391,17 +587,38 @@ class AgridCellComponent {
         <input
           #editInput
           class="ag-cell-input"
+          [class.ag-cell-input--invalid]="!!error()"
           [type]="col().type === 'date' ? 'date' : col().type === 'number' ? 'number' : 'text'"
           [value]="editorValue()"
           (input)="onInput($event)"
         />
       }
-    } @else if (col().cellRenderer) {
-      <span class="ag-cell-value" [innerHTML]="renderedHtml()"></span>
+      @if (error(); as msg) {
+        <span class="ag-cell-error" role="alert">{{ msg }}</span>
+      }
     } @else {
-      <span class="ag-cell-value">{{ displayValue() }}</span>
+      @if (treeCell()) {
+        <span class="ag-tree-prefix" [style.padding-left.px]="treeLevel() * treeIndent">
+          @if (treeExpandable()) {
+            <button
+              type="button"
+              class="ag-tree-twisty"
+              [class.ag-tree-twisty--expanded]="treeExpanded()"
+              [attr.aria-label]="treeExpanded() ? 'Collapse' : 'Expand'"
+              (click)="onTreeToggle($event)"
+            >▶</button>
+          } @else {
+            <span class="ag-tree-twisty-spacer"></span>
+          }
+        </span>
+      }
+      @if (col().cellRenderer) {
+        <span class="ag-cell-value" [innerHTML]="renderedHtml()"></span>
+      } @else {
+        <span class="ag-cell-value">{{ displayValue() }}</span>
+      }
     }
-  `, isInline: true, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}:host(.ag-cell--tree){display:flex;align-items:center}:host(.ag-cell--tree) .ag-cell-value{flex:1 1 auto;min-width:0}.ag-tree-prefix{flex:0 0 auto;display:inline-flex;align-items:center;height:100%}.ag-tree-twisty,.ag-tree-twisty-spacer{width:16px;flex:0 0 16px}.ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;border:none;background:transparent;color:var(--agrid-color-text-muted);font-size:9px;line-height:1;cursor:pointer;transition:transform .15s ease}.ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent;user-select:text;-webkit-user-select:text}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}.ag-cell-checkbox{display:block;margin:9px auto;cursor:pointer;accent-color:var(--agrid-color-accent)}.ag-cell-checkbox:disabled{cursor:not-allowed;opacity:.6}.ag-cell-input--invalid{outline:2px solid var(--agrid-color-danger);outline-offset:-2px}.ag-cell-error{position:absolute;left:0;top:100%;z-index:5;max-width:240px;padding:3px 8px;font-size:12px;line-height:1.4;white-space:normal;color:#fff;background:var(--agrid-color-danger);border-radius:0 0 4px 4px;box-shadow:0 2px 6px #0000002e;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridCellComponent, decorators: [{
             type: Component,
@@ -409,12 +626,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         role: 'gridcell',
                         '[class.selected]': 'selected()',
                         '[class.editing]': 'editing()',
+                        '[class.ag-cell--tree]': 'treeCell()',
                         '[attr.aria-readonly]': 'col().editable === false ? "true" : null',
                         '(click)': 'activate.emit($event)',
                         '(dblclick)': 'startEdit.emit()',
                         tabindex: '-1',
                     }, template: `
-    @if (editing()) {
+    @if (booleanCell()) {
+      <input
+        type="checkbox"
+        class="ag-cell-checkbox"
+        [checked]="booleanChecked()"
+        [disabled]="!editable()"
+        [attr.aria-label]="col().header"
+        (click)="onCheckboxClick($event)"
+        (dblclick)="$event.stopPropagation()"
+      />
+    } @else if (editing()) {
       @if (col().values?.length) {
         <select
           #editSelect
@@ -429,18 +657,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <input
           #editInput
           class="ag-cell-input"
+          [class.ag-cell-input--invalid]="!!error()"
           [type]="col().type === 'date' ? 'date' : col().type === 'number' ? 'number' : 'text'"
           [value]="editorValue()"
           (input)="onInput($event)"
         />
       }
-    } @else if (col().cellRenderer) {
-      <span class="ag-cell-value" [innerHTML]="renderedHtml()"></span>
+      @if (error(); as msg) {
+        <span class="ag-cell-error" role="alert">{{ msg }}</span>
+      }
     } @else {
-      <span class="ag-cell-value">{{ displayValue() }}</span>
+      @if (treeCell()) {
+        <span class="ag-tree-prefix" [style.padding-left.px]="treeLevel() * treeIndent">
+          @if (treeExpandable()) {
+            <button
+              type="button"
+              class="ag-tree-twisty"
+              [class.ag-tree-twisty--expanded]="treeExpanded()"
+              [attr.aria-label]="treeExpanded() ? 'Collapse' : 'Expand'"
+              (click)="onTreeToggle($event)"
+            >▶</button>
+          } @else {
+            <span class="ag-tree-twisty-spacer"></span>
+          }
+        </span>
+      }
+      @if (col().cellRenderer) {
+        <span class="ag-cell-value" [innerHTML]="renderedHtml()"></span>
+      } @else {
+        <span class="ag-cell-value">{{ displayValue() }}</span>
+      }
     }
-  `, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], seedChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "seedChar", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], startEdit: [{ type: i0.Output, args: ["startEdit"] }], draftChange: [{ type: i0.Output, args: ["draftChange"] }], inputEl: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], selectEl: [{ type: i0.ViewChild, args: ['editSelect', { isSignal: true }] }] } });
+  `, styles: [":host{position:relative;display:block;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;padding:0 6px;line-height:32px;cursor:default;-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}:host(.ag-cell--changed):after{content:\"\";position:absolute;top:0;right:0;width:0;height:0;border-top:8px solid var(--agrid-color-cell-changed);border-left:8px solid transparent;pointer-events:none}:host(.selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.ag-cell--range-selected){outline:2px solid var(--agrid-color-accent);outline-offset:-2px}:host(.editing){padding:0;background:var(--agrid-color-bg)}.ag-cell-value{display:block;overflow:hidden;text-overflow:ellipsis}:host(.ag-cell--tree){display:flex;align-items:center}:host(.ag-cell--tree) .ag-cell-value{flex:1 1 auto;min-width:0}.ag-tree-prefix{flex:0 0 auto;display:inline-flex;align-items:center;height:100%}.ag-tree-twisty,.ag-tree-twisty-spacer{width:16px;flex:0 0 16px}.ag-tree-twisty{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;border:none;background:transparent;color:var(--agrid-color-text-muted);font-size:9px;line-height:1;cursor:pointer;transition:transform .15s ease}.ag-tree-twisty--expanded{transform:rotate(90deg)}.ag-cell-input{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 6px;box-sizing:border-box;background:transparent;user-select:text;-webkit-user-select:text}.ag-cell-select{width:100%;height:100%;border:none;outline:none;font:inherit;padding:0 2px;box-sizing:border-box;background:transparent;cursor:pointer}.ag-cell-checkbox{display:block;margin:9px auto;cursor:pointer;accent-color:var(--agrid-color-accent)}.ag-cell-checkbox:disabled{cursor:not-allowed;opacity:.6}.ag-cell-input--invalid{outline:2px solid var(--agrid-color-danger);outline-offset:-2px}.ag-cell-error{position:absolute;left:0;top:100%;z-index:5;max-width:240px;padding:3px 8px;font-size:12px;line-height:1.4;white-space:normal;color:#fff;background:var(--agrid-color-danger);border-radius:0 0 4px 4px;box-shadow:0 2px 6px #0000002e;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], treeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeCell", required: false }] }], treeLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeLevel", required: false }] }], treeExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeExpandable", required: false }] }], treeExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeExpanded", required: false }] }], treeToggle: [{ type: i0.Output, args: ["treeToggle"] }], seedChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "seedChar", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], startEdit: [{ type: i0.Output, args: ["startEdit"] }], booleanToggle: [{ type: i0.Output, args: ["booleanToggle"] }], draftChange: [{ type: i0.Output, args: ["draftChange"] }], inputEl: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], selectEl: [{ type: i0.ViewChild, args: ['editSelect', { isSignal: true }] }] } });
 
 /** Guarded access to browser-only APIs used by the grid. @internal */
 class AgridBrowserAdapter {
@@ -907,6 +1156,18 @@ const AGRID_LOCALE_TEXT = {
         columns: 'Columns',
         detail: 'Detail',
         hiddenColumn: '(hidden)',
+        filterCondition: 'Condition',
+        filterNoCondition: 'No condition',
+        filterOpEquals: 'Equals',
+        filterOpNotEquals: 'Not equal',
+        filterOpGreater: 'Greater than',
+        filterOpGreaterEqual: 'Greater or equal',
+        filterOpLess: 'Less than',
+        filterOpLessEqual: 'Less or equal',
+        filterOpBetween: 'Between',
+        filterOpBefore: 'Before',
+        filterOpAfter: 'After',
+        filterOpOn: 'On',
         copyCellValue: 'Copy cell',
         copyRow: 'Copy row',
         confirmDeleteRow: 'Sure to delete?',
@@ -933,6 +1194,7 @@ const AGRID_LOCALE_TEXT = {
         previous: 'Previous',
         resizeColumn: 'Resize column',
         rows: count => `${count} ${count === 1 ? 'row' : 'rows'}`,
+        quickFilterPlaceholder: 'Search all columns...',
         searchValuesPlaceholder: 'Search values...',
         selectAll: '(Select All)',
         sortOnlyByThis: 'Sort only by this column',
@@ -961,6 +1223,18 @@ const AGRID_LOCALE_TEXT = {
         columns: 'Spalten',
         detail: 'Details',
         hiddenColumn: '(ausgeblendet)',
+        filterCondition: 'Bedingung',
+        filterNoCondition: 'Keine Bedingung',
+        filterOpEquals: 'Gleich',
+        filterOpNotEquals: 'Ungleich',
+        filterOpGreater: 'Größer als',
+        filterOpGreaterEqual: 'Größer oder gleich',
+        filterOpLess: 'Kleiner als',
+        filterOpLessEqual: 'Kleiner oder gleich',
+        filterOpBetween: 'Zwischen',
+        filterOpBefore: 'Vor',
+        filterOpAfter: 'Nach',
+        filterOpOn: 'Am',
         copyCellValue: 'Zelle kopieren',
         copyRow: 'Zeile kopieren',
         confirmDeleteRow: 'Wirklich löschen?',
@@ -987,6 +1261,7 @@ const AGRID_LOCALE_TEXT = {
         previous: 'Zurück',
         resizeColumn: 'Spaltenbreite ändern',
         rows: count => `${count} ${count === 1 ? 'Zeile' : 'Zeilen'}`,
+        quickFilterPlaceholder: 'Alle Spalten durchsuchen...',
         searchValuesPlaceholder: 'Werte suchen...',
         selectAll: '(Alle auswählen)',
         sortOnlyByThis: 'Nur nach dieser Spalte sortieren',
@@ -1054,6 +1329,20 @@ class AgridColumnMenuComponent {
     filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
     /** Whether to show the Excel-style distinct-value picker. */
     showValueFilter = input(true, ...(ngDevMode ? [{ debugName: "showValueFilter" }] : /* istanbul ignore next */ []));
+    /** Range-filter input type for the active column, or `null` to hide the condition UI. */
+    filterType = input(null, ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
+    /** Current range-filter operator, or `null` when none is selected. */
+    operator = input(null, ...(ngDevMode ? [{ debugName: "operator" }] : /* istanbul ignore next */ []));
+    /** Current primary range-filter operand. */
+    operand = input('', ...(ngDevMode ? [{ debugName: "operand" }] : /* istanbul ignore next */ []));
+    /** Current secondary range-filter operand (used by `between`). */
+    operand2 = input('', ...(ngDevMode ? [{ debugName: "operand2" }] : /* istanbul ignore next */ []));
+    /** Emits the selected range-filter operator, or `null` to clear the condition. */
+    operatorChange = output();
+    /** Emits the primary range-filter operand text. */
+    operandChange = output();
+    /** Emits the secondary range-filter operand text (used by `between`). */
+    operand2Change = output();
     /** Current search text for the value-filter option list. */
     search = input('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
     /** Whether the value filter currently allows every value. */
@@ -1105,13 +1394,36 @@ class AgridColumnMenuComponent {
             { value: 'count', symbol: '#', label: t.aggregateCount },
         ];
     }, ...(ngDevMode ? [{ debugName: "aggregateOptions" }] : /* istanbul ignore next */ []));
+    /** Range-filter operators offered for the active column, labeled per column type. */
+    operatorOptions = computed(() => {
+        const t = this.localeText();
+        if (this.filterType() === 'date') {
+            return [
+                { value: 'eq', label: t.filterOpOn },
+                { value: 'lt', label: t.filterOpBefore },
+                { value: 'gt', label: t.filterOpAfter },
+                { value: 'between', label: t.filterOpBetween },
+            ];
+        }
+        return [
+            { value: 'eq', label: t.filterOpEquals },
+            { value: 'neq', label: t.filterOpNotEquals },
+            { value: 'gt', label: t.filterOpGreater },
+            { value: 'gte', label: t.filterOpGreaterEqual },
+            { value: 'lt', label: t.filterOpLess },
+            { value: 'lte', label: t.filterOpLessEqual },
+            { value: 'between', label: t.filterOpBetween },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "operatorOptions" }] : /* istanbul ignore next */ []));
+    /** Native input type for operand fields (date columns use a date picker). */
+    operandInputType = computed(() => (this.filterType() === 'date' ? 'date' : 'number'), ...(ngDevMode ? [{ debugName: "operandInputType" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridColumnMenuComponent, isStandalone: true, selector: "agrid-column-menu", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, showColumnActions: { classPropertyName: "showColumnActions", publicName: "showColumnActions", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showValueFilter: { classPropertyName: "showValueFilter", publicName: "showValueFilter", isSignal: true, isRequired: false, transformFunction: null }, 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: { sort: "sort", resetSort: "resetSort", autosize: "autosize", togglePin: "togglePin", togglePinRight: "togglePinRight", hide: "hide", toggleGroup: "toggleGroup", clearFilter: "clearFilter", clearAll: "clearAll", searchChange: "searchChange", toggleAll: "toggleAll", toggleValue: "toggleValue", setAggregate: "setAggregate" }, ngImport: i0, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"x()\"\n  [style.top.px]=\"y()\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;font-size:13px;overflow:hidden}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:200px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridColumnMenuComponent, isStandalone: true, selector: "agrid-column-menu", inputs: { localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, showColumnActions: { classPropertyName: "showColumnActions", publicName: "showColumnActions", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showValueFilter: { classPropertyName: "showValueFilter", publicName: "showValueFilter", isSignal: true, isRequired: false, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, operand: { classPropertyName: "operand", publicName: "operand", isSignal: true, isRequired: false, transformFunction: null }, operand2: { classPropertyName: "operand2", publicName: "operand2", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null }, sortPriority: { classPropertyName: "sortPriority", publicName: "sortPriority", isSignal: true, isRequired: false, transformFunction: null }, hasMultiSort: { classPropertyName: "hasMultiSort", publicName: "hasMultiSort", isSignal: true, isRequired: false, transformFunction: null }, aggregate: { classPropertyName: "aggregate", publicName: "aggregate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operatorChange: "operatorChange", operandChange: "operandChange", operand2Change: "operand2Change", sort: "sort", resetSort: "resetSort", autosize: "autosize", togglePin: "togglePin", togglePinRight: "togglePinRight", hide: "hide", toggleGroup: "toggleGroup", clearFilter: "clearFilter", clearAll: "clearAll", searchChange: "searchChange", toggleAll: "toggleAll", toggleValue: "toggleValue", setAggregate: "setAggregate" }, ngImport: i0, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"x()\"\n  [style.top.px]=\"y()\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <select\n          class=\"ag-filter-menu-operator\"\n          (change)=\"operatorChange.emit($any($event.target).value || null)\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <option value=\"\" [selected]=\"!operator()\">{{ localeText().filterNoCondition }}</option>\n          @for (op of operatorOptions(); track op.value) {\n            <option [value]=\"op.value\" [selected]=\"op.value === operator()\">{{ op.label }}</option>\n          }\n        </select>\n        @if (operator()) {\n          <input\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;font-size:13px;overflow:hidden}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:200px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operator,.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operator:focus,.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridColumnMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'agrid-column-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"x()\"\n  [style.top.px]=\"y()\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;font-size:13px;overflow:hidden}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:200px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}\n"] }]
-        }], propDecorators: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], showColumnActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnActions", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], showValueFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueFilter", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], sortPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortPriority", required: false }] }], hasMultiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMultiSort", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], resetSort: [{ type: i0.Output, args: ["resetSort"] }], autosize: [{ type: i0.Output, args: ["autosize"] }], togglePin: [{ type: i0.Output, args: ["togglePin"] }], togglePinRight: [{ type: i0.Output, args: ["togglePinRight"] }], hide: [{ type: i0.Output, args: ["hide"] }], toggleGroup: [{ type: i0.Output, args: ["toggleGroup"] }], clearFilter: [{ type: i0.Output, args: ["clearFilter"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], toggleAll: [{ type: i0.Output, args: ["toggleAll"] }], toggleValue: [{ type: i0.Output, args: ["toggleValue"] }], aggregate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregate", required: false }] }], setAggregate: [{ type: i0.Output, args: ["setAggregate"] }] } });
+            args: [{ selector: 'agrid-column-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ag-filter-menu\"\n  role=\"dialog\"\n  [attr.aria-label]=\"localeText().columnMenu + ': ' + header()\"\n  [style.left.px]=\"x()\"\n  [style.top.px]=\"y()\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (sortable()) {\n  <div class=\"ag-filter-menu-section\">\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'asc'\"\n      (click)=\"sort.emit('asc')\"\n    >\n      \u2191 {{ localeText().sortAscending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    <button\n      class=\"ag-filter-menu-item\"\n      [class.ag-filter-menu-item--active]=\"sortDir() === 'desc'\"\n      (click)=\"sort.emit('desc')\"\n    >\n      \u2193 {{ localeText().sortDescending }}\n      @if (sortPriority() > 0) {\n        <span class=\"ag-sort-priority-badge\">{{ sortPriority() }}</span>\n      }\n    </button>\n    @if (hasMultiSort() && sortPriority() > 0) {\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"resetSort.emit(sortDir()!)\">{{ localeText().sortOnlyByThis }}</button>\n    }\n    @if (sortDir()) {\n      <button class=\"ag-filter-menu-item\" (click)=\"sort.emit(sortDir()!)\">{{ localeText().clearSort }}</button>\n    }\n  </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item\" (click)=\"autosize.emit()\">\u2194 {{ localeText().autosizeColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'left'\"\n        (click)=\"togglePin.emit()\"\n      >\u22A3 {{ pinned() === 'left' ? localeText().unpinColumn : localeText().pinColumn }}</button>\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"pinned() === 'right'\"\n        (click)=\"togglePinRight.emit()\"\n      >\u22A2 {{ pinned() === 'right' ? localeText().unpinColumnRight : localeText().pinColumnRight }}</button>\n      <button class=\"ag-filter-menu-item\" (click)=\"hide.emit()\">{{ localeText().hideColumn }}</button>\n    </div>\n  }\n\n  @if (showColumnActions()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().aggregate }}</span>\n      <div class=\"ag-filter-menu-aggregate-btns\">\n        @for (opt of aggregateOptions(); track opt.value) {\n          <button\n            class=\"ag-aggregate-btn\"\n            [class.ag-aggregate-btn--active]=\"aggregate() === opt.value\"\n            [title]=\"opt.label\"\n            (click)=\"setAggregate.emit(aggregate() === opt.value ? null : opt.value)\"\n          >{{ opt.symbol }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (groupable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button\n        class=\"ag-filter-menu-item\"\n        [class.ag-filter-menu-item--active]=\"grouped()\"\n        (click)=\"toggleGroup.emit()\"\n      >{{ grouped() ? '\u229F ' + localeText().ungroup : '\u229E ' + localeText().groupBy(header()) }}</button>\n    </div>\n  }\n\n  @if (filterable()) {\n    <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearFilter.emit()\">\n        \u2715 {{ localeText().clearFilter }}\n      </button>\n      <button class=\"ag-filter-menu-item ag-filter-menu-item--muted\" (click)=\"clearAll.emit()\">\n        \u2715 {{ localeText().clearAllFilters }}\n      </button>\n    </div>\n\n    @if (filterType()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border ag-filter-menu-condition\">\n        <span class=\"ag-filter-menu-aggregate-label\">{{ localeText().filterCondition }}</span>\n        <select\n          class=\"ag-filter-menu-operator\"\n          (change)=\"operatorChange.emit($any($event.target).value || null)\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <option value=\"\" [selected]=\"!operator()\">{{ localeText().filterNoCondition }}</option>\n          @for (op of operatorOptions(); track op.value) {\n            <option [value]=\"op.value\" [selected]=\"op.value === operator()\">{{ op.label }}</option>\n          }\n        </select>\n        @if (operator()) {\n          <input\n            class=\"ag-filter-menu-operand\"\n            [type]=\"operandInputType()\"\n            [value]=\"operand()\"\n            (input)=\"operandChange.emit($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n          @if (operator() === 'between') {\n            <input\n              class=\"ag-filter-menu-operand\"\n              [type]=\"operandInputType()\"\n              [value]=\"operand2()\"\n              (input)=\"operand2Change.emit($any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n        }\n      </div>\n    }\n\n    @if (showValueFilter()) {\n      <div class=\"ag-filter-menu-section ag-filter-menu-section--border\">\n        <input\n          class=\"ag-filter-menu-search\"\n          [value]=\"search()\"\n          (input)=\"searchChange.emit($any($event.target).value)\"\n          [placeholder]=\"localeText().searchValuesPlaceholder\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </div>\n\n      <div class=\"ag-filter-menu-values\">\n        <label class=\"ag-filter-menu-value\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"allSelected()\"\n            (change)=\"toggleAll.emit()\"\n          />\n          <span class=\"ag-filter-menu-value-label\">{{ localeText().selectAll }}</span>\n        </label>\n        @for (item of valueItems(); track item.rawStr) {\n          <label\n            class=\"ag-filter-menu-value\"\n            [class.ag-filter-menu-value--inactive]=\"!item.active\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"item.selected\"\n              [disabled]=\"!item.active\"\n              (change)=\"toggleValue.emit(item.rawStr)\"\n            />\n            <span class=\"ag-filter-menu-value-label\">{{ item.label || localeText().blank }}</span>\n          </label>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".ag-filter-menu{position:fixed;z-index:1001;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:200px;font-size:13px;overflow:hidden}.ag-filter-menu-section{padding:4px 0}.ag-filter-menu-section--border{border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-item{display:block;width:100%;padding:5px 14px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit;font-size:12px}.ag-filter-menu-item:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-item--active{color:var(--agrid-color-accent);font-weight:600}.ag-filter-menu-item--muted{color:var(--agrid-color-text-muted)}.ag-filter-menu-item--muted:hover{background:var(--mat-toolbar-container-background-color);color:var(--agrid-color-text-muted);cursor:not-allowed}.ag-filter-menu-search{background:var(--agrid-color-bg-subtle);display:block;width:calc(100% - 16px);margin:0 8px;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 6px}.ag-filter-menu-search:focus{border-color:var(--agrid-color-accent)}.ag-filter-menu-values{max-height:200px;overflow-y:auto;padding:4px 0;border-top:1px solid var(--agrid-color-border)}.ag-filter-menu-value{display:flex;align-items:center;gap:6px;padding:3px 14px;cursor:pointer;font-size:12px}.ag-filter-menu-value:hover{background:var(--agrid-color-bg-muted)}.ag-filter-menu-value input[type=checkbox]{cursor:pointer;margin:0}.ag-filter-menu-value--inactive{opacity:.38;cursor:default}.ag-filter-menu-value--inactive input[type=checkbox]{cursor:not-allowed}.ag-filter-menu-value-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-sort-priority-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--agrid-color-accent);color:#fff;font-size:9px;font-weight:700;margin-left:auto}.ag-filter-menu-aggregate-label{display:block;padding:4px 14px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none}.ag-filter-menu-aggregate-btns{display:flex;gap:4px;padding:2px 14px 6px}.ag-aggregate-btn{flex:1;height:26px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text-muted);font-size:13px;cursor:pointer;padding:0;transition:background 80ms,color 80ms}.ag-aggregate-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text);border-color:var(--agrid-color-text-muted)}.ag-aggregate-btn--active{background:var(--agrid-color-accent-subtle);border-color:var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-weight:700}.ag-filter-menu-condition{display:flex;flex-direction:column;gap:6px;padding:6px 14px 8px}.ag-filter-menu-operator,.ag-filter-menu-operand{height:28px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;padding:0 8px;box-sizing:border-box;width:100%}.ag-filter-menu-operator:focus,.ag-filter-menu-operand:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"] }]
+        }], propDecorators: { localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], showColumnActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnActions", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], showValueFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueFilter", required: false }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], operator: [{ type: i0.Input, args: [{ isSignal: true, alias: "operator", required: false }] }], operand: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand", required: false }] }], operand2: [{ type: i0.Input, args: [{ isSignal: true, alias: "operand2", required: false }] }], operatorChange: [{ type: i0.Output, args: ["operatorChange"] }], operandChange: [{ type: i0.Output, args: ["operandChange"] }], operand2Change: [{ type: i0.Output, args: ["operand2Change"] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], sortPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortPriority", required: false }] }], hasMultiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMultiSort", required: false }] }], sort: [{ type: i0.Output, args: ["sort"] }], resetSort: [{ type: i0.Output, args: ["resetSort"] }], autosize: [{ type: i0.Output, args: ["autosize"] }], togglePin: [{ type: i0.Output, args: ["togglePin"] }], togglePinRight: [{ type: i0.Output, args: ["togglePinRight"] }], hide: [{ type: i0.Output, args: ["hide"] }], toggleGroup: [{ type: i0.Output, args: ["toggleGroup"] }], clearFilter: [{ type: i0.Output, args: ["clearFilter"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], toggleAll: [{ type: i0.Output, args: ["toggleAll"] }], toggleValue: [{ type: i0.Output, args: ["toggleValue"] }], aggregate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregate", required: false }] }], setAggregate: [{ type: i0.Output, args: ["setAggregate"] }] } });
 
 /** Owns column-menu state, filters, sorting, and menu-triggered column mutations. @internal */
 class AgridColumnMenuController {
@@ -1197,6 +1509,84 @@ class AgridColumnMenuController {
     getTextFilter(field) {
         return this.opts.control()?.getFilter(field).text ?? '';
     }
+    /** Returns the range-filter input type for a field, or `null` when not range-filterable. */
+    getFilterType(field) {
+        const type = this.getColDef(field)?.type;
+        return type === 'number' || type === 'date' ? type : null;
+    }
+    /** Returns the typed range-filter operator for a field, or `null`. */
+    getFilterOperator(field) {
+        return this.opts.control()?.getFilter(field).operator ?? null;
+    }
+    /** Returns the primary range-filter operand for a field. */
+    getFilterOperand(field) {
+        return this.opts.control()?.getFilter(field).operand ?? '';
+    }
+    /** Returns the secondary range-filter operand (used by `between`). */
+    getFilterOperand2(field) {
+        return this.opts.control()?.getFilter(field).operand2 ?? '';
+    }
+    /** Sets the range-filter operator; clearing it (`null`) also drops the operands. */
+    setFilterOperator(field, operator) {
+        const control = this.opts.control();
+        if (!control)
+            return;
+        if (!operator) {
+            control.setRangeFilter(field, null, null, null);
+        }
+        else {
+            const current = control.getFilter(field);
+            control.setRangeFilter(field, operator, current.operand ?? '', current.operand2 ?? '');
+        }
+        this.emitRangeServer(field, false);
+    }
+    /** Sets the primary range-filter operand. */
+    setFilterOperand(field, value) {
+        const control = this.opts.control();
+        if (!control)
+            return;
+        const current = control.getFilter(field);
+        control.setRangeFilter(field, current.operator ?? 'eq', value, current.operand2 ?? '');
+        this.emitRangeServer(field, true);
+    }
+    /** Sets the secondary range-filter operand (used by `between`). */
+    setFilterOperand2(field, value) {
+        const control = this.opts.control();
+        if (!control)
+            return;
+        const current = control.getFilter(field);
+        control.setRangeFilter(field, current.operator ?? 'between', current.operand ?? '', value);
+        this.emitRangeServer(field, true);
+    }
+    /**
+     * In server-side filtering mode, emit a {@link FilterChangeEvent} carrying the current range
+     * condition so the host can refetch. Operand edits are debounced; operator changes are immediate.
+     * No-op in client mode (the projection layer filters locally).
+     */
+    emitRangeServer(field, debounce) {
+        if (!this.opts.serverSideFiltering())
+            return;
+        const emit = () => {
+            const f = this.opts.control()?.getFilter(field);
+            this.opts.onFilterChange({
+                field,
+                value: '',
+                operator: f?.operator ?? null,
+                operand: f?.operand ?? null,
+                operand2: f?.operand2 ?? null,
+            });
+        };
+        this.cancelFilterDebounce(field);
+        const delay = this.opts.filterDebounceMs();
+        if (!debounce || delay === 0) {
+            emit();
+            return;
+        }
+        this.filterDebounces.set(field, setTimeout(() => {
+            this.filterDebounces.delete(field);
+            emit();
+        }, delay));
+    }
     /** Returns the active sort direction, respecting disabled sorting. */
     getSort(field) {
         return this.opts.sortOption() === 'none'
@@ -1309,6 +1699,9 @@ class AgridColumnMenuController {
         if (this.opts.serverSideFiltering()) {
             if (previous.text)
                 this.opts.onFilterChange({ field, value: '' });
+            if (previous.operator) {
+                this.opts.onFilterChange({ field, value: '', operator: null, operand: null, operand2: null });
+            }
             if (previous.sort)
                 this.opts.onSortChange({ field, direction: null });
         }
@@ -1350,6 +1743,9 @@ class AgridColumnMenuController {
             for (const [field, filter] of Object.entries(previous)) {
                 if (filter.text)
                     this.opts.onFilterChange({ field, value: '' });
+                if (filter.operator) {
+                    this.opts.onFilterChange({ field, value: '', operator: null, operand: null, operand2: null });
+                }
                 if (filter.sort)
                     this.opts.onSortChange({ field, direction: null });
             }
@@ -1407,6 +1803,15 @@ class AgridColumnMenuController {
     toggleColumnVisibility(field) {
         this.opts.control()?.toggleColumnVisibility(field);
     }
+    /** Sets visibility for several fields from a sidebar header-group toggle. */
+    setColumnsVisibility(fields, visible) {
+        const control = this.opts.control();
+        if (!control)
+            return;
+        for (const field of fields) {
+            control.setColumnVisibility(field, visible);
+        }
+    }
     getColDef(field) {
         return this.opts.colDefs().find(col => col.field === field);
     }
@@ -1971,6 +2376,8 @@ class AgridEditController {
     editingCell = signal(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
     currentDraft = signal(null, ...(ngDevMode ? [{ debugName: "currentDraft" }] : /* istanbul ignore next */ []));
     editSeedChar = signal('', ...(ngDevMode ? [{ debugName: "editSeedChar" }] : /* istanbul ignore next */ []));
+    /** The active cell validation error, or `null` when the last commit was accepted. */
+    validationError = signal(null, ...(ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []));
     constructor(opts) {
         this.opts = opts;
     }
@@ -1987,6 +2394,7 @@ class AgridEditController {
         const col = this.opts.visibleColDefs()[colIndex];
         if (!this.isCellEditable(col))
             return;
+        this.validationError.set(null);
         const currentValue = this.opts.dataSource().getRow(originalIndex)[col.field];
         this.opts.selectedRange.set(null);
         this.opts.selectedCell.set({ rowIndex: originalIndex, colIndex });
@@ -2007,19 +2415,30 @@ class AgridEditController {
         if (displayIndex >= 0)
             this.opts.scrollToCell(displayIndex, colIndex);
     }
-    /** Commits the staged value and records the edit in history. */
+    /**
+     * Commits the staged value and records the edit in history.
+     * Returns `false` (keeping the cell in edit mode) when a `ColDef.validate` hook rejects the
+     * value; `true` when the edit is committed or there was no change.
+     */
     commit() {
         const position = this.editingCell();
         if (!position)
-            return;
+            return true;
         const col = this.opts.visibleColDefs()[position.colIndex];
         if (!col) {
             this.cancel();
-            return;
+            return true;
         }
-        const oldValue = this.opts.dataSource().getRow(position.rowIndex)[col.field];
+        const row = this.opts.dataSource().getRow(position.rowIndex);
+        const oldValue = row[col.field];
         const newValue = this.currentDraft();
         if (oldValue !== newValue) {
+            const message = col.validate?.(newValue, row) ?? null;
+            if (message) {
+                this.validationError.set({ ...position, field: col.field, message });
+                this.opts.onValidationFailed({ rowIndex: position.rowIndex, field: col.field, value: newValue, message });
+                return false;
+            }
             this.opts.dataSource().patchRow(position.rowIndex, { [col.field]: newValue });
             this.opts.control()?.pushEdit({
                 rowIndex: position.rowIndex,
@@ -2029,11 +2448,43 @@ class AgridEditController {
             });
             this.opts.onCellEdit({ position, field: col.field, oldValue, newValue });
         }
+        this.validationError.set(null);
         this.clearEditState();
         this.opts.focusGrid();
+        return true;
+    }
+    /**
+     * Commit a value directly to a cell without entering edit mode (e.g. a boolean checkbox
+     * toggle). Records the change in history and emits the edit just like {@link commit}.
+     */
+    setCellValue(rowIndex, colIndex, newValue) {
+        const col = this.opts.visibleColDefs()[colIndex];
+        if (!this.isCellEditable(col))
+            return false;
+        const row = this.opts.dataSource().getRow(rowIndex);
+        const oldValue = row[col.field];
+        if (oldValue === newValue)
+            return true;
+        const message = col.validate?.(newValue, row) ?? null;
+        if (message) {
+            this.validationError.set({ rowIndex, colIndex, field: col.field, message });
+            this.opts.onValidationFailed({ rowIndex, field: col.field, value: newValue, message });
+            return false;
+        }
+        this.opts.dataSource().patchRow(rowIndex, { [col.field]: newValue });
+        this.opts.control()?.pushEdit({ rowIndex, field: col.field, oldValue, newValue });
+        this.opts.onCellEdit({
+            position: { rowIndex, colIndex },
+            field: col.field,
+            oldValue,
+            newValue,
+        });
+        this.validationError.set(null);
+        return true;
     }
     /** Discards the active edit without changing row data. */
     cancel() {
+        this.validationError.set(null);
         this.clearEditState();
     }
     /** Applies the previous edit-history value to the data source. */
@@ -2264,6 +2715,59 @@ class AgridGroupController {
     }
 }
 
+/**
+ * Owns the expand/collapse state of a hierarchical (tree) grid.
+ *
+ * Expansion is keyed by **node id** (from {@link AgridTreeConfig.getId}), independent of any
+ * column or grouping field, so it works at arbitrary depth. Ids that no longer exist in the
+ * data simply never match and are harmless, so the state does not need to be reset when the
+ * underlying rows change.
+ *
+ * Mirrors {@link AgridGroupController} in spirit but is intentionally option-free — the grid
+ * component supplies node ids to {@link expandAll} from the current data source.
+ * @internal
+ */
+class AgridTreeController {
+    /** Ids of the nodes that are currently expanded (their children are visible). */
+    expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+    /** Returns `true` when the node with `id` is currently expanded. */
+    isExpanded(id) {
+        return this.expandedIds().has(id);
+    }
+    /** Toggle the expanded state of a single node. */
+    toggle(id) {
+        this.expandedIds.update(ids => {
+            const next = new Set(ids);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }
+    /** Explicitly expand or collapse a single node. */
+    setExpanded(id, expanded) {
+        this.expandedIds.update(ids => {
+            if (expanded === ids.has(id))
+                return ids;
+            const next = new Set(ids);
+            if (expanded)
+                next.add(id);
+            else
+                next.delete(id);
+            return next;
+        });
+    }
+    /** Expand every node in `ids` (typically all expandable nodes in the data source). */
+    expandAll(ids) {
+        this.expandedIds.set(new Set(ids));
+    }
+    /** Collapse every node. */
+    collapseAll() {
+        this.expandedIds.set(new Set());
+    }
+}
+
 /**
  * Owns grid keyboard navigation, cell activation, add-row creation, and visibility scrolling.
  * @internal
@@ -2333,13 +2837,13 @@ class AgridNavigationController {
             switch (event.key) {
                 case 'Tab':
                     event.preventDefault();
-                    this.opts.commitEdit();
-                    this.moveSelection(0, event.shiftKey ? -1 : 1);
+                    if (this.opts.commitEdit())
+                        this.moveSelection(0, event.shiftKey ? -1 : 1);
                     break;
                 case 'Enter':
                     event.preventDefault();
-                    this.opts.commitEdit();
-                    this.moveSelection(1, 0);
+                    if (this.opts.commitEdit())
+                        this.moveSelection(1, 0);
                     break;
                 case 'Escape':
                     event.preventDefault();
@@ -2601,6 +3105,7 @@ class AgridPresentationService {
 class AgridControl {
     _columnWidths = signal({}, ...(ngDevMode ? [{ debugName: "_columnWidths" }] : /* istanbul ignore next */ []));
     _filters = signal({}, ...(ngDevMode ? [{ debugName: "_filters" }] : /* istanbul ignore next */ []));
+    _quickFilter = signal('', ...(ngDevMode ? [{ debugName: "_quickFilter" }] : /* istanbul ignore next */ []));
     _allowRowReorder = signal(false, ...(ngDevMode ? [{ debugName: "_allowRowReorder" }] : /* istanbul ignore next */ []));
     _groupByField = signal(null, ...(ngDevMode ? [{ debugName: "_groupByField" }] : /* istanbul ignore next */ []));
     _hiddenColumns = signal(new Set(), ...(ngDevMode ? [{ debugName: "_hiddenColumns" }] : /* istanbul ignore next */ []));
@@ -2618,6 +3123,8 @@ class AgridControl {
             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)
@@ -2662,6 +3169,16 @@ class AgridControl {
     setGroupBy(field) {
         this._groupByField.set(field);
     }
+    /**
+     * Global quick-filter text. When non-empty (and not in server-side filtering mode),
+     * the grid keeps only rows where at least one visible column's display value contains
+     * this text (case-insensitive).
+     */
+    quickFilter = this._quickFilter.asReadonly();
+    /** Set the global quick-filter text. Pass an empty string to clear it. */
+    setQuickFilter(text) {
+        this._quickFilter.set(text);
+    }
     /**
      * Reactive set of field names that are currently hidden.
      * An empty set means all columns are visible.
@@ -2934,6 +3451,17 @@ class AgridControl {
             [field]: { ...this.getFilter(field), selectedValues: values },
         }));
     }
+    /**
+     * Set the typed range filter for a `number` / `date` column.
+     * Pass `operator: null` (or an empty `operand`) to clear it. `operand2` is only used
+     * by the `'between'` operator.
+     */
+    setRangeFilter(field, operator, operand, operand2 = null) {
+        this._filters.update(f => ({
+            ...f,
+            [field]: { ...this.getFilter(field), operator, operand, operand2 },
+        }));
+    }
     /** Ordered list of sorted field names, from highest to lowest priority. */
     sortOrder = this._sortOrder.asReadonly();
     /** Return the 1-based sort priority of a field, or `0` if it is not sorted. */
@@ -2981,10 +3509,11 @@ class AgridControl {
         });
         this._sortOrder.update(o => o.filter(f => f !== field));
     }
-    /** Remove all active filters and sorts for every column. */
+    /** Remove all active filters and sorts for every column, including the quick filter. */
     clearAllFilters() {
         this._filters.set({});
         this._sortOrder.set([]);
+        this._quickFilter.set('');
     }
     /**
      * Return `true` when the given field has any active filter or sort.
@@ -2992,11 +3521,13 @@ class AgridControl {
      */
     hasActiveFilter(field) {
         const f = this.getFilter(field);
-        return !!(f.text || f.selectedValues !== null || f.sort);
+        const hasRange = !!f.operator && f.operand != null && f.operand !== '';
+        return !!(f.text || f.selectedValues !== null || f.sort || hasRange);
     }
-    /** Return `true` when ANY column has an active filter or sort. */
+    /** Return `true` when the quick filter or ANY column has an active filter or sort. */
     hasAnyActiveFilter() {
-        return Object.values(this._filters()).some(f => f.text || f.selectedValues !== null || f.sort);
+        return !!this._quickFilter() || Object.values(this._filters()).some(f => f.text || f.selectedValues !== null || f.sort
+            || (!!f.operator && f.operand != null && f.operand !== ''));
     }
     // ── Serialization ──────────────────────────────────────────────────────────
     /** Serialize current state to a plain object suitable for JSON storage. */
@@ -3004,6 +3535,7 @@ class AgridControl {
         return {
             columnWidths: { ...this._columnWidths() },
             filters: { ...this._filters() },
+            quickFilter: this._quickFilter() || undefined,
             allowRowReorder: this._allowRowReorder(),
             groupByField: this._groupByField() ?? undefined,
             hiddenColumns: [...this._hiddenColumns()],
@@ -3180,6 +3712,8 @@ class AgridProvider {
     columns;
     /** Header-group labels referenced by column definitions. */
     headerGroups;
+    /** Tree configuration, or `null` when the grid is not in tree mode. */
+    treeConfig;
     /** Shared grid options such as locale. */
     options;
     _localizations = new Map();
@@ -3219,6 +3753,8 @@ class AgridProvider {
     serverSideFiltering;
     /** Delay before server-side filter events are emitted. */
     filterDebounceMs;
+    /** Whether the global quick-filter box is shown above the grid. */
+    enableQuickFilter;
     /** Enabled sorting mode. */
     sortOption;
     /** Toggle auto-add-rows without recreating the provider. @default signal(false) */
@@ -3252,6 +3788,7 @@ class AgridProvider {
         this.control = config.control ?? new AgridControl({ allowRowReorder: true });
         this.columns = signal(config.columns ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.headerGroups = config.headerGroups ?? [];
+        this.treeConfig = config.treeConfig ?? null;
         this.rowHeight = config.rowHeight ?? 32;
         this.minHeight = config.minHeight;
         this.maxHeight = config.maxHeight;
@@ -3263,6 +3800,7 @@ class AgridProvider {
         this.autoOpenDetail = config.autoOpenDetail ?? false;
         this.serverSideFiltering = config.serverSideFiltering ?? false;
         this.filterDebounceMs = Math.max(0, config.filterDebounceMs ?? 300);
+        this.enableQuickFilter = config.enableQuickFilter ?? false;
         this.sortOption = config.sortOption ?? 'multi';
         this.rowSelection = config.rowSelection ?? 'none';
         this.groupDescription = config.groupDescription ?? null;
@@ -3301,6 +3839,10 @@ class AgridProjectionModel {
             return indices;
         const filters = control.filters();
         indices = applyTextAndValueFilters(rows, indices, filters, colMap, this.opts.locale());
+        const quick = control.quickFilter();
+        if (quick) {
+            indices = applyQuickFilter(rows, indices, quick, this.opts.visibleColDefs(), this.opts.locale());
+        }
         if (control.groupByField())
             return indices;
         const sortEntries = this.sortEntries(filters);
@@ -3310,6 +3852,18 @@ class AgridProjectionModel {
     }, ...(ngDevMode ? [{ debugName: "filteredSortedIndices" }] : /* istanbul ignore next */ []));
     /** Total filtered row count, unaffected by client-side pagination. */
     filteredRowCount = computed(() => this.filteredSortedIndices().length, ...(ngDevMode ? [{ debugName: "filteredRowCount" }] : /* istanbul ignore next */ []));
+    /** All source indices in active sort order, ignoring filters. Used for tree ancestor ordering. */
+    allSortedIndices = computed(() => {
+        const rows = this.opts.dataSource().rows();
+        const control = this.opts.control();
+        const indices = rows.map((_, index) => index);
+        if (!control || this.opts.serverSideFiltering())
+            return indices;
+        const sortEntries = this.sortEntries(control.filters());
+        return sortEntries.length
+            ? applySortToIndices(rows, indices, sortEntries, this.columnMap(), this.opts.locale())
+            : indices;
+    }, ...(ngDevMode ? [{ debugName: "allSortedIndices" }] : /* istanbul ignore next */ []));
     /** Total page count using server total when server-side pagination is active. */
     totalPages = computed(() => {
         const control = this.opts.control();
@@ -3324,6 +3878,8 @@ class AgridProjectionModel {
     /** Whether client or server pagination controls should be rendered. */
     showPagination = computed(() => {
         const control = this.opts.control();
+        if (this.opts.treeConfig())
+            return false;
         return (control?.pageSize() ?? 0) > 0 && !control?.groupByField();
     }, ...(ngDevMode ? [{ debugName: "showPagination" }] : /* istanbul ignore next */ []));
     /** Whether at least one visible column has an aggregate footer. */
@@ -3332,48 +3888,48 @@ class AgridProjectionModel {
         return this.opts.visibleColDefs().some(col => col.aggregate || aggregates[col.field]);
     }, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
     /** Aggregate values computed over all filtered rows, before pagination. */
-    footerValues = computed(() => {
-        const rows = this.opts.dataSource().rows();
-        const indices = this.filteredSortedIndices();
-        const controlAggregates = this.opts.control()?.aggregates() ?? {};
-        const result = {};
-        for (const col of this.opts.visibleColDefs()) {
-            const aggregate = controlAggregates[col.field] ?? col.aggregate;
-            if (!aggregate)
-                continue;
-            const values = indices.map(index => rows[index][col.field]);
-            if (typeof aggregate === 'function') {
-                result[col.field] = aggregate(values);
-                continue;
-            }
-            const numbers = values.map(Number).filter(value => !Number.isNaN(value));
-            switch (aggregate) {
-                case 'sum':
-                    result[col.field] = numbers.reduce((sum, value) => sum + value, 0);
-                    break;
-                case 'avg':
-                    result[col.field] = numbers.length
-                        ? numbers.reduce((sum, value) => sum + value, 0) / numbers.length
-                        : null;
-                    break;
-                case 'min':
-                    result[col.field] = numbers.length ? Math.min(...numbers) : null;
-                    break;
-                case 'max':
-                    result[col.field] = numbers.length ? Math.max(...numbers) : null;
-                    break;
-                case 'count':
-                    result[col.field] = values.filter(value => value != null && value !== '').length;
-                    break;
-            }
-        }
-        return result;
-    }, ...(ngDevMode ? [{ debugName: "footerValues" }] : /* istanbul ignore next */ []));
+    footerValues = computed(() => computeAggregates(this.opts.dataSource().rows(), this.filteredSortedIndices(), this.opts.visibleColDefs(), this.opts.control()?.aggregates() ?? {}), ...(ngDevMode ? [{ debugName: "footerValues" }] : /* istanbul ignore next */ []));
     /** Filtered, sorted, paginated, and optionally grouped virtual-scroll items. */
     filteredItems = computed(() => {
         const rows = this.opts.dataSource().rows();
         const control = this.opts.control();
         let indices = this.filteredSortedIndices();
+        // 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();
+            // 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 (filterActive && treeConfig.keepAncestorsOnFilter !== false) {
+                const { getId, getParentId } = treeConfig;
+                const idToIndex = new Map();
+                rows.forEach((row, index) => idToIndex.set(getId(row), index));
+                const visible = new Set(indices);
+                const forced = new Set();
+                for (const matched of indices) {
+                    let parentId = getParentId(rows[matched]);
+                    while (parentId != null && idToIndex.has(parentId)) {
+                        const parentIndex = idToIndex.get(parentId);
+                        forced.add(parentId);
+                        if (visible.has(parentIndex))
+                            break; // chain already added by an earlier match
+                        visible.add(parentIndex);
+                        parentId = getParentId(rows[parentIndex]);
+                    }
+                }
+                const ordered = this.allSortedIndices().filter(index => visible.has(index));
+                const items = buildTreeItems(rows, ordered, treeConfig, expandedIds, forced);
+                this.appendAddRow(items);
+                return items;
+            }
+            const items = buildTreeItems(rows, indices, treeConfig, expandedIds);
+            this.appendAddRow(items);
+            return items;
+        }
         if (control) {
             const groupField = control.groupByField();
             const pageSize = control.pageSize();
@@ -3391,7 +3947,7 @@ class AgridProjectionModel {
                 const sortEntries = this.opts.serverSideFiltering()
                     ? []
                     : this.sortEntries(filters);
-                const items = buildGroupedItems(rows, indices, groupField, this.columnMap(), sortEntries, expandedLabels, this.opts.locale());
+                const items = buildGroupedItems(rows, indices, groupField, this.columnMap(), sortEntries, expandedLabels, this.opts.locale(), this.opts.visibleColDefs(), control.aggregates());
                 this.appendAddRow(items);
                 return items;
             }
@@ -3676,6 +4232,17 @@ class AgridRangeController {
     }
 }
 
+/**
+ * Whether a pointer event originated inside an editable form control. Used to avoid calling
+ * `preventDefault()` on a row pointerdown, which would otherwise cancel native text selection
+ * (and caret placement) inside an active cell editor.
+ */
+function isEditableEventTarget(target) {
+    return target instanceof HTMLInputElement
+        || target instanceof HTMLTextAreaElement
+        || target instanceof HTMLSelectElement
+        || (target instanceof HTMLElement && target.isContentEditable);
+}
 /**
  * Owns row selection, row/cell context menus, and row-level operations.
  * @internal
@@ -3739,7 +4306,7 @@ class AgridRowController {
             this.emitSelection();
         }
         else {
-            if (!(event.target instanceof HTMLSelectElement))
+            if (!isEditableEventTarget(event.target))
                 event.preventDefault();
             this.selectedIndices.set(new Set([originalIndex]));
             this.selectionPivot = originalIndex;
@@ -3868,9 +4435,21 @@ class AgridSidebarController {
         return index === null ? null : this.opts.dataSource().rows()[index] ?? null;
     }, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     hiddenColumns = computed(() => this.opts.control()?.hiddenColumns() ?? new Set(), ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+    /** Per-field validation messages for rejected sidebar edits (`field → message`). */
+    validationErrors = signal({}, ...(ngDevMode ? [{ debugName: "validationErrors" }] : /* istanbul ignore next */ []));
     constructor(opts) {
         this.opts = opts;
     }
+    /** Remove the stored validation message for one field, if any. */
+    clearFieldError(field) {
+        if (!(field in this.validationErrors()))
+            return;
+        this.validationErrors.update(errors => {
+            const next = { ...errors };
+            delete next[field];
+            return next;
+        });
+    }
     /** Opens the detail tab when automatic detail display is enabled. */
     syncAutoOpen() {
         if (this.opts.autoOpenDetail() && this.opts.selectedRowIndex() !== null) {
@@ -3928,9 +4507,17 @@ class AgridSidebarController {
                 ? stringValue
                 : typeof option === 'string' ? option : option.value;
         }
-        const oldValue = this.opts.dataSource().getRow(index)[field];
+        const row = this.opts.dataSource().getRow(index);
+        const oldValue = row[field];
         if (oldValue === newValue)
             return;
+        const message = col.validate?.(newValue, row) ?? null;
+        if (message) {
+            this.validationErrors.update(errors => ({ ...errors, [field]: message }));
+            this.opts.onValidationFailed({ rowIndex: index, field, value: newValue, message });
+            return;
+        }
+        this.clearFieldError(field);
         this.opts.dataSource().patchRow(index, { [field]: newValue });
         const colIndex = this.opts.visibleColDefs().findIndex(column => column.field === field);
         this.opts.control()?.pushEdit({ rowIndex: index, field, oldValue, newValue });
@@ -3952,17 +4539,60 @@ 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 */ []));
+    headerGroups = input([], ...(ngDevMode ? [{ debugName: "headerGroups" }] : /* istanbul ignore next */ []));
     row = input(null, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     hiddenColumns = input(new Set(), ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
     locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     localeText = input(AGRID_LOCALE_TEXT.en, ...(ngDevMode ? [{ debugName: "localeText" }] : /* istanbul ignore next */ []));
     readonlyGrid = input(false, ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
     useSidebarEditor = input(false, ...(ngDevMode ? [{ debugName: "useSidebarEditor" }] : /* istanbul ignore next */ []));
+    /** Per-field validation messages (`field → message`) for rejected detail edits. */
+    errors = input({}, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     close = output();
     tabChange = output();
     toggleColumn = output();
+    toggleColumnGroup = output();
     detailEdit = output();
     save = output();
+    columnEntries = computed(() => {
+        const groupLabels = new Map(this.headerGroups().map(group => [group.id, group.label]));
+        const entries = [];
+        const groupedEntries = new Map();
+        for (const col of this.columns()) {
+            const groupId = col.group;
+            const groupLabel = groupId ? groupLabels.get(groupId) : undefined;
+            if (!groupId || !groupLabel) {
+                entries.push({ kind: 'column', col });
+                continue;
+            }
+            let entry = groupedEntries.get(groupId);
+            if (!entry) {
+                entry = { kind: 'group', id: groupId, label: groupLabel, columns: [] };
+                groupedEntries.set(groupId, entry);
+                entries.push(entry);
+            }
+            entry.columns.push(col);
+        }
+        return entries;
+    }, ...(ngDevMode ? [{ debugName: "columnEntries" }] : /* istanbul ignore next */ []));
+    /** Whether every column in a group is currently visible. */
+    isGroupVisible(columns) {
+        const hidden = this.hiddenColumns();
+        return columns.every(col => !hidden.has(col.field));
+    }
+    /** Whether a group contains both visible and hidden columns. */
+    isGroupPartiallyVisible(columns) {
+        const hidden = this.hiddenColumns();
+        const visibleCount = columns.filter(col => !hidden.has(col.field)).length;
+        return visibleCount > 0 && visibleCount < columns.length;
+    }
+    /** Emits a visibility request for all columns belonging to a group. */
+    onGroupToggle(columns, event) {
+        this.toggleColumnGroup.emit({
+            fields: columns.map(col => col.field),
+            visible: event.target.checked,
+        });
+    }
     detailFields = computed(() => {
         const row = this.row();
         if (!row)
@@ -3988,12 +4618,12 @@ 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 }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, readonlyGrid: { classPropertyName: "readonlyGrid", publicName: "readonlyGrid", isSignal: true, isRequired: false, transformFunction: null }, useSidebarEditor: { classPropertyName: "useSidebarEditor", publicName: "useSidebarEditor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", tabChange: "tabChange", toggleColumn: "toggleColumn", 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 (col of columns(); track col.field) {\n        <label class=\"ag-sidebar-item\" (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    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if ((field.editable || useSidebarEditor()) && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable || useSidebarEditor()) {\n              <input\n                class=\"ag-detail-input\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n          </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-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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridSidebarComponent, isStandalone: true, selector: "agrid-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, localeText: { classPropertyName: "localeText", publicName: "localeText", isSignal: true, isRequired: false, transformFunction: null }, readonlyGrid: { classPropertyName: "readonlyGrid", publicName: "readonlyGrid", isSignal: true, isRequired: false, transformFunction: null }, useSidebarEditor: { classPropertyName: "useSidebarEditor", publicName: "useSidebarEditor", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", tabChange: "tabChange", toggleColumn: "toggleColumn", toggleColumnGroup: "toggleColumnGroup", detailEdit: "detailEdit", save: "save" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if ((field.editable || useSidebarEditor()) && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable || useSidebarEditor()) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", 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 (col of columns(); track col.field) {\n        <label class=\"ag-sidebar-item\" (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    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if ((field.editable || useSidebarEditor()) && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable || useSidebarEditor()) {\n              <input\n                class=\"ag-detail-input\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n          </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-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}\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 }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], readonlyGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyGrid", required: false }] }], useSidebarEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSidebarEditor", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], toggleColumn: [{ type: i0.Output, args: ["toggleColumn"] }], detailEdit: [{ type: i0.Output, args: ["detailEdit"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+            args: [{ selector: 'agrid-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n  <div class=\"ag-sidebar\" role=\"region\"\n    [attr.aria-label]=\"activeTab() === 'columns' ? localeText().columns : localeText().detail\">\n    <div class=\"ag-sidebar-header\">\n      <span>{{ activeTab() === 'columns' ? localeText().columns : localeText().detail }}</span>\n      <button class=\"ag-sidebar-close\" (click)=\"close.emit()\" [title]=\"localeText().close\"\n        [attr.aria-label]=\"localeText().close\">\u2715</button>\n    </div>\n\n    @if (activeTab() === 'columns') {\n      @for (entry of columnEntries(); track entry.kind === 'group' ? 'group-' + entry.id : 'column-' + entry.col.field) {\n        @if (entry.kind === 'group') {\n          <div class=\"ag-sidebar-group\">\n            <label class=\"ag-sidebar-item ag-sidebar-group-label\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"isGroupVisible(entry.columns)\"\n                [indeterminate]=\"isGroupPartiallyVisible(entry.columns)\"\n                (change)=\"onGroupToggle(entry.columns, $event)\"\n              />\n              {{ entry.label }}\n            </label>\n            <div class=\"ag-sidebar-group-children\">\n              @for (col of entry.columns; track col.field) {\n                <label class=\"ag-sidebar-item ag-sidebar-group-child\" (click)=\"$event.stopPropagation()\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"!hiddenColumns().has(col.field)\"\n                    (change)=\"toggleColumn.emit(col.field)\"\n                  />\n                  {{ col.header }}\n                </label>\n              }\n            </div>\n          </div>\n        } @else {\n          <label class=\"ag-sidebar-item\" (click)=\"$event.stopPropagation()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"!hiddenColumns().has(entry.col.field)\"\n              (change)=\"toggleColumn.emit(entry.col.field)\"\n            />\n            {{ entry.col.header }}\n          </label>\n        }\n      }\n    } @else {\n      @if (detailFields(); as fields) {\n        @for (field of fields; track field.col.field) {\n          <div class=\"ag-detail-field\">\n            <span class=\"ag-detail-label\">\n              {{ field.label }}\n              @if (field.hidden) {\n                <span class=\"ag-detail-hidden\">{{ localeText().hiddenColumn }}</span>\n              }\n            </span>\n            @if ((field.editable || useSidebarEditor()) && field.col.values?.length) {\n              <select\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              >\n                @for (opt of field.col.values; track $index) {\n                  @if ($any(opt).value !== undefined) {\n                    <option [value]=\"$any(opt).value\" [selected]=\"$any(opt).value === field.rawValue\">\n                      {{ $any(opt).label }}\n                    </option>\n                  } @else {\n                    <option [value]=\"opt\" [selected]=\"opt === field.rawValue\">{{ opt }}</option>\n                  }\n                }\n              </select>\n            } @else if (field.editable || useSidebarEditor()) {\n              <input\n                class=\"ag-detail-input\"\n                [class.ag-detail-input--invalid]=\"!!errors()[field.col.field]\"\n                [type]=\"field.col.type === 'number' ? 'number' : field.col.type === 'date' ? 'date' : 'text'\"\n                [value]=\"field.inputValue\"\n                (change)=\"detailEdit.emit({\n                  field: field.col.field,\n                  col: field.col,\n                  value: $any($event.target).value\n                })\"\n              />\n            } @else {\n              <span class=\"ag-detail-value\">{{ field.value }}</span>\n            }\n            @if (errors()[field.col.field]; as msg) {\n              <span class=\"ag-detail-error\" role=\"alert\">{{ msg }}</span>\n            }\n          </div>\n        }\n        @if (useSidebarEditor()) {\n          <div class=\"ag-detail-field\">\n            <button class=\"ag-button\" (click)=\"save.emit(fields)\">{{ localeText().save }}</button>\n          </div>\n        }\n      } @else {\n        <div class=\"ag-detail-empty\">{{ localeText().noRows }}</div>\n      }\n    }\n  </div>\n}\n\n<div class=\"ag-sidebar-strip\">\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'columns'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'columns'\"\n    (click)=\"tabChange.emit('columns')\"\n  >{{ localeText().columns }}</button>\n  <button\n    class=\"ag-sidebar-strip-btn\"\n    [class.active]=\"open() && activeTab() === 'detail'\"\n    [attr.aria-pressed]=\"open() && activeTab() === 'detail'\"\n    (click)=\"tabChange.emit('detail')\"\n  >{{ localeText().detail }}</button>\n</div>\n", styles: [":host{display:flex;flex-shrink:0;min-height:0}.ag-sidebar{width:200px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-sidebar::-webkit-scrollbar{width:8px;height:8px}.ag-sidebar::-webkit-scrollbar-track{background:transparent}.ag-sidebar::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-sidebar::-webkit-scrollbar-thumb:hover{background:#00000052}.ag-sidebar-strip{width:24px;flex-shrink:0;border-left:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);display:flex;flex-direction:column}.ag-sidebar-strip-btn{background:none;border:none;border-bottom:1px solid var(--agrid-color-border);cursor:pointer;color:var(--agrid-color-text-muted);-webkit-user-select:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 5px;text-align:center}.ag-sidebar-strip-btn:hover{background:var(--agrid-color-bg);color:var(--agrid-color-text)}.ag-sidebar-strip-btn.active{color:var(--agrid-color-text);background:var(--agrid-color-bg);border-left:2px solid var(--agrid-color-accent, #4f8ef7)}.ag-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;flex-shrink:0;border-bottom:1px solid var(--agrid-color-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg-muted)}.ag-sidebar-close{background:none;border:none;cursor:pointer;color:var(--agrid-color-text-muted);font-size:11px;padding:2px 4px;border-radius:3px;line-height:1}.ag-sidebar-close:hover,.ag-sidebar-item:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.ag-sidebar-item input[type=checkbox]{cursor:pointer;margin:0;flex-shrink:0}.ag-sidebar-group-label{font-weight:600}.ag-sidebar-group-children{position:relative}.ag-sidebar-group-children:before{content:\"\";position:absolute;top:0;bottom:8px;left:19px;border-left:1px solid var(--agrid-color-border)}.ag-sidebar-group-child{position:relative;padding-left:30px}.ag-sidebar-group-child:before{content:\"\";position:absolute;left:19px;width:7px;border-top:1px solid var(--agrid-color-border)}.ag-detail-field{display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-bottom:1px solid var(--agrid-color-border);font-size:13px}.ag-detail-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--agrid-color-text-muted)}.ag-detail-hidden{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}.ag-detail-value{color:var(--agrid-color-text);word-break:break-word}.ag-detail-empty{padding:16px 12px;font-size:13px;color:var(--agrid-color-text-muted);text-align:center}.ag-detail-input{width:100%;box-sizing:border-box;font-size:13px;font-family:inherit;color:var(--agrid-color-text);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:3px;padding:3px 6px;outline:none}.ag-detail-input:focus{border-color:var(--agrid-color-accent, #4f8ef7);box-shadow:0 0 0 2px color-mix(in srgb,var(--agrid-color-accent, #4f8ef7) 20%,transparent)}.ag-button{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg-subtle);color:var(--agrid-color-text);cursor:pointer;font-size:13px;padding:0;line-height:1}.ag-detail-input--invalid{border-color:var(--agrid-color-danger);outline:1px solid var(--agrid-color-danger)}.ag-detail-error{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--agrid-color-danger)}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], localeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeText", required: false }] }], readonlyGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyGrid", required: false }] }], useSidebarEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSidebarEditor", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], toggleColumn: [{ type: i0.Output, args: ["toggleColumn"] }], toggleColumnGroup: [{ type: i0.Output, args: ["toggleColumnGroup"] }], detailEdit: [{ type: i0.Output, args: ["detailEdit"] }], save: [{ type: i0.Output, args: ["save"] }] } });
 
 /**
  * Excel-like data grid for Angular 21.
@@ -4030,12 +4660,15 @@ class AgridComponent {
     autoOpenDetail = computed(() => this.provider().autoOpenDetail, ...(ngDevMode ? [{ debugName: "autoOpenDetail" }] : /* istanbul ignore next */ []));
     serverSideFiltering = computed(() => this.provider().serverSideFiltering, ...(ngDevMode ? [{ debugName: "serverSideFiltering" }] : /* istanbul ignore next */ []));
     filterDebounceMs = computed(() => this.provider().filterDebounceMs, ...(ngDevMode ? [{ debugName: "filterDebounceMs" }] : /* istanbul ignore next */ []));
+    enableQuickFilter = computed(() => this.provider().enableQuickFilter, ...(ngDevMode ? [{ debugName: "enableQuickFilter" }] : /* istanbul ignore next */ []));
+    quickFilterValue = computed(() => this.control()?.quickFilter() ?? '', ...(ngDevMode ? [{ debugName: "quickFilterValue" }] : /* istanbul ignore next */ []));
     sortOption = computed(() => this.provider().sortOption, ...(ngDevMode ? [{ debugName: "sortOption" }] : /* istanbul ignore next */ []));
     rowSelection = computed(() => this.provider().rowSelection, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
     groupDescription = computed(() => this.provider().groupDescription, ...(ngDevMode ? [{ debugName: "groupDescription" }] : /* istanbul ignore next */ []));
     groupActions = computed(() => this.provider().groupActions, ...(ngDevMode ? [{ debugName: "groupActions" }] : /* istanbul ignore next */ []));
     cellMenuItems = computed(() => this.provider().cellMenuItems, ...(ngDevMode ? [{ debugName: "cellMenuItems" }] : /* istanbul ignore next */ []));
     headerGroups = computed(() => this.provider().headerGroups, ...(ngDevMode ? [{ debugName: "headerGroups" }] : /* istanbul ignore next */ []));
+    treeConfig = computed(() => this.provider().treeConfig, ...(ngDevMode ? [{ debugName: "treeConfig" }] : /* 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 */ []));
@@ -4089,6 +4722,14 @@ class AgridComponent {
     filterChange = output();
     /** Emitted when a column sort changes in server-side filtering mode. */
     sortChange = output();
+    /**
+     * Emitted (debounced) when the global quick-filter text changes in server-side filtering mode.
+     * The host should refetch rows matching the text. Not emitted in client mode, where the grid
+     * filters locally.
+     */
+    quickFilterChange = output();
+    /** Emitted when a `ColDef.validate` hook rejects a committed value (inline or sidebar). */
+    validationFailed = output();
     // ── Public state ─────────────────────────────────────────────────────────────
     /** Currently focused cell, or `null`. */
     selectedCell = signal(null, ...(ngDevMode ? [{ debugName: "selectedCell" }] : /* istanbul ignore next */ []));
@@ -4203,6 +4844,7 @@ class AgridComponent {
         control: this.control,
         groupDescription: this.groupDescription,
     });
+    treeController = new AgridTreeController();
     // ── Derived state ─────────────────────────────────────────────────────────────
     allowRowReorder = computed(() => (this.control()?.allowRowReorder() ?? false) && !this.control()?.groupByField(), ...(ngDevMode ? [{ debugName: "allowRowReorder" }] : /* istanbul ignore next */ []));
     /** `true` when there is a committed edit that can be undone (Ctrl+Z). */
@@ -4254,6 +4896,8 @@ class AgridComponent {
         allowAddRows: this.allowAddRows,
         autoAddRows: this.autoAddRows,
         expandedGroups: this.groupController.expandedGroups,
+        treeConfig: this.treeConfig,
+        expandedTreeIds: this.treeController.expandedIds,
     });
     editController = new AgridEditController({
         control: this.control,
@@ -4266,6 +4910,7 @@ class AgridComponent {
         scrollToCell: (displayIndex, colIndex) => this.scrollToKeepVisible(displayIndex, colIndex),
         focusGrid: () => this.wrapperEl().nativeElement.focus(),
         onCellEdit: event => this.emitEditEvents(event),
+        onValidationFailed: event => this.validationFailed.emit({ ...event, source: 'inline' }),
     });
     /** Total filtered row count regardless of current page. */
     filteredRowCount = this.projection.filteredRowCount;
@@ -4477,8 +5122,11 @@ class AgridComponent {
         useSidebarEditor: this.useSidebarEditor,
         onFieldChange: event => this.markCellChanged(event),
         onCellEdit: event => this.emitSidebarEditEvents(event),
+        onValidationFailed: event => this.validationFailed.emit({ ...event, source: 'sidebar' }),
     });
     sidebarOpen = this.sidebarController.open;
+    /** @internal Per-field sidebar validation messages. */
+    sidebarValidationErrors = this.sidebarController.validationErrors;
     sidebarTab = this.sidebarController.tab;
     sidebarRow = this.sidebarController.row;
     sidebarHiddenColumns = this.sidebarController.hiddenColumns;
@@ -4698,6 +5346,8 @@ class AgridComponent {
         this.browser.addDocumentListener('pointerdown', onOutsidePointerDown);
         this.destroyRef.onDestroy(() => {
             this.browser.removeDocumentListener('pointerdown', onOutsidePointerDown);
+            if (this.quickFilterTimer !== null)
+                clearTimeout(this.quickFilterTimer);
         });
         // Re-sync pinned pane scroll after displayItems changes — CDK independently adjusts
         // each viewport when item count changes (group/ungroup, collapse), which can leave
@@ -4744,6 +5394,47 @@ class AgridComponent {
     getItemOriginalIndex(item) {
         return isDataRowItem(item) ? item.originalIndex : null;
     }
+    // ── Template helpers — tree ───────────────────────────────────────────────────
+    /** @internal True when `col` is the configured tree column. */
+    isTreeCell(col) {
+        return this.treeConfig()?.treeField === col.field;
+    }
+    /** @internal Tree depth of a row item (0 when not a tree row). */
+    treeRowLevel(item) {
+        return isTreeRowItem(item) ? item.level : 0;
+    }
+    /** @internal Whether a tree row has children and can be expanded. */
+    treeRowExpandable(item) {
+        return isTreeRowItem(item) && item.expandable;
+    }
+    /** @internal Whether a tree row is currently expanded. */
+    treeRowExpanded(item) {
+        return isTreeRowItem(item) && item.expanded;
+    }
+    /** @internal Toggle the expand/collapse state of a tree row from its twisty. */
+    onTreeToggle(item) {
+        const config = this.treeConfig();
+        if (!config || !isTreeRowItem(item))
+            return;
+        this.treeController.toggle(config.getId(item.row));
+    }
+    /** Expand every expandable node in the tree. No-op when not in tree mode. */
+    expandAllNodes() {
+        const config = this.treeConfig();
+        if (!config)
+            return;
+        const expandable = new Set();
+        for (const row of this.dataSource().rows()) {
+            const parentId = config.getParentId(row);
+            if (parentId != null)
+                expandable.add(parentId);
+        }
+        this.treeController.expandAll(expandable);
+    }
+    /** Collapse every node in the tree. No-op when not in tree mode. */
+    collapseAllNodes() {
+        this.treeController.collapseAll();
+    }
     /** @internal CDK trackBy — arrow to preserve `this`. */
     trackByItem = (_di, item) => {
         if (item === 'ghost')
@@ -4791,6 +5482,32 @@ class AgridComponent {
         return this.columnMenuController.hasMultiSort();
     }
     getTextFilter(field) { return this.columnMenuController.getTextFilter(field); }
+    /** @internal Range-filter input type for a column, or `null` when not range-filterable. */
+    getMenuFilterType(field) {
+        return this.columnMenuController.getFilterType(field);
+    }
+    /** @internal */
+    getMenuOperator(field) {
+        return this.columnMenuController.getFilterOperator(field);
+    }
+    /** @internal */
+    getMenuOperand(field) { return this.columnMenuController.getFilterOperand(field); }
+    /** @internal */
+    getMenuOperand2(field) {
+        return this.columnMenuController.getFilterOperand2(field);
+    }
+    /** @internal */
+    onMenuOperatorChange(field, operator) {
+        this.columnMenuController.setFilterOperator(field, operator);
+    }
+    /** @internal */
+    onMenuOperandChange(field, value) {
+        this.columnMenuController.setFilterOperand(field, value);
+    }
+    /** @internal */
+    onMenuOperand2Change(field, value) {
+        this.columnMenuController.setFilterOperand2(field, value);
+    }
     /** @internal */
     getSort(field) {
         return this.columnMenuController.getSort(field);
@@ -4871,6 +5588,39 @@ class AgridComponent {
     }
     /** @internal */
     onDraftChange(value) { this.editController.setDraft(value); }
+    quickFilterTimer = null;
+    /**
+     * @internal Quick-filter input handler. Stores the text on the control (drives the bound value
+     * and client-side filtering) and, in server mode, emits a debounced `quickFilterChange` instead.
+     */
+    onQuickFilterInput(event) {
+        const text = event.target.value;
+        this.control()?.setQuickFilter(text);
+        if (!this.serverSideFiltering())
+            return;
+        if (this.quickFilterTimer !== null)
+            clearTimeout(this.quickFilterTimer);
+        const delay = this.filterDebounceMs();
+        if (delay === 0) {
+            this.quickFilterChange.emit(text);
+            return;
+        }
+        this.quickFilterTimer = setTimeout(() => {
+            this.quickFilterTimer = null;
+            this.quickFilterChange.emit(text);
+        }, delay);
+    }
+    /** @internal Whether a column is editable in the current grid state (drives boolean checkboxes). */
+    isColEditable(col) { return this.editController.isCellEditable(col); }
+    /** @internal Inline validation message for a cell, or `null` when the cell has no active error. */
+    cellValidationError(originalIndex, ci) {
+        const error = this.editController.validationError();
+        return error && error.rowIndex === originalIndex && error.colIndex === ci ? error.message : null;
+    }
+    /** @internal Commit a boolean-column checkbox toggle directly to the data source. */
+    onBooleanToggle(originalIndex, ci, value) {
+        this.editController.setCellValue(originalIndex, ci, value);
+    }
     /** @internal Starts a fill-handle drag from the bottom-right corner of the selection. */
     onCellPointerDown(event, originalIndex, colIndex) {
         this.rangeController.startFill(event, originalIndex, colIndex);
@@ -5125,6 +5875,10 @@ class AgridComponent {
     onSidebarToggleColumn(field) {
         this.columnMenuController.toggleColumnVisibility(field);
     }
+    /** @internal Sets every column in a sidebar header group to the requested visibility. */
+    onSidebarToggleColumnGroup(fields, visible) {
+        this.columnMenuController.setColumnsVisibility(fields, visible);
+    }
     /** @internal Mirrors vertical scrolling from the main viewport into both pinned panes. */
     onBodyScroll() {
         const offset = this.viewport().measureScrollOffset();
@@ -5236,7 +5990,7 @@ class AgridComponent {
         return this.columnSizing.getWidthToken(col);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridComponent, isStandalone: true, selector: "agrid", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", recordEdit: "recordEdit", rowRemoved: "rowRemoved", prepareAddRecord: "prepareAddRecord", rowReorder: "rowReorder", rowSelect: "rowSelect", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange" }, host: { properties: { "class.ag-zebra": "zebraStripes()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "pinnedViewport", first: true, predicate: ["pinnedViewport"], descendants: true, isSignal: true }, { propertyName: "rightPinnedViewport", first: true, predicate: ["rightPinnedViewport"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "horizontalScrollerEl", first: true, predicate: ["horizontalScroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\" (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\"\n  (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu()\">\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [itemSize]=\"rowHeight()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\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)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\"\n              [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\"\n                (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [itemSize]=\"rowHeight()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n              [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\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                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\"\n                [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\"\n                [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\"\n                  type=\"button\" (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\"\n            [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [itemSize]=\"rowHeight()\" [style.width.px]=\"rightPinnedPaneWidth()\" (scroll)=\"onRightPinnedBodyScroll()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar\n      [open]=\"sidebarOpen()\"\n      [activeTab]=\"sidebarTab()\"\n      [columns]=\"colDefs()\"\n      [row]=\"sidebarRow()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\"\n      [locale]=\"locale()\"\n      [localeText]=\"localeText()\"\n      [readonlyGrid]=\"readonlyGrid()\"\n      [useSidebarEditor]=\"useSidebarEditor()\"\n      (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\"\n    />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\"\n      (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\"\n      (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n  </div>\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow }}</button>\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{ localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\"\n      (click)=\"deleteRow(menu.rowIndex)\">{{ localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\" [disabled]=\"item.disabled\"\n      (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\"\n    [showColumnActions]=\"!!control()\" [pinned]=\"getColumnPinState(menu.field)\"\n    [groupable]=\"!!getColDef(menu.field)?.groupable\" [grouped]=\"isGroupedByField(menu.field)\"\n    [filterable]=\"!!getColDef(menu.field)?.filterable\" [showValueFilter]=\"!serverSideFiltering()\"\n    [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\"\n    [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\" (sort)=\"onMenuSort(menu.field, $event)\"\n    (resetSort)=\"onMenuResetSort(menu.field, $event)\" (autosize)=\"onMenuAutosizeColumn(menu.field)\"\n    (togglePin)=\"onMenuTogglePin(menu.field)\" (togglePinRight)=\"onMenuTogglePinRight(menu.field)\"\n    (hide)=\"onMenuHideColumn(menu.field)\" (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\"\n    (clearFilter)=\"onMenuClearFilter(menu.field)\" (clearAll)=\"onMenuClearAll()\"\n    (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\"\n    [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-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)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: AgridCellComponent, selector: "agrid-cell", inputs: ["col", "rowIndex", "colIndex", "value", "row", "locale", "selected", "editing", "seedChar"], outputs: ["activate", "startEdit", "draftChange"] }, { kind: "component", type: AgridColumnMenuComponent, selector: "agrid-column-menu", inputs: ["localeText", "x", "y", "header", "sortDir", "sortable", "showColumnActions", "pinned", "groupable", "grouped", "filterable", "showValueFilter", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["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", "row", "hiddenColumns", "locale", "localeText", "readonlyGrid", "useSidebarEditor"], outputs: ["close", "tabChange", "toggleColumn", "detailEdit", "save"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AgridComponent, isStandalone: true, selector: "agrid", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", recordEdit: "recordEdit", rowRemoved: "rowRemoved", prepareAddRecord: "prepareAddRecord", rowReorder: "rowReorder", rowSelect: "rowSelect", rowDoubleClicked: "rowDoubleClicked", rowClick: "rowClick", rowChanged: "rowChanged", pageChange: "pageChange", filterChange: "filterChange", sortChange: "sortChange", quickFilterChange: "quickFilterChange", validationFailed: "validationFailed" }, host: { properties: { "class.ag-zebra": "zebraStripes()", "style.min-height": "minHeight()", "style.max-height": "maxHeight()" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }, { propertyName: "pinnedViewport", first: true, predicate: ["pinnedViewport"], descendants: true, isSignal: true }, { propertyName: "rightPinnedViewport", first: true, predicate: ["rightPinnedViewport"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "horizontalScrollerEl", first: true, predicate: ["horizontalScroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #wrapper class=\"ag-wrapper\" tabindex=\"0\" role=\"grid\" [attr.aria-label]=\"localeText().grid\"\n  [attr.aria-rowcount]=\"ariaRowCount()\" [attr.aria-colcount]=\"ariaColCount()\"\n  [attr.aria-multiselectable]=\"rowSelection() === 'multi' ? 'true' : null\"\n  [attr.aria-readonly]=\"readonlyGrid() ? 'true' : null\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\" (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\"\n  (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu()\">\n  @if (enableQuickFilter()) {\n    <div class=\"ag-toolbar\">\n      <input\n        class=\"ag-quick-filter\"\n        type=\"search\"\n        [value]=\"quickFilterValue()\"\n        (input)=\"onQuickFilterInput($event)\"\n        [placeholder]=\"localeText().quickFilterPlaceholder\"\n        [attr.aria-label]=\"localeText().quickFilterPlaceholder\"\n      />\n    </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [itemSize]=\"rowHeight()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\"\n              [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\"\n                (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [itemSize]=\"rowHeight()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n              [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n                [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n                [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n                (treeToggle)=\"onTreeToggle(item)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                      @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                      <span class=\"ag-group-aggregate\">\n                        <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                        <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                        {{ getFooterDisplay(col, aggs[col.field]) }}\n                      </span>\n                      }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\"\n                [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\"\n                [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\"\n                  type=\"button\" (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\"\n            [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [itemSize]=\"rowHeight()\" [style.width.px]=\"rightPinnedPaneWidth()\" (scroll)=\"onRightPinnedBodyScroll()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar\n      [open]=\"sidebarOpen()\"\n      [activeTab]=\"sidebarTab()\"\n      [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\"\n      [locale]=\"locale()\"\n      [localeText]=\"localeText()\"\n      [readonlyGrid]=\"readonlyGrid()\"\n      [useSidebarEditor]=\"useSidebarEditor()\"\n      [errors]=\"sidebarValidationErrors()\"\n      (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\"\n    />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\"\n      (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\"\n      (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n  </div>\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow }}</button>\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{ localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\"\n      (click)=\"deleteRow(menu.rowIndex)\">{{ localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\" [disabled]=\"item.disabled\"\n      (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\"\n    [showColumnActions]=\"!!control()\" [pinned]=\"getColumnPinState(menu.field)\"\n    [groupable]=\"!!getColDef(menu.field)?.groupable\" [grouped]=\"isGroupedByField(menu.field)\"\n    [filterable]=\"!!getColDef(menu.field)?.filterable\" [showValueFilter]=\"!serverSideFiltering()\"\n    [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\"\n    [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\"\n    [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\" (sort)=\"onMenuSort(menu.field, $event)\"\n    (resetSort)=\"onMenuResetSort(menu.field, $event)\" (autosize)=\"onMenuAutosizeColumn(menu.field)\"\n    (togglePin)=\"onMenuTogglePin(menu.field)\" (togglePinRight)=\"onMenuTogglePinRight(menu.field)\"\n    (hide)=\"onMenuHideColumn(menu.field)\" (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\"\n    (clearFilter)=\"onMenuClearFilter(menu.field)\" (clearAll)=\"onMenuClearAll()\"\n    (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\"\n    [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;box-sizing:border-box}.ag-quick-filter:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: AgridCellComponent, selector: "agrid-cell", inputs: ["col", "rowIndex", "colIndex", "value", "row", "locale", "selected", "editing", "editable", "error", "treeCell", "treeLevel", "treeExpandable", "treeExpanded", "seedChar"], outputs: ["treeToggle", "activate", "startEdit", "booleanToggle", "draftChange"] }, { kind: "component", type: AgridColumnMenuComponent, selector: "agrid-column-menu", inputs: ["localeText", "x", "y", "header", "sortDir", "sortable", "showColumnActions", "pinned", "groupable", "grouped", "filterable", "showValueFilter", "filterType", "operator", "operand", "operand2", "search", "allSelected", "valueItems", "sortPriority", "hasMultiSort", "aggregate"], outputs: ["operatorChange", "operandChange", "operand2Change", "sort", "resetSort", "autosize", "togglePin", "togglePinRight", "hide", "toggleGroup", "clearFilter", "clearAll", "searchChange", "toggleAll", "toggleValue", "setAggregate"] }, { kind: "component", type: AgridFindPanelComponent, selector: "agrid-find-panel", inputs: ["localeText", "query", "matchCount", "activeIndex"], outputs: ["queryChange", "next", "previous", "close"] }, { kind: "component", type: AgridSidebarComponent, selector: "agrid-sidebar", inputs: ["open", "activeTab", "columns", "headerGroups", "row", "hiddenColumns", "locale", "localeText", "readonlyGrid", "useSidebarEditor", "errors"], outputs: ["close", "tabChange", "toggleColumn", "toggleColumnGroup", "detailEdit", "save"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridComponent, decorators: [{
             type: Component,
@@ -5250,8 +6004,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\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\" (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\"\n  (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu()\">\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [itemSize]=\"rowHeight()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\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)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\"\n              [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\"\n                (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [itemSize]=\"rowHeight()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n              [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\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                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\"\n                [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\"\n                [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\"\n                  type=\"button\" (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\"\n            [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [itemSize]=\"rowHeight()\" [style.width.px]=\"rightPinnedPaneWidth()\" (scroll)=\"onRightPinnedBodyScroll()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar\n      [open]=\"sidebarOpen()\"\n      [activeTab]=\"sidebarTab()\"\n      [columns]=\"colDefs()\"\n      [row]=\"sidebarRow()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\"\n      [locale]=\"locale()\"\n      [localeText]=\"localeText()\"\n      [readonlyGrid]=\"readonlyGrid()\"\n      [useSidebarEditor]=\"useSidebarEditor()\"\n      (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\"\n    />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\"\n      (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\"\n      (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n  </div>\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow }}</button>\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{ localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\"\n      (click)=\"deleteRow(menu.rowIndex)\">{{ localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\" [disabled]=\"item.disabled\"\n      (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\"\n    [showColumnActions]=\"!!control()\" [pinned]=\"getColumnPinState(menu.field)\"\n    [groupable]=\"!!getColDef(menu.field)?.groupable\" [grouped]=\"isGroupedByField(menu.field)\"\n    [filterable]=\"!!getColDef(menu.field)?.filterable\" [showValueFilter]=\"!serverSideFiltering()\"\n    [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\"\n    [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\" (sort)=\"onMenuSort(menu.field, $event)\"\n    (resetSort)=\"onMenuResetSort(menu.field, $event)\" (autosize)=\"onMenuAutosizeColumn(menu.field)\"\n    (togglePin)=\"onMenuTogglePin(menu.field)\" (togglePinRight)=\"onMenuTogglePinRight(menu.field)\"\n    (hide)=\"onMenuHideColumn(menu.field)\" (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\"\n    (clearFilter)=\"onMenuClearFilter(menu.field)\" (clearAll)=\"onMenuClearAll()\"\n    (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\"\n    [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-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)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], recordEdit: [{ type: i0.Output, args: ["recordEdit"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], prepareAddRecord: [{ type: i0.Output, args: ["prepareAddRecord"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowChanged: [{ type: i0.Output, args: ["rowChanged"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], 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\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\" (copy)=\"onCopy($event)\" (paste)=\"onPaste($event)\"\n  (focusin)=\"onGridFocusIn($event)\"\n  (click)=\"closeContextMenu(); closeCellContextMenu(); closeFilterMenu(); closeGroupActionsMenu()\">\n  @if (enableQuickFilter()) {\n    <div class=\"ag-toolbar\">\n      <input\n        class=\"ag-quick-filter\"\n        type=\"search\"\n        [value]=\"quickFilterValue()\"\n        (input)=\"onQuickFilterInput($event)\"\n        [placeholder]=\"localeText().quickFilterPlaceholder\"\n        [attr.aria-label]=\"localeText().quickFilterPlaceholder\"\n      />\n    </div>\n  }\n  <div class=\"ag-main-area\">\n    <div class=\"ag-grid-split\" [class.ag-has-right-pane]=\"hasRightPinnedPane()\">\n      @if (hasPinnedPane()) {\n      <div class=\"ag-pinned-pane\" [style.width.px]=\"pinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups ag-header-groups--pinned\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-group-cell ag-header-group-cell--empty\"></div>\n          }\n          @for (run of pinnedHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header ag-header--pinned\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\" [style.width.px]=\"pinnedPaneWidth()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-header-cell ag-control-header\" role=\"columnheader\" aria-colindex=\"1\">\n            <div class=\"ag-header-cell-top\"></div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\"></div>\n            }\n          </div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-last]=\"isLastPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #pinnedViewport class=\"ag-body ag-pinned-body\" [itemSize]=\"rowHeight()\"\n          [style.width.px]=\"pinnedPaneWidth()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n            [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isPinnedPaneRowSelected(item)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? pinnedGridTemplateColumns() : null\"\n            (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n            (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n            @if (isDataRowItem(item)) {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell\" role=\"rowheader\" aria-colindex=\"1\"\n              [class.ag-control-cell--reorder]=\"allowRowReorder()\"\n              (contextmenu)=\"onControlContextMenu($event, item.originalIndex)\" (click)=\"$event.stopPropagation()\"\n              (pointerdown)=\"onControlPointerDown($event, item.originalIndex)\">\n              @if (enableRowMarking()) {\n              <input class=\"ag-row-marker\" type=\"checkbox\" [checked]=\"isRowMarked(item.originalIndex)\"\n                [attr.aria-label]=\"localeText().markRow\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRowMarked(item.originalIndex)\" />\n              }\n            </div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\" [class.ag-cell--pinned]=\"true\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @if (showControlColumn()) {\n            <div class=\"ag-control-cell ag-control-cell--reorder ag-ghost-handle\"></div>\n            }\n            @for (col of pinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">{{\n              getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"pinnedGridTemplateColumns()\">\n          @if (showControlColumn()) {\n          <div class=\"ag-footer-cell ag-footer-cell--control\" role=\"gridcell\" aria-colindex=\"1\"></div>\n          }\n          @for (col of pinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-last]=\"isLastPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"ag-scroll-pane\">\n        <div #horizontalScroller class=\"ag-horizontal-scroll\" (scroll)=\"onHorizontalScroll()\">\n          @if (hasHeaderGroups()) {\n          <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (run of scrollableHeaderGroupRuns(); track run.key) {\n            <div class=\"ag-header-group-cell\" role=\"columnheader\"\n              [attr.data-header-group]=\"run.id\"\n              [class.ag-header-group-cell--empty]=\"!run.id\"\n              [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n              [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n              [style.grid-column]=\"'span ' + run.span\"\n              (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n              {{ run.label }}\n            </div>\n            }\n          </div>\n          }\n          <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n            [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-header-cell\" role=\"columnheader\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n              [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n              [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n              [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n              [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n              [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.data-col-field]=\"col.field\" (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n              <div class=\"ag-header-cell-top\">\n                <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n                @if (getSort(col.field); as dir) {\n                <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                    class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n                }\n                @if (isGroupedByField(col.field)) {\n                <span class=\"ag-sort-badge\">\u229F</span>\n                }\n                <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                  [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                  [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                  (click)=\"openFilterMenu($event, col.field)\"\n                  (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n              </div>\n              @if (hasFilterableColumns()) {\n              <div class=\"ag-header-cell-filter\">\n                @if (col.filterable) {\n                <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                  (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                  [placeholder]=\"localeText().filterPlaceholder\"\n                  [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n                }\n              </div>\n              }\n              <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n                aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n                [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n                [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n                (mousedown)=\"onResizeStart($event, col)\"\n                (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n            </div>\n            }\n          </div>\n\n          <cdk-virtual-scroll-viewport #scrollViewport class=\"ag-body\" [itemSize]=\"rowHeight()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\" (scroll)=\"onBodyScroll()\">\n            <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n              [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n              [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n              [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n              [class.ag-add-row--selected]=\"item === null && isAddRowSelected()\" [class.ag-ghost-row]=\"item === 'ghost'\"\n              [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n              [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n              [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n              [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n              [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n              [attr.data-original-index]=\"getItemOriginalIndex(item)\" [style.height.px]=\"rowHeight()\"\n              [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? scrollableGridTemplateColumns() : null\"\n              (pointerdown)=\"isDataRowItem(item) && onRowPointerDown($event, item.originalIndex)\"\n              (click)=\"isDataRowItem(item) && onRowClick($event, item)\">\n              @if (isDataRowItem(item)) {\n              @for (col of scrollableColDefs(); track col.field) {\n              @let ci = getVisibleColIndex(col.field);\n              <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n                [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n                [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n                [attr.data-col-field]=\"col.field\"\n                [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n                [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n                [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n                [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n                [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n                [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n                [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n                [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n                [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n                [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n                [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n                [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n                [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n                (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n                (activate)=\"onActivate(item.originalIndex, ci, $event)\"\n                (startEdit)=\"onStartEdit(item.originalIndex, ci)\" (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\"\n                (treeToggle)=\"onTreeToggle(item)\"\n                (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n              }\n              } @else if (item === null) {\n              <div class=\"ag-add-row-label\" (click)=\"onActivateAddRow()\">\n                <span class=\"ag-add-row-icon\">+</span> {{ localeText().addRow }}\n              </div>\n              } @else if (item === 'ghost') {\n              @for (col of scrollableColDefs(); track col.field) {\n              <div class=\"ag-ghost-cell\"\n                [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n                [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\">{{\n                getGhostCellDisplay(col) }}</div>\n              }\n              } @else {\n              <div class=\"ag-group-header-content\" [style.min-width.px]=\"scrollableTotalWidth()\">\n                <div class=\"ag-group-header-main\"\n                  (click)=\"onGroupHeaderClick(item.groupLabel); $event.stopPropagation()\">\n                  <span class=\"ag-group-icon\" [class.ag-group-icon--expanded]=\"!item.collapsed\">\u25B6</span>\n                  <span class=\"ag-group-label\">{{ item.groupLabel }}</span>\n                  @if (groupActions().length > 0) {\n                  <button class=\"ag-group-actions-btn\" [title]=\"localeText().actions\"\n                    (click)=\"openGroupActionsMenu($event, item.groupLabel)\">\u22EE</button>\n                  }\n                  <span class=\"ag-group-count\">{{ item.count }}</span>\n                  @if (getGroupDescription(item.groupLabel); as desc) {\n                  <span class=\"ag-group-description\">{{ desc }}</span>\n                  }\n                  @if (item.aggregates; as aggs) {\n                  <span class=\"ag-group-aggregates\">\n                    @for (col of visibleColDefs(); track col.field) {\n                      @if (hasAggregate(col) && aggs[col.field] !== undefined) {\n                      <span class=\"ag-group-aggregate\">\n                        <span class=\"ag-group-aggregate-col\">{{ col.header }}</span>\n                        <span class=\"ag-group-aggregate-op\">{{ getAggregateLabel(col) }}</span>\n                        {{ getFooterDisplay(col, aggs[col.field]) }}\n                      </span>\n                      }\n                    }\n                  </span>\n                  }\n                </div>\n              </div>\n              }\n              @if (isDataRowItem(item) && isRowPendingDelete(item.originalIndex)) {\n              <div class=\"ag-delete-confirmation\" role=\"alertdialog\"\n                [attr.aria-label]=\"localeText().confirmDeleteRow\"\n                [style.left.px]=\"deleteConfirmationLeft()\"\n                [style.width.px]=\"deleteConfirmationWidth() || null\"\n                (pointerdown)=\"$event.stopPropagation()\" (click)=\"$event.stopPropagation()\">\n                <span class=\"ag-delete-confirmation-text\">{{ localeText().confirmDeleteRow }}</span>\n                <button class=\"ag-delete-confirmation-btn ag-delete-confirmation-btn--yes\"\n                  type=\"button\" (click)=\"confirmPendingRowDelete()\">{{ localeText().confirmYes }}</button>\n                <button class=\"ag-delete-confirmation-btn\" type=\"button\" data-delete-confirm-no\n                  (click)=\"cancelRowDelete()\">{{ localeText().confirmNo }}</button>\n              </div>\n              }\n            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\"\n            [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n            [style.grid-template-columns]=\"scrollableGridTemplateColumns()\"\n            [style.min-width.px]=\"scrollableTotalWidth()\">\n            @for (col of scrollableColDefs(); track col.field) {\n            <div class=\"ag-footer-cell\" role=\"gridcell\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\">\n              @if (hasAggregate(col)) {\n              <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n              {{ getFooterDisplay(col, footerValues()[col.field]) }}\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n\n      @if (hasRightPinnedPane()) {\n      <div class=\"ag-pinned-pane ag-pinned-pane--right\" [style.width.px]=\"rightPinnedPaneWidth()\">\n        @if (hasHeaderGroups()) {\n        <div class=\"ag-header-groups\" role=\"row\" aria-rowindex=\"1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (run of rightHeaderGroupRuns(); track run.key) {\n          <div class=\"ag-header-group-cell\" role=\"columnheader\"\n            [attr.data-header-group]=\"run.id\"\n            [class.ag-header-group-cell--empty]=\"!run.id\"\n            [class.ag-header-group-cell--locked]=\"isHeaderGroupLocked(run.fields)\"\n            [class.ag-header-group-cell--dragging]=\"isHeaderGroupDragging(run.fields)\"\n            [style.grid-column]=\"'span ' + run.span\"\n            (pointerdown)=\"run.id && onHeaderGroupPointerDown($event, run.fields, run.label)\">\n            {{ run.label }}\n          </div>\n          }\n        </div>\n        }\n        <div class=\"ag-header\" role=\"row\" [attr.aria-rowindex]=\"headerRowCount()\"\n          [class.ag-header--with-filters]=\"hasFilterableColumns()\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\" [style.width.px]=\"rightPinnedPaneWidth()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-header-cell ag-header-cell--pinned\" role=\"columnheader\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [attr.aria-sort]=\"getSort(col.field) === 'asc' ? 'ascending' : getSort(col.field) === 'desc' ? 'descending' : 'none'\"\n            [class.ag-header-cell--filtered]=\"hasActiveFilter(col.field)\"\n            [class.ag-header-cell--dragging]=\"isColDragging(col.field)\"\n            [class.ag-header-cell--drop-before]=\"getColDropSide(col.field) === 'before'\"\n            [class.ag-header-cell--drop-after]=\"getColDropSide(col.field) === 'after'\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [class.ag-header-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\" [attr.data-col-field]=\"col.field\"\n            (pointerdown)=\"onColHeaderPointerDown($event, col.field)\">\n            <div class=\"ag-header-cell-top\">\n              <span class=\"ag-header-cell-label\">{{ col.header }}</span>\n              @if (getSort(col.field); as dir) {\n              <span class=\"ag-sort-badge\">{{ dir === 'asc' ? '\u2191' : '\u2193' }}@if (hasMultiSort()) {<sup\n                  class=\"ag-sort-priority\">{{ getSortPriority(col.field) }}</sup>}</span>\n              }\n              @if (isGroupedByField(col.field)) {\n              <span class=\"ag-sort-badge\">'\u229F '</span>\n              }\n              <button class=\"ag-header-menu-btn\" [class.ag-header-menu-btn--active]=\"hasActiveFilter(col.field)\"\n                [title]=\"localeText().columnMenu\" [attr.aria-label]=\"localeText().columnMenu + ': ' + col.header\"\n                [attr.aria-expanded]=\"filterMenu()?.field === col.field\" aria-haspopup=\"menu\"\n                (click)=\"openFilterMenu($event, col.field)\"\n                (pointerdown)=\"$event.stopPropagation()\">\u25BE</button>\n            </div>\n            @if (hasFilterableColumns()) {\n            <div class=\"ag-header-cell-filter\">\n              @if (col.filterable) {\n              <input class=\"ag-filter-input\" [value]=\"getTextFilter(col.field)\"\n                (input)=\"onTextFilterChange($event, col.field)\" (click)=\"$event.stopPropagation()\"\n                [placeholder]=\"localeText().filterPlaceholder\"\n                [attr.aria-label]=\"localeText().filterPlaceholder + ' ' + col.header\" />\n              }\n            </div>\n            }\n            <div class=\"ag-resize-handle\" role=\"separator\" [attr.tabindex]=\"col.locked ? -1 : 0\"\n              aria-orientation=\"vertical\" [attr.aria-disabled]=\"col.locked ? 'true' : null\"\n              [attr.aria-label]=\"localeText().resizeColumn + ': ' + col.header\"\n              [attr.aria-valuenow]=\"getColumnWidth(col)\" (keydown)=\"onResizeKeyDown($event, col)\"\n              (mousedown)=\"onResizeStart($event, col)\"\n              (pointerdown)=\"$event.stopPropagation()\" (dblclick)=\"onAutosizeColumn($event, col)\"></div>\n          </div>\n          }\n        </div>\n\n        <cdk-virtual-scroll-viewport #rightPinnedViewport class=\"ag-body ag-pinned-body ag-right-pinned-body\"\n          [itemSize]=\"rowHeight()\" [style.width.px]=\"rightPinnedPaneWidth()\" (scroll)=\"onRightPinnedBodyScroll()\">\n          <div *cdkVirtualFor=\"let item of displayItems(); let di = index; trackBy: trackByItem\" role=\"row\"\n            [attr.aria-rowindex]=\"di + headerRowCount() + 1\"\n            [attr.aria-selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex) ? 'true' : null\"\n            [class.ag-row]=\"!isGroupHeaderItem(item)\" [class.ag-add-row]=\"item === null\"\n            [class.ag-ghost-row]=\"item === 'ghost'\" [class.ag-group-header-row]=\"isGroupHeaderItem(item)\"\n            [class.ag-row--odd]=\"isDataRowItem(item) && dataRowIsOdd().get(item.originalIndex) === true\"\n            [class.ag-row--selected]=\"isDataRowItem(item) && isRowSelected(item.originalIndex)\"\n            [class.ag-row--marked]=\"isDataRowItem(item) && isRowMarked(item.originalIndex)\"\n            [class.ag-row--pending-delete]=\"isDataRowItem(item) && isRowPendingDelete(item.originalIndex)\"\n            [style.height.px]=\"rowHeight()\"\n            [style.grid-template-columns]=\"isDataRowItem(item) || item === 'ghost' ? rightGridTemplateColumns() : null\">\n            @if (isDataRowItem(item)) {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            @let ci = getVisibleColIndex(col.field);\n            <agrid-cell [col]=\"col\" [rowIndex]=\"item.originalIndex\" [colIndex]=\"ci\" [value]=\"item.row[col.field]\"\n              [row]=\"item.row\" [locale]=\"locale()\" [attr.title]=\"getCellTitle(col, item.row[col.field])\"\n              [attr.data-cell-row]=\"item.originalIndex\" [attr.data-cell-col]=\"ci\"\n              [attr.data-col-field]=\"col.field\"\n              [attr.aria-colindex]=\"getAriaColIndex(ci)\"\n              [attr.aria-selected]=\"isSelected(item.originalIndex, ci) || isRangeSelected(item.originalIndex, ci)\"\n              [selected]=\"isSelected(item.originalIndex, ci)\" [editing]=\"isEditing(item.originalIndex, ci)\" [editable]=\"isColEditable(col)\" [error]=\"cellValidationError(item.originalIndex, ci)\"\n              [seedChar]=\"getSeedChar(item.originalIndex, ci)\"\n              [treeCell]=\"isTreeCell(col)\" [treeLevel]=\"treeRowLevel(item)\"\n              [treeExpandable]=\"treeRowExpandable(item)\" [treeExpanded]=\"treeRowExpanded(item)\"\n              [class]=\"getCellClass(col, item.row[col.field], item.row)\"\n              [class.ag-cell--range-selected]=\"isRangeSelected(item.originalIndex, ci)\"\n              [class.ag-cell--fill-preview]=\"isFillPreviewCell(item.originalIndex, ci)\"\n              [class.ag-cell--fill-handle]=\"isFillHandleCell(item.originalIndex, ci)\"\n              [class.ag-cell--changed]=\"isCellChanged(item.originalIndex, col.field)\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--find-match]=\"isFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--find-active]=\"isActiveFindMatchCell(item.originalIndex, ci)\"\n              [class.ag-cell--pinned]=\"true\" [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\"\n              (pointerdown)=\"onCellPointerDown($event, item.originalIndex, ci)\"\n              (activate)=\"onActivate(item.originalIndex, ci, $event)\" (startEdit)=\"onStartEdit(item.originalIndex, ci)\"\n              (draftChange)=\"onDraftChange($event)\" (booleanToggle)=\"onBooleanToggle(item.originalIndex, ci, $event)\" (treeToggle)=\"onTreeToggle(item)\"\n              (contextmenu)=\"onCellContextMenu($event, item.originalIndex, ci, col, item.row)\" />\n            }\n            } @else if (item === null) {\n            <div class=\"ag-pinned-row-spacer\"></div>\n            } @else if (item === 'ghost') {\n            @for (col of rightPinnedColDefs(); track col.field) {\n            <div class=\"ag-ghost-cell ag-cell--pinned\"\n              [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n              [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n              [class.ag-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">{{ getGhostCellDisplay(col) }}</div>\n            }\n            } @else {\n            <div class=\"ag-pinned-group-spacer\"></div>\n            }\n          </div>\n        </cdk-virtual-scroll-viewport>\n\n        @if (showFooter()) {\n        <div class=\"ag-footer\" role=\"row\"\n          [attr.aria-rowindex]=\"displayItems().length + headerRowCount() + 1\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\n            [class.ag-column-reorder-item--dragging]=\"isColDragging(col.field)\"\n            [style.transform]=\"'translateX(' + getColReorderOffset(col.field) + 'px)'\"\n            [attr.aria-colindex]=\"getAriaColIndex(getVisibleColIndex(col.field))\"\n            [class.ag-footer-cell--pinned-first]=\"isFirstRightPinnedColumn(col.field)\">\n            @if (hasAggregate(col)) {\n            <span class=\"ag-footer-label\">{{ getAggregateLabel(col) }}</span>\n            {{ getFooterDisplay(col, footerValues()[col.field]) }}\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    @if (loading()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ localeText().loading }}</div>\n    } @else if (isEmpty()) {\n    <div class=\"ag-state-overlay\" role=\"status\" aria-live=\"polite\">{{ emptyTextLabel() }}</div>\n    }\n\n    @if (showSidebar()) {\n    <agrid-sidebar\n      [open]=\"sidebarOpen()\"\n      [activeTab]=\"sidebarTab()\"\n      [columns]=\"colDefs()\"\n      [headerGroups]=\"headerGroups()\"\n      [row]=\"sidebarRow()\"\n      [hiddenColumns]=\"sidebarHiddenColumns()\"\n      [locale]=\"locale()\"\n      [localeText]=\"localeText()\"\n      [readonlyGrid]=\"readonlyGrid()\"\n      [useSidebarEditor]=\"useSidebarEditor()\"\n      [errors]=\"sidebarValidationErrors()\"\n      (close)=\"toggleSidebar()\"\n      (tabChange)=\"onSidebarStripClick($event)\"\n      (toggleColumn)=\"onSidebarToggleColumn($event)\"\n      (toggleColumnGroup)=\"onSidebarToggleColumnGroup($event.fields, $event.visible)\"\n      (detailEdit)=\"onSidebarDetailEdit($event)\"\n      (save)=\"onSidebarDetailSave($event)\"\n    />\n    }\n  </div><!-- /.ag-main-area -->\n\n  @if (showPagination()) {\n  <nav class=\"ag-pagination\" [attr.aria-label]=\"localeText().pagination\">\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().firstPage\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToFirstPage()\">\u00AB</button>\n    <button class=\"ag-page-btn\" [attr.aria-label]=\"localeText().previous\"\n      [disabled]=\"control()!.currentPage() <= 1\" (click)=\"goToPrevPage()\">\u2039</button>\n    <span class=\"ag-page-info\" aria-live=\"polite\">{{ control()!.currentPage() }} / {{ totalPages() }}</span>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().next\"\n      (click)=\"goToNextPage()\">\u203A</button>\n    <button class=\"ag-page-btn\" [disabled]=\"control()!.currentPage() >= totalPages()\"\n      [attr.aria-label]=\"localeText().lastPage\"\n      (click)=\"goToLastPage()\">\u00BB</button>\n    <span class=\"ag-page-count\">{{ localeText().rows(filteredRowCount()) }}</span>\n  </nav>\n  }\n\n  @if (findOpen()) {\n  <agrid-find-panel [query]=\"findQuery()\" [matchCount]=\"findMatches().length\" [activeIndex]=\"findActiveIndex()\"\n    [localeText]=\"localeText()\" (queryChange)=\"onFindInput($event)\" (previous)=\"goToFindMatch(-1)\"\n    (next)=\"goToFindMatch(1)\" (close)=\"closeFind()\" />\n  }\n\n  <!-- Row context menu -->\n  @if (contextMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\" (click)=\"deleteRow(menu.rowIndex)\">\n      {{ localeText().deleteRow }}\n    </button>\n  </div>\n  }\n\n  <!-- Cell context menu -->\n  @if (cellContextMenuState(); as menu) {\n  @let col = getColDef(menu.field)!;\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyCellToClipboard(menu.rowIndex, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.rowIndex)\">{{ localeText().copyRow }}</button>\n    @if (allowAddRows() && !readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex)\">{{ localeText().insertRowAbove }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"insertRowAt(menu.rowIndex + 1)\">{{ localeText().insertRowBelow }}</button>\n    }\n    @if (!readonlyGrid()) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    <button class=\"ag-context-item ag-context-item--danger\" role=\"menuitem\"\n      (click)=\"deleteRow(menu.rowIndex)\">{{ localeText().deleteRow }}</button>\n    }\n    @if (cellMenuItems().length) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    @for (item of cellMenuItems(); track $index) {\n    @if (item === null) {\n    <div class=\"ag-context-separator\" role=\"separator\"></div>\n    } @else {\n    <button class=\"ag-context-item\" role=\"menuitem\" [class.ag-context-item--danger]=\"item.danger\" [disabled]=\"item.disabled\"\n      (click)=\"runCellMenuItem(item, menu)\">{{\n      item.label }}</button>\n    }\n    }\n    }\n  </div>\n  }\n\n  <!-- Group actions menu -->\n  @if (groupActionsMenu(); as menu) {\n  <div class=\"ag-context-menu\" role=\"menu\" [style.left.px]=\"menu.x\" [style.top.px]=\"menu.y\"\n    (click)=\"$event.stopPropagation()\">\n    @for (action of groupActions(); track action.label) {\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"onGroupAction(action, menu.label)\">\n      {{ action.label }}\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Filter dropdown -->\n  @if (filterMenu(); as menu) {\n  <agrid-column-menu [x]=\"menu.x\" [y]=\"menu.y\" [header]=\"getColDef(menu.field)?.header ?? menu.field\"\n    [sortDir]=\"getSort(menu.field)\" [sortable]=\"sortOption() !== 'none'\"\n    [showColumnActions]=\"!!control()\" [pinned]=\"getColumnPinState(menu.field)\"\n    [groupable]=\"!!getColDef(menu.field)?.groupable\" [grouped]=\"isGroupedByField(menu.field)\"\n    [filterable]=\"!!getColDef(menu.field)?.filterable\" [showValueFilter]=\"!serverSideFiltering()\"\n    [filterType]=\"getMenuFilterType(menu.field)\"\n    [operator]=\"getMenuOperator(menu.field)\" [operand]=\"getMenuOperand(menu.field)\"\n    [operand2]=\"getMenuOperand2(menu.field)\"\n    (operatorChange)=\"onMenuOperatorChange(menu.field, $event)\"\n    (operandChange)=\"onMenuOperandChange(menu.field, $event)\"\n    (operand2Change)=\"onMenuOperand2Change(menu.field, $event)\"\n    [search]=\"filterMenuSearch()\"\n    [allSelected]=\"isMenuAllSelected(menu.field)\"\n    [valueItems]=\"serverSideFiltering() || !getColDef(menu.field)?.filterable ? [] : columnMenuValueItems()\"\n    [localeText]=\"localeText()\"\n    [sortPriority]=\"getSortPriority(menu.field)\" [hasMultiSort]=\"hasMultiSort()\" (sort)=\"onMenuSort(menu.field, $event)\"\n    (resetSort)=\"onMenuResetSort(menu.field, $event)\" (autosize)=\"onMenuAutosizeColumn(menu.field)\"\n    (togglePin)=\"onMenuTogglePin(menu.field)\" (togglePinRight)=\"onMenuTogglePinRight(menu.field)\"\n    (hide)=\"onMenuHideColumn(menu.field)\" (toggleGroup)=\"onMenuToggleGroupBy(menu.field)\"\n    (clearFilter)=\"onMenuClearFilter(menu.field)\" (clearAll)=\"onMenuClearAll()\"\n    (searchChange)=\"onFilterMenuSearch($event)\" (toggleAll)=\"onMenuToggleAll(menu.field)\"\n    (toggleValue)=\"onMenuToggleValue(menu.field, $event)\" [aggregate]=\"getEffectiveAggregate(getColDef(menu.field)!)\"\n    (setAggregate)=\"onMenuSetAggregate(menu.field, $event)\" />\n  }\n\n  @if (columnDragPreview(); as preview) {\n  <div class=\"ag-column-drag-preview\"\n    [style.left.px]=\"preview.x\" [style.top.px]=\"preview.y\"\n    [style.width.px]=\"preview.width\" [style.height.px]=\"preview.height\">\n    <span>{{ preview.label }}</span>\n  </div>\n  }\n</div>\n", styles: ["@layer agrid-defaults{:host{--agrid-color-text: #24292f;--agrid-color-text-muted: #57606a;--agrid-color-accent: #1a73e8;--agrid-color-accent-subtle: #e8f0fe;--agrid-color-accent-fg: #1558b0;--agrid-color-accent-border: #c8d8f8;--agrid-color-danger: #d1242f;--agrid-color-danger-subtle: #fff1f0;--agrid-color-border: #d0d7de;--agrid-color-bg: #ffffff;--agrid-color-bg-subtle: #fafbfc;--agrid-color-bg-muted: #f6f8fa;--agrid-color-shadow: rgba(140, 149, 159, .2);--agrid-color-bg-stripe: #f0f2f5;--agrid-color-cell-changed: #f59e0b;--agrid-color-row-marked: #fff8c5}}:host{display:flex;flex-direction:column;min-height:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--agrid-color-text)}.ag-wrapper{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--agrid-color-border);overflow:hidden;outline:none;border-radius:4px}.ag-state-overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;color:var(--agrid-color-text-muted);background:color-mix(in srgb,var(--agrid-color-bg) 78%,transparent);pointer-events:none;z-index:3}.ag-header{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-bottom:2px solid var(--agrid-color-border)}.ag-header-groups{display:grid;flex-shrink:0;height:28px;background:color-mix(in srgb,var(--agrid-color-bg-muted) 72%,var(--agrid-color-bg));border-bottom:1px solid var(--agrid-color-border)}.ag-header-group-cell{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;overflow:hidden;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;color:var(--agrid-color-text);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity .1s ease}.ag-header-group-cell:last-child{border-right:none}.ag-header-group-cell--empty,.ag-header-group-cell--locked{cursor:default}.ag-header-group-cell--dragging{opacity:.12}.ag-header-cell{position:relative;display:flex;align-items:center;font-weight:600;border-right:1px solid var(--agrid-color-border);overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.ag-header-cell:last-child{border-right:none}.ag-header-cell-top{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px;height:32px;overflow:hidden;white-space:nowrap}.ag-header-cell-label{overflow:hidden;text-overflow:ellipsis;flex:1}.ag-header--with-filters .ag-header-cell{flex-direction:column;align-items:stretch;height:auto;white-space:normal}.ag-header--with-filters .ag-header-cell-top{flex:0 0 32px}.ag-header-cell-filter{height:28px;display:flex;align-items:center;padding:0 2px;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-header-cell{cursor:grab;transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-row>agrid-cell,.ag-ghost-cell,.ag-footer-cell{transition:transform .16s cubic-bezier(.2,0,0,1),opacity .1s ease;will-change:transform}.ag-header-cell--dragging{opacity:.12;cursor:grabbing}.ag-column-reorder-item--dragging{opacity:.12}.ag-header-cell--drop-before,.ag-header-cell--drop-after{z-index:1}.ag-column-drag-preview{position:fixed;z-index:1000;display:flex;align-items:flex-start;padding:8px 10px;border:1px solid var(--agrid-color-accent);border-radius:5px;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-bg) 94%,var(--agrid-color-accent));box-shadow:0 10px 28px var(--agrid-color-shadow);font-weight:600;line-height:16px;box-sizing:border-box;pointer-events:none;opacity:.96}.ag-sort-badge{font-size:11px;color:var(--agrid-color-accent);flex-shrink:0;line-height:1}.ag-sort-priority{font-size:9px;vertical-align:super;opacity:.75}.ag-resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:1}.ag-resize-handle:hover{background:var(--agrid-color-accent);opacity:.5}.ag-filter-input{flex:1;min-width:0;height:20px;border:1px solid var(--agrid-color-border);border-radius:3px;outline:none;font:inherit;font-size:12px;padding:0 4px;background:var(--agrid-color-bg)}.ag-filter-input:focus{border-color:var(--agrid-color-accent)}.ag-header-cell--filtered .ag-header-cell-label:after{content:\" \\25be\";font-size:9px;color:var(--agrid-color-accent)}.ag-main-area{display:flex;flex:1;min-height:0;overflow:hidden}.ag-grid-split{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.ag-pinned-pane{flex-shrink:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg)}.ag-scroll-pane{flex:1;min-width:0;min-height:0;display:flex}.ag-horizontal-scroll{flex:1;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column}.ag-body{flex:1;overflow-x:clip;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-horizontal-scroll{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}.ag-body::-webkit-scrollbar,.ag-horizontal-scroll::-webkit-scrollbar{width:8px;height:8px}.ag-body::-webkit-scrollbar-track,.ag-horizontal-scroll::-webkit-scrollbar-track{background:transparent}.ag-body::-webkit-scrollbar-thumb,.ag-horizontal-scroll::-webkit-scrollbar-thumb{background:#0000002e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-body::-webkit-scrollbar-thumb:hover,.ag-horizontal-scroll::-webkit-scrollbar-thumb:hover{background:#00000052;border-radius:10px;border:2px solid transparent;background-clip:padding-box}.ag-pinned-body{overflow:hidden}.ag-right-pinned-body{overflow-y:auto}.ag-has-right-pane .ag-body:not(.ag-pinned-body){scrollbar-width:none}.ag-has-right-pane .ag-body:not(.ag-pinned-body)::-webkit-scrollbar{display:none}.ag-row{display:grid;position:relative}.ag-row--pending-delete>:not(.ag-delete-confirmation){opacity:.2;pointer-events:none;transition:opacity .14s ease}.ag-delete-confirmation{position:absolute;top:0;bottom:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:8px;min-width:min(100%,320px);padding:2px 12px;box-sizing:border-box;color:var(--agrid-color-text);background:color-mix(in srgb,var(--agrid-color-danger-subtle) 88%,transparent);border-block:1px solid color-mix(in srgb,var(--agrid-color-danger) 35%,transparent)}.ag-delete-confirmation-text{font-weight:600;white-space:nowrap}.ag-delete-confirmation-btn{min-width:42px;padding:3px 9px;border:1px solid var(--agrid-color-border);border-radius:4px;color:var(--agrid-color-text);background:var(--agrid-color-bg);font:inherit;cursor:pointer}.ag-delete-confirmation-btn:hover,.ag-delete-confirmation-btn:focus-visible{border-color:var(--agrid-color-accent);outline:none}.ag-delete-confirmation-btn--yes{color:#fff;border-color:var(--agrid-color-danger);background:var(--agrid-color-danger)}.ag-delete-confirmation-btn--yes:hover,.ag-delete-confirmation-btn--yes:focus-visible{border-color:color-mix(in srgb,var(--agrid-color-danger) 75%,#000);background:color-mix(in srgb,var(--agrid-color-danger) 85%,#000)}:host(.ag-zebra) .ag-row--odd agrid-cell:not(.editing){background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd .ag-control-cell{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd:hover .ag-control-cell{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned,:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}:host(.ag-zebra) .ag-row--odd .ag-cell--pinned-first{background:var(--agrid-color-bg-stripe)}:host(.ag-zebra) .ag-row--odd:hover .ag-cell--pinned-first{background:var(--agrid-color-bg-muted)}:host(.ag-zebra) .ag-row--odd.ag-row--selected .ag-cell--pinned-first{background:var(--agrid-color-accent-subtle)}.ag-row:hover agrid-cell:not(.editing){background:var(--agrid-color-bg-muted)}.ag-row--selected agrid-cell:not(.editing){background:var(--agrid-color-accent-subtle)}.ag-row--marked agrid-cell:not(.editing),.ag-row--marked .ag-control-cell{background:var(--agrid-color-row-marked)}.ag-row--marked{box-shadow:inset 3px 0 #bf8700}.ag-row--selected.ag-row--marked{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--range-selected:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent-border)}.ag-row agrid-cell.ag-cell--find-match:not(.editing){background:#fff7cc}.ag-row agrid-cell.ag-cell--find-active:not(.editing){background:#ffe58a;box-shadow:inset 0 0 0 2px #b7791f}.ag-row agrid-cell.ag-cell--range-selected.selected:not(.editing){box-shadow:inset 0 0 0 2px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-preview:not(.editing){background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1px var(--agrid-color-accent)}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing){position:relative}.ag-row agrid-cell.ag-cell--fill-handle:not(.editing):after{content:\"\";position:absolute;right:1px;bottom:1px;width:6px;height:6px;background:var(--agrid-color-accent);border:1px solid var(--agrid-color-bg);box-sizing:border-box;cursor:crosshair;z-index:4}.ag-row--selected .ag-control-cell{background:var(--agrid-color-accent-subtle)}.ag-row--selected{box-shadow:inset 3px 0 0 var(--agrid-color-accent)}.ag-control-header{z-index:3;border-right:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted)}.ag-control-header .ag-header-cell-filter{background:var(--agrid-color-bg-subtle)}.ag-control-cell{z-index:2;border-right:1px solid var(--agrid-color-border);border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle);cursor:context-menu;display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;flex-direction:row-reverse}.ag-control-cell:after{content:\"\\22ee\";font-size:11px;color:var(--agrid-color-border);line-height:1}.ag-control-cell:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder{cursor:grab}.ag-control-cell--reorder:after{content:\"\\283f\";font-size:13px;color:var(--agrid-color-text)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.ag-row-marker{position:relative;z-index:1;width:14px;height:14px;margin:0;accent-color:var(--agrid-color-accent);cursor:pointer}.ag-ghost-row{background:var(--agrid-color-accent-subtle);box-shadow:inset 0 0 0 1.5px var(--agrid-color-accent);pointer-events:none;animation:ag-ghost-in .1s ease}@keyframes ag-ghost-in{0%{opacity:0}to{opacity:1}}.ag-ghost-handle:after{color:var(--agrid-color-accent)!important}.ag-ghost-cell{display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--agrid-color-accent-border);color:var(--agrid-color-accent-fg);font-size:13px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.ag-ghost-cell:last-child{border-right:none}.ag-pinned-row-spacer,.ag-pinned-group-spacer{height:100%;border-bottom:1px solid var(--agrid-color-border);box-sizing:border-box}.ag-pinned-group-spacer{background:var(--agrid-color-bg-muted)}.ag-context-menu{position:fixed;z-index:1000;background:var(--agrid-color-bg-subtle);border:1px solid var(--agrid-color-border);border-radius:6px;box-shadow:0 8px 24px var(--agrid-color-shadow);min-width:160px;padding:4px 0;font-size:13px}.ag-context-item{display:block;width:100%;padding:6px 16px;text-align:left;background:none;border:none;cursor:pointer;color:var(--agrid-color-text);font:inherit}.ag-context-item:hover{background:var(--agrid-color-bg-muted)}.ag-context-separator{height:1px;background:var(--agrid-color-border);margin:3px 0}.ag-context-item--danger{color:var(--agrid-color-danger)}.ag-context-item--danger:hover{background:var(--agrid-color-danger-subtle)}.ag-group-header-row{display:flex;align-items:stretch;background:var(--agrid-color-bg-muted);border-bottom:1px solid var(--agrid-color-border);overflow:hidden}.ag-group-header-content{display:flex;align-items:stretch;height:100%;width:100%;-webkit-user-select:none;user-select:none}.ag-group-header-main{display:flex;align-items:center;gap:6px;padding:0 10px;flex:1;min-width:0;cursor:pointer}.ag-group-header-main:hover{background:var(--agrid-color-bg-subtle)}.ag-group-description{font-size:11px;color:var(--agrid-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-group-actions-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;border-radius:3px;cursor:pointer;color:var(--agrid-color-text-muted);font-size:14px;padding:0}.ag-group-actions-btn:hover{background:var(--agrid-color-bg-muted);color:var(--agrid-color-text)}.ag-group-icon{font-size:9px;color:var(--agrid-color-text-muted);line-height:1;display:inline-block;transition:transform .15s ease}.ag-group-icon--expanded{transform:rotate(90deg)}.ag-group-label{font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-group-count{font-size:11px;color:var(--agrid-color-text-muted);background:var(--agrid-color-bg);border:1px solid var(--agrid-color-border);border-radius:10px;padding:0 7px;line-height:16px}.ag-group-aggregates{display:inline-flex;align-items:center;gap:10px;margin-left:4px;flex-wrap:wrap}.ag-group-aggregate{font-size:11px;color:var(--agrid-color-text);white-space:nowrap}.ag-group-aggregate-col{color:var(--agrid-color-text-muted);margin-right:4px}.ag-group-aggregate-op{color:var(--agrid-color-text-muted);margin-right:3px}.ag-footer{display:grid;flex-shrink:0;background:var(--agrid-color-bg-muted);border-top:2px solid var(--agrid-color-border)}.ag-footer-cell{display:flex;align-items:center;gap:4px;padding:0 6px;height:30px;border-right:1px solid var(--agrid-color-border);box-sizing:border-box;overflow:hidden;white-space:nowrap;font-weight:600;font-size:12px;color:var(--agrid-color-text)}.ag-footer-cell:last-child{border-right:none}.ag-footer-cell--control{background:var(--agrid-color-bg-subtle);border-right:1px solid var(--agrid-color-border)}.ag-footer-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-footer-label{font-size:10px;font-weight:400;color:var(--agrid-color-text-muted);flex-shrink:0}.ag-pagination{display:flex;align-items:center;gap:4px;padding:0 10px;height:34px;flex-shrink:0;border-top:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-muted);font-size:12px;color:var(--agrid-color-text-muted)}.ag-page-btn{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid var(--agrid-color-border);border-radius:3px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;cursor:pointer;padding:0;line-height:1}.ag-page-btn:hover:not(:disabled){background:var(--agrid-color-bg-muted);border-color:var(--agrid-color-text-muted)}.ag-page-btn:disabled{opacity:.35;cursor:default}.ag-page-info{padding:0 6px;font-weight:500;color:var(--agrid-color-text);min-width:48px;text-align:center}.ag-page-count{margin-left:auto;color:var(--agrid-color-text-muted)}.ag-add-row{border-bottom:1px dashed var(--agrid-color-border);color:var(--agrid-color-text-muted);cursor:pointer}.ag-add-row:hover .ag-add-row-label{background:var(--agrid-color-bg-muted)}.ag-add-row--selected .ag-add-row-label{outline:2px solid var(--agrid-color-accent);outline-offset:-2px}.ag-add-row-label{display:flex;align-items:center;gap:4px;height:100%;padding:0 6px;font-size:12px;-webkit-user-select:none;user-select:none}.ag-add-row-icon{font-size:16px;line-height:1;color:var(--agrid-color-text-muted)}.ag-pinned-pane--right{border-left:1px solid var(--agrid-color-border);border-right:none;box-shadow:-3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-header-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-header-cell--pinned-first{box-shadow:none}.ag-cell--pinned{background:var(--agrid-color-bg)}.ag-cell--pinned-last{box-shadow:inset -1px 0 0 var(--agrid-color-border),3px 0 6px -2px var(--agrid-color-shadow)}.ag-cell--pinned-first{box-shadow:none}.ag-row:hover .ag-cell--pinned{background:var(--agrid-color-bg-muted)}.ag-row--selected .ag-cell--pinned,.ag-row .ag-cell--pinned.ag-cell--range-selected,.ag-row .ag-cell--pinned.ag-cell--fill-preview{background:var(--agrid-color-accent-subtle)}.ag-row .ag-cell--pinned.ag-cell--find-match{background:#fff7cc}.ag-row .ag-cell--pinned.ag-cell--find-active{background:#ffe58a}.ag-header-menu-btn{flex-shrink:0;width:16px;height:16px;padding:0;margin-right:2px;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:10px;color:var(--agrid-color-text-muted);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .12s;line-height:1}.ag-header-menu-btn--active{color:var(--agrid-color-accent);border-color:var(--agrid-color-accent-border);background:var(--agrid-color-accent-subtle)}.ag-header-menu-btn:hover{background:var(--agrid-color-bg);border-color:var(--agrid-color-border)}.ag-toolbar{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid var(--agrid-color-border);background:var(--agrid-color-bg-subtle)}.ag-quick-filter{width:100%;max-width:260px;height:30px;padding:0 10px;border:1px solid var(--agrid-color-border);border-radius:4px;background:var(--agrid-color-bg);color:var(--agrid-color-text);font-size:13px;box-sizing:border-box}.ag-quick-filter:focus{outline:none;border-color:var(--agrid-color-accent-border)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], recordEdit: [{ type: i0.Output, args: ["recordEdit"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], prepareAddRecord: [{ type: i0.Output, args: ["prepareAddRecord"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowDoubleClicked: [{ type: i0.Output, args: ["rowDoubleClicked"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowChanged: [{ type: i0.Output, args: ["rowChanged"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], quickFilterChange: [{ type: i0.Output, args: ["quickFilterChange"] }], validationFailed: [{ type: i0.Output, args: ["validationFailed"] }], viewport: [{ type: i0.ViewChild, args: ['scrollViewport', { isSignal: true }] }], pinnedViewport: [{ type: i0.ViewChild, args: ['pinnedViewport', { isSignal: true }] }], rightPinnedViewport: [{ type: i0.ViewChild, args: ['rightPinnedViewport', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], horizontalScrollerEl: [{ type: i0.ViewChild, args: ['horizontalScroller', { isSignal: true }] }] } });
 
 /** Width sentinel that makes a column fill the remaining horizontal space. */
 const ColDefAutoSize = -1;