@nanahoshi/mona-ui 0.22.0 → 0.23.0

package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CIfTr1Qm.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-bduDEm-x.mjs}

@@ -1,10 +1,10 @@
 import { PreventableEvent, deepEquals } from '@nanahoshi/mona-ui/common';
 import * as i0 from '@angular/core';
-import { Directive, signal, computed, inject, DOCUMENT, Injector, PLATFORM_ID, effect, Injectable, input, contentChildren, untracked, DestroyRef, output, afterNextRender, model, afterRenderEffect, isDevMode, InjectionToken, contentChild, TemplateRef, forwardRef, Component, ChangeDetectionStrategy, ElementRef, afterEveryRender, Pipe, linkedSignal, viewChild } from '@angular/core';
+import { Directive, Injectable, signal, computed, inject, DOCUMENT, Injector, PLATFORM_ID, effect, input, contentChildren, untracked, DestroyRef, output, afterNextRender, model, afterRenderEffect, isDevMode, InjectionToken, contentChild, TemplateRef, forwardRef, Component, ChangeDetectionStrategy, ElementRef, afterEveryRender, Pipe, linkedSignal, viewChild } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { form } from '@angular/forms/signals';
-import { ImmutableList, ImmutableDictionary, ImmutableSet, KeyValuePair, Dictionary, select, sequenceEqual, orderBy, any } from '@mirei/ts-collections';
+import { Dictionary, ImmutableList, ImmutableDictionary, ImmutableSet, KeyValuePair, select, sequenceEqual, orderBy, any } from '@mirei/ts-collections';
 import { MonaI18nService, injectComponentDirection } from '@nanahoshi/mona-ui/i18n';
 import { Query } from '@nanahoshi/mona-ui/query';
 import { Subject, BehaviorSubject, filter, startWith, pairwise, map, skip, fromEvent, take, debounceTime } from 'rxjs';
@@ -264,6 +264,122 @@ const GRID_DEFAULT_MESSAGES = {
     selectRow: (rowNumber) => `Select row ${rowNumber}`
 };
 
+/**
+ * A stateless service that groups and flattens rows into a linear `GridViewRow[]`
+ * suitable for rendering by both paginated and virtual-scrolled grid list components.
+ */
+class GridRowFlattenerService {
+    /**
+     * Builds a deterministic, hierarchical group key.
+     *
+     * @example
+     * buildGroupKey(null, "Country", "USA") // => "Country:USA"
+     * buildGroupKey("Country:USA", "City", "NYC") // => "Country:USA/City:NYC"
+     */
+    buildGroupKey(parentKey, field, value) {
+        const segment = `${field}:${String(value ?? "")}`;
+        return parentKey != null ? `${parentKey}/${segment}` : segment;
+    }
+    /**
+     * Groups rows by the given columns and flattens them into a linear `GridViewRow[]`.
+     *
+     * @param rows - The source data rows.
+     * @param groupColumns - The ordered list of columns to group by.
+     * @param collapsedKeys - The set of group keys that are currently collapsed.
+     * @param groupAggregates - The dictionary of group aggregates.
+     * @param orderGroups - Orders buckets by direction. Disable for client rows already ordered by Query.
+     * @returns A flat array of `GridViewRow` items.
+     */
+    flatten(rows, groupColumns, collapsedKeys, showFooter, groupAggregates = new Dictionary(), orderGroups = true) {
+        const columnArray = [...groupColumns];
+        if (columnArray.length === 0) {
+            return [];
+        }
+        const result = [];
+        this.#flattenRecursive([...rows], columnArray, groupAggregates, 0, null, collapsedKeys, showFooter, orderGroups, result);
+        return result;
+    }
+    /**
+     * Wraps ungrouped rows as data view rows, so grouped and ungrouped bodies render from the same shape.
+     */
+    toDataRows(rows) {
+        return Array.from(rows, row => this.#createDataRow(row, 0, null));
+    }
+    #createDataRow(row, depth, groupKey) {
+        return { depth, groupKey, key: `row:${row.uid}`, row, type: "data" };
+    }
+    #flattenRecursive(rows, groupColumns, groupAggregates, depth, parentKey, collapsedKeys, showFooter, orderGroups, result) {
+        const column = groupColumns[depth];
+        if (column == null) {
+            return;
+        }
+        const field = column.field;
+        const isDate = column.dataType === "date";
+        const groupMap = new Map();
+        const keyOrder = [];
+        for (const row of rows) {
+            const rawValue = row.data[field];
+            const mapKey = isDate && rawValue instanceof Date ? rawValue.toISOString() : rawValue;
+            if (!groupMap.has(mapKey)) {
+                groupMap.set(mapKey, []);
+                keyOrder.push(mapKey);
+            }
+            groupMap.get(mapKey).push(row);
+        }
+        const entries = keyOrder.map((mapKey, index) => ({ mapKey, index, rows: groupMap.get(mapKey) }));
+        const direction = column.groupSortDirection;
+        if (orderGroups && direction != null) {
+            entries.sort((left, right) => {
+                const comparison = compareGridComparableValues(toGridComparableValue(left.rows[0].data[field]), toGridComparableValue(right.rows[0].data[field]));
+                return (direction === "asc" ? comparison : -comparison) || left.index - right.index;
+            });
+        }
+        for (const { mapKey } of entries) {
+            const groupRows = groupMap.get(mapKey);
+            const groupValue = groupRows[0].data[field];
+            const groupKey = this.buildGroupKey(parentKey, field, groupValue);
+            const groupRow = {
+                count: groupRows.length,
+                depth,
+                field,
+                groupKey,
+                groupValue,
+                key: `group:${groupKey}`,
+                title: column.title,
+                type: "group"
+            };
+            result.push(groupRow);
+            const isCollapsed = collapsedKeys.has(groupKey);
+            if (!isCollapsed) {
+                if (depth < groupColumns.length - 1) {
+                    this.#flattenRecursive(groupRows, groupColumns, groupAggregates, depth + 1, groupKey, collapsedKeys, showFooter, orderGroups, result);
+                }
+                else {
+                    for (const row of groupRows) {
+                        result.push(this.#createDataRow(row, depth, groupKey));
+                    }
+                }
+            }
+            const groupAggregate = groupAggregates.get(groupKey);
+            if (groupAggregate != null && (!isCollapsed || showFooter)) {
+                const groupFooterRow = {
+                    depth,
+                    groupAggregate,
+                    key: `groupFooter:${groupKey}`,
+                    type: "groupFooter"
+                };
+                result.push(groupFooterRow);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowFlattenerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowFlattenerService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowFlattenerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
 const GRID_STATE_VERSION = 1;
 class GridService {
     #anchorRowKey;
@@ -283,6 +399,7 @@ class GridService {
     #platformId;
     #reorderableOptions;
     #resizableOptions;
+    #rowFlattener;
     #rowReorderableOptions;
     #rowUidByData;
     #rowUidByKeyObject;
@@ -342,6 +459,7 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "#reorderableOptions" }] : /* istanbul ignore next */ []));
         this.#resizableOptions = signal({ enabled: false }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#resizableOptions" }] : /* istanbul ignore next */ []));
+        this.#rowFlattener = inject(GridRowFlattenerService);
         this.#rowReorderableOptions = signal({ enabled: false }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#rowReorderableOptions" }] : /* istanbul ignore next */ []));
         this.#rowUidByData = new WeakMap();
@@ -420,11 +538,7 @@ class GridService {
         this.contextMenuItems = signal(ImmutableSet.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : /* istanbul ignore next */ []));
         this.dataStateChange$ = new Subject();
-        this.detailColumnOffset = computed(() => this.structuralColumnOffset("detail", this.groupStructuralWidth()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "detailColumnOffset" }] : /* istanbul ignore next */ []));
         this.detailColumnWidth = 36;
-        this.detailStructuralWidth = computed(() => this.masterDetailTemplate() != null ? this.detailColumnWidth : 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "detailStructuralWidth" }] : /* istanbul ignore next */ []));
         this.draggingRowUid = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "draggingRowUid" }] : /* istanbul ignore next */ []));
         this.edit$ = new Subject();
