@thkl/agrid 0.1.0 → 0.1.3

package/fesm2022/thkl-agrid.mjs

@@ -401,7 +401,7 @@ class AgridCellComponent {
     } @else {
       <span class="ag-cell-value">{{ displayValue() }}</span>
     }
-  `, isInline: true, styles: [":host{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(.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}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridCellComponent, decorators: [{
             type: Component,
@@ -439,7 +439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     } @else {
       <span class="ag-cell-value">{{ displayValue() }}</span>
     }
-  `, styles: [":host{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(.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"] }]
+  `, 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 }] }] } });
 
 /** Guarded access to browser-only APIs used by the grid. @internal */
@@ -565,30 +565,48 @@ class AgridClipboardHandler {
     getSelectedTsv() {
         const bounds = this.getVisibleRangeBounds();
         const selected = this.opts.selectedCell();
-        if (!bounds && !selected)
+        const marked = this.opts.markedRowIndices();
+        if (!bounds && !selected && marked.size === 0)
             return '';
-        const rowStart = bounds?.rowStart ?? this.findDisplayIndex(selected.rowIndex);
+        const rowStart = bounds?.rowStart ?? (selected ? this.findDisplayIndex(selected.rowIndex) : -1);
         const rowEnd = bounds?.rowEnd ?? rowStart;
-        const colStart = bounds?.colStart ?? selected.colIndex;
-        const colEnd = bounds?.colEnd ?? selected.colIndex;
+        const colStart = bounds?.colStart ?? selected?.colIndex ?? 0;
+        const colEnd = bounds?.colEnd ?? selected?.colIndex
+            ?? this.opts.visibleColDefs().length - 1;
         const rows = this.opts.filteredItems();
         const cols = this.opts.visibleColDefs();
+        const dataRows = this.opts.dataSource().rows();
         const lines = [];
-        for (let displayIndex = rowStart; displayIndex <= rowEnd; displayIndex++) {
-            const item = rows[displayIndex];
-            if (!isDataRowItem(item))
-                continue;
-            const cells = [];
-            for (let colIndex = colStart; colIndex <= colEnd; colIndex++) {
-                const col = cols[colIndex];
-                if (!col)
+        const copiedIndices = new Set();
+        if (rowStart >= 0) {
+            for (let displayIndex = rowStart; displayIndex <= rowEnd; displayIndex++) {
+                const item = rows[displayIndex];
+                if (!isDataRowItem(item))
                     continue;
-                cells.push(this.escapeTsvValue(getDisplayForField(col, item.row[col.field], this.opts.locale())));
+                lines.push(this.serializeRow(item.row, cols, colStart, colEnd));
+                copiedIndices.add(item.originalIndex);
             }
-            lines.push(cells.join('\t'));
+        }
+        for (const originalIndex of [...marked].sort((a, b) => a - b)) {
+            if (copiedIndices.has(originalIndex))
+                continue;
+            const row = dataRows[originalIndex];
+            if (!row)
+                continue;
+            lines.push(this.serializeRow(row, cols, colStart, colEnd));
         }
         return lines.join('\n');
     }
+    serializeRow(row, cols, colStart, colEnd) {
+        const cells = [];
+        for (let colIndex = colStart; colIndex <= colEnd; colIndex++) {
+            const col = cols[colIndex];
+            if (!col)
+                continue;
+            cells.push(this.escapeTsvValue(getDisplayForField(col, row[col.field], this.opts.locale())));
+        }
+        return cells.join('\t');
+    }
     /** Applies delimited text to editable cells beginning at the active selection. */
     pasteTextAtSelection(text) {
         const bounds = this.getActiveSelectionBounds();
@@ -808,20 +826,30 @@ class AgridColumnLayoutModel {
     hasPinnedPane = computed(() => this.opts.showControlColumn() || this.pinnedColDefs().length > 0, ...(ngDevMode ? [{ debugName: "hasPinnedPane" }] : /* istanbul ignore next */ []));
     hasRightPinnedPane = computed(() => this.rightPinnedColDefs().length > 0, ...(ngDevMode ? [{ debugName: "hasRightPinnedPane" }] : /* istanbul ignore next */ []));
     hasFilterableColumns = computed(() => this.visibleColDefs().some(col => col.filterable), ...(ngDevMode ? [{ debugName: "hasFilterableColumns" }] : /* istanbul ignore next */ []));
+    hasHeaderGroups = computed(() => this.visibleColDefs().some(col => this.groupLabel(col.group) !== null), ...(ngDevMode ? [{ debugName: "hasHeaderGroups" }] : /* istanbul ignore next */ []));
+    pinnedHeaderGroupRuns = computed(() => this.buildHeaderGroupRuns(this.pinnedColDefs(), 'left'), ...(ngDevMode ? [{ debugName: "pinnedHeaderGroupRuns" }] : /* istanbul ignore next */ []));
+    scrollableHeaderGroupRuns = computed(() => this.buildHeaderGroupRuns(this.scrollableColDefs(), 'center'), ...(ngDevMode ? [{ debugName: "scrollableHeaderGroupRuns" }] : /* istanbul ignore next */ []));
+    rightHeaderGroupRuns = computed(() => this.buildHeaderGroupRuns(this.rightPinnedColDefs(), 'right'), ...(ngDevMode ? [{ debugName: "rightHeaderGroupRuns" }] : /* istanbul ignore next */ []));
     gridTemplateColumns = computed(() => {
         const columns = this.widthTokens(this.visibleColDefs());
-        return this.opts.showControlColumn() ? `24px ${columns}` : columns;
+        return this.opts.showControlColumn()
+            ? `${this.opts.controlColumnWidth()}px ${columns}`
+            : columns;
     }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : /* istanbul ignore next */ []));
     pinnedGridTemplateColumns = computed(() => {
         const columns = this.widthTokens(this.pinnedColDefs());
-        if (this.opts.showControlColumn())
-            return columns ? `24px ${columns}` : '24px';
+        if (this.opts.showControlColumn()) {
+            const controlWidth = `${this.opts.controlColumnWidth()}px`;
+            return columns ? `${controlWidth} ${columns}` : controlWidth;
+        }
         return columns;
     }, ...(ngDevMode ? [{ debugName: "pinnedGridTemplateColumns" }] : /* istanbul ignore next */ []));
     scrollableGridTemplateColumns = computed(() => this.widthTokens(this.scrollableColDefs()), ...(ngDevMode ? [{ debugName: "scrollableGridTemplateColumns" }] : /* istanbul ignore next */ []));
     rightGridTemplateColumns = computed(() => this.widthTokens(this.rightPinnedColDefs()), ...(ngDevMode ? [{ debugName: "rightGridTemplateColumns" }] : /* istanbul ignore next */ []));
-    totalWidth = computed(() => this.width(this.visibleColDefs()) + (this.opts.showControlColumn() ? 24 : 0), ...(ngDevMode ? [{ debugName: "totalWidth" }] : /* istanbul ignore next */ []));
-    pinnedPaneWidth = computed(() => this.width(this.pinnedColDefs()) + (this.opts.showControlColumn() ? 24 : 0), ...(ngDevMode ? [{ debugName: "pinnedPaneWidth" }] : /* istanbul ignore next */ []));
+    totalWidth = computed(() => this.width(this.visibleColDefs())
+        + (this.opts.showControlColumn() ? this.opts.controlColumnWidth() : 0), ...(ngDevMode ? [{ debugName: "totalWidth" }] : /* istanbul ignore next */ []));
+    pinnedPaneWidth = computed(() => this.width(this.pinnedColDefs())
+        + (this.opts.showControlColumn() ? this.opts.controlColumnWidth() : 0), ...(ngDevMode ? [{ debugName: "pinnedPaneWidth" }] : /* istanbul ignore next */ []));
     rightPinnedPaneWidth = computed(() => this.width(this.rightPinnedColDefs()), ...(ngDevMode ? [{ debugName: "rightPinnedPaneWidth" }] : /* istanbul ignore next */ []));
     scrollableTotalWidth = computed(() => this.width(this.scrollableColDefs()), ...(ngDevMode ? [{ debugName: "scrollableTotalWidth" }] : /* istanbul ignore next */ []));
     width(columns) {
@@ -830,6 +858,32 @@ class AgridColumnLayoutModel {
     widthTokens(columns) {
         return columns.map(col => this.opts.getColumnWidthToken(col)).join(' ');
     }
+    buildHeaderGroupRuns(columns, pane) {
+        const runs = [];
+        for (const col of columns) {
+            const label = this.groupLabel(col.group);
+            const id = label === null ? null : col.group ?? null;
+            const previous = runs[runs.length - 1];
+            if (id !== null && previous?.id === id) {
+                previous.fields.push(col.field);
+                previous.span++;
+                continue;
+            }
+            runs.push({
+                key: `${pane}:${col.field}`,
+                id,
+                label: label ?? '',
+                fields: [col.field],
+                span: 1,
+            });
+        }
+        return runs;
+    }
+    groupLabel(groupId) {
+        if (!groupId)
+            return null;
+        return this.opts.headerGroups().find(group => group.id === groupId)?.label ?? null;
+    }
 }
 
 /** Built-in English and German grid translations. */
@@ -855,6 +909,9 @@ const AGRID_LOCALE_TEXT = {
         hiddenColumn: '(hidden)',
         copyCellValue: 'Copy cell',
         copyRow: 'Copy row',
+        confirmDeleteRow: 'Sure to delete?',
+        confirmNo: 'No',
+        confirmYes: 'Yes',
         deleteRow: 'Delete row',
         filterPlaceholder: 'Filter...',
         findPlaceholder: 'Find',
@@ -866,6 +923,7 @@ const AGRID_LOCALE_TEXT = {
         insertRowBelow: 'Insert row below',
         lastPage: 'Last page',
         loading: 'Loading...',
+        markRow: 'Mark row for copying',
         next: 'Next',
         noRows: 'No rows to display',
         pagination: 'Pagination',
@@ -905,6 +963,9 @@ const AGRID_LOCALE_TEXT = {
         hiddenColumn: '(ausgeblendet)',
         copyCellValue: 'Zelle kopieren',
         copyRow: 'Zeile kopieren',
+        confirmDeleteRow: 'Wirklich löschen?',
+        confirmNo: 'Nein',
+        confirmYes: 'Ja',
         deleteRow: 'Zeile löschen',
         filterPlaceholder: 'Filtern...',
         findPlaceholder: 'Suchen',
@@ -916,6 +977,7 @@ const AGRID_LOCALE_TEXT = {
         insertRowBelow: 'Zeile darunter einfügen',
         lastPage: 'Letzte Seite',
         loading: 'Wird geladen...',
+        markRow: 'Zeile zum Kopieren markieren',
         next: 'Weiter',
         noRows: 'Keine Zeilen vorhanden',
         pagination: 'Seitennavigation',
@@ -1361,11 +1423,19 @@ class AgridColumnMenuController {
 class AgridColumnReorderController {
     opts;
     browser;
-    dragField = signal(null, ...(ngDevMode ? [{ debugName: "dragField" }] : /* istanbul ignore next */ []));
+    dragFields = signal([], ...(ngDevMode ? [{ debugName: "dragFields" }] : /* istanbul ignore next */ []));
     dragOverField = signal(null, ...(ngDevMode ? [{ debugName: "dragOverField" }] : /* istanbul ignore next */ []));
     dragInsertBefore = signal(true, ...(ngDevMode ? [{ debugName: "dragInsertBefore" }] : /* istanbul ignore next */ []));
-    dragStartField = null;
+    preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    dragStartFields = [];
+    dragLabel = '';
     dragStartX = 0;
+    dragStartY = 0;
+    pointerOffsetX = 0;
+    pointerOffsetY = 0;
+    draggedWidth = 0;
+    draggedHeight = 0;
+    dropTargets = [];
     constructor(opts, destroyRef, browser = new AgridBrowserAdapter()) {
         this.opts = opts;
         this.browser = browser;
@@ -1373,36 +1443,92 @@ class AgridColumnReorderController {
     }
     /** Arms a column reorder gesture for an unlocked header. */
     start(event, field) {
+        const col = this.opts.getColDef(field);
+        this.startFields(event, [field], col?.header ?? field);
+    }
+    /** Arms a grouped-header reorder gesture for a contiguous field segment. */
+    startGroup(event, fields, label) {
+        this.startFields(event, fields, label);
+    }
+    startFields(event, fields, label) {
         if (!this.opts.control() || event.button !== 0)
             return;
-        if (this.opts.getColDef(field)?.locked)
+        if (fields.length === 0 || fields.some(field => this.opts.getColDef(field)?.locked))
             return;
-        this.dragStartField = field;
+        const header = event.currentTarget;
+        const rect = header?.getBoundingClientRect();
+        this.dragStartFields = [...fields];
+        this.dragLabel = label;
         this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.draggedWidth = rect?.width ?? 0;
+        this.draggedHeight = rect?.height ?? 32;
+        this.pointerOffsetX = rect ? event.clientX - rect.left : 0;
+        this.pointerOffsetY = rect ? event.clientY - rect.top : 0;
+        this.dropTargets = this.captureDropTargets(header);
         this.browser.addDocumentListener('pointermove', this.dragMove);
         this.browser.addDocumentListener('pointerup', this.dragUp);
         this.browser.addDocumentListener('pointercancel', this.dragCancel);
     }
     /** Returns whether the field is currently being dragged. */
     isDragging(field) {
-        return this.dragField() === field;
+        return this.dragFields().includes(field);
     }
     /** Returns the active drop-indicator side for a field. */
     getDropSide(field) {
-        if (this.dragOverField() !== field || this.dragField() === field)
+        if (this.dragOverField() !== field || this.dragFields().includes(field))
             return null;
         return this.dragInsertBefore() ? 'before' : 'after';
     }
+    /** Horizontal translation used to animate headers away from the pending insertion gap. */
+    getHeaderOffset(field) {
+        const movingFields = this.dragFields();
+        const overField = this.dragOverField();
+        if (movingFields.length === 0 || !overField || movingFields.includes(field)
+            || this.draggedWidth <= 0)
+            return 0;
+        const fields = this.opts.visibleColDefs().map(col => col.field);
+        const fromIndex = fields.findIndex(value => movingFields.includes(value));
+        const remaining = fields.filter(value => !movingFields.includes(value));
+        const overIndex = remaining.indexOf(overField);
+        const fieldIndex = remaining.indexOf(field);
+        if (fromIndex < 0 || overIndex < 0 || fieldIndex < 0)
+            return 0;
+        const insertionIndex = overIndex + (this.dragInsertBefore() ? 0 : 1);
+        if (insertionIndex < fromIndex && fieldIndex >= insertionIndex && fieldIndex < fromIndex) {
+            return this.draggedWidth;
+        }
+        if (insertionIndex > fromIndex && fieldIndex >= fromIndex && fieldIndex < insertionIndex) {
+            return -this.draggedWidth;
+        }
+        return 0;
+    }
     dragMove = (event) => {
-        if (!this.dragStartField)
+        if (this.dragStartFields.length === 0)
             return;
-        if (this.dragField() === null) {
+        if (this.dragFields().length === 0) {
             if (Math.abs(event.clientX - this.dragStartX) < 5)
                 return;
-            this.dragField.set(this.dragStartField);
+            this.dragFields.set([...this.dragStartFields]);
+            this.preview.set({
+                field: this.dragStartFields[0],
+                fields: [...this.dragStartFields],
+                label: this.dragLabel,
+                x: event.clientX - this.pointerOffsetX,
+                y: event.clientY - this.pointerOffsetY,
+                width: this.draggedWidth,
+                height: this.draggedHeight,
+            });
+        }
+        else {
+            this.preview.update(preview => preview ? {
+                ...preview,
+                x: event.clientX - this.pointerOffsetX,
+                y: event.clientY - this.pointerOffsetY,
+            } : null);
         }
         const hovered = this.getHoveredHeaderCell(event.clientX, event.clientY);
-        if (hovered && hovered.field !== this.dragField()) {
+        if (hovered && !this.dragFields().includes(hovered.field)) {
             this.dragOverField.set(hovered.field);
             this.dragInsertBefore.set(hovered.insertBefore);
         }
@@ -1412,38 +1538,58 @@ class AgridColumnReorderController {
     };
     dragUp = () => {
         this.removeListeners();
-        const from = this.dragField();
+        const from = this.dragFields();
         const to = this.dragOverField();
-        if (from && to) {
-            this.opts.control()?.moveColumn(this.opts.visibleColDefs().map(col => col.field), from, to, this.dragInsertBefore());
+        if (from.length > 0 && to) {
+            this.opts.control()?.moveColumns(this.opts.visibleColDefs().map(col => col.field), from, to, this.dragInsertBefore());
         }
-        this.dragField.set(null);
+        this.dragFields.set([]);
         this.dragOverField.set(null);
         this.dragInsertBefore.set(true);
-        this.dragStartField = null;
+        this.preview.set(null);
+        this.dragStartFields = [];
+        this.dragLabel = '';
+        this.dropTargets = [];
     };
     dragCancel = () => this.cancel();
     cancel() {
         this.removeListeners();
-        this.dragField.set(null);
+        this.dragFields.set([]);
         this.dragOverField.set(null);
         this.dragInsertBefore.set(true);
-        this.dragStartField = null;
+        this.preview.set(null);
+        this.dragStartFields = [];
+        this.dragLabel = '';
+        this.dropTargets = [];
     }
     removeListeners() {
         this.browser.removeDocumentListener('pointermove', this.dragMove);
         this.browser.removeDocumentListener('pointerup', this.dragUp);
         this.browser.removeDocumentListener('pointercancel', this.dragCancel);
     }
-    getHoveredHeaderCell(x, y) {
-        for (const el of this.browser.elementsFromPoint(x, y)) {
-            const headerEl = el.closest('.ag-header-cell[data-col-field]');
-            if (!headerEl?.dataset['colField'])
-                continue;
-            const rect = headerEl.getBoundingClientRect();
-            return { field: headerEl.dataset['colField'], insertBefore: x < rect.left + rect.width / 2 };
-        }
-        return null;
+    getHoveredHeaderCell(x, _y) {
+        const target = this.dropTargets.find(rect => x >= rect.left && x <= rect.right);
+        return target
+            ? { field: target.field, insertBefore: x < target.left + (target.right - target.left) / 2 }
+            : null;
+    }
+    captureDropTargets(header) {
+        const root = header?.closest('.ag-wrapper') ?? header?.ownerDocument;
+        if (!root)
+            return [];
+        return [...root.querySelectorAll('.ag-header-cell[data-col-field]')]
+            .map(element => {
+            const field = element.dataset['colField'];
+            const rect = element.getBoundingClientRect();
+            return field ? {
+                field,
+                left: rect.left,
+                right: rect.right,
+                top: rect.top,
+                bottom: rect.bottom,
+            } : null;
+        })
+            .filter((target) => target !== null);
     }
 }
 
@@ -2150,6 +2296,12 @@ class AgridNavigationController {
         this.opts.cancelEdit();
         this.addRowAndSelect();
     }
+    /** Clears cell and range navigation when focus moves to a grid control. */
+    deactivateCell() {
+        this.opts.cancelEdit();
+        this.opts.selectedCell.set(null);
+        this.opts.selectedRange.set(null);
+    }
     /** Inserts an initialized blank row and emits the preparation callback. */
     insertRowAt(atIndex) {
         const emptyRow = this.buildEmptyRow();
@@ -2158,7 +2310,7 @@ class AgridNavigationController {
     }
     /** Handles grid-level navigation, editing, history, find, and add-row shortcuts. */
     handleKeyDown(event) {
-        if (event.target?.closest('.ag-sidebar'))
+        if (event.target?.closest('.ag-sidebar, .ag-filter-input, .ag-filter-menu'))
             return;
         if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === 'f') {
             event.preventDefault();
@@ -2553,18 +2705,23 @@ class AgridControl {
      * operation works correctly whether or not an order has been set before.
      */
     moveColumn(currentVisibleOrder, fromField, toField, insertBefore) {
+        this.moveColumns(currentVisibleOrder, [fromField], toField, insertBefore);
+    }
+    /**
+     * Move an ordered block of fields to a new position relative to `toField`.
+     * Fields absent from `currentVisibleOrder` are ignored.
+     */
+    moveColumns(currentVisibleOrder, fromFields, toField, insertBefore) {
         const order = [...currentVisibleOrder];
-        const fromIdx = order.indexOf(fromField);
-        if (fromIdx === -1)
+        const moving = order.filter(field => fromFields.includes(field));
+        if (moving.length === 0 || moving.includes(toField))
             return;
-        order.splice(fromIdx, 1);
-        const toIdx = order.indexOf(toField);
-        if (toIdx === -1) {
-            this._columnOrder.set(order);
+        const remaining = order.filter(field => !moving.includes(field));
+        const toIdx = remaining.indexOf(toField);
+        if (toIdx === -1)
             return;
-        }
-        order.splice(insertBefore ? toIdx : toIdx + 1, 0, fromField);
-        this._columnOrder.set(order);
+        remaining.splice(insertBefore ? toIdx : toIdx + 1, 0, ...moving);
+        this._columnOrder.set(remaining);
     }
     // ── Pinned columns ────────────────────────────────────────────────────────
     /** Reactive set of field names currently pinned to the left edge. */
@@ -3021,6 +3178,8 @@ class AgridProvider {
     control;
     /** Reactive column definitions in display order. */
     columns;
+    /** Header-group labels referenced by column definitions. */
+    headerGroups;
     /** Shared grid options such as locale. */
     options;
     _localizations = new Map();
@@ -3050,6 +3209,8 @@ class AgridProvider {
     allowAddRows;
     /** Whether the control column is rendered. */
     showControlColumn;
+    /** Whether rows can be marked for inclusion in clipboard copies. */
+    enableRowMarking;
     /** Whether the sidebar is available. */
     showSidebar;
     /** Whether selecting a row automatically opens its detail panel. */
@@ -3072,6 +3233,10 @@ class AgridProvider {
     cellMenuItems;
     /** Whether alternating data rows receive stripe styling. */
     zebraStripes;
+    /** Whether committed cell changes receive a visual marker. */
+    showChangedCellIndicator;
+    /** Whether grid row-delete actions require in-row confirmation. */
+    confirmRowDelete;
     /** Optional empty-state text override. */
     emptyText;
     /** Whether edits are restricted to the sidebar editor. */
@@ -3086,12 +3251,14 @@ class AgridProvider {
         this.datasource = config.datasource ?? new AgridDataSource([]);
         this.control = config.control ?? new AgridControl({ allowRowReorder: true });
         this.columns = signal(config.columns ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.headerGroups = config.headerGroups ?? [];
         this.rowHeight = config.rowHeight ?? 32;
         this.minHeight = config.minHeight;
         this.maxHeight = config.maxHeight;
         this.allowAddRows = config.allowAddRows ?? false;
         this.autoAddRows = signal(config.autoAddRows ?? false, ...(ngDevMode ? [{ debugName: "autoAddRows" }] : /* istanbul ignore next */ []));
         this.showControlColumn = config.showControlColumn ?? false;
+        this.enableRowMarking = config.enableRowMarking ?? false;
         this.showSidebar = config.showSidebar ?? false;
         this.autoOpenDetail = config.autoOpenDetail ?? false;
         this.serverSideFiltering = config.serverSideFiltering ?? false;
@@ -3102,6 +3269,8 @@ class AgridProvider {
         this.groupActions = config.groupActions ?? [];
         this.cellMenuItems = config.cellMenuItems ?? [];
         this.zebraStripes = config.zebraStripes ?? false;
+        this.showChangedCellIndicator = config.showChangedCellIndicator ?? false;
+        this.confirmRowDelete = config.confirmRowDelete ?? false;
         this.emptyText = config.emptyText;
         this.loading = signal(config.loading ?? false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.readonlyGrid = signal(config.readonly ?? false, ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
@@ -3617,19 +3786,36 @@ class AgridRowController {
     closeCellContextMenu() {
         this.cellContextMenu.set(null);
     }
-    /** Copies a cell's formatted display value to the clipboard. */
-    copyCellToClipboard(value, col) {
-        void this.browser.writeClipboard(getDisplayForField(col, value));
+    /** Copies a cell plus the same field from marked rows to the clipboard. */
+    copyCellToClipboard(originalIndex, col) {
+        const rows = this.opts.dataSource().rows();
+        const text = this.copyIndices(originalIndex)
+            .map(index => getDisplayForField(col, rows[index]?.[col.field], this.opts.locale()))
+            .join('\n');
+        void this.browser.writeClipboard(text);
         this.closeCellContextMenu();
     }
-    /** Copies the visible values of a row as tab-separated text. */
-    copyRowToClipboard(row) {
-        const text = this.opts.visibleColDefs()
-            .map(col => getDisplayForField(col, row[col.field]))
-            .join('\t');
+    /** Copies a row plus all marked rows as tab-separated text. */
+    copyRowToClipboard(originalIndex) {
+        const rows = this.opts.dataSource().rows();
+        const cols = this.opts.visibleColDefs();
+        const text = this.copyIndices(originalIndex)
+            .map(index => cols
+            .map(col => getDisplayForField(col, rows[index]?.[col.field], this.opts.locale()))
+            .join('\t'))
+            .join('\n');
         void this.browser.writeClipboard(text);
         this.closeCellContextMenu();
     }
+    copyIndices(primaryIndex) {
+        const length = this.opts.dataSource().length;
+        const indices = [primaryIndex];
+        for (const index of [...this.opts.markedRowIndices()].sort((a, b) => a - b)) {
+            if (index !== primaryIndex && index >= 0 && index < length)
+                indices.push(index);
+        }
+        return indices;
+    }
     /** Inserts a row through the grid's central insertion callback. */
     insertRowAt(index) {
         this.opts.insertRowAt(index);
@@ -3748,13 +3934,15 @@ class AgridSidebarController {
         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 });
+        const event = {
+            position: { rowIndex: index, colIndex },
+            field,
+            oldValue,
+            newValue,
+        };
+        this.opts.onFieldChange(event);
         if (!this.opts.useSidebarEditor()) {
-            this.opts.onCellEdit({
-                position: { rowIndex: index, colIndex },
-                field,
-                oldValue,
-                newValue,
-            });
+            this.opts.onCellEdit(event);
         }
     }
 }
@@ -3835,7 +4023,9 @@ class AgridComponent {
     maxHeight = computed(() => this.provider().maxHeight, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
     allowAddRows = computed(() => this.provider().allowAddRows, ...(ngDevMode ? [{ debugName: "allowAddRows" }] : /* istanbul ignore next */ []));
     autoAddRows = computed(() => this.provider().autoAddRows(), ...(ngDevMode ? [{ debugName: "autoAddRows" }] : /* istanbul ignore next */ []));
-    showControlColumn = computed(() => this.provider().showControlColumn, ...(ngDevMode ? [{ debugName: "showControlColumn" }] : /* istanbul ignore next */ []));
+    enableRowMarking = computed(() => this.provider().enableRowMarking, ...(ngDevMode ? [{ debugName: "enableRowMarking" }] : /* istanbul ignore next */ []));
+    showControlColumn = computed(() => this.provider().showControlColumn || this.enableRowMarking(), ...(ngDevMode ? [{ debugName: "showControlColumn" }] : /* istanbul ignore next */ []));
+    controlColumnWidth = computed(() => this.enableRowMarking() ? 48 : 24, ...(ngDevMode ? [{ debugName: "controlColumnWidth" }] : /* istanbul ignore next */ []));
     showSidebar = computed(() => this.provider().showSidebar, ...(ngDevMode ? [{ debugName: "showSidebar" }] : /* istanbul ignore next */ []));
     autoOpenDetail = computed(() => this.provider().autoOpenDetail, ...(ngDevMode ? [{ debugName: "autoOpenDetail" }] : /* istanbul ignore next */ []));
     serverSideFiltering = computed(() => this.provider().serverSideFiltering, ...(ngDevMode ? [{ debugName: "serverSideFiltering" }] : /* istanbul ignore next */ []));
@@ -3845,7 +4035,10 @@ class AgridComponent {
     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 */ []));
     zebraStripes = computed(() => this.provider().zebraStripes, ...(ngDevMode ? [{ debugName: "zebraStripes" }] : /* istanbul ignore next */ []));
+    showChangedCellIndicator = computed(() => this.provider().showChangedCellIndicator, ...(ngDevMode ? [{ debugName: "showChangedCellIndicator" }] : /* istanbul ignore next */ []));
+    confirmRowDelete = computed(() => this.provider().confirmRowDelete, ...(ngDevMode ? [{ debugName: "confirmRowDelete" }] : /* istanbul ignore next */ []));
     readonlyGrid = computed(() => this.provider().readonlyGrid(), ...(ngDevMode ? [{ debugName: "readonlyGrid" }] : /* istanbul ignore next */ []));
     loading = computed(() => this.provider().loading(), ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     emptyText = computed(() => this.provider().emptyText, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
@@ -3881,7 +4074,10 @@ class AgridComponent {
     rowDoubleClicked = output();
     /** Emitted when the user single-clicks a data row. */
     rowClick = output();
-    /** Emitted when the user has changed and saved a record via the sidebar editor save button */
+    /**
+     * Emitted once after a changed row is left during inline editing, or when the sidebar editor
+     * save button is used.
+     */
     rowChanged = output();
     /**
      * Emitted when the user navigates to a new page in **server-side pagination mode**
@@ -3896,6 +4092,15 @@ class AgridComponent {
     // ── Public state ─────────────────────────────────────────────────────────────
     /** Currently focused cell, or `null`. */
     selectedCell = signal(null, ...(ngDevMode ? [{ debugName: "selectedCell" }] : /* istanbul ignore next */ []));
+    /** Original index of the row awaiting delete confirmation, or `null`. */
+    pendingDeleteRow = signal(null, ...(ngDevMode ? [{ debugName: "pendingDeleteRow" }] : /* istanbul ignore next */ []));
+    markedIndices = signal(new Set(), ...(ngDevMode ? [{ debugName: "markedIndices" }] : /* istanbul ignore next */ []));
+    /** Original datasource indices marked for inclusion in copy operations. */
+    markedRowIndices = this.markedIndices.asReadonly();
+    /** Horizontal position of the delete prompt inside the scrollable row. */
+    deleteConfirmationLeft = signal(0, ...(ngDevMode ? [{ debugName: "deleteConfirmationLeft" }] : /* istanbul ignore next */ []));
+    /** Visible width available to the delete prompt. */
+    deleteConfirmationWidth = signal(0, ...(ngDevMode ? [{ debugName: "deleteConfirmationWidth" }] : /* istanbul ignore next */ []));
     /** Rectangular cell range selected by Shift+arrow or Shift+click. */
     selectedRange = signal(null, ...(ngDevMode ? [{ debugName: "selectedRange" }] : /* istanbul ignore next */ []));
     /** Fill-handle drag preview bounds, in visible row/column coordinates. */
@@ -3924,9 +4129,7 @@ class AgridComponent {
         const originalIndex = this.sidebarController.selectedRowIndex();
         if (originalIndex === null)
             return;
-        const row = this.dataSource().getRow(originalIndex);
-        const saveEvent = { row, originalIndex };
-        this.rowChanged.emit(saveEvent);
+        this.emitRowChanged(originalIndex);
         this.emitRecordEdit(originalIndex);
         this.sidebarController.closeSidebar();
     }
@@ -3950,6 +4153,31 @@ class AgridComponent {
     autosizeAllColumns() {
         this.columnSizing.autosizeAllColumns();
     }
+    /**
+     * Clears changed-cell markers after persistence succeeds.
+     * Omit `originalIndex` to clear every marker; omit `fields` to clear the whole row.
+     */
+    clearChangedCells(originalIndex, fields) {
+        if (originalIndex === undefined) {
+            this.changedCells.set(new Set());
+            return;
+        }
+        const fieldSet = fields ? new Set(fields) : null;
+        this.changedCells.update(current => {
+            const next = new Set(current);
+            for (const key of current) {
+                const marker = this.parseChangedCellKey(key);
+                if (marker.rowIndex === originalIndex && (!fieldSet || fieldSet.has(marker.field))) {
+                    next.delete(key);
+                }
+            }
+            return next;
+        });
+    }
+    /** @internal Whether a cell has an unsaved-change marker. */
+    isCellChanged(originalIndex, field) {
+        return this.changedCells().has(this.changedCellKey(originalIndex, field));
+    }
     /** @internal Full display value for a cell — used as the `title` tooltip attribute. */
     getCellTitle(col, value) {
         return this.presentation.getCellTitle(col, value);
@@ -3984,7 +4212,9 @@ class AgridComponent {
     columnLayout = new AgridColumnLayoutModel({
         control: this.control,
         colDefs: this.colDefs,
+        headerGroups: this.headerGroups,
         showControlColumn: this.showControlColumn,
+        controlColumnWidth: this.controlColumnWidth,
         getColumnWidth: col => this.getColumnWidth(col),
         getColumnWidthToken: col => this.getColumnWidthToken(col),
     });
@@ -4001,6 +4231,10 @@ class AgridComponent {
     hasRightPinnedPane = this.columnLayout.hasRightPinnedPane;
     hasPinnedPane = this.columnLayout.hasPinnedPane;
     hasFilterableColumns = this.columnLayout.hasFilterableColumns;
+    hasHeaderGroups = this.columnLayout.hasHeaderGroups;
+    pinnedHeaderGroupRuns = this.columnLayout.pinnedHeaderGroupRuns;
+    scrollableHeaderGroupRuns = this.columnLayout.scrollableHeaderGroupRuns;
+    rightHeaderGroupRuns = this.columnLayout.rightHeaderGroupRuns;
     columnState = new AgridColumnStateService({
         control: this.control,
         colDefs: this.colDefs,
@@ -4038,8 +4272,10 @@ class AgridComponent {
     /** Total number of pages given the current filter and page size. */
     totalPages = this.projection.totalPages;
     showPagination = this.projection.showPagination;
-    /** Number of rendered semantic rows, including the header row. */
-    ariaRowCount = computed(() => this.displayItems().length + 1 + (this.showFooter() ? 1 : 0), ...(ngDevMode ? [{ debugName: "ariaRowCount" }] : /* istanbul ignore next */ []));
+    /** Number of semantic header rows currently rendered. */
+    headerRowCount = computed(() => this.hasHeaderGroups() ? 2 : 1, ...(ngDevMode ? [{ debugName: "headerRowCount" }] : /* istanbul ignore next */ []));
+    /** Number of rendered semantic rows, including header rows. */
+    ariaRowCount = computed(() => this.displayItems().length + this.headerRowCount() + (this.showFooter() ? 1 : 0), ...(ngDevMode ? [{ debugName: "ariaRowCount" }] : /* istanbul ignore next */ []));
     /** Number of visible semantic columns, including the optional control column. */
     ariaColCount = computed(() => this.visibleColDefs().length + (this.showControlColumn() ? 1 : 0), ...(ngDevMode ? [{ debugName: "ariaColCount" }] : /* istanbul ignore next */ []));
     /** True when no rows or group headers are visible (ignores add-row sentinel and ghost). */
@@ -4206,14 +4442,23 @@ class AgridComponent {
         dataSource: this.dataSource,
         filteredItems: this.filteredItems,
         visibleColDefs: this.visibleColDefs,
+        locale: this.locale,
+        markedRowIndices: this.markedRowIndices,
         rowSelection: this.rowSelection,
         selectedCell: this.selectedCell,
         editingCell: this.editController.editingCell,
-        insertRowAt: index => this.navigationController.insertRowAt(index),
+        insertRowAt: index => {
+            this.reconcileMarkedRowsAfterInsertion(index);
+            this.navigationController.insertRowAt(index);
+        },
         startDragSelect: originalIndex => this.dragHandler.startDragSelect(originalIndex),
         onRowSelect: event => this.rowSelect.emit(event),
         onRowClick: event => this.rowClick.emit(event),
-        onRowRemoved: event => this.rowRemoved.emit(this.createRecordEvent(event.index, event.data)),
+        onRowRemoved: event => {
+            this.reconcileDirtyInlineRowsAfterRemoval(event.index);
+            this.reconcileMarkedRowsAfterRemoval(event.index);
+            this.rowRemoved.emit(this.createRecordEvent(event.index, event.data));
+        },
         onEditRowRemoved: originalIndex => this.editController.onRowRemoved(originalIndex),
         closeFilterMenu: () => this.columnMenuController.close(),
         closeGroupActionsMenu: () => this.closeGroupActionsMenu(),
@@ -4230,7 +4475,8 @@ class AgridComponent {
         selectedRowIndex: this.selectedRowIndex,
         autoOpenDetail: this.autoOpenDetail,
         useSidebarEditor: this.useSidebarEditor,
-        onCellEdit: event => this.emitEditEvents(event),
+        onFieldChange: event => this.markCellChanged(event),
+        onCellEdit: event => this.emitSidebarEditEvents(event),
     });
     sidebarOpen = this.sidebarController.open;
     sidebarTab = this.sidebarController.tab;
@@ -4244,6 +4490,7 @@ class AgridComponent {
         locale: this.locale,
         selectedCell: this.selectedCell,
         selectedRange: this.selectedRange,
+        markedRowIndices: this.markedRowIndices,
         isCellEditable: col => this.isCellEditable(col),
         onCellEdit: event => this.emitEditEvents(event),
         scrollToCell: (displayIndex, colIndex) => this.scrollToKeepVisible(displayIndex, colIndex),
@@ -4253,7 +4500,10 @@ class AgridComponent {
         filteredItems: () => this.filteredItems(),
         locale: () => this.locale(),
         selectedIndices: this.rowController.selectedIndices,
-        onReorder: e => this.rowReorder.emit(e),
+        onReorder: e => {
+            this.reconcileMarkedRowsAfterMove(e.oldIndex, e.newIndex);
+            this.rowReorder.emit(e);
+        },
         onSelectionChange: () => this.rowController.emitSelection(),
     }, this.destroyRef);
     columnReorder = new AgridColumnReorderController({
@@ -4261,10 +4511,23 @@ class AgridComponent {
         visibleColDefs: this.visibleColDefs,
         getColDef: field => this.getColDef(field),
     }, this.destroyRef);
+    columnDragPreview = this.columnReorder.preview;
     /** @internal Start a column header drag. */
     onColHeaderPointerDown(event, field) {
         this.columnReorder.start(event, field);
     }
+    /** @internal Start dragging all columns in one contiguous grouped-header segment. */
+    onHeaderGroupPointerDown(event, fields, label) {
+        this.columnReorder.startGroup(event, fields, label);
+    }
+    /** @internal Whether any field in a grouped-header segment is being dragged. */
+    isHeaderGroupDragging(fields) {
+        return fields.some(field => this.columnReorder.isDragging(field));
+    }
+    /** @internal Whether a grouped-header segment contains a locked column. */
+    isHeaderGroupLocked(fields) {
+        return fields.some(field => this.getColDef(field)?.locked);
+    }
     /** @internal Whether the given column header is being dragged. */
     isColDragging(field) {
         return this.columnReorder.isDragging(field);
@@ -4273,17 +4536,106 @@ class AgridComponent {
     getColDropSide(field) {
         return this.columnReorder.getDropSide(field);
     }
+    /** @internal Horizontal animation offset for a header during column reordering. */
+    getColReorderOffset(field) {
+        return this.columnReorder.getHeaderOffset(field);
+    }
     // ── Setup ─────────────────────────────────────────────────────────────────────
     _seededControls = new WeakSet();
+    dirtyInlineRows = new Set();
+    dirtyRowsDataSource = null;
+    changedCells = signal(new Set(), ...(ngDevMode ? [{ debugName: "changedCells" }] : /* istanbul ignore next */ []));
+    changedCellsDataSource = null;
     emitEditEvents(event) {
         this.cellEdit.emit(event);
         this.emitRecordEdit(event.position.rowIndex);
+        this.markInlineRowDirty(event.position.rowIndex);
+        this.markCellChanged(event);
+    }
+    emitSidebarEditEvents(event) {
+        this.cellEdit.emit(event);
+        this.emitRecordEdit(event.position.rowIndex);
     }
     emitRecordEdit(index) {
         const datasource = this.dataSource();
         const event = this.createRecordEvent(index, datasource.getRow(index));
         queueMicrotask(() => this.recordEdit.emit(event));
     }
+    markInlineRowDirty(index) {
+        const datasource = this.dataSource();
+        if (this.dirtyRowsDataSource !== datasource) {
+            this.dirtyInlineRows.clear();
+            this.dirtyRowsDataSource = datasource;
+        }
+        this.dirtyInlineRows.add(index);
+    }
+    markCellChanged(event) {
+        if (!this.showChangedCellIndicator())
+            return;
+        const datasource = this.dataSource();
+        if (this.changedCellsDataSource !== datasource) {
+            this.changedCells.set(new Set());
+            this.changedCellsDataSource = datasource;
+        }
+        this.changedCells.update(current => {
+            const next = new Set(current);
+            next.add(this.changedCellKey(event.position.rowIndex, event.field));
+            return next;
+        });
+    }
+    changedCellKey(rowIndex, field) {
+        return JSON.stringify([rowIndex, field]);
+    }
+    parseChangedCellKey(key) {
+        const [rowIndex, field] = JSON.parse(key);
+        return { rowIndex, field };
+    }
+    flushDirtyInlineRows(activeRowIndex = null) {
+        const datasource = this.dataSource();
+        if (this.dirtyRowsDataSource !== datasource) {
+            this.dirtyInlineRows.clear();
+            this.dirtyRowsDataSource = datasource;
+            return;
+        }
+        for (const index of [...this.dirtyInlineRows].sort((a, b) => a - b)) {
+            if (index === activeRowIndex)
+                continue;
+            this.dirtyInlineRows.delete(index);
+            if (index >= 0 && index < datasource.length)
+                this.emitRowChanged(index);
+        }
+    }
+    reconcileDirtyInlineRowsAfterRemoval(removedIndex) {
+        const shifted = new Set();
+        for (const index of this.dirtyInlineRows) {
+            if (index < removedIndex)
+                shifted.add(index);
+            else if (index > removedIndex)
+                shifted.add(index - 1);
+        }
+        this.dirtyInlineRows.clear();
+        for (const index of shifted)
+            this.dirtyInlineRows.add(index);
+        this.reconcileChangedCellsAfterRemoval(removedIndex);
+    }
+    reconcileChangedCellsAfterRemoval(removedIndex) {
+        const shifted = new Set();
+        for (const key of this.changedCells()) {
+            const marker = this.parseChangedCellKey(key);
+            if (marker.rowIndex < removedIndex)
+                shifted.add(key);
+            else if (marker.rowIndex > removedIndex) {
+                shifted.add(this.changedCellKey(marker.rowIndex - 1, marker.field));
+            }
+        }
+        this.changedCells.set(shifted);
+    }
+    emitRowChanged(originalIndex) {
+        this.rowChanged.emit({
+            row: this.dataSource().getRow(originalIndex),
+            originalIndex,
+        });
+    }
     createRecordEvent(index, data) {
         const datasource = this.dataSource();
         return {
@@ -4295,6 +4647,17 @@ class AgridComponent {
     }
     constructor() {
         effect(() => this.sidebarController.syncAutoOpen());
+        effect(() => {
+            const datasource = this.dataSource();
+            if (this.changedCellsDataSource === datasource)
+                return;
+            this.changedCellsDataSource = datasource;
+            this.changedCells.set(new Set());
+        });
+        effect(() => {
+            const activeRowIndex = this.selectedCell()?.rowIndex ?? null;
+            this.flushDirtyInlineRows(activeRowIndex);
+        });
         afterNextRender(() => {
             const wrapper = this.wrapperEl().nativeElement;
             const onKeyDown = (event) => this.onKeyDown(event);
@@ -4321,6 +4684,9 @@ class AgridComponent {
         });
         // Deselect when clicking outside the grid.
         const onOutsidePointerDown = (e) => {
+            if (!this._hostEl.nativeElement.contains(e.target)) {
+                queueMicrotask(() => this.flushDirtyInlineRows());
+            }
             if (this.rowSelection() === 'none')
                 return;
             if (this.selectedRowIndices().size === 0)
@@ -4511,8 +4877,20 @@ class AgridComponent {
     }
     /** @internal Main keyboard handler delegated from the wrapper div. */
     onKeyDown(event) {
+        if (event.key === 'Escape' && this.pendingDeleteRow() !== null) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelRowDelete();
+            return;
+        }
         this.navigationController.handleKeyDown(event);
     }
+    /** @internal Clears cell navigation while a header filter control owns focus. */
+    onGridFocusIn(event) {
+        if (event.target?.closest('.ag-filter-input, .ag-filter-menu')) {
+            this.navigationController.deactivateCell();
+        }
+    }
     /** Open the find panel and focus its input. */
     openFind() {
         this.findController.show();
@@ -4547,6 +4925,25 @@ class AgridComponent {
         }
         this.rowController.selectFromPointer(event, originalIndex, false);
     }
+    /** @internal Toggle whether a row is included in subsequent copy operations. */
+    toggleRowMarked(originalIndex) {
+        this.markedIndices.update(indices => {
+            const next = new Set(indices);
+            if (next.has(originalIndex))
+                next.delete(originalIndex);
+            else
+                next.add(originalIndex);
+            return next;
+        });
+    }
+    /** @internal Returns whether a row is marked for copying. */
+    isRowMarked(originalIndex) {
+        return this.markedIndices().has(originalIndex);
+    }
+    /** Clear every row marked for clipboard inclusion. */
+    clearMarkedRows() {
+        this.markedIndices.set(new Set());
+    }
     /** @internal Copy the active range or cell as TSV. */
     onCopy(event) {
         this.clipboardHandler.copy(event);
@@ -4600,21 +4997,59 @@ class AgridComponent {
         });
         this.closeCellContextMenu();
     }
-    /** @internal Copy the display value of one cell to the clipboard. */
-    copyCellToClipboard(value, col) {
-        this.rowController.copyCellToClipboard(value, col);
+    /** @internal Copy one field from the target and marked rows. */
+    copyCellToClipboard(originalIndex, col) {
+        this.rowController.copyCellToClipboard(originalIndex, col);
     }
-    /** @internal Copy all visible column values of a row as TSV to the clipboard. */
-    copyRowToClipboard(row) {
-        this.rowController.copyRowToClipboard(row);
+    /** @internal Copy the target and marked rows using all visible fields. */
+    copyRowToClipboard(originalIndex) {
+        this.rowController.copyRowToClipboard(originalIndex);
     }
     /** @internal Insert a blank row at a specific position and emit prepareAddRecord. */
     insertRowAt(atIndex) {
         this.rowController.insertRowAt(atIndex);
     }
-    /** Delete the row at `originalIndex`, adjusting stale cell/edit pointers. */
+    /** Start confirmation or immediately delete the row at `originalIndex`. */
     deleteRow(originalIndex) {
+        if (this.confirmRowDelete()) {
+            this.updateDeleteConfirmationPosition();
+            this.pendingDeleteRow.set(originalIndex);
+            this.rowController.closeContextMenu();
+            this.rowController.closeCellContextMenu();
+            this.browser.schedule(() => {
+                this._hostEl.nativeElement
+                    .querySelector('[data-delete-confirm-no]')
+                    ?.focus();
+            });
+            return;
+        }
+        this.deleteRowImmediately(originalIndex);
+    }
+    /** @internal Returns whether this row is awaiting delete confirmation. */
+    isRowPendingDelete(originalIndex) {
+        return this.pendingDeleteRow() === originalIndex;
+    }
+    /** @internal Delete the row currently awaiting confirmation. */
+    confirmPendingRowDelete() {
+        const originalIndex = this.pendingDeleteRow();
+        if (originalIndex === null)
+            return;
+        this.pendingDeleteRow.set(null);
+        this.deleteRowImmediately(originalIndex);
+    }
+    /** @internal Cancel the active row-delete confirmation. */
+    cancelRowDelete() {
+        this.pendingDeleteRow.set(null);
+        this.wrapperEl().nativeElement.focus();
+    }
+    deleteRowImmediately(originalIndex) {
         this.rowController.deleteRow(originalIndex);
+        this.rowController.closeCellContextMenu();
+    }
+    updateDeleteConfirmationPosition() {
+        const scroller = this.horizontalScrollerEl().nativeElement;
+        this.deleteConfirmationLeft.set(scroller.scrollLeft);
+        this.deleteConfirmationWidth.set(scroller.clientWidth);
     }
     // ── Group expand / collapse ───────────────────────────────────────────────────
     /** @internal */
@@ -4696,6 +5131,10 @@ class AgridComponent {
         this.pinnedViewport()?.scrollToOffset(offset);
         this.rightPinnedViewport()?.scrollToOffset(offset);
     }
+    /** @internal Keeps the row-delete prompt visible while columns scroll horizontally. */
+    onHorizontalScroll() {
+        this.updateDeleteConfirmationPosition();
+    }
     /** @internal */
     onRightPinnedBodyScroll() {
         const right = this.rightPinnedViewport();
@@ -4731,6 +5170,32 @@ class AgridComponent {
     findDisplayIndex(originalIndex) {
         return this.navigationController.findDisplayIndex(originalIndex);
     }
+    reconcileMarkedRowsAfterInsertion(insertedIndex) {
+        if (this.markedIndices().size === 0)
+            return;
+        this.markedIndices.update(indices => new Set([...indices].map(index => index >= insertedIndex ? index + 1 : index)));
+    }
+    reconcileMarkedRowsAfterRemoval(removedIndex) {
+        if (this.markedIndices().size === 0)
+            return;
+        this.markedIndices.update(indices => new Set([...indices]
+            .filter(index => index !== removedIndex)
+            .map(index => index > removedIndex ? index - 1 : index)));
+    }
+    reconcileMarkedRowsAfterMove(oldIndex, newIndex) {
+        if (this.markedIndices().size === 0 || oldIndex === newIndex)
+            return;
+        const destination = newIndex > oldIndex ? newIndex - 1 : newIndex;
+        this.markedIndices.update(indices => new Set([...indices].map(index => {
+            if (index === oldIndex)
+                return destination;
+            if (oldIndex < destination && index > oldIndex && index <= destination)
+                return index - 1;
+            if (destination < oldIndex && index >= destination && index < oldIndex)
+                return index + 1;
+            return index;
+        })));
+    }
     isCellEditable(col) {
         return this.editController.isCellEditable(col);
     }
@@ -4771,7 +5236,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  (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        <div class=\"ag-header ag-header--pinned\" role=\"row\" aria-rowindex=\"1\"\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            [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 + 2\"\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            [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)\"></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.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]=\"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\" [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\" [attr.aria-rowindex]=\"displayItems().length + 2\"\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            [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\">\n          <div class=\"ag-header\" role=\"row\" aria-rowindex=\"1\"\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              [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 + 2\"\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              [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.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--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\">{{ 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            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + 2\"\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              [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        <div class=\"ag-header\" role=\"row\" aria-rowindex=\"1\"\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--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 + 2\"\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            [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.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--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-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\" [attr.aria-rowindex]=\"displayItems().length + 2\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\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.value, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.row)\">{{ 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); closeCellContextMenu()\">{{ 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</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}}: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-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}.ag-header-cell--dragging{opacity:.45;cursor:grabbing}.ag-header-cell--drop-before{box-shadow:inset 2px 0 0 var(--agrid-color-accent)}.ag-header-cell--drop-after{box-shadow:inset -2px 0 0 var(--agrid-color-accent)}.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}: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 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;box-sizing:border-box}.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-border)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.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" }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AgridComponent, decorators: [{
             type: Component,
@@ -4785,7 +5250,7 @@ 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  (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        <div class=\"ag-header ag-header--pinned\" role=\"row\" aria-rowindex=\"1\"\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            [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 + 2\"\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            [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)\"></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.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]=\"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\" [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\" [attr.aria-rowindex]=\"displayItems().length + 2\"\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            [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\">\n          <div class=\"ag-header\" role=\"row\" aria-rowindex=\"1\"\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              [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 + 2\"\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              [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.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--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\">{{ 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            </div>\n          </cdk-virtual-scroll-viewport>\n\n          @if (showFooter()) {\n          <div class=\"ag-footer\" role=\"row\" [attr.aria-rowindex]=\"displayItems().length + 2\"\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              [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        <div class=\"ag-header\" role=\"row\" aria-rowindex=\"1\"\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--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 + 2\"\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            [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.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--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-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\" [attr.aria-rowindex]=\"displayItems().length + 2\"\n          [style.grid-template-columns]=\"rightGridTemplateColumns()\">\n          @for (col of rightPinnedColDefs(); track col.field) {\n          <div class=\"ag-footer-cell\" role=\"gridcell\"\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.value, col)\">{{ localeText().copyCellValue\n      }}</button>\n    <button class=\"ag-context-item\" role=\"menuitem\" (click)=\"copyRowToClipboard(menu.row)\">{{ 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); closeCellContextMenu()\">{{ 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</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}}: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-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}.ag-header-cell--dragging{opacity:.45;cursor:grabbing}.ag-header-cell--drop-before{box-shadow:inset 2px 0 0 var(--agrid-color-accent)}.ag-header-cell--drop-after{box-shadow:inset -2px 0 0 var(--agrid-color-accent)}.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}: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 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;box-sizing:border-box}.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-border)}.ag-control-cell--reorder:hover:after{color:var(--agrid-color-text-muted)}.ag-control-cell--reorder:active{cursor:grabbing}.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"] }]
+                    }, 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 }] }] } });
 
 /** Width sentinel that makes a column fill the remaining horizontal space. */