@@ -494,63 +608,84 @@ class GridService {
         this.horizontalScrollLeft = this.#horizontalScrollLeft.asReadonly();
         this.isInEditMode = computed(() => this.#editSession() != null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isInEditMode" }] : /* istanbul ignore next */ []));
-        this.lastLeftStructuralOffset = computed(() => {
-            if (this.visibleColumns().any(column => column.locked && column.lockedPosition === "left")) {
-                return null;
-            }
-            const visible = this.visibleStructuralColumns();
-            const lastVisible = visible[visible.length - 1];
-            if (lastVisible != null) {
-                return this.structuralColumnOffset(lastVisible.kind, this.groupStructuralWidth());
-            }
+        // The physical column sequence shared by every table section: group indents, then the visible
+        // structural columns, then the visible user columns. Each entry also carries its sticky state.
+        this.layout = computed(() => {
+            const columns = this.visibleColumns().toArray();
+            const startLockedColumns = columns.filter(column => column.locked && column.lockedPosition === "left");
+            const endLockedColumns = columns.filter(column => column.locked && column.lockedPosition === "right");
             const groupCount = this.groupColumns().length;
-            return groupCount > 0 ? (groupCount - 1) * this.groupColumnWidth : null;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lastLeftStructuralOffset" }] : /* istanbul ignore next */ []));
-        this.leadingLogicalColumnCount = computed(() => this.visibleStructuralColumns().length, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "leadingLogicalColumnCount" }] : /* istanbul ignore next */ []));
-        this.leadingStructuralColumnCount = computed(() => this.groupColumns().length + this.visibleStructuralColumns().length, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "leadingStructuralColumnCount" }] : /* istanbul ignore next */ []));
-        this.leadingStructuralWidth = computed(() => this.groupStructuralWidth() +
-            this.visibleStructuralColumns().reduce((total, column) => total + column.width, 0), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "leadingStructuralWidth" }] : /* istanbul ignore next */ []));
-        this.leftLockedStructuralWidth = computed(() => {
-            if (!this.hasLeftLockedColumns()) {
-                return 0;
+            const structuralColumns = this.visibleStructuralColumns();
+            const leadingColumnCount = groupCount + structuralColumns.length;
+            // Group indents and structural columns stay pinned alongside any start-pinned column. The innermost
+            // pinned column draws the separator, so the leading columns only own it without start-locked columns.
+            const leadingSticky = this.hasLeftLockedColumns();
+            const leadingEdgeIndex = startLockedColumns.length === 0 ? leadingColumnCount - 1 : -1;
+            let startOffset = 0;
+            const nextLeadingSticky = (index, width) => {
+                const offset = startOffset;
+                startOffset += width;
+                return leadingSticky ? { edge: index === leadingEdgeIndex, offset, side: "start" } : null;
+            };
+            const layout = [];
+            for (let depth = 0; depth < groupCount; depth++) {
+                layout.push({
+                    depth,
+                    key: `group:${depth}`,
+                    kind: "group",
+                    logicalIndex: null,
+                    sticky: nextLeadingSticky(depth, this.groupColumnWidth),
+                    width: this.groupColumnWidth
+                });
             }
-            return this.leadingStructuralWidth();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "leftLockedStructuralWidth" }] : /* istanbul ignore next */ []));
-        this.lockedColumnStates = computed(() => {
-            const states = new Map();
-            const columns = this.visibleColumns().toArray();
-            const leftColumns = columns.filter(column => column.locked && column.lockedPosition === "left");
-            const rightColumns = columns.filter(column => column.locked && column.lockedPosition === "right");
-            let leftOffset = this.leadingStructuralWidth();
-            for (const [index, column] of leftColumns.entries()) {
-                states.set(column.id, {
-                    edge: index === leftColumns.length - 1,
-                    offset: leftOffset,
-                    side: "left"
+            // Arrow keys move across structural and user columns as one row.
+            for (const [index, structuralColumn] of structuralColumns.entries()) {
+                layout.push({
+                    firstInRow: index === 0,
+                    key: `structural:${structuralColumn.kind}`,
+                    kind: structuralColumn.kind,
+                    lastInRow: columns.length === 0 && index === structuralColumns.length - 1,
+                    logicalIndex: index,
+                    sticky: nextLeadingSticky(groupCount + index, structuralColumn.width),
+                    width: structuralColumn.width
                 });
-                leftOffset += this.getColumnWidth(column);
             }
-            let rightOffset = 0;
-            for (const column of [...rightColumns].reverse()) {
-                states.set(column.id, {
-                    edge: column === rightColumns[0],
-                    offset: rightOffset,
-                    side: "right"
+            let logicalIndex = structuralColumns.length;
+            const stickyByColumn = new Map();
+            for (const [index, column] of startLockedColumns.entries()) {
+                stickyByColumn.set(column, {
+                    edge: index === startLockedColumns.length - 1,
+                    offset: startOffset,
+                    side: "start"
+                });
+                startOffset += this.getColumnWidth(column);
+            }
+            let endOffset = 0;
+            for (const column of [...endLockedColumns].reverse()) {
+                stickyByColumn.set(column, { edge: column === endLockedColumns[0], offset: endOffset, side: "end" });
+                endOffset += this.getColumnWidth(column);
+            }
+            for (const [columnIndex, column] of columns.entries()) {
+                layout.push({
+                    column,
+                    columnIndex,
+                    firstInRow: structuralColumns.length === 0 && columnIndex === 0,
+                    key: `column:${column.id}`,
+                    kind: "column",
+                    lastInRow: columnIndex === columns.length - 1,
+                    logicalIndex: logicalIndex++,
+                    sticky: stickyByColumn.get(column) ?? null,
+                    width: column.calculatedWidth
                 });
-                rightOffset += this.getColumnWidth(column);
             }
-            return states;
+            return layout;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lockedColumnStates" }] : /* istanbul ignore next */ []));
-        this.masterDetailEmptyCellWidth = computed(() => {
-            return this.detailColumnWidth * (this.groupColumns().length + 1);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "masterDetailEmptyCellWidth" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.layoutColumnByKey = computed(() => new Map(this.layout().map(layoutColumn => [layoutColumn.key, layoutColumn])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layoutColumnByKey" }] : /* istanbul ignore next */ []));
+        this.leadingStructuralWidth = computed(() => this.groupStructuralWidth() +
+            this.visibleStructuralColumns().reduce((total, column) => total + column.width, 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingStructuralWidth" }] : /* istanbul ignore next */ []));
         this.masterDetailRowWidth = computed(() => {
             const columns = this.visibleColumns();
             const columnListWidth = columns.aggregate((acc, c) => acc + this.getColumnWidth(c), 0);
@@ -569,14 +704,14 @@ class GridService {
         this.remove$ = new Subject();
         this.reorderableOptions = this.#reorderableOptions.asReadonly();
         this.resizableOptions = this.#resizableOptions.asReadonly();
+        this.rowClass = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
         this.rowDragInProgress = computed(() => this.draggingRowUid() != null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowDragInProgress" }] : /* istanbul ignore next */ []));
         this.rowEdit$ = new Subject();
         this.rowKey = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
         this.rowReorder$ = new Subject();
-        this.rowReorderColumnOffset = computed(() => this.structuralColumnOffset("reorder", this.groupStructuralWidth()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rowReorderColumnOffset" }] : /* istanbul ignore next */ []));
         this.rowReorderColumnVisible = computed(() => this.rowReorderableOptions().enabled === true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowReorderColumnVisible" }] : /* istanbul ignore next */ []));
         this.rowReorderColumnWidth = 36;
@@ -610,8 +745,6 @@ class GridService {
         ...(ngDevMode ? [{ debugName: "rowReorderDisabledReason" }] : /* istanbul ignore next */ []));
         this.rowReorderInteractionEnabled = computed(() => this.rowReorderDisabledReason() == null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowReorderInteractionEnabled" }] : /* istanbul ignore next */ []));
-        this.rowReorderStructuralWidth = computed(() => this.rowReorderColumnVisible() ? this.rowReorderColumnWidth : 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rowReorderStructuralWidth" }] : /* istanbul ignore next */ []));
         this.rowReorderableOptions = this.#rowReorderableOptions.asReadonly();
         this.rows = signal(ImmutableList.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
@@ -642,16 +775,12 @@ class GridService {
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
-        this.selectionColumnOffset = computed(() => this.structuralColumnOffset("selection", this.groupStructuralWidth()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectionColumnOffset" }] : /* istanbul ignore next */ []));
         this.selectionColumnVisible = computed(() => {
             const options = this.selectableOptions();
             return options.enabled === true && options.showCheckboxes === true;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionColumnVisible" }] : /* istanbul ignore next */ []));
         this.selectionColumnWidth = 40;
-        this.selectionStructuralWidth = computed(() => this.selectionColumnVisible() ? this.selectionColumnWidth : 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectionStructuralWidth" }] : /* istanbul ignore next */ []));
         this.serverBindingEnabled = this.#serverBindingEnabled.asReadonly();
         this.serverLoading = this.#serverLoading.asReadonly();
         this.serverTotal = this.#serverTotal.asReadonly();
@@ -668,25 +797,13 @@ class GridService {
             showIndices: true
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sortableOptions" }] : /* istanbul ignore next */ []));
-        this.structuralColIndexMap = computed(() => {
-            const map = new Map();
-            this.visibleStructuralColumns().forEach((column, index) => map.set(column.kind, index));
-            return map;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "structuralColIndexMap" }] : /* istanbul ignore next */ []));
-        // Single source of truth for structural-column left-to-right order; every offset/colIndex
-        // consumer derives its answer from this array instead of independently re-deriving the order.
+        // The fixed order of the structural columns; GridService.layout places them after the group indents.
         this.structuralColumns = computed(() => [
             { kind: "reorder", visible: this.rowReorderColumnVisible(), width: this.rowReorderColumnWidth },
             { kind: "detail", visible: this.masterDetailTemplate() != null, width: this.detailColumnWidth },
             { kind: "selection", visible: this.selectionColumnVisible(), width: this.selectionColumnWidth }
         ], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "structuralColumns" }] : /* istanbul ignore next */ []));
-        this.structuralLastKind = computed(() => {
-            const visible = this.visibleStructuralColumns();
-            return visible.length > 0 ? visible[visible.length - 1].kind : null;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "structuralLastKind" }] : /* istanbul ignore next */ []));
         this.tableWidth = computed(() => {
             const columns = this.visibleColumns();
             if (!columns.any()) {
@@ -955,6 +1072,18 @@ class GridService {
         this.rowEdit$.next(new RowEditEvent({ originalRowData: context.row.data, rowData, session }));
         return true;
     }
+    /**
+     * Builds the body rows for the given data rows: plain data rows when ungrouped, otherwise the flattened
+     * group headers, data rows and group footers. Reads grouping state, so call it inside a computed.
+     */
+    createBodyRows(rows) {
+        const groupColumns = this.groupColumns();
+        if (groupColumns.length === 0) {
+            return this.#rowFlattener.toDataRows(rows);
+        }
+        const groupAggregates = this.groupAggregateMap().toDictionary(e => e.key, e => e.value);
+        return this.#rowFlattener.flatten(rows, groupColumns, new Set(this.collapsedGroupKeys()), this.groupableOptions().showFooter, groupAggregates, this.serverBindingEnabled());
+    }
     deselectAllRows() {
         this.selectedKeys.update(set => set.clear());
     }
@@ -1600,16 +1729,6 @@ class GridService {
         this.clearEditSession();
         return true;
     }
-    structuralColumnOffset(kind, groupPrefixWidth) {
-        let offset = groupPrefixWidth;
-        for (const column of this.visibleStructuralColumns()) {
-            if (column.kind === kind) {
-                return offset;
-            }
-            offset += column.width;
-        }
-        return offset;
-    }
     toggleGroupCollapse(groupKey) {
         this.collapsedGroupKeys.update(keys => (keys.contains(groupKey) ? keys.remove(groupKey) : keys.add(groupKey)));
     }
@@ -3442,80 +3561,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }] } });
 
+const STICKY_EDGE_BORDER = "1px solid var(--color-border)";
+/**
+ * Pins a cell while the grid scrolls horizontally, using the sticky state of its layout column.
+ * Offsets and separator borders use logical properties so pinning follows the text direction.
+ */
 class GridLockedCellDirective {
     constructor() {
-        this.#hostElementRef = inject((ElementRef));
         this.#gridService = inject(GridService);
+        this.#hostElementRef = inject((ElementRef));
         this.bodyLocked = computed(() => this.state() != null && !this.lockedCellHeader(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyLocked" }] : /* istanbul ignore next */ []));
-        this.borderLeft = computed(() => {
-            if (!this.rightEdge()) {
-                return null;
-            }
-            return `1px solid var(--color-border)`;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "borderLeft" }] : /* istanbul ignore next */ []));
-        this.borderRight = computed(() => {
-            if (!this.leftEdge()) {
-                return null;
-            }
-            return `1px solid var(--color-border)`;
+        this.endEdge = computed(() => this.state()?.side === "end" && this.state()?.edge === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "endEdge" }] : /* istanbul ignore next */ []));
+        this.endOffset = computed(() => {
+            const state = this.state();
+            return state?.side === "end" ? state.offset : null;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "borderRight" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "endOffset" }] : /* istanbul ignore next */ []));
         this.footerCell = this.#hostElementRef.nativeElement.hasAttribute("monaGridFooterTableCell");
         this.headerLocked = computed(() => this.state() != null && this.lockedCellHeader(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerLocked" }] : /* istanbul ignore next */ []));
-        this.leftEdge = computed(() => {
-            const state = this.state();
-            return state?.side === "left" && state.edge;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "leftEdge" }] : /* istanbul ignore next */ []));
-        this.leftOffset = computed(() => {
-            const state = this.state();
-            return state?.side === "left" ? state.offset : null;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "leftOffset" }] : /* istanbul ignore next */ []));
-        this.position = computed(() => (this.state() == null ? null : "sticky"), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-        this.rightEdge = computed(() => {
-            const state = this.state();
-            return state?.side === "right" && state.edge;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rightEdge" }] : /* istanbul ignore next */ []));
-        this.rightOffset = computed(() => {
+        this.startEdge = computed(() => this.state()?.side === "start" && this.state()?.edge === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startEdge" }] : /* istanbul ignore next */ []));
+        this.startOffset = computed(() => {
             const state = this.state();
-            return state?.side === "right" ? state.offset : null;
+            return state?.side === "start" ? state.offset : null;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rightOffset" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "startOffset" }] : /* istanbul ignore next */ []));
         this.state = computed(() => {
-            const column = this.column();
-            if (column != null) {
-                return this.#gridService.lockedColumnStates().get(column.id) ?? null;
-            }
-            const structuralColumn = this.structuralColumn();
-            if (structuralColumn != null) {
-                if (!this.#gridService.hasLeftLockedColumns()) {
-                    return null;
-                }
-                const groupPrefixWidth = this.groupPrefixWidth() ?? this.#gridService.groupStructuralWidth();
-                const offset = this.#gridService.structuralColumnOffset(structuralColumn, groupPrefixWidth);
-                return {
-                    edge: offset === this.#gridService.lastLeftStructuralOffset(),
-                    offset,
-                    side: "left"
-                };
-            }
-            const structuralOffset = this.lockedStructuralOffset();
-            if (structuralOffset == null || !this.#gridService.hasLeftLockedColumns()) {
-                return null;
-            }
-            return {
-                edge: structuralOffset === this.#gridService.lastLeftStructuralOffset(),
-                offset: structuralOffset,
-                side: "left"
-            };
+            const layoutKey = this.layoutKey();
+            return layoutKey ? (this.#gridService.layoutColumnByKey().get(layoutKey)?.sticky ?? null) : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.stickyEdgeBorder = STICKY_EDGE_BORDER;
         this.zIndex = computed(() => {
             if (this.state() == null) {
                 return null;
@@ -3523,38 +3602,35 @@ class GridLockedCellDirective {
             return this.lockedCellHeader() ? 4 : 2;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
-        this.column = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "column" }] : /* istanbul ignore next */ []));
-        this.groupPrefixWidth = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "groupPrefixWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * The key of the layout column whose sticky state this cell follows, such as `column:<id>`,
+         * `structural:selection` or `group:0`.
+         */
+        this.layoutKey = input(null, { ...(ngDevMode ? { debugName: "layoutKey" } : /* istanbul ignore next */ {}), alias: "monaGridLockedCell" });
         this.lockedCellHeader = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lockedCellHeader" }] : /* istanbul ignore next */ []));
-        this.lockedStructuralOffset = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lockedStructuralOffset" }] : /* istanbul ignore next */ []));
-        this.structuralColumn = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "structuralColumn" }] : /* istanbul ignore next */ []));
     }
-    #hostElementRef;
     #gridService;
+    #hostElementRef;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLockedCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLockedCellDirective, isStandalone: true, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, groupPrefixWidth: { classPropertyName: "groupPrefixWidth", publicName: "groupPrefixWidth", isSignal: true, isRequired: false, transformFunction: null }, lockedCellHeader: { classPropertyName: "lockedCellHeader", publicName: "lockedCellHeader", isSignal: true, isRequired: false, transformFunction: null }, lockedStructuralOffset: { classPropertyName: "lockedStructuralOffset", publicName: "lockedStructuralOffset", isSignal: true, isRequired: false, transformFunction: null }, structuralColumn: { classPropertyName: "structuralColumn", publicName: "structuralColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "position()", "style.left.px": "leftOffset()", "style.right.px": "rightOffset()", "style.z-index": "zIndex()", "class.bg-header-background": "headerLocked() || footerCell", "class.bg-inherit": "bodyLocked()", "style.border-left": "borderLeft()", "style.border-right": "borderRight()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLockedCellDirective, isStandalone: true, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: { layoutKey: { classPropertyName: "layoutKey", publicName: "monaGridLockedCell", isSignal: true, isRequired: false, transformFunction: null }, lockedCellHeader: { classPropertyName: "lockedCellHeader", publicName: "lockedCellHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "state() == null ? null : 'sticky'", "style.inset-inline-start.px": "startOffset()", "style.inset-inline-end.px": "endOffset()", "style.z-index": "zIndex()", "class.bg-header-background": "headerLocked() || footerCell", "class.bg-inherit": "bodyLocked()", "style.border-inline-start": "endEdge() ? stickyEdgeBorder : null", "style.border-inline-end": "startEdge() ? stickyEdgeBorder : null" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLockedCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "td[monaGridLockedCell], th[monaGridLockedCell]",
                     host: {
-                        "[style.position]": "position()",
-                        "[style.left.px]": "leftOffset()",
-                        "[style.right.px]": "rightOffset()",
+                        "[style.position]": "state() == null ? null : 'sticky'",
+                        "[style.inset-inline-start.px]": "startOffset()",
+                        "[style.inset-inline-end.px]": "endOffset()",
                         "[style.z-index]": "zIndex()",
                         "[class.bg-header-background]": "headerLocked() || footerCell",
                         "[class.bg-inherit]": "bodyLocked()",
-                        "[style.border-left]": "borderLeft()",
-                        "[style.border-right]": "borderRight()"
+                        "[style.border-inline-start]": "endEdge() ? stickyEdgeBorder : null",
+                        "[style.border-inline-end]": "startEdge() ? stickyEdgeBorder : null"
                     }
                 }]
-        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], groupPrefixWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPrefixWidth", required: false }] }], lockedCellHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedCellHeader", required: false }] }], lockedStructuralOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedStructuralOffset", required: false }] }], structuralColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "structuralColumn", required: false }] }] } });
+        }], propDecorators: { layoutKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaGridLockedCell", required: false }] }], lockedCellHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedCellHeader", required: false }] }] } });
 
 class GridNavigationService {
     #cellElementDict = signal(ImmutableDictionary.create(), /* @ts-ignore */
@@ -3616,9 +3692,9 @@ class GridNavigationService {
             case "ArrowUp":
                 return this.#navigateVertically("up", cellKey);
             case "ArrowLeft":
-                return this.#navigateHorizontally("left", cellKey);
+                return this.#navigateHorizontally("previous", cellKey);
             case "ArrowRight":
-                return this.#navigateHorizontally("right", cellKey);
+                return this.#navigateHorizontally("next", cellKey);
             case "Home":
                 return this.#navigateToRowEdge("first", cellKey);
             case "End":
@@ -3770,32 +3846,26 @@ class GridNavigationService {
         const data = this.#cellElementDict().get(key);
         return data ? { key, value: data } : null;
     }
+    // Moves in logical column order; callers map arrow keys to it according to the text direction.
     #navigateHorizontally(direction, cellKey) {
         const data = this.#cellElementDict().get(cellKey);
         if (!data || data.groupHeader) {
             return false;
         }
-        if (direction === "left") {
-            if (data.firstInRow) {
-                return false;
-            }
-            const prevCell = this.#findCellAt(data.section, data.rowIndex, data.colIndex - 1);
-            if (prevCell) {
-                this.#focusCell(prevCell.key, prevCell.value);
-                return true;
-            }
+        if (direction === "previous" ? data.firstInRow : data.lastInRow) {
+            return false;
         }
-        else {
-            if (data.lastInRow) {
-                return false;
-            }
-            const nextCell = this.#findCellAt(data.section, data.rowIndex, data.colIndex + 1);
-            if (nextCell) {
-                this.#focusCell(nextCell.key, nextCell.value);
-                return true;
-            }
+        // Not every layout column registers a cell in every section (the header has no detail cell),
+        // so move to the nearest registered cell instead of the adjacent index.
+        const rowCells = this.#findCellsInRow(data.rowIndex, data.section);
+        const target = direction === "previous"
+            ? rowCells.filter(cell => cell.value.colIndex < data.colIndex).at(-1)
+            : rowCells.find(cell => cell.value.colIndex > data.colIndex);
+        if (!target) {
+            return false;
         }
-        return false;
+        this.#focusCell(target.key, target.value);
+        return true;
     }
     #navigateToGridEdge(edge) {
         const dict = this.#cellElementDict();
@@ -3898,339 +3968,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const gridRowMinHeightClass = "min-h-9";
-const gridVirtualRowHeightClass = "h-(--mona-grid-row-height) min-h-(--mona-grid-row-height) max-h-(--mona-grid-row-height)";
-const gridBaseThemeVariants = cva(`
-        relative flex flex-col
-        h-full overflow-hidden
-        text-foreground text-sm
-        bg-surface border border-border
-    `, {
-    variants: {
-        rounded: {
-            small: "rounded-sm",
-            medium: "rounded-md",
-            large: "rounded-lg",
-            none: "rounded-none"
-        }
-    }
-});
-const gridCellBaseThemeVariants = cva("flex w-full min-w-0", {
-    variants: {
-        virtual: {
-            true: "absolute inset-0 overflow-hidden",
-            false: `relative ${gridRowMinHeightClass}`
-        }
-    },
-    defaultVariants: { virtual: false }
-});
-const gridCellContainerThemeVariants = cva(`
-        flex w-full min-w-0 items-center
-        flex-1 outline-none
-    `, {
-    variants: {
-        virtual: {
-            true: "h-full overflow-hidden",
-            false: gridRowMinHeightClass
-        },
-        editing: {
-            true: "px-0",
-            false: "px-2"
-        }
-    },
-    defaultVariants: {
-        editing: false,
-        virtual: false
-    },
-    compoundVariants: [{ virtual: false, editing: false, class: "py-1" }]
-});
-const gridCellDirtyIndicatorThemeVariants = cva(`
-    absolute top-0 end-0 w-0 h-0
-    border-t-[8px] border-s-[8px]
-    border-t-destructive border-s-transparent
-    pointer-events-none
-`);
-const gridCellEditorBaseThemeVariants = cva(`
-    flex w-full min-w-0 items-center
-    bg-input-background border border-focus-indicator/40
-`, {
-    variants: { virtual: { true: "h-full overflow-hidden", false: gridRowMinHeightClass } },
-    defaultVariants: { virtual: false }
-});
-const gridCellEditorInputThemeVariants = cva(`
-    w-full border-transparent
-    data-[expanded='true']:border-focus-indicator
-    data-[expanded='true']:focus-within:border-focus-indicator/40
-`, {
-    variants: { virtual: { true: "h-full", false: "min-h-8" } },
-    defaultVariants: { virtual: false }
-});
-const gridCellTextThemeVariants = cva(`
-    truncate cursor-default select-none
-`);
-const gridSelectAllCellThemeVariants = cva(`
-    absolute inset-0 flex h-full w-full items-center justify-center
-`);
-const gridSelectionCellThemeVariants = cva("flex w-full items-center justify-center", {
-    variants: { virtual: { true: "absolute inset-0 h-full", false: gridRowMinHeightClass } },
-    defaultVariants: { virtual: false }
-});
-const gridColumnActionsThemeVariants = cva(`
-    flex items-center justify-center
-    text-xs [&_i]:text-xs
-`);
-const gridColumnDragPreviewThemeVariants = cva(`
-        flex items-center justify-center
-        px-2! py-0.5!
-        bg-surface-raised! text-foreground!
-        border! border-border! rounded-md shadow-(--shadow-overlay)!
-    `);
-const gridColumnDropHintThemeVariants = cva(`
-    absolute flex w-1 h-full bg-primary z-10! top-0 bottom-0
-`);
-const gridColumnResizerThemeVariants = cva(`
-    absolute top-0 bottom-0 w-3 bg-transparent cursor-col-resize z-10 -end-1.5
-`);
-const gridDetailContentCellThemeVariants = cva(`border-b border-b-border-subtle`, {
-    variants: {
-        nextIsGroup: {
-            true: "",
-            false: ""
-        }
-    }
-});
-const gridDetailIndentCellThemeVariants = cva(`
-        border-e border-e-border-subtle border-b border-b-border-subtle
-    `, {
-    variants: {
-        nextIsGroup: {
-            true: "",
-            false: ""
-        }
-    }
-});
-const gridDetailRowThemeVariants = cva(``);
-const gridRowReorderHandleThemeVariants = cva(`
-    flex min-h-9 w-full items-center justify-center
-    cursor-grab select-none touch-none
-    text-muted-foreground
-    hover:text-foreground
-    active:cursor-grabbing
-    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/50
-    disabled:cursor-not-allowed disabled:text-muted-foreground/35 disabled:hover:text-muted-foreground/35
-`);
-const gridRowDragPreviewThemeVariants = cva(`
-    flex items-center gap-2
-    px-2! py-1!
-    bg-surface-raised! text-foreground!
-    border! border-border! rounded-md shadow-(--shadow-overlay)!
-`);
-const gridRowDragPlaceholderThemeVariants = cva(`
-    opacity-40
-    [&>td]:bg-hover! [&>td]:border-dashed! [&>td]:border-border!
-`);
-const gridFilterRowCellThemeVariants = cva(`
-    flex items-center px-1 py-0.5 w-full
-    [--mona-effect-control-background-color:var(--mona-effect-raised-background-color,var(--color-surface-raised))]
-    [--mona-effect-control-fallback-background-color:var(--mona-effect-raised-fallback-background-color,var(--color-surface-raised))]
-    [--mona-effect-control-background-image:var(--mona-effect-raised-background-image,none)]
-    [--mona-effect-control-backdrop-filter:var(--mona-effect-raised-backdrop-filter,none)]
-`);
-const gridFooterThemeVariants = cva(`
-        flex flex-row grow-0 shrink-0 basis-auto
-        overflow-hidden
-        bg-surface-muted border-e border-e-border-subtle border-t border-t-border-subtle
-    `);
-const gridFooterTableThemeVariants = cva(`
-        border-separate border-spacing-0 table-fixed
-    `);
-const gridFooterTableRowThemeVariants = cva(`relative inline-flex [&>td:last-child]:border-e-0`, {
-    variants: { virtual: { true: `${gridVirtualRowHeightClass} overflow-hidden`, false: "" } },
-    defaultVariants: { virtual: false }
-});
-const gridFooterTableCellThemeVariants = cva(`
-        relative overflow-hidden
-        text-start align-middle px-2 py-2
-        bg-surface-muted
-        border-e border-e-border-subtle border-b border-b-border-subtle
-        font-medium
-    `);
-const gridGroupPanelPlaceholderThemeVariants = cva(`
-    truncate text-muted-foreground
-`);
-const gridGroupPanelThemeVariants = cva(`
-        flex items-center flex-wrap
-        p-1 h-auto gap-1
-        bg-surface-muted border-b border-b-border-subtle
-    `);
-const gridGroupRowThemeVariants = cva(`
-        relative z-10
-        w-full
-        bg-surface-muted border-e border-e-border-subtle
-    `, { variants: { virtual: { true: gridVirtualRowHeightClass, false: "" } }, defaultVariants: { virtual: false } });
-const gridHeaderThemeVariants = cva(`
-        flex flex-row grow-0 shrink-0 basis-auto
-        overflow-hidden
-        bg-surface-muted border-e border-e-border-subtle
-    `);
-const gridHeaderTableThemeVariants = cva(`
-        border-separate border-spacing-0 table-fixed
-    `);
-const gridHeaderTableRowThemeVariants = cva(`relative inline-flex not-first:border-t not-first:border-t-border-subtle [&>th:last-child]:border-e-0`);
-const gridHeaderTableCellThemeVariants = cva(`
-        relative select-none
-        text-start overflow-visible
-        outline-none border-e border-e-border-subtle
-        after:absolute after:inset-0 after:pointer-events-none
-        focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
-    `);
-const gridHeaderTableColumnWrapThemeVariants = cva(`
-        w-full h-full px-1
-        flex items-center justify-between
-        cursor-pointer overflow-hidden
-    `);
-const gridHeaderTableColumnTitleThemeVariants = cva(`
-        flex-1 px-1 py-2 truncate
-        font-medium
-    `);
-const gridListBaseThemeVariants = cva(`
-        w-full h-full
-        outline-none
-        border-t border-t-border-subtle
-        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
-    `, {
-    variants: {
-        virtual: {
-            true: "overflow-x-hidden overflow-y-hidden flex flex-col min-h-0",
-            false: "block overflow-x-auto overflow-y-scroll"
-        }
-    }
-});
-const gridListTableThemeVariants = cva(`
-        border-separate border-spacing-0 w-full table-fixed
-        [&_.cdk-drag-dragging]:z-10! [&_.cdk-drag-dragging]:shadow-(--shadow-overlay)
-        [&_.cdk-drag-animating]:transition-transform
-    `);
-const gridListTableRowThemeVariants = cva(``, {
-    variants: {
-        selected: {
-            true: `
-                    bg-(--color-selected) text-(--color-selected-foreground) hover:bg-(--color-selected-active)
-                `,
-            false: "bg-surface hover:bg-hover"
-        },
-        virtual: { true: gridVirtualRowHeightClass, false: "" }
-    },
-    defaultVariants: { virtual: false }
-});
-const gridListTableCellThemeVariants = cva(`
-        relative
-        outline-none z-1
-        align-middle
-        border-b border-b-border-subtle
-        after:content-[''] after:block
-        after:absolute after:inset-0 after:pointer-events-none
-        focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
-    `, {
-    variants: {
-        virtual: { true: gridVirtualRowHeightClass, false: "" },
-        groupHeader: {
-            true: "",
-            false: ""
-        },
-        groupToggle: {
-            true: "",
-            false: ""
-        },
-        grouped: {
-            true: "",
-            false: ""
-        },
-        indentCell: {
-            true: "",
-            false: ""
-        },
-        lastInRow: {
-            true: "",
-            false: "border-e border-e-border-subtle"
-        },
-        masterDetailContent: {
-            true: "",
-            false: ""
-        },
-        masterDetailToggle: {
-            true: "",
-            false: ""
-        },
-        dataCell: {
-            true: "",
-            false: ""
-        }
-    },
-    defaultVariants: { virtual: false },
-    compoundVariants: [
-        {
-            grouped: false,
-            masterDetailToggle: true,
-            class: ""
-        },
-        {
-            grouped: false,
-            dataCell: true,
-            class: ""
-        },
-        {
-            grouped: false,
-            indentCell: true,
-            class: ""
-        },
-        {
-            grouped: false,
-            masterDetailContent: true,
-            class: ""
-        },
-        {
-            groupHeader: true,
-            class: ""
-        },
-        {
-            grouped: true,
-            masterDetailToggle: true,
-            class: ""
-        },
-        {
-            grouped: true,
-            dataCell: true,
-            class: ""
-        },
-        {
-            grouped: true,
-            indentCell: true,
-            class: "bg-surface-muted"
-        },
-        {
-            grouped: true,
-            indentCell: false,
-            class: ""
-        },
-        {
-            grouped: true,
-            indentCell: true,
-            masterDetailToggle: true,
-            class: ""
-        },
-        {
-            grouped: true,
-            groupToggle: true,
-            class: ""
-        }
-    ]
-});
-const gridNoDataThemeVariants = cva(`
-        flex items-center justify-center h-full
-        text-muted-foreground border-t border-t-border-subtle
-    `);
-
 const FOCUSABLE_TARGET_SELECTOR$1 = "button, input, select, textarea, a[href], [tabindex]";
 class GridLogicalCellDirective {
     #cellData;
@@ -4273,17 +4010,6 @@ class GridLogicalCellDirective {
         };
         this.ariaColIndex = computed(() => this.colIndex() + this.#gridService.groupColumns().length + 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaColIndex" }] : /* istanbul ignore next */ []));
-        this.baseClass = computed(() => {
-            if (this.#hostElementRef.nativeElement.tagName === "TH") {
-                return "";
-            }
-            return gridListTableCellThemeVariants({
-                virtual: this.#gridService.virtualScrollOptions().enabled,
-                groupHeader: this.groupHeader(),
-                lastInRow: this.lastInRow() || this.groupHeader()
-            });
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => {
             const key = this.#cellKey();
             if (!key) {
@@ -4429,12 +4155,13 @@ class GridLogicalCellDirective {
             this.#focusNextInnerTarget(target, event.shiftKey);
             return;
         }
-        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        const key = this.#toLogicalArrowKey(event.key);
+        if (key === "ArrowRight" || key === "ArrowDown") {
             event.preventDefault();
             this.#focusNextInnerTarget(target, false);
             return;
         }
-        if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        if (key === "ArrowLeft" || key === "ArrowUp") {
             event.preventDefault();
             this.#focusNextInnerTarget(target, true);
         }
@@ -4517,13 +4244,8 @@ class GridLogicalCellDirective {
             event.preventDefault();
             this.#navigate("ArrowDown");
         }
-        else if (event.key === "ArrowLeft") {
-            if (this.#navigate("ArrowLeft")) {
-                event.preventDefault();
-            }
-        }
-        else if (event.key === "ArrowRight") {
-            if (this.#navigate("ArrowRight")) {
+        else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            if (this.#navigate(this.#toLogicalArrowKey(event.key))) {
                 event.preventDefault();
             }
         }
@@ -4578,15 +4300,29 @@ class GridLogicalCellDirective {
             }
         }
     }
+    /**
+     * Maps a horizontal arrow key to its logical meaning: ArrowRight moves to the next column in LTR
+     * and to the previous column in RTL, where columns run right to left.
+     */
+    #toLogicalArrowKey(key) {
+        // Read on demand: a direction observer per cell would be costly in large grids.
+        const host = this.#hostElementRef.nativeElement;
+        if (host.ownerDocument.defaultView?.getComputedStyle(host).direction !== "rtl") {
+            return key;
+        }
+        if (key === "ArrowLeft") {
+            return "ArrowRight";
+        }
+        return key === "ArrowRight" ? "ArrowLeft" : key;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLogicalCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLogicalCellDirective, isStandalone: true, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: { cellKind: { classPropertyName: "cellKind", publicName: "cellKind", isSignal: true, isRequired: false, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, firstInRow: { classPropertyName: "firstInRow", publicName: "firstInRow", isSignal: true, isRequired: true, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowUid: { classPropertyName: "rowUid", publicName: "rowUid", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", toggleExpand: "toggleExpand" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "focused() ? 0 : -1", "attr.aria-colindex": "ariaColIndex()", "attr.aria-readonly": "resolvedCellKind() === 'data' ? !editable() : null" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLogicalCellDirective, isStandalone: true, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: { cellKind: { classPropertyName: "cellKind", publicName: "cellKind", isSignal: true, isRequired: false, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, columnId: { classPropertyName: "columnId", publicName: "columnId", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, firstInRow: { classPropertyName: "firstInRow", publicName: "firstInRow", isSignal: true, isRequired: true, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowUid: { classPropertyName: "rowUid", publicName: "rowUid", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", toggleExpand: "toggleExpand" }, host: { properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-colindex": "ariaColIndex()", "attr.aria-readonly": "resolvedCellKind() === 'data' ? !editable() : null" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLogicalCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]",
                     host: {
-                        "[class]": "baseClass()",
                         "[attr.tabindex]": "focused() ? 0 : -1",
                         "[attr.aria-colindex]": "ariaColIndex()",
                         "[attr.aria-readonly]": "resolvedCellKind() === 'data' ? !editable() : null"
@@ -4646,114 +4382,254 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-/**
- * A stateless service that groups and flattens rows into a linear `GridViewRow[]`
- * suitable for rendering by both paginated and virtual-scrolled grid list components.
- */
-class GridRowFlattenerService {
-    /**
-     * Builds a deterministic, hierarchical group key.
-     *
-     * @example
-     * buildGroupKey(null, "Country", "USA") // => "Country:USA"
-     * buildGroupKey("Country:USA", "City", "NYC") // => "Country:USA/City:NYC"
-     */
-    buildGroupKey(parentKey, field, value) {
-        const segment = `${field}:${String(value ?? "")}`;
-        return parentKey != null ? `${parentKey}/${segment}` : segment;
-    }
-    /**
-     * Groups rows by the given columns and flattens them into a linear `GridViewRow[]`.
-     *
-     * @param rows - The source data rows.
-     * @param groupColumns - The ordered list of columns to group by.
-     * @param collapsedKeys - The set of group keys that are currently collapsed.
-     * @param groupAggregates - The dictionary of group aggregates.
-     * @param orderGroups - Orders buckets by direction. Disable for client rows already ordered by Query.
-     * @returns A flat array of `GridViewRow` items.
-     */
-    flatten(rows, groupColumns, collapsedKeys, showFooter, groupAggregates = new Dictionary(), orderGroups = true) {
-        const columnArray = [...groupColumns];
-        if (columnArray.length === 0) {
-            return [];
+const gridRowMinHeightClass = "min-h-9";
+const gridVirtualRowHeightClass = "h-(--mona-grid-row-height) min-h-(--mona-grid-row-height) max-h-(--mona-grid-row-height)";
+const gridBaseThemeVariants = cva(`
+        relative flex flex-col
+        h-full overflow-hidden
+        text-foreground text-sm
+        bg-surface border border-border
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
         }
-        const result = [];
-        this.#flattenRecursive([...rows], columnArray, groupAggregates, 0, null, collapsedKeys, showFooter, orderGroups, result);
-        return result;
     }
-    #flattenRecursive(rows, groupColumns, groupAggregates, depth, parentKey, collapsedKeys, showFooter, orderGroups, result) {
-        const column = groupColumns[depth];
-        if (column == null) {
-            return;
-        }
-        const field = column.field;
-        const isDate = column.dataType === "date";
-        const groupMap = new Map();
-        const keyOrder = [];
-        for (const row of rows) {
-            const rawValue = row.data[field];
-            const mapKey = isDate && rawValue instanceof Date ? rawValue.toISOString() : rawValue;
-            if (!groupMap.has(mapKey)) {
-                groupMap.set(mapKey, []);
-                keyOrder.push(mapKey);
-            }
-            groupMap.get(mapKey).push(row);
+});
+const gridCellBaseThemeVariants = cva("flex w-full min-w-0", {
+    variants: {
+        virtual: {
+            true: "absolute inset-0 overflow-hidden",
+            false: `relative ${gridRowMinHeightClass}`
         }
-        const entries = keyOrder.map((mapKey, index) => ({ mapKey, index, rows: groupMap.get(mapKey) }));
-        const direction = column.groupSortDirection;
-        if (orderGroups && direction != null) {
-            entries.sort((left, right) => {
-                const comparison = compareGridComparableValues(toGridComparableValue(left.rows[0].data[field]), toGridComparableValue(right.rows[0].data[field]));
-                return (direction === "asc" ? comparison : -comparison) || left.index - right.index;
-            });
+    },
+    defaultVariants: { virtual: false }
+});
+const gridCellContainerThemeVariants = cva(`
+        flex w-full min-w-0 items-center
+        flex-1 outline-none
+    `, {
+    variants: {
+        virtual: {
+            true: "h-full overflow-hidden",
+            false: gridRowMinHeightClass
+        },
+        editing: {
+            true: "px-0",
+            false: "px-2"
         }
-        for (const { mapKey } of entries) {
-            const groupRows = groupMap.get(mapKey);
-            const groupValue = groupRows[0].data[field];
-            const groupKey = this.buildGroupKey(parentKey, field, groupValue);
-            const groupRow = {
-                type: "group",
-                depth,
-                field,
-                groupKey,
-                groupValue,
-                count: groupRows.length,
-                title: column.title
-            };
-            result.push(groupRow);
-            const isCollapsed = collapsedKeys.has(groupKey);
-            if (!isCollapsed) {
-                if (depth < groupColumns.length - 1) {
-                    this.#flattenRecursive(groupRows, groupColumns, groupAggregates, depth + 1, groupKey, collapsedKeys, showFooter, orderGroups, result);
-                }
-                else {
-                    for (const row of groupRows) {
-                        const dataRow = {
-                            type: "data",
-                            depth,
-                            row,
-                            groupKey
-                        };
-                        result.push(dataRow);
-                    }
-                }
-            }
-            const groupAggregate = groupAggregates.get(groupKey);
-            if (groupAggregate != null && (!isCollapsed || showFooter)) {
-                const groupFooterRow = {
-                    type: "groupFooter",
-                    depth,
-                    groupAggregate
-                };
-                result.push(groupFooterRow);
-            }
+    },
+    defaultVariants: {
+        editing: false,
+        virtual: false
+    },
+    compoundVariants: [{ virtual: false, editing: false, class: "py-1" }]
+});
+const gridCellDirtyIndicatorThemeVariants = cva(`
+    absolute top-0 end-0 w-0 h-0
+    border-t-[8px] border-s-[8px]
+    border-t-destructive border-s-transparent
+    pointer-events-none
+`);
+const gridCellEditorBaseThemeVariants = cva(`
+    flex w-full min-w-0 items-center
+    bg-input-background border border-focus-indicator/40
+`, {
+    variants: { virtual: { true: "h-full overflow-hidden", false: gridRowMinHeightClass } },
+    defaultVariants: { virtual: false }
+});
+const gridCellEditorInputThemeVariants = cva(`
+    w-full border-transparent
+    data-[expanded='true']:border-focus-indicator
+    data-[expanded='true']:focus-within:border-focus-indicator/40
+`, {
+    variants: { virtual: { true: "h-full", false: "min-h-8" } },
+    defaultVariants: { virtual: false }
+});
+const gridCellTextThemeVariants = cva(`
+    truncate cursor-default select-none
+`);
+const gridSelectAllCellThemeVariants = cva(`
+    absolute inset-0 flex h-full w-full items-center justify-center
+`);
+const gridSelectionCellThemeVariants = cva("flex w-full items-center justify-center", {
+    variants: { virtual: { true: "absolute inset-0 h-full", false: gridRowMinHeightClass } },
+    defaultVariants: { virtual: false }
+});
+const gridColumnActionsThemeVariants = cva(`
+    flex items-center justify-center
+    text-xs [&_i]:text-xs
+`);
+const gridColumnDragPreviewThemeVariants = cva(`
+        flex items-center justify-center
+        px-2! py-0.5!
+        bg-surface-raised! text-foreground!
+        border! border-border! rounded-md shadow-(--shadow-overlay)!
+    `);
+const gridColumnDropHintThemeVariants = cva(`
+    absolute flex w-1 h-full bg-primary z-10! top-0 bottom-0
+`);
+const gridColumnResizerThemeVariants = cva(`
+    absolute top-0 bottom-0 w-3 bg-transparent cursor-col-resize z-10 -end-1.5
+`);
+const gridRowReorderHandleThemeVariants = cva(`
+    flex min-h-9 w-full items-center justify-center
+    cursor-grab select-none touch-none
+    text-muted-foreground
+    hover:text-foreground
+    active:cursor-grabbing
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/50
+    disabled:cursor-not-allowed disabled:text-muted-foreground/35 disabled:hover:text-muted-foreground/35
+`);
+/** On drop, the preview glides into the row's new slot and fades out. */
+const gridRowDragPreviewThemeVariants = cva(`
+    flex items-center gap-2
+    px-2! py-1!
+    bg-surface-raised! text-foreground!
+    border! border-border! rounded-md shadow-(--shadow-overlay)!
+    [&.cdk-drag-animating]:opacity-0
+    [&.cdk-drag-animating]:transition-[transform,opacity] [&.cdk-drag-animating]:duration-200
+    [&.cdk-drag-animating]:ease-[cubic-bezier(0.2,0,0,1)]
+    motion-reduce:[&.cdk-drag-animating]:transition-none
+`);
+const gridFilterRowCellThemeVariants = cva(`
+    flex items-center px-1 py-0.5 w-full
+    [--mona-effect-control-background-color:var(--mona-effect-raised-background-color,var(--color-surface-raised))]
+    [--mona-effect-control-fallback-background-color:var(--mona-effect-raised-fallback-background-color,var(--color-surface-raised))]
+    [--mona-effect-control-background-image:var(--mona-effect-raised-background-image,none)]
+    [--mona-effect-control-backdrop-filter:var(--mona-effect-raised-backdrop-filter,none)]
+`);
+const gridFooterThemeVariants = cva(`
+        flex flex-row grow-0 shrink-0 basis-auto
+        overflow-hidden
+        bg-surface-muted border-e border-e-border-subtle border-t border-t-border-subtle
+    `);
+const gridFooterTableThemeVariants = cva(`
+        border-separate border-spacing-0 table-fixed
+    `);
+const gridFooterTableRowThemeVariants = cva(`relative inline-flex [&>td:last-child]:border-e-0`, {
+    variants: { virtual: { true: `${gridVirtualRowHeightClass} overflow-hidden`, false: "" } },
+    defaultVariants: { virtual: false }
+});
+const gridFooterTableCellThemeVariants = cva(`
+        relative overflow-hidden
+        text-start align-middle px-2 py-2
+        bg-surface-muted
+        border-e border-e-border-subtle border-b border-b-border-subtle
+        font-medium
+    `);
+const gridGroupPanelPlaceholderThemeVariants = cva(`
+    truncate text-muted-foreground
+`);
+const gridGroupPanelThemeVariants = cva(`
+        flex items-center flex-wrap
+        p-1 h-auto gap-1
+        bg-surface-muted border-b border-b-border-subtle
+    `);
+const gridGroupRowThemeVariants = cva(`
+        relative z-10
+        w-full
+        bg-surface-muted border-e border-e-border-subtle
+    `, { variants: { virtual: { true: gridVirtualRowHeightClass, false: "" } }, defaultVariants: { virtual: false } });
+const gridHeaderThemeVariants = cva(`
+        flex flex-row grow-0 shrink-0 basis-auto
+        overflow-hidden
+        bg-surface-muted border-e border-e-border-subtle
+    `);
+const gridHeaderTableThemeVariants = cva(`
+        border-separate border-spacing-0 table-fixed
+    `);
+const gridHeaderTableRowThemeVariants = cva(`relative inline-flex not-first:border-t not-first:border-t-border-subtle [&>th:last-child]:border-e-0`);
+const gridHeaderTableCellThemeVariants = cva(`
+        relative select-none
+        text-start overflow-visible
+        outline-none border-e border-e-border-subtle
+        after:absolute after:inset-0 after:pointer-events-none
+        focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
+    `);
+const gridHeaderTableColumnWrapThemeVariants = cva(`
+        w-full h-full px-1
+        flex items-center justify-between
+        overflow-hidden
+    `);
+const gridHeaderTableColumnTitleThemeVariants = cva(`
+        flex-1 px-1 py-2 truncate
+        font-medium
+    `);
+const gridListBaseThemeVariants = cva(`
+        w-full h-full
+        outline-none
+        border-t border-t-border-subtle
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
+    `, {
+    variants: {
+        virtual: {
+            true: "overflow-x-hidden overflow-y-hidden flex flex-col min-h-0",
+            false: "block overflow-x-auto overflow-y-scroll"
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowFlattenerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowFlattenerService }); }
+});
+/**
+ * While a row is dragged, the other rows slide out of its way and the slot it will drop into shows the row dimmed.
+ */
+const gridListTableThemeVariants = cva(`
+        border-separate border-spacing-0 w-full table-fixed
+        [&_.cdk-drop-list-dragging>.cdk-drag]:transition-transform
+        [&_.cdk-drop-list-dragging>.cdk-drag]:duration-200
+        [&_.cdk-drop-list-dragging>.cdk-drag]:ease-[cubic-bezier(0.2,0,0,1)]
+        motion-reduce:[&_.cdk-drop-list-dragging>.cdk-drag]:transition-none
+        [&_.cdk-drag-placeholder]:opacity-60 [&_.cdk-drag-placeholder>td]:bg-hover!
+    `);
+const gridListTableRowThemeVariants = cva(``, {
+    variants: {
+        selected: {
+            true: `
+                    bg-(--color-selected) text-(--color-selected-foreground) hover:bg-(--color-selected-active)
+                `,
+            false: "bg-surface hover:bg-hover"
+        },
+        virtual: { true: gridVirtualRowHeightClass, false: "" }
+    },
+    defaultVariants: { virtual: false }
+});
+const gridListTableCellThemeVariants = cva(`
+        relative
+        outline-none z-1
+        align-middle
+        border-b border-b-border-subtle
+        after:content-[''] after:block
+        after:absolute after:inset-0 after:pointer-events-none
+        focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
+    `, {
+    variants: {
+        virtual: { true: gridVirtualRowHeightClass, false: "" },
+        groupIndent: { true: "bg-surface-muted", false: "" },
+        lastInRow: { true: "", false: "border-e border-e-border-subtle" }
+    },
+    defaultVariants: { virtual: false }
+});
+const gridNoDataThemeVariants = cva(`
+        flex items-center justify-center h-full
+        text-muted-foreground border-t border-t-border-subtle
+    `);
+
+/**
+ * Renders the `<col>` sequence for a grid table from the shared layout, so that the header, body,
+ * add row and footer tables always agree on column order and width.
+ */
+class GridColgroupComponent {
+    constructor() {
+        this.gridService = inject(GridService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridColgroupComponent, isStandalone: true, selector: "colgroup[monaGridColgroup]", ngImport: i0, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    <col [style.width.px]=\"layoutColumn.width\" />\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowFlattenerService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColgroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "colgroup[monaGridColgroup]", changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n    <col [style.width.px]=\"layoutColumn.width\" />\n}\n" }]
         }] });
 
 class GridColumnChooserComponent {
@@ -5172,25 +5048,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class GridSelectAllCheckboxComponent {
     constructor() {
         this.#gridService = inject(GridService);
-        this.messages = this.#gridService.messages;
         this.checked = computed(() => this.#gridService.allBulkSelectionRowsSelected(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.hostClass = computed(() => gridSelectAllCellThemeVariants(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostClass = gridSelectAllCellThemeVariants();
         this.indeterminate = computed(() => this.#gridService.someBulkSelectionRowsSelected(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        this.messages = this.#gridService.messages;
     }
     #gridService;
     onCheckedChange(checked) {
         this.#gridService.setBulkSelection(checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSelectAllCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: GridSelectAllCheckboxComponent, isStandalone: true, selector: "mona-grid-select-all-checkbox", host: { listeners: { "click": "$event.stopPropagation()" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: "<mona-check-box\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">{{ messages().selectAllRows }}</span>\n</mona-check-box>\n", dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: GridSelectAllCheckboxComponent, isStandalone: true, selector: "mona-grid-select-all-checkbox", host: { listeners: { "click": "$event.stopPropagation()" }, properties: { "class": "hostClass" } }, ngImport: i0, template: "<mona-check-box\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">{{ messages().selectAllRows }}</span>\n</mona-check-box>\n", dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSelectAllCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-grid-select-all-checkbox", imports: [CheckBoxComponent], host: {
-                        "[class]": "hostClass()",
+                        "[class]": "hostClass",
                         "(click)": "$event.stopPropagation()"
                     }, template: "<mona-check-box\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">{{ messages().selectAllRows }}</span>\n</mona-check-box>\n" }]
         }] });
@@ -5276,10 +5151,6 @@ class GridComponent {
             return gridFooterTableThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerTableClass" }] : /* istanbul ignore next */ []));
-        this.footerTableRowClass = computed(() => {
-            return gridFooterTableRowThemeVariants();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
         this.footerVisible = computed(() => !this.gridService.virtualScrollOptions().enabled && this.gridService.hasFooter(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerVisible" }] : /* istanbul ignore next */ []));
         this.gridDetailTemplate = contentChild(GridDetailTemplateDirective, { ...(ngDevMode ? { debugName: "gridDetailTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -5395,6 +5266,17 @@ class GridComponent {
          */
         this.rounded = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Returns extra CSS classes for the data row that shows an item, merged onto the row's own
+         * classes via `tailwind-merge`. It runs again whenever the item's row is rebound.
+         * Group, group footer and detail rows are not affected.
+         *
+         * To dim a row, prefer a text style such as `text-muted-foreground` over `opacity`: locked cells stay
+         * opaque so scrolled cells pass beneath them, and opacity on the row or its cells would let those show through.
+         * @default null
+         */
+        this.rowClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
         /**
          * @description Field name or selector used to derive a stable identity for each row.
          * The resolved value must be unique within the grid data.
@@ -5411,6 +5293,7 @@ class GridComponent {
             const columns = this.columnDefinitions().map(definition => definition.getColumn());
             untracked(() => this.gridService.setColumnDefinitions(columns));
         });
+        effect(() => this.gridService.rowClass.set(this.rowClass()));
         this.setPageSizeEffect();
         this.setGridDetailEffect();
         this.setDataEffect();
@@ -5721,6 +5604,11 @@ class GridComponent {
                         if (this.gridService.editContext() != null) {
                             return;
                         }
+                        // Focus that survived the render, or was already put back, stays where it is.
+                        const host = this.#hostElementRef.nativeElement;
+                        if (host.contains(host.ownerDocument.activeElement)) {
+                            return;
+                        }
                         this.#gridNavigationService.focusActiveCellOrFirstHeader();
                     }
                 }, { injector: this.#injector });
@@ -5855,21 +5743,20 @@ class GridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "baseClass()", "attr.data-uid": "uid", "attr.aria-busy": "gridService.serverLoading() || null" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup>\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                    }\n                    @for (col of gridService.visibleColumns(); track $index) {\n                        <col [style.width.px]=\"col.calculatedWidth\" />\n                    }\n                </colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$rowReorder'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"0\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"gridService.groupColumns().length === 0\"\n                                [lastInRow]=\"\n                                    !gridService.masterDetailTemplate() &&\n                                    !gridService.selectionColumnVisible() &&\n                                    gridService.visibleColumns().length === 0\n                                \"\n                                scope=\"col\"\n                                [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"\n                                    (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                    (gridService.masterDetailTemplate() ? 1 : 0)\n                                \"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"\n                                    !gridService.rowReorderColumnVisible() &&\n                                    !gridService.masterDetailTemplate() &&\n                                    gridService.groupColumns().length === 0\n                                \"\n                                [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\">\n                                @if (\n                                    gridService.selectableOptions().mode === \"multiple\" &&\n                                    gridService.selectableOptions().showSelectAll !== false\n                                ) {\n                                    <mona-grid-select-all-checkbox />\n                                }\n                            </th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <th\n                                scope=\"col\"\n                                role=\"columnheader\"\n                                cdkDrag\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'header'\"\n                                [columnId]=\"column.id\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"colIndex\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex ===\n                                    gridService.leadingLogicalColumnCount() + gridService.visibleColumns().length - 1\n                                \"\n                                (toggleExpand)=\"onColumnSort(column)\"\n                                [cdkDragData]=\"column\"\n                                [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                                [class]=\"headerTableCellClass()\"\n                                (mouseenter)=\"onColumnMouseEnter(column)\"\n                                (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                                (cdkDragStarted)=\"onColumnDragStart($event)\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.colspan]=\"1\"\n                                [attr.aria-sort]=\"\n                                    gridService.sortableOptions().enabled\n                                        ? (column.columnSortDirection | columnAriaSort)\n                                        : null\n                                \">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n\n                                    <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                        @if (\n                                            gridService.sortableOptions().enabled && column.columnSortDirection !== null\n                                        ) {\n                                            <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                @if (column.columnSortDirection === \"asc\") {\n                                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                } @else {\n                                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                }\n                                                @if (\n                                                    gridService.sortableOptions().mode === \"multiple\" &&\n                                                    gridService.sortableOptions().showIndices &&\n                                                    column.sortIndex !== null\n                                                ) {\n                                                    <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                }\n                                            </div>\n                                        }\n                                        @if (filterMenuEnabled()) {\n                                            @if (column.kind === \"data\" && column.filterable) {\n                                                <mona-grid-filter-menu\n                                                    [column]=\"column\"\n                                                    [type]=\"column.dataType\"\n                                                    (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                            }\n                                        }\n                                    </div>\n                                </div>\n                                @if (\n                                    dropColumn() === column &&\n                                    dragColumn() &&\n                                    gridService.reorderableOptions().enabled &&\n                                    !groupingInProgress()\n                                ) {\n                                    <span [class]=\"columnDropHintClass()\"> </span>\n                                }\n                                @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                    <div\n                                        monaGridColumnResizeHandler\n                                        [column]=\"column\"\n                                        [class]=\"columnResizerClass()\"\n                                        (resizeStart)=\"onColumnResizeStart()\"\n                                        (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                                }\n                                <ng-template cdkDragPreview>\n                                    <div [class]=\"columnDragPreviewClass()\">\n                                        <span>{{ column.title }}</span>\n                                    </div>\n                                </ng-template>\n                                <ng-template cdkDragPlaceholder>\n                                    @if (groupingInProgress()) {\n                                        <mona-chip\n                                            style=\"z-index: 10; pointer-events: none\"\n                                            [removable]=\"true\"\n                                            [rounded]=\"rounded()\"\n                                            >{{ column.title }}</mona-chip\n                                        >\n                                    }\n                                </ng-template>\n                            </th>\n                            @if (columnDragging() && dragColumn() === column) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    [class]=\"headerTableCellClass()\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"column.calculatedWidth\">\n                                    <div [class]=\"headerTableColumnWrapClass()\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></ng-container>\n                                        } @else if (column.titleTemplate) {\n                                            <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                        } @else {\n                                            <span\n                                                [class]=\"headerTableColumnTitleClass()\"\n                                                (click)=\"onColumnSort(column)\"\n                                                [title]=\"column.title\"\n                                                >{{ column.title }}</span\n                                            >\n                                        }\n                                    </div>\n                                </th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (_ of gridService.groupColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'reorder'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                            }\n                            @if (gridService.masterDetailTemplate()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'detail'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                            }\n                            @if (gridService.selectionColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'selection'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                            }\n                            @for (column of gridService.visibleColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border overflow-hidden\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                    @if (column.kind === \"data\" && column.field && column.filterable) {\n                                        <mona-grid-filter-row-cell\n                                            [column]=\"column\"\n                                            (apply)=\"onColumnFilter(column, $event)\" />\n                                    }\n                                </th>\n                            }\n                        </tr>\n                    }\n                </thead>\n            </table>\n        </div>\n    </div>\n\n    @defer (when gridWidthSet()) {\n        @if (gridService.virtualScrollOptions().enabled) {\n            @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n                <mona-grid-virtual-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup>\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                    }\n                                    @if (gridService.rowReorderColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                                    }\n                                    @if (gridService.selectionColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                                    }\n                                    @for (col of gridService.visibleColumns(); track $index) {\n                                        <col [style.width.px]=\"col.calculatedWidth\" />\n                                    }\n                                </colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                                        @for (_ of gridService.groupColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                        }\n                                        @if (gridService.rowReorderColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'reorder'\"\n                                                [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n                                        }\n                                        @if (gridService.masterDetailTemplate()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'detail'\"\n                                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                        }\n                                        @if (gridService.selectionColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'selection'\"\n                                                [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                                        }\n                                        @for (column of gridService.visibleColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [column]=\"column\"\n                                                [lockedCellHeader]=\"true\"\n                                                [footerColumn]=\"column\">\n                                                <mona-grid-footer-cell\n                                                    [column]=\"column\"\n                                                    [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                            </td>\n                                        }\n                                    </tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\n            [size]=\"'small'\"\n            [rounded]=\"rounded()\"\n            [pageInput]=\"true\"\n            [pageSizeValues]=\"pageSizeValues()\"\n            [responsive]=\"responsivePager()\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            (pageChange)=\"onPageChange($event)\"></mona-pager>\n    }\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder [text]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideArrowLeft, selector: "svg[lucideArrowLeft]" }, { kind: "component", type: LucideArrowRight, selector: "svg[lucideArrowRight]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideEllipsisVertical, selector: "svg[lucideEllipsisVertical], svg[lucideMoreVertical]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggleExpand"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "groupPrefixWidth", "lockedCellHeader", "lockedStructuralOffset", "structuralColumn"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "component", type: GridSelectAllCheckboxComponent, selector: "mona-grid-select-all-checkbox" }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-cJjJ1b6M.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-Do-ktlth.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-Cs1gPJps.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-CkkLBnoI.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective, /* @ts-ignore */
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "baseClass()", "attr.data-uid": "uid", "attr.aria-busy": "gridService.serverLoading() || null" } }, providers: [GridService, GridNavigationService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup monaGridColgroup></colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                            @if (layoutColumn.kind === \"column\") {\n                                @let column = layoutColumn.column;\n                                @let columnSortable =\n                                    gridService.sortableOptions().enabled &&\n                                    column.kind === \"data\" &&\n                                    column.sortable &&\n                                    column.field !== \"\";\n                                <th\n                                    scope=\"col\"\n                                    role=\"columnheader\"\n                                    cdkDrag\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'header'\"\n                                    [columnId]=\"column.id\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    (toggleExpand)=\"onColumnSort(column)\"\n                                    [cdkDragData]=\"column\"\n                                    [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                                    [class]=\"headerTableCellClass()\"\n                                    (mouseenter)=\"onColumnMouseEnter(column)\"\n                                    (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                                    (cdkDragStarted)=\"onColumnDragStart($event)\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [attr.aria-sort]=\"\n                                        columnSortable ? (column.columnSortDirection | columnAriaSort) : null\n                                    \">\n                                    <div\n                                        [class]=\"headerTableColumnWrapClass()\"\n                                        [style.cursor]=\"columnSortable ? 'pointer' : 'default'\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></ng-container>\n                                        } @else if (column.titleTemplate) {\n                                            <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                        } @else {\n                                            <span\n                                                [class]=\"headerTableColumnTitleClass()\"\n                                                (click)=\"onColumnSort(column)\"\n                                                [title]=\"column.title\"\n                                                >{{ column.title }}</span\n                                            >\n                                        }\n\n                                        <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                            @if (\n                                                gridService.sortableOptions().enabled &&\n                                                column.columnSortDirection !== null\n                                            ) {\n                                                <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                    @if (column.columnSortDirection === \"asc\") {\n                                                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    } @else {\n                                                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    }\n                                                    @if (\n                                                        gridService.sortableOptions().mode === \"multiple\" &&\n                                                        gridService.sortableOptions().showIndices &&\n                                                        column.sortIndex !== null\n                                                    ) {\n                                                        <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                    }\n                                                </div>\n                                            }\n                                            @if (filterMenuEnabled()) {\n                                                @if (column.kind === \"data\" && column.filterable) {\n                                                    <mona-grid-filter-menu\n                                                        [column]=\"column\"\n                                                        [type]=\"column.dataType\"\n                                                        (apply)=\"\n                                                            onColumnFilter(column, $event)\n                                                        \"></mona-grid-filter-menu>\n                                                }\n                                            }\n                                        </div>\n                                    </div>\n                                    @if (\n                                        dropColumn() === column &&\n                                        dragColumn() &&\n                                        gridService.reorderableOptions().enabled &&\n                                        !groupingInProgress()\n                                    ) {\n                                        <span [class]=\"columnDropHintClass()\"> </span>\n                                    }\n                                    @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                        <div\n                                            monaGridColumnResizeHandler\n                                            [column]=\"column\"\n                                            [class]=\"columnResizerClass()\"\n                                            (resizeStart)=\"onColumnResizeStart()\"\n                                            (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                                    }\n                                    <ng-template cdkDragPreview>\n                                        <div [class]=\"columnDragPreviewClass()\">\n                                            <span>{{ column.title }}</span>\n                                        </div>\n                                    </ng-template>\n                                    <ng-template cdkDragPlaceholder>\n                                        @if (groupingInProgress()) {\n                                            <mona-chip\n                                                style=\"z-index: 10; pointer-events: none\"\n                                                [removable]=\"true\"\n                                                [rounded]=\"rounded()\"\n                                                >{{ column.title }}</mona-chip\n                                            >\n                                        }\n                                    </ng-template>\n                                </th>\n                                @if (columnDragging() && dragColumn() === column) {\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        [class]=\"headerTableCellClass()\"\n                                        [style.min-width.px]=\"column.minWidth\"\n                                        [style.width.px]=\"column.calculatedWidth\">\n                                        <div [class]=\"headerTableColumnWrapClass()\">\n                                            @if (column.headerTemplate) {\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                    [ngTemplateOutletContext]=\"{\n                                                        $implicit: column,\n                                                        column\n                                                    }\"></ng-container>\n                                            } @else if (column.titleTemplate) {\n                                                <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                            } @else {\n                                                <span\n                                                    [class]=\"headerTableColumnTitleClass()\"\n                                                    (click)=\"onColumnSort(column)\"\n                                                    [title]=\"column.title\"\n                                                    >{{ column.title }}</span\n                                                >\n                                            }\n                                        </div>\n                                    </th>\n                                }\n                            } @else if (layoutColumn.kind === \"reorder\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$rowReorder'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            } @else if (layoutColumn.kind === \"selection\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$selection'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\">\n                                    @if (\n                                        gridService.selectableOptions().mode === \"multiple\" &&\n                                        gridService.selectableOptions().showSelectAll !== false\n                                    ) {\n                                        <mona-grid-select-all-checkbox />\n                                    }\n                                </th>\n                            } @else {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                                @if (layoutColumn.kind === \"column\") {\n                                    @let column = layoutColumn.column;\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border overflow-hidden\"\n                                        [style.width.px]=\"layoutColumn.width\"\n                                        [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                        @if (column.kind === \"data\" && column.field && column.filterable) {\n                                            <mona-grid-filter-row-cell\n                                                [column]=\"column\"\n                                                (apply)=\"onColumnFilter(column, $event)\" />\n                                        }\n                                    </th>\n                                } @else {\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border\"\n                                        [style.width.px]=\"layoutColumn.width\"></th>\n                                }\n                            }\n                        </tr>\n                    }\n                </thead>\n            </table>\n        </div>\n    </div>\n\n    @defer (when gridWidthSet()) {\n        @if (gridService.virtualScrollOptions().enabled) {\n            @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n                <mona-grid-virtual-list [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup monaGridColgroup></colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr monaGridFooterRow></tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\n            [size]=\"'small'\"\n            [rounded]=\"rounded()\"\n            [pageInput]=\"true\"\n            [pageSizeValues]=\"pageSizeValues()\"\n            [responsive]=\"responsivePager()\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            (pageChange)=\"onPageChange($event)\"></mona-pager>\n    }\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder [text]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideArrowLeft, selector: "svg[lucideArrowLeft]" }, { kind: "component", type: LucideArrowRight, selector: "svg[lucideArrowRight]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideEllipsisVertical, selector: "svg[lucideEllipsisVertical], svg[lucideMoreVertical]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridColgroupComponent, selector: "colgroup[monaGridColgroup]" }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggleExpand"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "component", type: GridSelectAllCheckboxComponent, selector: "mona-grid-select-all-checkbox" }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet,
+                GridColgroupComponent, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-row.component--nF_Q7Bd.mjs').then(m => m.GridFooterRowComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-list.component-S2qxwP2M.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-DArxdAah.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
                 import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-cJjJ1b6M.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-Do-ktlth.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-Cs1gPJps.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-CkkLBnoI.mjs').then(m => m.GridFooterTableCellDirective), /* @ts-ignore */
-        import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective, SpinnerComponent) => ({ decorators: [{
+        import('./nanahoshi-mona-ui-grid-grid-footer-row.component--nF_Q7Bd.mjs').then(m => m.GridFooterRowComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-list.component-S2qxwP2M.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-DArxdAah.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+        import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)], resolveMetadata: (GridFooterRowComponent, GridListComponent, GridVirtualListComponent, SpinnerComponent) => ({ decorators: [{
                 type: Component,
-                args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
+                args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, FilterService], imports: [
                             LucideArrowDown,
                             LucideArrowLeft,
                             LucideArrowRight,
@@ -5879,9 +5766,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
                             ChipComponent,
                             CdkDrag,
                             NgTemplateOutlet,
+                            GridColgroupComponent,
                             GridFilterMenuComponent,
                             GridFilterRowCellComponent,
-                            GridFooterCellComponent,
+                            GridFooterRowComponent,
                             GridColumnResizeHandlerDirective,
                             CdkDragPreview,
                             GridListComponent,
@@ -5893,7 +5781,6 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
                             PopupMenuItemComponent,
                             PopupMenuTextTemplateDirective,
                             ColumnAriaSortPipe,
-                            GridFooterTableCellDirective,
                             GridLogicalCellDirective,
                             GridLockedCellDirective,
                             ButtonDirective,
@@ -5906,8 +5793,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
                             "[attr.data-uid]": "uid",
                             "[attr.aria-busy]": "gridService.serverLoading() || null",
                             role: "group"
-                        }, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup>\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                    }\n                    @if (gridService.rowReorderColumnVisible()) {\n                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                    }\n                    @for (col of gridService.visibleColumns(); track $index) {\n                        <col [style.width.px]=\"col.calculatedWidth\" />\n                    }\n                </colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.rowReorderColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'reorder'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$rowReorder'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"0\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"gridService.groupColumns().length === 0\"\n                                [lastInRow]=\"\n                                    !gridService.masterDetailTemplate() &&\n                                    !gridService.selectionColumnVisible() &&\n                                    gridService.visibleColumns().length === 0\n                                \"\n                                scope=\"col\"\n                                [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'detail'\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [structuralColumn]=\"'selection'\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"\n                                    (gridService.rowReorderColumnVisible() ? 1 : 0) +\n                                    (gridService.masterDetailTemplate() ? 1 : 0)\n                                \"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"\n                                    !gridService.rowReorderColumnVisible() &&\n                                    !gridService.masterDetailTemplate() &&\n                                    gridService.groupColumns().length === 0\n                                \"\n                                [lastInRow]=\"gridService.visibleColumns().length === 0\"\n                                scope=\"col\"\n                                class=\"border-e border-border\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\">\n                                @if (\n                                    gridService.selectableOptions().mode === \"multiple\" &&\n                                    gridService.selectableOptions().showSelectAll !== false\n                                ) {\n                                    <mona-grid-select-all-checkbox />\n                                }\n                            </th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <th\n                                scope=\"col\"\n                                role=\"columnheader\"\n                                cdkDrag\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'header'\"\n                                [columnId]=\"column.id\"\n                                [rowIndex]=\"-1\"\n                                [colIndex]=\"colIndex\"\n                                [section]=\"'header'\"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex ===\n                                    gridService.leadingLogicalColumnCount() + gridService.visibleColumns().length - 1\n                                \"\n                                (toggleExpand)=\"onColumnSort(column)\"\n                                [cdkDragData]=\"column\"\n                                [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                                [class]=\"headerTableCellClass()\"\n                                (mouseenter)=\"onColumnMouseEnter(column)\"\n                                (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                                (cdkDragStarted)=\"onColumnDragStart($event)\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.colspan]=\"1\"\n                                [attr.aria-sort]=\"\n                                    gridService.sortableOptions().enabled\n                                        ? (column.columnSortDirection | columnAriaSort)\n                                        : null\n                                \">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n\n                                    <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                        @if (\n                                            gridService.sortableOptions().enabled && column.columnSortDirection !== null\n                                        ) {\n                                            <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                @if (column.columnSortDirection === \"asc\") {\n                                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                } @else {\n                                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                }\n                                                @if (\n                                                    gridService.sortableOptions().mode === \"multiple\" &&\n                                                    gridService.sortableOptions().showIndices &&\n                                                    column.sortIndex !== null\n                                                ) {\n                                                    <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                }\n                                            </div>\n                                        }\n                                        @if (filterMenuEnabled()) {\n                                            @if (column.kind === \"data\" && column.filterable) {\n                                                <mona-grid-filter-menu\n                                                    [column]=\"column\"\n                                                    [type]=\"column.dataType\"\n                                                    (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                            }\n                                        }\n                                    </div>\n                                </div>\n                                @if (\n                                    dropColumn() === column &&\n                                    dragColumn() &&\n                                    gridService.reorderableOptions().enabled &&\n                                    !groupingInProgress()\n                                ) {\n                                    <span [class]=\"columnDropHintClass()\"> </span>\n                                }\n                                @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                    <div\n                                        monaGridColumnResizeHandler\n                                        [column]=\"column\"\n                                        [class]=\"columnResizerClass()\"\n                                        (resizeStart)=\"onColumnResizeStart()\"\n                                        (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                                }\n                                <ng-template cdkDragPreview>\n                                    <div [class]=\"columnDragPreviewClass()\">\n                                        <span>{{ column.title }}</span>\n                                    </div>\n                                </ng-template>\n                                <ng-template cdkDragPlaceholder>\n                                    @if (groupingInProgress()) {\n                                        <mona-chip\n                                            style=\"z-index: 10; pointer-events: none\"\n                                            [removable]=\"true\"\n                                            [rounded]=\"rounded()\"\n                                            >{{ column.title }}</mona-chip\n                                        >\n                                    }\n                                </ng-template>\n                            </th>\n                            @if (columnDragging() && dragColumn() === column) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    [class]=\"headerTableCellClass()\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"column.calculatedWidth\">\n                                    <div [class]=\"headerTableColumnWrapClass()\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></ng-container>\n                                        } @else if (column.titleTemplate) {\n                                            <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                        } @else {\n                                            <span\n                                                [class]=\"headerTableColumnTitleClass()\"\n                                                (click)=\"onColumnSort(column)\"\n                                                [title]=\"column.title\"\n                                                >{{ column.title }}</span\n                                            >\n                                        }\n                                    </div>\n                                </th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (_ of gridService.groupColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                            }\n                            @if (gridService.rowReorderColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'reorder'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.rowReorderColumnWidth\"></th>\n                            }\n                            @if (gridService.masterDetailTemplate()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'detail'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                            }\n                            @if (gridService.selectionColumnVisible()) {\n                                <th\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [structuralColumn]=\"'selection'\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></th>\n                            }\n                            @for (column of gridService.visibleColumns(); track $index) {\n                                <th\n                                    monaGridLockedCell\n                                    [column]=\"column\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border overflow-hidden\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                    @if (column.kind === \"data\" && column.field && column.filterable) {\n                                        <mona-grid-filter-row-cell\n                                            [column]=\"column\"\n                                            (apply)=\"onColumnFilter(column, $event)\" />\n                                    }\n                                </th>\n                            }\n                        </tr>\n                    }\n                </thead>\n            </table>\n        </div>\n    </div>\n\n    @defer (when gridWidthSet()) {\n        @if (gridService.virtualScrollOptions().enabled) {\n            @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n                <mona-grid-virtual-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [columns]=\"gridService.visibleColumns()\" [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup>\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                    }\n                                    @if (gridService.rowReorderColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.rowReorderColumnWidth\" />\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <col [style.width.px]=\"gridService.detailColumnWidth\" />\n                                    }\n                                    @if (gridService.selectionColumnVisible()) {\n                                        <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n                                    }\n                                    @for (col of gridService.visibleColumns(); track $index) {\n                                        <col [style.width.px]=\"col.calculatedWidth\" />\n                                    }\n                                </colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                                        @for (_ of gridService.groupColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                        }\n                                        @if (gridService.rowReorderColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'reorder'\"\n                                                [footerCellWidth]=\"gridService.rowReorderColumnWidth\"></td>\n                                        }\n                                        @if (gridService.masterDetailTemplate()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'detail'\"\n                                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                        }\n                                        @if (gridService.selectionColumnVisible()) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [lockedCellHeader]=\"true\"\n                                                [structuralColumn]=\"'selection'\"\n                                                [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                                        }\n                                        @for (column of gridService.visibleColumns(); track $index) {\n                                            <td\n                                                monaGridFooterTableCell\n                                                monaGridLockedCell\n                                                [column]=\"column\"\n                                                [lockedCellHeader]=\"true\"\n                                                [footerColumn]=\"column\">\n                                                <mona-grid-footer-cell\n                                                    [column]=\"column\"\n                                                    [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                            </td>\n                                        }\n                                    </tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\n            [size]=\"'small'\"\n            [rounded]=\"rounded()\"\n            [pageInput]=\"true\"\n            [pageSizeValues]=\"pageSizeValues()\"\n            [responsive]=\"responsivePager()\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            (pageChange)=\"onPageChange($event)\"></mona-pager>\n    }\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder [text]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n" }]
-            }], ctorParameters: () => [], propDecorators: { columnDefinitions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GRID_COLUMN_DEFINITION), { isSignal: true }] }], footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
+                        }, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>{{ messages().columns }}</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup monaGridColgroup></colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                            @if (layoutColumn.kind === \"column\") {\n                                @let column = layoutColumn.column;\n                                @let columnSortable =\n                                    gridService.sortableOptions().enabled &&\n                                    column.kind === \"data\" &&\n                                    column.sortable &&\n                                    column.field !== \"\";\n                                <th\n                                    scope=\"col\"\n                                    role=\"columnheader\"\n                                    cdkDrag\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'header'\"\n                                    [columnId]=\"column.id\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    (toggleExpand)=\"onColumnSort(column)\"\n                                    [cdkDragData]=\"column\"\n                                    [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                                    [class]=\"headerTableCellClass()\"\n                                    (mouseenter)=\"onColumnMouseEnter(column)\"\n                                    (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                                    (cdkDragStarted)=\"onColumnDragStart($event)\"\n                                    [style.min-width.px]=\"column.minWidth\"\n                                    [style.width.px]=\"column.calculatedWidth\"\n                                    [attr.aria-sort]=\"\n                                        columnSortable ? (column.columnSortDirection | columnAriaSort) : null\n                                    \">\n                                    <div\n                                        [class]=\"headerTableColumnWrapClass()\"\n                                        [style.cursor]=\"columnSortable ? 'pointer' : 'default'\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></ng-container>\n                                        } @else if (column.titleTemplate) {\n                                            <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                        } @else {\n                                            <span\n                                                [class]=\"headerTableColumnTitleClass()\"\n                                                (click)=\"onColumnSort(column)\"\n                                                [title]=\"column.title\"\n                                                >{{ column.title }}</span\n                                            >\n                                        }\n\n                                        <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                            @if (\n                                                gridService.sortableOptions().enabled &&\n                                                column.columnSortDirection !== null\n                                            ) {\n                                                <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                    @if (column.columnSortDirection === \"asc\") {\n                                                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    } @else {\n                                                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    }\n                                                    @if (\n                                                        gridService.sortableOptions().mode === \"multiple\" &&\n                                                        gridService.sortableOptions().showIndices &&\n                                                        column.sortIndex !== null\n                                                    ) {\n                                                        <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                    }\n                                                </div>\n                                            }\n                                            @if (filterMenuEnabled()) {\n                                                @if (column.kind === \"data\" && column.filterable) {\n                                                    <mona-grid-filter-menu\n                                                        [column]=\"column\"\n                                                        [type]=\"column.dataType\"\n                                                        (apply)=\"\n                                                            onColumnFilter(column, $event)\n                                                        \"></mona-grid-filter-menu>\n                                                }\n                                            }\n                                        </div>\n                                    </div>\n                                    @if (\n                                        dropColumn() === column &&\n                                        dragColumn() &&\n                                        gridService.reorderableOptions().enabled &&\n                                        !groupingInProgress()\n                                    ) {\n                                        <span [class]=\"columnDropHintClass()\"> </span>\n                                    }\n                                    @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                        <div\n                                            monaGridColumnResizeHandler\n                                            [column]=\"column\"\n                                            [class]=\"columnResizerClass()\"\n                                            (resizeStart)=\"onColumnResizeStart()\"\n                                            (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                                    }\n                                    <ng-template cdkDragPreview>\n                                        <div [class]=\"columnDragPreviewClass()\">\n                                            <span>{{ column.title }}</span>\n                                        </div>\n                                    </ng-template>\n                                    <ng-template cdkDragPlaceholder>\n                                        @if (groupingInProgress()) {\n                                            <mona-chip\n                                                style=\"z-index: 10; pointer-events: none\"\n                                                [removable]=\"true\"\n                                                [rounded]=\"rounded()\"\n                                                >{{ column.title }}</mona-chip\n                                            >\n                                        }\n                                    </ng-template>\n                                </th>\n                                @if (columnDragging() && dragColumn() === column) {\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        [class]=\"headerTableCellClass()\"\n                                        [style.min-width.px]=\"column.minWidth\"\n                                        [style.width.px]=\"column.calculatedWidth\">\n                                        <div [class]=\"headerTableColumnWrapClass()\">\n                                            @if (column.headerTemplate) {\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                    [ngTemplateOutletContext]=\"{\n                                                        $implicit: column,\n                                                        column\n                                                    }\"></ng-container>\n                                            } @else if (column.titleTemplate) {\n                                                <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                            } @else {\n                                                <span\n                                                    [class]=\"headerTableColumnTitleClass()\"\n                                                    (click)=\"onColumnSort(column)\"\n                                                    [title]=\"column.title\"\n                                                    >{{ column.title }}</span\n                                                >\n                                            }\n                                        </div>\n                                    </th>\n                                }\n                            } @else if (layoutColumn.kind === \"reorder\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$rowReorder'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            } @else if (layoutColumn.kind === \"selection\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$selection'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\">\n                                    @if (\n                                        gridService.selectableOptions().mode === \"multiple\" &&\n                                        gridService.selectableOptions().showSelectAll !== false\n                                    ) {\n                                        <mona-grid-select-all-checkbox />\n                                    }\n                                </th>\n                            } @else {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                                @if (layoutColumn.kind === \"column\") {\n                                    @let column = layoutColumn.column;\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border overflow-hidden\"\n                                        [style.width.px]=\"layoutColumn.width\"\n                                        [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                        @if (column.kind === \"data\" && column.field && column.filterable) {\n                                            <mona-grid-filter-row-cell\n                                                [column]=\"column\"\n                                                (apply)=\"onColumnFilter(column, $event)\" />\n                                        }\n                                    </th>\n                                } @else {\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border\"\n                                        [style.width.px]=\"layoutColumn.width\"></th>\n                                }\n                            }\n                        </tr>\n                    }\n                </thead>\n            </table>\n        </div>\n    </div>\n\n    @defer (when gridWidthSet()) {\n        @if (gridService.virtualScrollOptions().enabled) {\n            @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n                <mona-grid-virtual-list [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup monaGridColgroup></colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr monaGridFooterRow></tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\n            [size]=\"'small'\"\n            [rounded]=\"rounded()\"\n            [pageInput]=\"true\"\n            [pageSizeValues]=\"pageSizeValues()\"\n            [responsive]=\"responsivePager()\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            (pageChange)=\"onPageChange($event)\"></mona-pager>\n    }\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder [text]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n" }]
+            }], ctorParameters: () => [], propDecorators: { columnDefinitions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GRID_COLUMN_DEFINITION), { isSignal: true }] }], footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/grid
@@ -5917,5 +5804,5 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
  * Generated bundle index. Do not edit.
  */
 
-export { GridRemoveEvent as $, gridFooterTableCellThemeVariants as A, GRID_DEFAULT_MESSAGES as B, CellEditEvent as C, GridAddCommandDirective as D, GridAddEvent as E, GridCancelCommandDirective as F, GridNavigationService as G, GridCancelEvent as H, GridCellTemplateDirective as I, GridColumnComponent as J, GridColumnTitleTemplateDirective as K, GridCommandColumnComponent as L, GridComponent as M, GridContextMenuDirective as N, GridDetailTemplateDirective as O, GridEditCommandDirective as P, GridEditEvent as Q, GridEditTemplateDirective as R, GridEditableDirective as S, GridExportDirective as T, GridFilterableDirective as U, GridFooterTemplateDirective as V, GridGroupFooterTemplateDirective as W, GridGroupableDirective as X, GridHeaderTemplateDirective as Y, GridNoDataTemplateDirective as Z, GridRemoveCommandDirective as _, GridRowFlattenerService as a, GridReorderableDirective as a0, GridResizableDirective as a1, GridRowReorderableDirective as a2, GridSaveCommandDirective as a3, GridSaveEvent as a4, GridSelectableDirective as a5, GridServerBindingDirective as a6, GridSortableDirective as a7, GridStatePersistenceDirective as a8, GridToolbarTemplateDirective as a9, GridVirtualScrollDirective as aa, RowEditEvent as ab, RowReorderEvent as ac, gridFooterTableRowThemeVariants as b, GridService as c, gridGroupRowThemeVariants as d, gridRowDragPlaceholderThemeVariants as e, gridRowDragPreviewThemeVariants as f, gridListBaseThemeVariants as g, gridListTableThemeVariants as h, GridLogicalCellDirective as i, GridLockedCellDirective as j, gridFooterThemeVariants as k, gridFooterTableThemeVariants as l, GRID_DEFAULT_VIRTUAL_ROW_HEIGHT as m, gridListTableCellThemeVariants as n, gridDetailContentCellThemeVariants as o, gridDetailIndentCellThemeVariants as p, gridDetailRowThemeVariants as q, gridListTableRowThemeVariants as r, gridCellEditorBaseThemeVariants as s, gridCellEditorInputThemeVariants as t, gridCellBaseThemeVariants as u, gridCellContainerThemeVariants as v, gridCellDirtyIndicatorThemeVariants as w, gridCellTextThemeVariants as x, gridRowReorderHandleThemeVariants as y, gridSelectionCellThemeVariants as z };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CIfTr1Qm.mjs.map
+export { GridSaveCommandDirective as $, GridCancelCommandDirective as A, GridCancelEvent as B, CellEditEvent as C, GridCellTemplateDirective as D, GridColumnComponent as E, GridColumnTitleTemplateDirective as F, GridNavigationService as G, GridCommandColumnComponent as H, GridComponent as I, GridContextMenuDirective as J, GridDetailTemplateDirective as K, GridEditCommandDirective as L, GridEditEvent as M, GridEditTemplateDirective as N, GridEditableDirective as O, GridExportDirective as P, GridFilterableDirective as Q, GridFooterTemplateDirective as R, GridGroupFooterTemplateDirective as S, GridGroupableDirective as T, GridHeaderTemplateDirective as U, GridNoDataTemplateDirective as V, GridRemoveCommandDirective as W, GridRemoveEvent as X, GridReorderableDirective as Y, GridResizableDirective as Z, GridRowReorderableDirective as _, GridService as a, GridSaveEvent as a0, GridSelectableDirective as a1, GridServerBindingDirective as a2, GridSortableDirective as a3, GridStatePersistenceDirective as a4, GridToolbarTemplateDirective as a5, GridVirtualScrollDirective as a6, RowEditEvent as a7, RowReorderEvent as a8, gridRowDragPreviewThemeVariants as b, gridListTableThemeVariants as c, GridColgroupComponent as d, gridFooterThemeVariants as e, gridFooterTableThemeVariants as f, gridListBaseThemeVariants as g, GRID_DEFAULT_VIRTUAL_ROW_HEIGHT as h, gridListTableCellThemeVariants as i, gridCellEditorBaseThemeVariants as j, gridCellEditorInputThemeVariants as k, gridListTableRowThemeVariants as l, GridLockedCellDirective as m, GridLogicalCellDirective as n, gridGroupRowThemeVariants as o, gridCellBaseThemeVariants as p, gridCellContainerThemeVariants as q, gridCellDirtyIndicatorThemeVariants as r, gridCellTextThemeVariants as s, gridRowReorderHandleThemeVariants as t, gridSelectionCellThemeVariants as u, gridFooterTableCellThemeVariants as v, gridFooterTableRowThemeVariants as w, GRID_DEFAULT_MESSAGES as x, GridAddCommandDirective as y, GridAddEvent as z };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-bduDEm-x.mjs.map